| <!DOCTYPE html><!-- webkit-test-runner [ experimental:CSSCustomPropertiesAndValuesEnabled=true ] --> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| |
| <style> |
| #parent1 { |
| width: 500px; |
| background: blue; |
| --my-custom-prop: 100px; |
| } |
| #child1 { |
| background: green; |
| width: var(--my-custom-prop); |
| } |
| |
| #parent2 { |
| width: 500px; |
| background: blue; |
| --my-custom-prop2: 100px; |
| } |
| #child2 { |
| background: green; |
| width: var(--my-custom-prop2); |
| } |
| |
| #parent3 { |
| width: 500px; |
| background: blue; |
| --my-custom-prop3: 100px; |
| } |
| #child3 { |
| background: green; |
| width: var(--my-custom-prop3); |
| } |
| |
| #parent4 { |
| width: 500px; |
| background: blue; |
| --my-custom-prop: 100px; |
| } |
| #child4 { |
| background: green; |
| --my-custom-prop: initial; |
| width: var(--my-custom-prop, 300px); |
| } |
| |
| #parent5 { |
| width: 500px; |
| background: blue; |
| --my-custom-prop: 100px; |
| } |
| #child5 { |
| background: green; |
| --my-custom-prop: unset; |
| width: var(--my-custom-prop, 300px); |
| } |
| |
| #parent6 { |
| width: 500px; |
| background: blue; |
| --my-custom-prop2: 100px; |
| } |
| #child6 { |
| background: green; |
| --my-custom-prop2: unset; |
| width: var(--my-custom-prop2, 300px); |
| } |
| |
| #parent7 { |
| width: 500px; |
| background: blue; |
| --my-custom-prop: 100px; |
| } |
| #child7 { |
| background: green; |
| --my-custom-prop: var(--my-custom-prop2); |
| --my-custom-prop2: var(--my-custom-prop); |
| width: var(--my-custom-prop2, 300px); |
| } |
| |
| #parent8 { |
| width: 500px; |
| background: blue; |
| } |
| #child8 { |
| background: green; |
| --my-custom-prop: 400px; |
| --my-custom-prop2: var(--my-custom-prop); |
| --my-custom-prop: var(--my-custom-prop2); |
| width: var(--my-custom-prop, 300px); |
| } |
| |
| #parent9 { |
| width: 500px; |
| background: blue; |
| --my-custom-prop: 100px; |
| } |
| #child9 { |
| background: green; |
| --my-custom-prop: var(--my-custom-prop2, 400px); |
| --my-custom-prop2: var(--my-custom-prop); |
| width: var(--my-custom-prop2, 300px); |
| } |
| |
| #parent10 { |
| width: 500px; |
| background: blue; |
| --my-custom-prop: 100px; |
| } |
| #child10 { |
| background: green; |
| --my-custom-prop2: calc(var(--my-custom-prop) + 10px); |
| width: var(--my-custom-prop2, 300px); |
| } |
| |
| #parent11 { |
| width: 500px; |
| background: blue; |
| --my-custom-prop-unreg2: 100px; |
| } |
| #child11 { |
| background: green; |
| --my-custom-prop-unreg: var(--my-custom-prop2-unreg); |
| --my-custom-prop2-unreg: var(--my-custom-prop-unreg); |
| width: var(--my-custom-prop2-unreg, 300px); |
| } |
| |
| #parent12 { |
| width: 500px; |
| background: blue; |
| --my-custom-prop: 100px; |
| } |
| #child12 { |
| background: green; |
| --my-custom-prop: 190px; |
| width: calc(var(--my-custom-prop, 300px) + 5px); |
| } |
| #childchild12 { |
| background: purple; |
| --my-custom-prop: revert; |
| width: var(--my-custom-prop, 300px); |
| } |
| |
| #parent13 { |
| width: 500px; |
| background: blue; |
| --my-custom-prop2: 100px; |
| } |
| #child13 { |
| background: green; |
| --my-custom-prop2: 190px; |
| width: var(--my-custom-prop2, 300px); |
| } |
| #childchild13 { |
| background: purple; |
| --my-custom-prop2: revert; |
| width: var(--my-custom-prop2, 300px); |
| } |
| |
| #parent14 { |
| width: 500px; |
| background: blue; |
| --my-custom-prop-unreg: 100px; |
| } |
| #child14 { |
| background: green; |
| --my-custom-prop-unreg: 190px; |
| width: calc(var(--my-custom-prop-unreg, 300px) + 5px); |
| } |
| #childchild14 { |
| background: purple; |
| --my-custom-prop-unreg: revert; |
| width: var(--my-custom-prop-unreg, 300px); |
| } |
| |
| #parent14-1 { |
| width: 500px; |
| background: blue; |
| --my-custom-prop-unreg: 100px; |
| } |
| #child14-1 { |
| background: green; |
| --my-custom-prop-unreg: 190px; |
| width: calc(var(--my-custom-prop-unreg, 300px) + 5px); |
| } |
| #childchild14-1 { |
| background: purple; |
| --my-custom-prop-unreg: inherit; |
| width: var(--my-custom-prop-unreg, 300px); |
| } |
| |
| #parent15 { |
| width: 500px; |
| background: blue; |
| font-size: 16px; |
| --my-custom-prop: calc(1em + 10px); |
| word-spacing: var(--my-custom-prop); |
| } |
| #child15 { |
| font-size: 32px; |
| } |
| |
| #parent16 { |
| width: 500px; |
| background: blue; |
| font-size: 16px; |
| --my-custom-prop-unreg: calc(1em + 10px); |
| word-spacing: var(--my-custom-prop-unreg); |
| } |
| #child16 { |
| font-size: 32px; |
| } |
| |
| #parent17 { |
| width: 500px; |
| background: blue; |
| --my-custom-prop2: 100px; |
| } |
| #child17 { |
| background: green; |
| width: var(--my-custom-prop2); |
| } |
| |
| #parent18 { |
| width: 500px; |
| background: blue; |
| --my-custom-prop-no-initial-value: 100px; |
| } |
| #child18 { |
| background: green; |
| width: var(--my-custom-prop-no-initial-value); |
| } |
| |
| #parent19 { |
| width: 500px; |
| background: blue; |
| --my-custom-prop-unreg: 100px; |
| } |
| #child19 { |
| background: green; |
| --my-custom-prop-unreg: inherit; |
| width: var(--my-custom-prop-unreg); |
| } |
| </style> |
| <div> |
| <p> Specified in parent, inherits=true</p> |
| <div id="parent1"><div id="child1"><p>test</p></div> </div> |
| <p> Specified in parent, inherits=false </p> |
| <div id="parent2"><div id="child2"><p>test</p></div> </div> |
| <p> Specified in parent, not registered </p> |
| <div id="parent3"><div id="child3"><p>test</p></div> </div> |
| <p> Initial </p> |
| <div id="parent4"><div id="child4"><p>test</p></div> </div> |
| <p> Unset, inherits=true </p> |
| <div id="parent5"><div id="child5"><p>test</p></div> </div> |
| <p> Unset, inherits=false </p> |
| <div id="parent6"><div id="child6"><p>test</p></div> </div> |
| <p> A cycle between an inherits=true and inherits=false property </p> |
| <div id="parent7"><div id="child7"><p>test</p></div> </div> |
| <p> A cycle between an inherits=true and inherits=false property </p> |
| <div id="parent8"><div id="child8"><p>test</p></div> </div> |
| <p> A cycle between an inherits=true and inherits=false property with fallback </p> |
| <div id="parent9"><div id="child9"><p>test</p></div> </div> |
| <p> Inheritance should not create a cycle </p> |
| <div id="parent10"><div id="child10"><p>test</p></div></div> |
| <p> A cycle between two unregistered properties </p> |
| <div id="parent11"><div id="child11"><p>test</p></div> </div> |
| |
| <p> Revert, inherits=true </p> |
| <div id="parent12"><div id="child12"><div id="childchild12"><p>test</p></div></div></div> |
| <p> Revert, inherits=false </p> |
| <div id="parent13"><div id="child13"><div id="childchild13"><p>test</p></div></div> </div> |
| <p> Revert, unregistered </p> |
| <div id="parent14"><div id="child14"><div id="childchild14"><p>test</p></div></div> </div> |
| <p> Inherit, unregistered </p> |
| <div id="parent14-1"><div id="child14-1"><div id="childchild14-1"><p>test</p></div></div> </div> |
| |
| <p> Test that inherited properties do variable substitution before being inherited - registered</p> |
| <div id="parent15"><div id="child15"><p>test</p></div> </div> |
| <p> Test that inherited properties do variable substitution before being inherited - unregistered</p> |
| <div id="parent16"><div id="child16"><p>test</p></div> </div> |
| |
| <p> No initial value in registered property should act like unregistered</p> |
| <div id="parent17"><div id="child17"><p>test</p></div> </div> |
| <p> (unregistered) </p> |
| <div id="parent18"><div id="child18"><p>test</p></div> </div> |
| |
| <p>Inherit should be substituted for unregistered property</p> |
| <div id="parent19"><div id="child19"><p>test</p></div> </div> |
| </div> |
| <script> |
| |
| function test_prop(id, prop, expected) { |
| assert_equals(window.getComputedStyle(document.getElementById(id)).getPropertyValue(prop).trim(), expected); |
| } |
| |
| test(function() { |
| CSS.registerProperty({ |
| name: '--my-custom-prop', |
| syntax: '<length>', |
| inherits: true, |
| initialValue: '200px' |
| }) |
| |
| CSS.registerProperty({ |
| name: '--my-custom-prop2', |
| syntax: '<length>', |
| inherits: false, |
| initialValue: '200px' |
| }) |
| |
| CSS.registerProperty({ |
| name: '--my-custom-prop-no-initial-value', |
| syntax: '*', |
| inherits: false |
| }) |
| }, "Registration is successful"); |
| test(function() { |
| test_prop('child1', 'width', '100px'); |
| test_prop('child1', '--my-custom-prop', '100px'); |
| test_prop('child1', '--my-custom-prop2', '200px'); |
| }, "JS Attributes are valid for element 1"); |
| test(function() { |
| test_prop('child2', 'width', '200px'); |
| test_prop('child2', '--my-custom-prop', '200px'); |
| test_prop('child2', '--my-custom-prop2', '200px'); |
| }, "JS Attributes are valid for element 2"); |
| test(function() { |
| test_prop('child3', 'width', '100px'); |
| test_prop('child3', '--my-custom-prop3', '100px'); |
| test_prop('child3', '--my-custom-prop2', '200px'); |
| }, "JS Attributes are valid for element 3"); |
| test(function() { |
| test_prop('child4', 'width', '200px'); |
| test_prop('child4', '--my-custom-prop', '200px'); |
| test_prop('child4', '--my-custom-prop2', '200px'); |
| }, "JS Attributes are valid for element 4"); |
| test(function() { |
| test_prop('child5', 'width', '100px'); |
| test_prop('child5', '--my-custom-prop', '100px'); |
| test_prop('child5', '--my-custom-prop2', '200px'); |
| }, "JS Attributes are valid for element 5"); |
| test(function() { |
| test_prop('child6', 'width', '200px'); |
| test_prop('child6', '--my-custom-prop', '200px'); |
| test_prop('child6', '--my-custom-prop2', '200px'); |
| }, "JS Attributes are valid for element 6"); |
| test(function() { |
| test_prop('child7', 'width', '300px'); |
| test_prop('child7', '--my-custom-prop', ''); |
| test_prop('child7', '--my-custom-prop2', ''); |
| }, "JS Attributes are valid for element 7"); |
| test(function() { |
| test_prop('child8', 'width', '300px'); |
| test_prop('child8', '--my-custom-prop', ''); |
| test_prop('child8', '--my-custom-prop2', ''); |
| }, "JS Attributes are valid for element 8"); |
| test(function() { |
| test_prop('child9', 'width', '300px'); |
| test_prop('child9', '--my-custom-prop', ''); |
| test_prop('child9', '--my-custom-prop2', ''); |
| }, "JS Attributes are valid for element 9"); |
| test(function() { |
| test_prop('child10', 'width', '110px'); |
| test_prop('child10', '--my-custom-prop', '100px'); |
| test_prop('child10', '--my-custom-prop2', '110px'); |
| }, "JS Attributes are valid for element 10"); |
| test(function() { |
| test_prop('child11', 'width', '300px'); |
| test_prop('child11', '--my-custom-prop-unreg', ''); |
| test_prop('child11', '--my-custom-prop2-unreg', ''); |
| }, "JS Attributes are valid for element 11"); |
| |
| test(function() { |
| test_prop('childchild12', 'width', '190px'); |
| test_prop('childchild12', '--my-custom-prop', '190px'); |
| test_prop('child12', 'width', '195px'); |
| test_prop('child12', '--my-custom-prop', '190px'); |
| test_prop('parent12', '--my-custom-prop', '100px'); |
| }, "JS Attributes are valid for element 12"); |
| test(function() { |
| test_prop('childchild13', 'width', '200px'); |
| test_prop('childchild13', '--my-custom-prop2', '200px'); |
| test_prop('child13', 'width', '190px'); |
| test_prop('child13', '--my-custom-prop2', '190px'); |
| test_prop('parent13', '--my-custom-prop2', '100px'); |
| }, "JS Attributes are valid for element 13"); |
| test(function() { |
| // Chrome and firefox do not pass this because they do not |
| // support revert, as of September 2018 |
| test_prop('childchild14', 'width', '190px'); |
| test_prop('childchild14', '--my-custom-prop-unreg', '190px'); |
| test_prop('child14', 'width', '195px'); |
| test_prop('child14', '--my-custom-prop-unreg', '190px'); |
| test_prop('parent14', '--my-custom-prop-unreg', '100px'); |
| }, "JS Attributes are valid for element 14"); |
| test(function() { |
| test_prop('childchild14-1', 'width', '190px'); |
| test_prop('childchild14-1', '--my-custom-prop-unreg', '190px'); |
| test_prop('child14-1', 'width', '195px'); |
| test_prop('child14-1', '--my-custom-prop-unreg', '190px'); |
| test_prop('parent14-1', '--my-custom-prop-unreg', '100px'); |
| }, "JS Attributes are valid for element 14-1"); |
| |
| test(function() { |
| test_prop('parent15', 'word-spacing', '26px'); |
| test_prop('child15', 'word-spacing', '26px'); |
| test_prop('parent15', '--my-custom-prop', '26px'); |
| test_prop('child15', '--my-custom-prop', '26px'); |
| }, "JS Attributes are valid for element 15"); |
| test(function() { |
| test_prop('parent16', 'word-spacing', '26px'); |
| test_prop('child16', 'word-spacing', '26px'); |
| test_prop('parent16', '--my-custom-prop-unreg', 'calc(1em + 10px)'); |
| test_prop('child16', '--my-custom-prop-unreg', 'calc(1em + 10px)'); |
| }, "JS Attributes are valid for element 16"); |
| |
| test(function() { |
| test_prop('child17', 'width', '200px'); |
| test_prop('child17', '--my-custom-prop2', '200px'); |
| }, "JS Attributes are valid for element 17"); |
| test(function() { |
| test_prop('child18', 'width', '500px'); |
| test_prop('child18', '--my-custom-prop-no-initial-value', ''); |
| }, "JS Attributes are valid for element 18"); |
| |
| test(function() { |
| test_prop('child19', 'width', '100px'); |
| test_prop('child19', '--my-custom-prop-unreg', '100px'); |
| }, "JS Attributes are valid for element 19"); |
| </script> |
