| <!DOCTYPE html><!-- webkit-test-runner [ 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; |
| font-size: 10px; |
| --a: 10em; |
| width: var(--a); |
| } |
| |
| #parent2 { |
| width: 500px; |
| background: blue; |
| --a: 10em; |
| font-size: calc( var(--a) + -150px); |
| } |
| #child2 { |
| background: green; |
| width: var(--a); |
| } |
| |
| #parent3 { |
| width: 500px; |
| background: blue; |
| --b: 10em; |
| font-size: calc( var(--b) + -150px); |
| } |
| #child3 { |
| background: green; |
| width: var(--b); |
| } |
| |
| #parent4 { |
| width: 500px; |
| background: blue; |
| --b: 10em; |
| font-size: calc( var(--b) + -150px); |
| } |
| #child4 { |
| background: green; |
| --a: var(--b); |
| font-size: var(--a); |
| width: var(--a); |
| } |
| |
| #parent5 { |
| width: 500px; |
| background: blue; |
| --b: 5em; |
| font-size: calc( var(--b) + -70px); |
| } |
| #child5 { |
| background: green; |
| --c: var(--b); |
| font-size: var(--c); |
| width: var(--c); |
| } |
| </style> |
| <div> |
| <div id="parent1"><div id="child1"><p>test</p></div></div> |
| <div id="parent2"><div id="child2"><p>test</p></div></div> |
| <div id="parent3"><div id="child3"><p>test</p></div></div> |
| <div id="parent4"><div id="child4"><p>test</p></div></div> |
| <div id="parent5"><div id="child5"><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: '--a', |
| syntax: '<length>', |
| inherits: true, |
| initialValue: '200px' |
| }) |
| }, "Registration is successful"); |
| test(function() { |
| test_prop('child1', 'width', '100px'); |
| test_prop('child1', '--a', '100px'); |
| test_prop('child1', '--b', ''); |
| test_prop('parent1', '--a', '200px'); |
| test_prop('parent1', '--b', ''); |
| }, "JS Attributes are valid for element 1"); |
| test(function() { |
| test_prop('child2', 'width', '160px'); |
| test_prop('child2', '--a', '160px'); |
| test_prop('child2', '--b', ''); |
| test_prop('child2', 'font-size', '16px'); |
| test_prop('parent2', '--a', '160px'); |
| test_prop('parent2', '--b', ''); |
| test_prop('parent2', 'font-size', '16px'); |
| }, "JS Attributes are valid for element 2"); |
| test(function() { |
| test_prop('child3', 'width', '100px'); |
| test_prop('child3', '--a', '200px'); |
| test_prop('child3', '--b', '10em'); |
| test_prop('child3', 'font-size', '10px'); |
| test_prop('parent3', '--a', '200px'); |
| test_prop('parent3', '--b', '10em'); |
| test_prop('parent3', 'font-size', '10px'); |
| }, "JS Attributes are valid for element 3"); |
| test(function() { |
| test_prop('child4', 'width', '100px'); |
| test_prop('child4', '--a', '100px'); |
| test_prop('child4', '--b', '10em'); |
| test_prop('child4', 'font-size', '10px'); |
| test_prop('parent4', '--a', '200px'); |
| test_prop('parent4', '--b', '10em'); |
| test_prop('parent4', 'font-size', '10px'); |
| }, "JS Attributes are valid for element 4"); |
| test(function() { |
| test_prop('child5', 'width', '250px'); |
| test_prop('child5', '--c', '5em'); |
| test_prop('child5', '--b', '5em'); |
| test_prop('child5', 'font-size', '50px'); |
| test_prop('parent5', '--a', '200px'); |
| test_prop('parent5', '--b', '5em'); |
| test_prop('parent5', 'font-size', '10px'); |
| }, "JS Attributes are valid for element 5"); |
| </script> |
