Index: third_party/WebKit/LayoutTests/custom-properties/var-reference-registered-properties-cycles.html |
diff --git a/third_party/WebKit/LayoutTests/custom-properties/var-reference-registered-properties-cycles.html b/third_party/WebKit/LayoutTests/custom-properties/var-reference-registered-properties-cycles.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..2e5039f729c912aa10d8bd1da1e8cc2f57b5f115 |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/custom-properties/var-reference-registered-properties-cycles.html |
@@ -0,0 +1,144 @@ |
+<!DOCTYPE HTML> |
+<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'}); |
+ CSS.registerProperty({name: '--registered-1-b', syntax: '<length>', initialValue: '2px'}); |
+ CSS.registerProperty({name: '--registered-1-c', syntax: '<length>', initialValue: '3px'}); |
+ CSS.registerProperty({name: '--registered-1-d', syntax: '<length>', initialValue: '4px'}); |
+ |
+ 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'}); |
+ CSS.registerProperty({name: '--registered-2-b', syntax: '<length>', initialValue: '2px'}); |
+ CSS.registerProperty({name: '--registered-2-c', syntax: '<length>', initialValue: '3px'}); |
+ CSS.registerProperty({name: '--registered-2-d', syntax: '<length>', initialValue: '4px'}); |
+ CSS.registerProperty({name: '--registered-2-e', syntax: '<length>', initialValue: '5px'}); |
+ |
+ 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'}); |
+ CSS.registerProperty({name: '--registered-3-b', syntax: '<length>', initialValue: '2px'}); |
+ CSS.registerProperty({name: '--registered-3-c', syntax: '<length>', initialValue: '3px'}); |
+ CSS.registerProperty({name: '--registered-3-d', syntax: '<length>', initialValue: '4px'}); |
+ |
+ 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: '*'}); |
+ CSS.registerProperty({name: '--registered-4-b', syntax: '*', initialValue: 'moo'}); |
+ CSS.registerProperty({name: '--registered-4-c', syntax: '*', initialValue: 'circle'}); |
+ |
+ 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'), 'circle'); |
+ 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> |