summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-properties-values-api/var-reference-registered-properties.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 01:47:29 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 01:47:29 +0000
commit0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch)
treea31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /testing/web-platform/tests/css/css-properties-values-api/var-reference-registered-properties.html
parentInitial commit. (diff)
downloadfirefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz
firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip
Adding upstream version 115.8.0esr.upstream/115.8.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-properties-values-api/var-reference-registered-properties.html')
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/var-reference-registered-properties.html182
1 files changed, 182 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-properties-values-api/var-reference-registered-properties.html b/testing/web-platform/tests/css/css-properties-values-api/var-reference-registered-properties.html
new file mode 100644
index 0000000000..a6f26429e8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/var-reference-registered-properties.html
@@ -0,0 +1,182 @@
+<!DOCTYPE HTML>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#dom-css-registerproperty" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/utils.js"></script>
+<style>
+div {
+ --registered-length-1: 10px;
+ --registered-length-2: var(--registered-length-1);
+ --registered-length-3: var(--length-1);
+ --registered-length-4: calc(var(--length-1) + 40px);
+ --registered-length-5: var(--invalid, 70px);
+ --registered-length-6: calc(var(--registered-length-3)*4);
+ --registered-length-7: var(--123px, 6px);
+
+ --length-1: 20px;
+ --length-2: var(--registered-length-1);
+ --length-3: calc(var(--123px, 6px) + var(--123px));
+
+ --percentage: 10%;
+ --registered-length-invalid: var(--percentage);
+
+ --registered-token-stream-1:var(--invalid);
+ --registered-token-stream-2:var(--invalid,fallback);
+ --token-stream-1:var(--registered-token-stream-1,moo);
+
+ --registered-length-list-1: 1px, var(--registered-length-1), 2px;
+ --registered-length-list-2: 1px, var(--length-1), var(--registered-length-1), 2px;
+ --registered-length-list-3: var(--registered-length-list-1), var(--registered-length-list-2);
+}
+</style>
+<div id=element></div>
+<script>
+test(function() {
+ CSS.registerProperty({name: '--123px', syntax: '<length>', initialValue: '123px', inherits: false});
+
+ CSS.registerProperty({name: '--registered-length-1', syntax: '<length>', initialValue: '0px', inherits: false});
+ CSS.registerProperty({name: '--registered-length-2', syntax: '<length>', initialValue: '0px', inherits: false});
+ CSS.registerProperty({name: '--registered-length-3', syntax: '<length>', initialValue: '0px', inherits: false});
+ CSS.registerProperty({name: '--registered-length-4', syntax: '<length>', initialValue: '0px', inherits: false});
+ CSS.registerProperty({name: '--registered-length-5', syntax: '<length>', initialValue: '0px', inherits: false});
+ CSS.registerProperty({name: '--registered-length-6', syntax: '<length>', initialValue: '0px', inherits: false});
+ CSS.registerProperty({name: '--registered-length-7', syntax: '<length>', initialValue: '0px', inherits: false});
+ CSS.registerProperty({name: '--registered-length-invalid', syntax: '<length>', initialValue: '15px', inherits: false});
+
+ CSS.registerProperty({name: '--registered-token-stream-1', syntax: '*', inherits: false});
+ CSS.registerProperty({name: '--registered-token-stream-2', syntax: '*', inherits: false});
+
+ computedStyle = getComputedStyle(element);
+ assert_equals(computedStyle.getPropertyValue('--registered-length-1'), '10px');
+ assert_equals(computedStyle.getPropertyValue('--registered-length-2'), '10px');
+ assert_equals(computedStyle.getPropertyValue('--registered-length-3'), '20px');
+ assert_equals(computedStyle.getPropertyValue('--registered-length-4'), '60px');
+ assert_equals(computedStyle.getPropertyValue('--registered-length-5'), '70px');
+ 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-3'), 'calc(123px + 123px)');
+ assert_equals(computedStyle.getPropertyValue('--registered-length-invalid'), '15px');
+
+ assert_equals(computedStyle.getPropertyValue('--registered-token-stream-1'), '');
+ assert_equals(computedStyle.getPropertyValue('--registered-token-stream-2'), 'fallback');
+ assert_equals(computedStyle.getPropertyValue('--token-stream-1'), 'moo');
+}, "var() references work with registered properties");
+
+test(function(){
+ CSS.registerProperty({
+ name: '--registered-length-list-1',
+ syntax: '<length>#',
+ initialValue: '0px',
+ inherits: false
+ });
+ let computedStyle = getComputedStyle(element);
+ assert_equals(computedStyle.getPropertyValue('--registered-length-list-1'), '1px, 10px, 2px');
+}, 'References to registered var()-properties work in registered lists');
+
+test(function(){
+ CSS.registerProperty({
+ name: '--registered-length-list-2',
+ syntax: '<length>#',
+ initialValue: '0px',
+ inherits: false
+ });
+ let computedStyle = getComputedStyle(element);
+ assert_equals(computedStyle.getPropertyValue('--registered-length-list-2'), '1px, 20px, 10px, 2px');
+}, 'References to mixed registered and unregistered var()-properties work in registered lists');
+
+test(function(){
+ CSS.registerProperty({
+ name: '--registered-length-list-3',
+ syntax: '<length>#',
+ initialValue: '0px',
+ inherits: false
+ });
+ let computedStyle = getComputedStyle(element);
+ 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');
+
+test(function(){
+ let length = generate_property('none | <length>');
+ let universal = generate_property('*');
+ element.style = `font-size: 10px; ${length}: 10em; ${universal}: var(${length})`;
+ let computedStyle = getComputedStyle(element);
+ assert_equals(computedStyle.getPropertyValue(universal), '100px');
+ element.style = '';
+}, 'Values are absolutized when substituting into properties with universal syntax');
+
+function test_valid_fallback(syntax, value, fallback) {
+ test(function(){
+ let name = generate_property(syntax);
+ try {
+ element.style = `${name}: ${value}; --x:var(${name},${fallback})`;
+ let computedStyle = getComputedStyle(element);
+ assert_equals(computedStyle.getPropertyValue('--x'), value);
+ } finally {
+ element.style = '';
+ }
+ }, `Valid fallback does not invalidate var()-reference [${syntax}, ${fallback}]`);
+}
+
+function test_invalid_fallback(syntax, value, fallback) {
+ test(function(){
+ let name = generate_property(syntax);
+ try {
+ element.style = `${name}: ${value}; --x:var(${name},${fallback})`;
+ let computedStyle = getComputedStyle(element);
+ assert_equals(computedStyle.getPropertyValue('--x'), '');
+ } finally {
+ element.style = '';
+ }
+ }, `Invalid fallback invalidates var()-reference [${syntax}, ${fallback}]`);
+}
+
+test_valid_fallback('<length>', '40px', '10px');
+test_valid_fallback('<length> | <color>', '40px', 'red');
+test_valid_fallback('<length> | none', '40px', 'none');
+
+test_invalid_fallback('<length>', '40px', 'red');
+test_invalid_fallback('<length> | none', '40px', 'nolength');
+test_invalid_fallback('<length>', '40px', 'var(--novar)');
+
+</script>
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-21 11:15:03 +0000