|
235 | 235 | --variable-property-after-property: 3px; |
236 | 236 | --variable-property-after-assignment: 4px; |
237 | 237 | --variable-property-before-assignment: 5px; |
| 238 | + --variable-into-first-variable: 9px; |
| 239 | + --variable-into-second-variable: 10px; |
| 240 | + --variable-into-third-variable: 11px; |
238 | 241 | } |
239 | 242 | </style> |
240 | 243 | <child-variable-with-var id="child"></child-variable-with-var> |
|
251 | 254 | --variable-between-properties: 6px; |
252 | 255 | background-color: var(--variable-property-before-property); padding-top: var(--variable-property-after-property); |
253 | 256 | --variable-assignment-before-property: 7px; padding-bottom: var(--variable-property-after-assignment); |
254 | | - padding-left: var(--variable-property-before-assignment);--variable-assignment-after-property: 8px |
| 257 | + padding-left: var(--variable-property-before-assignment);--variable-assignment-after-property: 8px; |
| 258 | + top: 12px;--variable-from-other-variable: var(--variable-into-first-variable);--variable-from-another-variable: var(--variable-into-second-variable); --variable-from-last-variable: var(--variable-into-third-variable); |
255 | 259 | } |
256 | 260 | </style> |
257 | 261 | <child-of-child-with-var id="child"></child-of-child-with-var> |
|
266 | 270 | padding-right: var(--variable-between-properties); |
267 | 271 | margin-left: var(--variable-assignment-before-property); |
268 | 272 | margin-right: var(--variable-assignment-after-property); |
| 273 | + bottom: var(--variable-from-other-variable); |
| 274 | + left: var(--variable-from-another-variable); |
| 275 | + right: var(--variable-from-last-variable); |
269 | 276 | } |
270 | 277 | </style> |
271 | 278 | Text |
|
468 | 475 | assertComputed(el, '7px', 'margin-left'); |
469 | 476 | assertComputed(el, '8px', 'margin-right'); |
470 | 477 | assertComputed(el, 'rgb(255, 255, 0)', 'background-color'); |
| 478 | + assertComputed(el, '9px', 'bottom'); |
| 479 | + assertComputed(el, '10px', 'left'); |
| 480 | + assertComputed(el, '11px', 'right'); |
| 481 | + assertComputed(el, '12px', 'top'); |
471 | 482 |
|
472 | 483 | // Because FireFox and Chrome parse font-family differently... |
473 | 484 | var computed = getComputedStyle(el); |
474 | 485 | assert.equal(computed['font-family'].replace(/['"]+/g, ''), 'Varela font'); |
475 | 486 | }); |
| 487 | + |
476 | 488 | test('BEM-like CSS selectors under media queries', function() { |
477 | 489 | assertComputed(document.querySelector('.foo--bar'), '3px'); |
478 | 490 | }); |
|
0 commit comments