OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <script src="../../../resources/testharness.js"></script> |
| 3 <script src="../../../resources/testharnessreport.js"></script> |
| 4 <style> |
| 5 #testElem { |
| 6 --height: 30px; |
| 7 --size: 12px; |
| 8 --size-and-height: var(--size)/var(--height); |
| 9 font: italic bold var(--size-and-height) serif, sans-serif; |
| 10 } |
| 11 |
| 12 #testElem2 { |
| 13 --width: 5px; |
| 14 } |
| 15 </style> |
| 16 |
| 17 <div id='testElem'></div> |
| 18 <div id='testElem2' style='margin: var(--width); margin-top: 10px;'></div> |
| 19 <div id='testElem3' style='--b1: 1px solid grey; --b2: 2px dashed green; border:
var(--b1); border-right: var(--b2);'></div> |
| 20 <script> |
| 21 |
| 22 test(function() { |
| 23 var style = getComputedStyle(testElem); |
| 24 assert_equals(style.fontSize, '12px'); |
| 25 assert_equals(style.lineHeight, '30px'); |
| 26 assert_equals(style.fontStyle, 'italic'); |
| 27 assert_equals(style.fontWeight, 'bold'); |
| 28 assert_equals(style.fontFamily, 'serif, sans-serif'); |
| 29 }, "Test shorthand substitution in font."); |
| 30 |
| 31 test(function() { |
| 32 var style = testElem2.style; |
| 33 assert_equals(style.cssText, 'margin-right: ; margin-bottom: ; margin-left: ;
margin-top: 10px;'); |
| 34 assert_equals(style.marginLeft, ''); |
| 35 assert_equals(style.margin, ''); |
| 36 assert_equals(style.marginTop, '10px'); |
| 37 }, "Test serialization with specific longhand."); |
| 38 |
| 39 test(function() { |
| 40 var style = testElem3.style; |
| 41 assert_equals(style.cssText, '--b1: 1px solid grey; --b2: 2px dashed green; bo
rder-top: var(--b1); border-bottom: var(--b1); border-left: var(--b1); border-im
age: var(--b1); border-right: var(--b2);') |
| 42 assert_equals(style.border, ''); |
| 43 assert_equals(style.borderLeft, 'var(--b1)'); |
| 44 assert_equals(style.borderTop, 'var(--b1)'); |
| 45 assert_equals(style.borderBottom, 'var(--b1)'); |
| 46 assert_equals(style.borderRight, 'var(--b2)'); |
| 47 }, "Test serialization for shorthands within shorthands."); |
| 48 |
| 49 test(function() { |
| 50 var style = getComputedStyle(testElem3); |
| 51 assert_equals(style.borderTop, '1px solid rgb(128, 128, 128)'); |
| 52 assert_equals(style.borderRight, '2px dashed rgb(0, 128, 0)'); |
| 53 }, "Test substitution for border"); |
| 54 </script> |
OLD | NEW |