summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-properties-values-api/var-reference-registered-properties-cycles.html
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
commit26a029d407be480d791972afb5975cf62c9360a6 (patch)
treef435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-properties-values-api/var-reference-registered-properties-cycles.html
parentInitial commit. (diff)
downloadfirefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
Adding upstream version 124.0.1.upstream/124.0.1
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-cycles.html')
-rw-r--r--testing/web-platform/tests/css/css-properties-values-api/var-reference-registered-properties-cycles.html183
1 files changed, 183 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-properties-values-api/var-reference-registered-properties-cycles.html b/testing/web-platform/tests/css/css-properties-values-api/var-reference-registered-properties-cycles.html
new file mode 100644
index 0000000000..91792ef51d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/var-reference-registered-properties-cycles.html
@@ -0,0 +1,183 @@
+<!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>
+
+<style>
+#test1 {
+ --registered-1-a: var(--registered-1-b, 10px);
+ --registered-1-b: var(--registered-1-a, 20px);
+
+ --registered-1-c: var(--registered-1-b, 30px);
+ --registered-1-d: var(--registered-1-b);
+ --unregistered-1-a:var(--registered-1-a,40px);
+ --unregistered-1-a:var(--registered-1-a);
+ left: var(--registered-1-a, 50px);
+ top: var(--registered-1-b, 60px);
+}
+</style>
+<div id=test1></div>
+<script>
+test(function() {
+ CSS.registerProperty({name: '--registered-1-a', syntax: '<length>', initialValue: '1px', inherits: false});
+ CSS.registerProperty({name: '--registered-1-b', syntax: '<length>', initialValue: '2px', inherits: false});
+ CSS.registerProperty({name: '--registered-1-c', syntax: '<length>', initialValue: '3px', inherits: false});
+ CSS.registerProperty({name: '--registered-1-d', syntax: '<length>', initialValue: '4px', inherits: false});
+
+ computedStyle = getComputedStyle(test1);
+ assert_equals(computedStyle.getPropertyValue('--registered-1-a'), '1px');
+ assert_equals(computedStyle.getPropertyValue('--registered-1-b'), '2px');
+ assert_equals(computedStyle.getPropertyValue('--registered-1-c'), '2px');
+ assert_equals(computedStyle.getPropertyValue('--registered-1-d'), '2px');
+ assert_equals(computedStyle.getPropertyValue('--unregistered-1-a'), '1px');
+ assert_equals(computedStyle.left, '1px');
+ assert_equals(computedStyle.top, '2px');
+}, "A var() cycle between two registered properties is handled correctly.");
+</script>
+
+<style>
+#test2 {
+ --registered-2-a: var(--unregistered-2-a, 10px);
+ --unregistered-2-a:var(--registered-2-a,20px);
+
+ --registered-2-b: var(--registered-2-a, 30px);
+ --registered-2-c: var(--registered-2-a);
+ --registered-2-d: var(--unregistered-2-a, 40px);
+ --registered-2-e: var(--unregistered-2-a);
+ --unregistered-2-b:var(--registered-2-a,50px);
+ --unregistered-2-c:var(--registered-2-a);
+ --unregistered-2-d:var(--unregistered-2-a,60px);
+ --unregistered-2-e:var(--unregistered-2-a);
+ left: var(--registered-2-a, 70px);
+ top: var(--unregistered-2-a, 80px);
+}
+</style>
+<div id=test2></div>
+<script>
+test(function() {
+ CSS.registerProperty({name: '--registered-2-a', syntax: '<length>', initialValue: '1px', inherits: false});
+ CSS.registerProperty({name: '--registered-2-b', syntax: '<length>', initialValue: '2px', inherits: false});
+ CSS.registerProperty({name: '--registered-2-c', syntax: '<length>', initialValue: '3px', inherits: false});
+ CSS.registerProperty({name: '--registered-2-d', syntax: '<length>', initialValue: '4px', inherits: false});
+ CSS.registerProperty({name: '--registered-2-e', syntax: '<length>', initialValue: '5px', inherits: false});
+
+ computedStyle = getComputedStyle(test2);
+ assert_equals(computedStyle.getPropertyValue('--registered-2-a'), '1px');
+ assert_equals(computedStyle.getPropertyValue('--unregistered-2-a'), '');
+
+ assert_equals(computedStyle.getPropertyValue('--registered-2-b'), '1px');
+ assert_equals(computedStyle.getPropertyValue('--registered-2-c'), '1px');
+ assert_equals(computedStyle.getPropertyValue('--registered-2-d'), '40px');
+ assert_equals(computedStyle.getPropertyValue('--registered-2-e'), '5px');
+ assert_equals(computedStyle.getPropertyValue('--unregistered-2-b'), '1px');
+ assert_equals(computedStyle.getPropertyValue('--unregistered-2-c'), '1px');
+ assert_equals(computedStyle.getPropertyValue('--unregistered-2-d'), '60px');
+ assert_equals(computedStyle.getPropertyValue('--unregistered-2-e'), '');
+ assert_equals(computedStyle.left, '1px');
+ assert_equals(computedStyle.top, '80px');
+}, "A var() cycle between a registered properties and an unregistered property is handled correctly.");
+</script>
+
+<style>
+#test3 {
+ --unregistered-3-a:var(--unregistered-3-b,10px);
+ --unregistered-3-b:var(--unregistered-3-a,20px);
+
+ --registered-3-a: var(--unregistered-3-a, 30px);
+ --registered-3-b: var(--unregistered-3-a);
+ --registered-3-c: var(--unregistered-3-b, 40px);
+ --registered-3-d: var(--registered-3-c, 50px);
+ left: var(--registered-3-d, 60px);
+ top: var(--registered-3-b, 70px);
+}
+</style>
+<div id=test3></div>
+<script>
+test(function() {
+ CSS.registerProperty({name: '--registered-3-a', syntax: '<length>', initialValue: '1px', inherits: false});
+ CSS.registerProperty({name: '--registered-3-b', syntax: '<length>', initialValue: '2px', inherits: false});
+ CSS.registerProperty({name: '--registered-3-c', syntax: '<length>', initialValue: '3px', inherits: false});
+ CSS.registerProperty({name: '--registered-3-d', syntax: '<length>', initialValue: '4px', inherits: false});
+
+ computedStyle = getComputedStyle(test3);
+ assert_equals(computedStyle.getPropertyValue('--unregistered-3-a'), '');
+ assert_equals(computedStyle.getPropertyValue('--unregistered-3-b'), '');
+
+ assert_equals(computedStyle.getPropertyValue('--registered-3-a'), '30px');
+ assert_equals(computedStyle.getPropertyValue('--registered-3-b'), '2px');
+ assert_equals(computedStyle.getPropertyValue('--registered-3-c'), '40px');
+ assert_equals(computedStyle.getPropertyValue('--registered-3-d'), '40px');
+ assert_equals(computedStyle.left, '40px');
+ assert_equals(computedStyle.top, '2px');
+}, "A var() cycle between a two unregistered properties is handled correctly.");
+</script>
+
+<style>
+#test4 {
+ --registered-4-a:var(--unregistered-4-a,hello);
+ --unregistered-4-a:var(--registered-4-a,world);
+
+ --registered-4-b:var(--unregistered-4-a,meow);
+ --registered-4-c:var(--unregistered-4-a);
+ --unregistered-4-b:var(--unregistered-4-a,woof);
+ --unregistered-4-c:var(--unregistered-4-a);
+ transition-property: var(--registered-4-a, water);
+}
+</style>
+<div id=test4></div>
+<script>
+test(function() {
+ CSS.registerProperty({name: '--registered-4-a', syntax: '*', inherits: false});
+ CSS.registerProperty({name: '--registered-4-b', syntax: '*', initialValue: 'moo', inherits: false});
+ CSS.registerProperty({name: '--registered-4-c', syntax: '*', initialValue: 'circle', inherits: false});
+
+ computedStyle = getComputedStyle(test4);
+ assert_equals(computedStyle.getPropertyValue('--registered-4-a'), '');
+ assert_equals(computedStyle.getPropertyValue('--unregistered-4-a'), '');
+
+ assert_equals(computedStyle.getPropertyValue('--registered-4-b'), 'meow');
+ assert_equals(computedStyle.getPropertyValue('--registered-4-c'), '');
+ assert_equals(computedStyle.getPropertyValue('--unregistered-4-b'), 'woof');
+ assert_equals(computedStyle.getPropertyValue('--unregistered-4-c'), '');
+ assert_equals(computedStyle.transitionProperty, 'water');
+}, "A var() cycle between a syntax:'*' property and an unregistered property is handled correctly.");
+</script>
+
+<style>
+#test5_parent {
+ --registered-5-c:foo;
+ --registered-5-d:bar;
+ --registered-5-e:baz;
+ color: green;
+}
+#test5 {
+ --registered-5-a:var(--registered-5-b,hello);
+ --registered-5-b:var(--registered-5-a,world);
+
+ --registered-5-c:var(--registered-5-a);
+ --registered-5-d:var(--registered-5-b);
+ --registered-5-e:var(--unknown);
+ color: var(--registered-5-e);
+}
+</style>
+<div id=test5_parent>
+ <div id=test5></div>
+</div>
+<script>
+test(function() {
+ CSS.registerProperty({name: '--registered-5-a', syntax: '*', inherits: true});
+ CSS.registerProperty({name: '--registered-5-b', syntax: '*', inherits: true});
+ CSS.registerProperty({name: '--registered-5-c', syntax: '*', inherits: true});
+ CSS.registerProperty({name: '--registered-5-d', syntax: '*', inherits: true});
+ CSS.registerProperty({name: '--registered-5-e', syntax: '*', inherits: true});
+
+ let computedStyle = getComputedStyle(test5);
+ assert_equals(computedStyle.getPropertyValue('--registered-5-a'), '');
+ assert_equals(computedStyle.getPropertyValue('--registered-5-b'), '');
+ assert_equals(computedStyle.getPropertyValue('--registered-5-c'), '');
+ assert_equals(computedStyle.getPropertyValue('--registered-5-d'), '');
+ assert_equals(computedStyle.getPropertyValue('--registered-5-e'), '');
+ assert_equals(computedStyle.getPropertyValue('color'), 'rgb(0, 128, 0)');
+}, "Custom properties with universal syntax become guaranteed-invalid when " +
+ "invalid at computed-value time");
+</script>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-29 19:22:32 +0000