diff options
Diffstat (limited to 'tests/wpt/web-platform-tests/css/css-properties-values-api')
3 files changed, 88 insertions, 4 deletions
diff --git a/tests/wpt/web-platform-tests/css/css-properties-values-api/registered-properties-inheritance.html b/tests/wpt/web-platform-tests/css/css-properties-values-api/registered-properties-inheritance.html index 8f9eafee19e..614a72a797b 100644 --- a/tests/wpt/web-platform-tests/css/css-properties-values-api/registered-properties-inheritance.html +++ b/tests/wpt/web-platform-tests/css/css-properties-values-api/registered-properties-inheritance.html @@ -72,4 +72,18 @@ test(function(){ assert_equals(getComputedStyle(inner).getPropertyValue('--inherited-length-5'), '42px'); }, "Reference to syntax-incompatible variable results in inherited value"); +test(function(){ + CSS.registerProperty({name: '--inherited-em', syntax: '<length>', initialValue: '0px', inherits: true}); + outer.style = 'font-size: 11px; --inherited-em: 10em;'; + inner.style = 'font-size: 22px; --unregistered:var(--inherited-em);'; + assert_equals(getComputedStyle(inner).getPropertyValue('--unregistered'), '110px'); +}, "Font-relative units are absolutized before before inheritance"); + +test(function(){ + CSS.registerProperty({name: '--calc-length', syntax: '<length>', initialValue: '0px', inherits: true}); + outer.style = '--calc-length: calc(10px + 10px);'; + inner.style = '--unregistered:var(--calc-length);'; + assert_equals(getComputedStyle(inner).getPropertyValue('--unregistered'), '20px'); +}, "Calc expressions are resolved before inheritance"); + </script> diff --git a/tests/wpt/web-platform-tests/css/css-properties-values-api/unit-cycles.html b/tests/wpt/web-platform-tests/css/css-properties-values-api/unit-cycles.html index d65348543c4..c26e1cda1f6 100644 --- a/tests/wpt/web-platform-tests/css/css-properties-values-api/unit-cycles.html +++ b/tests/wpt/web-platform-tests/css/css-properties-values-api/unit-cycles.html @@ -4,12 +4,12 @@ <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script> - function register_length(name) { + function register_length(name, inherits=true) { CSS.registerProperty({ name: name, syntax: '<length>', initialValue: '0px', - inherits: false + inherits: inherits }); } @@ -22,6 +22,9 @@ register_length('--font-size-rem-via-var'); register_length('--font-size-ex-via-var'); register_length('--font-size-ch-via-var'); + register_length('--font-size-em-inherited', true); + register_length('--font-size-ex-inherited', true); + register_length('--font-size-ch-inherited', true); </script> <style> :root { @@ -43,12 +46,20 @@ --font-size-ch-via-var: var(--unregistered-ch); } + #parent { + --font-size-em-inherited: 4em; + --font-size-ex-inherited: 4ex; + --font-size-ch-inherited: 4ch; + } + #target { font-size: 11px; } </style> -<div id=target></div> +<div id=parent> + <div id=target></div> +</div> <div id=ref></div> <script> @@ -170,4 +181,25 @@ assert_property_equals('--font-size-rem-via-var', expected10rem, root); }, 'Lengths with rem units are detected via var references'); + test(function() { + let expected4em = compute_dimension('4em', 'unset'); + target.style = 'font-size: var(--font-size-em-inherited);'; + assert_property_equals('font-size', expected4em); + assert_property_equals('--font-size-em-inherited', expected4em); + }, 'Inherited lengths with em units may be used'); + + test(function() { + let expected4ex = compute_dimension('4ex', 'unset'); + target.style = 'font-size: var(--font-size-ex-inherited);'; + assert_property_equals('font-size', expected4ex); + assert_property_equals('--font-size-ex-inherited', expected4ex); + }, 'Inherited lengths with ex units may be used'); + + test(function() { + let expected4ch = compute_dimension('4ch', 'unset'); + target.style = 'font-size: var(--font-size-ch-inherited);'; + assert_property_equals('font-size', expected4ch); + assert_property_equals('--font-size-ch-inherited', expected4ch); + }, 'Inherited lengths with ch units may be used'); + </script> diff --git a/tests/wpt/web-platform-tests/css/css-properties-values-api/var-reference-registered-properties.html b/tests/wpt/web-platform-tests/css/css-properties-values-api/var-reference-registered-properties.html index d8a83157125..5de6d20f11b 100644 --- a/tests/wpt/web-platform-tests/css/css-properties-values-api/var-reference-registered-properties.html +++ b/tests/wpt/web-platform-tests/css/css-properties-values-api/var-reference-registered-properties.html @@ -54,7 +54,7 @@ test(function() { assert_equals(computedStyle.getPropertyValue('--registered-length-6'), '80px'); assert_equals(computedStyle.getPropertyValue('--registered-length-7'), '123px'); assert_equals(computedStyle.getPropertyValue('--length-1'), ' 20px'); - assert_equals(computedStyle.getPropertyValue('--length-2'), ' 10px'); + assert_equals(computedStyle.getPropertyValue('--length-2'), ' 10px'); assert_equals(computedStyle.getPropertyValue('--length-3'), ' calc(123px + 123px)'); assert_equals(computedStyle.getPropertyValue('--registered-length-invalid'), '15px'); @@ -96,5 +96,43 @@ test(function(){ assert_equals(computedStyle.getPropertyValue('--registered-length-list-3'), '1px, 10px, 2px, 1px, 20px, 10px, 2px'); }, 'Registered lists may be concatenated'); +test(function(){ + CSS.registerProperty({ + name: '--length-em', + syntax: '<length>', + initialValue: '0px', + inherits: false + }); + element.style = 'font-size: 11px; --length-em: 10em; --unregistered:var(--length-em);'; + let computedStyle = getComputedStyle(element); + assert_equals(computedStyle.getPropertyValue('--unregistered'), '110px'); + element.style = ''; +}, 'Font-relative units are absolutized when substituting'); + +test(function(){ + CSS.registerProperty({ + name: '--length-calc', + syntax: '<length>', + initialValue: '0px', + inherits: false + }); + element.style = 'font-size: 11px; --length-calc: calc(10em + 10px); --unregistered:var(--length-calc);'; + let computedStyle = getComputedStyle(element); + assert_equals(computedStyle.getPropertyValue('--unregistered'), '120px'); + element.style = ''; +}, 'Calc expressions are resolved when substituting'); + +test(function(){ + CSS.registerProperty({ + name: '--length-calc-list', + syntax: '<length>#', + initialValue: '0px', + inherits: false + }); + element.style = 'font-size: 11px; --length-calc-list: 10em, calc(10em + 10px); --unregistered:var(--length-calc-list);'; + let computedStyle = getComputedStyle(element); + assert_equals(computedStyle.getPropertyValue('--unregistered'), '110px, 120px'); + element.style = ''; +}, 'Lists with relative units are absolutized when substituting'); </script> |