var-reference-registered-properties-cycles.html (8563B)
1 <!DOCTYPE HTML> 2 <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#dom-css-registerproperty" /> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 6 <style> 7 #test1 { 8 --registered-1-a: var(--registered-1-b, 10px); 9 --registered-1-b: var(--registered-1-a, 20px); 10 11 --registered-1-c: var(--registered-1-b, 30px); 12 --registered-1-d: var(--registered-1-b); 13 --unregistered-1-a:var(--registered-1-a,40px); 14 --unregistered-1-a:var(--registered-1-a); 15 left: var(--registered-1-a, 50px); 16 top: var(--registered-1-b, 60px); 17 } 18 </style> 19 <div id=test1></div> 20 <script> 21 test(function() { 22 CSS.registerProperty({name: '--registered-1-a', syntax: '<length>', initialValue: '1px', inherits: false}); 23 CSS.registerProperty({name: '--registered-1-b', syntax: '<length>', initialValue: '2px', inherits: false}); 24 CSS.registerProperty({name: '--registered-1-c', syntax: '<length>', initialValue: '3px', inherits: false}); 25 CSS.registerProperty({name: '--registered-1-d', syntax: '<length>', initialValue: '4px', inherits: false}); 26 27 computedStyle = getComputedStyle(test1); 28 assert_equals(computedStyle.getPropertyValue('--registered-1-a'), '1px'); 29 assert_equals(computedStyle.getPropertyValue('--registered-1-b'), '2px'); 30 assert_equals(computedStyle.getPropertyValue('--registered-1-c'), '2px'); 31 assert_equals(computedStyle.getPropertyValue('--registered-1-d'), '2px'); 32 assert_equals(computedStyle.getPropertyValue('--unregistered-1-a'), '1px'); 33 assert_equals(computedStyle.left, '1px'); 34 assert_equals(computedStyle.top, '2px'); 35 }, "A var() cycle between two registered properties is handled correctly."); 36 </script> 37 38 <style> 39 #test2 { 40 --registered-2-a: var(--unregistered-2-a, 10px); 41 --unregistered-2-a:var(--registered-2-a,20px); 42 43 --registered-2-b: var(--registered-2-a, 30px); 44 --registered-2-c: var(--registered-2-a); 45 --registered-2-d: var(--unregistered-2-a, 40px); 46 --registered-2-e: var(--unregistered-2-a); 47 --unregistered-2-b:var(--registered-2-a,50px); 48 --unregistered-2-c:var(--registered-2-a); 49 --unregistered-2-d:var(--unregistered-2-a,60px); 50 --unregistered-2-e:var(--unregistered-2-a); 51 left: var(--registered-2-a, 70px); 52 top: var(--unregistered-2-a, 80px); 53 } 54 </style> 55 <div id=test2></div> 56 <script> 57 test(function() { 58 CSS.registerProperty({name: '--registered-2-a', syntax: '<length>', initialValue: '1px', inherits: false}); 59 CSS.registerProperty({name: '--registered-2-b', syntax: '<length>', initialValue: '2px', inherits: false}); 60 CSS.registerProperty({name: '--registered-2-c', syntax: '<length>', initialValue: '3px', inherits: false}); 61 CSS.registerProperty({name: '--registered-2-d', syntax: '<length>', initialValue: '4px', inherits: false}); 62 CSS.registerProperty({name: '--registered-2-e', syntax: '<length>', initialValue: '5px', inherits: false}); 63 64 computedStyle = getComputedStyle(test2); 65 assert_equals(computedStyle.getPropertyValue('--registered-2-a'), '1px'); 66 assert_equals(computedStyle.getPropertyValue('--unregistered-2-a'), ''); 67 68 assert_equals(computedStyle.getPropertyValue('--registered-2-b'), '1px'); 69 assert_equals(computedStyle.getPropertyValue('--registered-2-c'), '1px'); 70 assert_equals(computedStyle.getPropertyValue('--registered-2-d'), '40px'); 71 assert_equals(computedStyle.getPropertyValue('--registered-2-e'), '5px'); 72 assert_equals(computedStyle.getPropertyValue('--unregistered-2-b'), '1px'); 73 assert_equals(computedStyle.getPropertyValue('--unregistered-2-c'), '1px'); 74 assert_equals(computedStyle.getPropertyValue('--unregistered-2-d'), '60px'); 75 assert_equals(computedStyle.getPropertyValue('--unregistered-2-e'), ''); 76 assert_equals(computedStyle.left, '1px'); 77 assert_equals(computedStyle.top, '80px'); 78 }, "A var() cycle between a registered properties and an unregistered property is handled correctly."); 79 </script> 80 81 <style> 82 #test3 { 83 --unregistered-3-a:var(--unregistered-3-b,10px); 84 --unregistered-3-b:var(--unregistered-3-a,20px); 85 86 --registered-3-a: var(--unregistered-3-a, 30px); 87 --registered-3-b: var(--unregistered-3-a); 88 --registered-3-c: var(--unregistered-3-b, 40px); 89 --registered-3-d: var(--registered-3-c, 50px); 90 left: var(--registered-3-d, 60px); 91 top: var(--registered-3-b, 70px); 92 } 93 </style> 94 <div id=test3></div> 95 <script> 96 test(function() { 97 CSS.registerProperty({name: '--registered-3-a', syntax: '<length>', initialValue: '1px', inherits: false}); 98 CSS.registerProperty({name: '--registered-3-b', syntax: '<length>', initialValue: '2px', inherits: false}); 99 CSS.registerProperty({name: '--registered-3-c', syntax: '<length>', initialValue: '3px', inherits: false}); 100 CSS.registerProperty({name: '--registered-3-d', syntax: '<length>', initialValue: '4px', inherits: false}); 101 102 computedStyle = getComputedStyle(test3); 103 assert_equals(computedStyle.getPropertyValue('--unregistered-3-a'), ''); 104 assert_equals(computedStyle.getPropertyValue('--unregistered-3-b'), ''); 105 106 assert_equals(computedStyle.getPropertyValue('--registered-3-a'), '30px'); 107 assert_equals(computedStyle.getPropertyValue('--registered-3-b'), '2px'); 108 assert_equals(computedStyle.getPropertyValue('--registered-3-c'), '40px'); 109 assert_equals(computedStyle.getPropertyValue('--registered-3-d'), '40px'); 110 assert_equals(computedStyle.left, '40px'); 111 assert_equals(computedStyle.top, '2px'); 112 }, "A var() cycle between a two unregistered properties is handled correctly."); 113 </script> 114 115 <style> 116 #test4 { 117 --registered-4-a:var(--unregistered-4-a,hello); 118 --unregistered-4-a:var(--registered-4-a,world); 119 120 --registered-4-b:var(--unregistered-4-a,meow); 121 --registered-4-c:var(--unregistered-4-a); 122 --unregistered-4-b:var(--unregistered-4-a,woof); 123 --unregistered-4-c:var(--unregistered-4-a); 124 transition-property: var(--registered-4-a, water); 125 } 126 </style> 127 <div id=test4></div> 128 <script> 129 test(function() { 130 CSS.registerProperty({name: '--registered-4-a', syntax: '*', inherits: false}); 131 CSS.registerProperty({name: '--registered-4-b', syntax: '*', initialValue: 'moo', inherits: false}); 132 CSS.registerProperty({name: '--registered-4-c', syntax: '*', initialValue: 'circle', inherits: false}); 133 134 computedStyle = getComputedStyle(test4); 135 assert_equals(computedStyle.getPropertyValue('--registered-4-a'), ''); 136 assert_equals(computedStyle.getPropertyValue('--unregistered-4-a'), ''); 137 138 assert_equals(computedStyle.getPropertyValue('--registered-4-b'), 'meow'); 139 assert_equals(computedStyle.getPropertyValue('--registered-4-c'), ''); 140 assert_equals(computedStyle.getPropertyValue('--unregistered-4-b'), 'woof'); 141 assert_equals(computedStyle.getPropertyValue('--unregistered-4-c'), ''); 142 assert_equals(computedStyle.transitionProperty, 'water'); 143 }, "A var() cycle between a syntax:'*' property and an unregistered property is handled correctly."); 144 </script> 145 146 <style> 147 #test5_parent { 148 --registered-5-c:foo; 149 --registered-5-d:bar; 150 --registered-5-e:baz; 151 color: green; 152 } 153 #test5 { 154 --registered-5-a:var(--registered-5-b,hello); 155 --registered-5-b:var(--registered-5-a,world); 156 157 --registered-5-c:var(--registered-5-a); 158 --registered-5-d:var(--registered-5-b); 159 --registered-5-e:var(--unknown); 160 color: var(--registered-5-e); 161 } 162 </style> 163 <div id=test5_parent> 164 <div id=test5></div> 165 </div> 166 <script> 167 test(function() { 168 CSS.registerProperty({name: '--registered-5-a', syntax: '*', inherits: true}); 169 CSS.registerProperty({name: '--registered-5-b', syntax: '*', inherits: true}); 170 CSS.registerProperty({name: '--registered-5-c', syntax: '*', inherits: true}); 171 CSS.registerProperty({name: '--registered-5-d', syntax: '*', inherits: true}); 172 CSS.registerProperty({name: '--registered-5-e', syntax: '*', inherits: true}); 173 174 let computedStyle = getComputedStyle(test5); 175 assert_equals(computedStyle.getPropertyValue('--registered-5-a'), ''); 176 assert_equals(computedStyle.getPropertyValue('--registered-5-b'), ''); 177 assert_equals(computedStyle.getPropertyValue('--registered-5-c'), ''); 178 assert_equals(computedStyle.getPropertyValue('--registered-5-d'), ''); 179 assert_equals(computedStyle.getPropertyValue('--registered-5-e'), ''); 180 assert_equals(computedStyle.getPropertyValue('color'), 'rgb(0, 128, 0)'); 181 }, "Custom properties with universal syntax become guaranteed-invalid when " + 182 "invalid at computed-value time"); 183 </script>