| <!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> |
| #test1 { |
| font-size: var(--foo, 30px); |
| --foo: var(--bar, 20px); |
| --bar: var(--baz, var(--foo)); |
| } |
| </style> |
| <div> |
| <h2 id=test1>This is text</h2> |
| </div> |
| <script> |
| var computedStyle = getComputedStyle(test1); |
| var inlineStyle = test1.style; |
| |
| test(function() { |
| assert_equals(computedStyle.getPropertyValue('--baz'), ''); |
| assert_equals(computedStyle.getPropertyValue('--foo'), ''); |
| assert_equals(computedStyle.getPropertyValue('--bar'), ''); |
| assert_equals(computedStyle.getPropertyValue('font-size'), '30px'); |
| }, "Fallback is handled correctly, and we don't crash"); |
| |
| test(function() { |
| inlineStyle.setProperty('--baz', ' 40px'); |
| assert_equals(computedStyle.getPropertyValue('--baz'), ' 40px'); |
| assert_equals(computedStyle.getPropertyValue('--foo'), ''); |
| assert_equals(computedStyle.getPropertyValue('--bar'), ''); |
| assert_equals(computedStyle.getPropertyValue('--baz'), ' 40px'); |
| assert_equals(computedStyle.getPropertyValue('font-size'), '30px'); |
| inlineStyle.removeProperty('--baz'); |
| assert_equals(computedStyle.getPropertyValue('--baz'), ''); |
| assert_equals(computedStyle.getPropertyValue('--foo'), ''); |
| assert_equals(computedStyle.getPropertyValue('--bar'), ''); |
| assert_equals(computedStyle.getPropertyValue('font-size'), '30px'); |
| assert_equals(computedStyle.getPropertyValue('--baz'), ''); |
| }, "Setting the inline style is handled correctly"); |
| |
| test(function() { |
| CSS.registerProperty({name: '--foo', syntax: '<length>', initialValue: '200px', inherits: true}); |
| CSS.registerProperty({name: '--bar', syntax: '<length>', initialValue: '200px', inherits: true}); |
| CSS.registerProperty({name: '--baz', syntax: '<length>', initialValue: '200px', inherits: true}); |
| }, "CSS.registerProperty"); |
| |
| test(function() { |
| inlineStyle.setProperty('--baz', ' 40px'); |
| assert_equals(computedStyle.getPropertyValue('--baz'), '40px'); |
| assert_equals(computedStyle.getPropertyValue('--foo'), ''); |
| assert_equals(computedStyle.getPropertyValue('--bar'), ''); |
| assert_equals(computedStyle.getPropertyValue('--baz'), '40px'); |
| assert_equals(computedStyle.getPropertyValue('font-size'), '30px'); |
| inlineStyle.removeProperty('--baz'); |
| assert_equals(computedStyle.getPropertyValue('--baz'), '200px'); |
| assert_equals(computedStyle.getPropertyValue('--foo'), ''); |
| assert_equals(computedStyle.getPropertyValue('--bar'), ''); |
| assert_equals(computedStyle.getPropertyValue('font-size'), '30px'); |
| assert_equals(computedStyle.getPropertyValue('--baz'), '200px'); |
| }, "Setting the inline style is handled correctly when registered"); |
| |
| </script> |
