| <!DOCTYPE html> |
| <script src="../../../resources/testharness.js"></script> |
| <script src="../../../resources/testharnessreport.js"></script> |
| <style> |
| #testElem { |
| --height: 30px; |
| --size: 12px; |
| --size-and-height: var(--size)/var(--height); |
| font: italic bold var(--size-and-height) serif, sans-serif; |
| } |
| |
| #testElem2 { |
| --width: 5px; |
| } |
| </style> |
| |
| <div id='testElem'></div> |
| <div id='testElem2' style='margin: var(--width); margin-top: 10px;'></div> |
| <div id='testElem3' style='--b1: 1px solid grey; --b2: 2px dashed green; border: var(--b1); border-right: var(--b2);'></div> |
| <script> |
| |
| test(function() { |
| var style = getComputedStyle(testElem); |
| assert_equals(style.fontSize, '12px'); |
| assert_equals(style.lineHeight, '30px'); |
| assert_equals(style.fontStyle, 'italic'); |
| assert_equals(style.fontWeight, '700'); |
| assert_equals(style.fontFamily, 'serif, sans-serif'); |
| }, "Test shorthand substitution in font."); |
| |
| test(function() { |
| var style = testElem2.style; |
| assert_equals(style.cssText, 'margin-right: ; margin-bottom: ; margin-left: ; margin-top: 10px;'); |
| assert_equals(style.marginLeft, ''); |
| assert_equals(style.margin, ''); |
| assert_equals(style.marginTop, '10px'); |
| }, "Test serialization with specific longhand."); |
| |
| test(function() { |
| var style = testElem3.style; |
| assert_equals(style.cssText, '--b1: 1px solid grey; --b2: 2px dashed green; border-top-color: ; border-top-style: ; border-top-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-right: var(--b2);') |
| assert_equals(style.border, ''); |
| assert_equals(style.borderLeft, ''); |
| assert_equals(style.borderTop, ''); |
| assert_equals(style.borderBottom, ''); |
| assert_equals(style.borderRight, 'var(--b2)'); |
| }, "Test serialization for shorthands within shorthands."); |
| |
| test(function() { |
| var style = getComputedStyle(testElem3); |
| assert_equals(style.borderTop, '1px solid rgb(128, 128, 128)'); |
| assert_equals(style.borderRight, '2px dashed rgb(0, 128, 0)'); |
| }, "Test substitution for border"); |
| </script> |
