| <!DOCTYPE html><!-- webkit-test-runner [ experimental:CSSCustomPropertiesAndValuesEnabled=true ] --> |
| <!-- https://chromium.googlesource.com/chromium/src/+/01ce431409e3a019858677626a983c55168da6dc/third_party/WebKit/LayoutTests/custom-properties/register-property.html --> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| |
| <style> |
| #parent1 { |
| width: 500px; |
| background: blue; |
| } |
| #child1 { |
| background: green; |
| --my-custom-prop: 100px; |
| width: var(--my-custom-prop); |
| } |
| |
| #parent2 { |
| width: 500px; |
| background: blue; |
| } |
| #child2 { |
| background: green; |
| width: var(--my-custom-prop2); |
| } |
| |
| #parent3 { |
| width: 500px; |
| background: blue; |
| } |
| #child3 { |
| background: green; |
| width: var(--my-custom-prop3); |
| } |
| |
| #parent4 { |
| width: 500px; |
| background: blue; |
| } |
| #child4 { |
| background: green; |
| width: var(--my-custom-prop3, 300px); |
| } |
| |
| #parent5 { |
| width: 500px; |
| background: blue; |
| } |
| #child5 { |
| background: green; |
| width: var(--my-custom-prop2, 300px); |
| } |
| </style> |
| <div> |
| <p> Specified </p> |
| <div id="parent1"><div id="child1"><p>100px green</p></div> </div> |
| <p> Not specified, use initial value </p> |
| <div id="parent2"><div id="child2"><p>200px green</p></div> </div> |
| <p> Not specified, but not registered so use initial value for width </p> |
| <div id="parent3"><div id="child3"><p>500px green</p></div> </div> |
| <p> Has a fallback for unregistered property </p> |
| <div id="parent4"><div id="child4"><p>300px green</p></div> </div> |
| <p> Has a fallback for a registered property </p> |
| <div id="parent5"><div id="child5"><p>200px green</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: false, |
| initialValue: '200px' |
| }) |
| |
| CSS.registerProperty({ |
| name: '--my-custom-prop2', |
| syntax: '<length>', |
| inherits: false, |
| initialValue: '200px' |
| }) |
| }, "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', '500px'); |
| test_prop('child3', '--my-custom-prop3', ''); |
| test_prop('child3', '--my-custom-prop2', '200px'); |
| }, "JS Attributes are valid for element 3"); |
| test(function() { |
| test_prop('child4', 'width', '300px'); |
| test_prop('child5', 'width', '200px'); |
| test_prop('child4', '--my-custom-prop2', '200px'); |
| test_prop('child5', '--my-custom-prop2', '200px'); |
| }, "JS Attributes are valid for element 4 and 5"); |
| </script> |
