var-with-blocks.html (6061B)
1 <!DOCTYPE html> 2 <title>CSS Syntax: {}-blocks in declaration values</title> 3 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9317"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <!-- Standard properties --> 8 9 <style id=plain_var> 10 .a { 11 color: rgb(2, 2, 2); 12 color:var(--x); /* Valid */ 13 background-color:rgb(1, 1, 1); 14 } 15 </style> 16 <script> 17 test(() => { 18 let rules = plain_var.sheet.rules; 19 assert_equals(rules.length, 1); 20 let declarations = rules[0].style; 21 assert_equals(declarations.color, 'var(--x)'); 22 assert_equals(declarations.backgroundColor, 'rgb(1, 1, 1)'); 23 }, 'Plain var()'); 24 </script> 25 26 <style id=whole_value_block> 27 .a { 28 color: rgb(2, 2, 2); 29 color:{var(--x)}; /* Valid */ 30 background-color:rgb(1, 1, 1); 31 } 32 </style> 33 <script> 34 test(() => { 35 let rules = whole_value_block.sheet.rules; 36 assert_equals(rules.length, 1); 37 let declarations = rules[0].style; 38 assert_equals(declarations.color, '{var(--x)}'); 39 assert_equals(declarations.backgroundColor, 'rgb(1, 1, 1)'); 40 }, 'Whole-value block with var()'); 41 </script> 42 43 <style id=whole_value_block_with_space> 44 .a { 45 color: rgb(2, 2, 2); 46 color: { var(--x) }; /* Valid */ 47 background-color:rgb(1, 1, 1); 48 } 49 </style> 50 <script> 51 test(() => { 52 let rules = whole_value_block_with_space.sheet.rules; 53 assert_equals(rules.length, 1); 54 let declarations = rules[0].style; 55 assert_equals(declarations.color, '{ var(--x) }'); 56 assert_equals(declarations.backgroundColor, 'rgb(1, 1, 1)'); 57 }, 'Whole-value block with var() (spaces)'); 58 </script> 59 60 <style id=trailing_block> 61 .a { 62 color: rgb(2, 2, 2); 63 color:var(--x) { }; /* Invalid */ 64 background-color:rgb(1, 1, 1); 65 } 66 </style> 67 <script> 68 test(() => { 69 let rules = trailing_block.sheet.rules; 70 assert_equals(rules.length, 1); 71 let declarations = rules[0].style; 72 assert_equals(declarations.color, 'rgb(2, 2, 2)'); 73 assert_equals(declarations.backgroundColor, 'rgb(1, 1, 1)'); 74 }, 'Trailing block, leading var()'); 75 </script> 76 77 <style id=leading_block> 78 .a { 79 color: rgb(2, 2, 2); 80 color:{ } var(--x); /* Invalid */ 81 background-color:rgb(1, 1, 1); 82 } 83 </style> 84 <script> 85 test(() => { 86 let rules = leading_block.sheet.rules; 87 assert_equals(rules.length, 1); 88 let declarations = rules[0].style; 89 assert_equals(declarations.color, 'rgb(2, 2, 2)'); 90 assert_equals(declarations.backgroundColor, 'rgb(1, 1, 1)'); 91 }, 'Leading block, trailing var()'); 92 </script> 93 94 <style id=in_block_var_with_trailing_token> 95 .a { 96 color: rgb(2, 2, 2); 97 color:{ var(--x) } A; /* Invalid */ 98 background-color:rgb(1, 1, 1); 99 } 100 </style> 101 <script> 102 test(() => { 103 let rules = in_block_var_with_trailing_token.sheet.rules; 104 assert_equals(rules.length, 1); 105 let declarations = rules[0].style; 106 assert_equals(declarations.color, 'rgb(2, 2, 2)'); 107 assert_equals(declarations.backgroundColor, 'rgb(1, 1, 1)'); 108 }, 'In-block var() with trailing token'); 109 </script> 110 111 <style id=in_block_var_with_leading_token> 112 .a { 113 color: rgb(2, 2, 2); 114 color:A { var(--x) }; /* Invalid */ 115 background-color:rgb(1, 1, 1); 116 } 117 </style> 118 <script> 119 test(() => { 120 let rules = in_block_var_with_leading_token.sheet.rules; 121 assert_equals(rules.length, 1); 122 let declarations = rules[0].style; 123 assert_equals(declarations.color, 'rgb(2, 2, 2)'); 124 assert_equals(declarations.backgroundColor, 'rgb(1, 1, 1)'); 125 }, 'In-block var() with leading token'); 126 </script> 127 128 <!-- Custom Properties --> 129 130 <style id=plain_var_custom> 131 .a { 132 --y:var(--x); /* Valid */ 133 } 134 </style> 135 <script> 136 test(() => { 137 let rules = plain_var_custom.sheet.rules; 138 assert_equals(rules.length, 1); 139 assert_equals(rules[0].style.getPropertyValue('--y'), 'var(--x)'); 140 }, 'Plain var() (custom property)'); 141 </script> 142 143 <style id=whole_value_block_custom> 144 .a { 145 --y:{var(--x)}; /* Valid */ 146 } 147 </style> 148 <script> 149 test(() => { 150 let rules = whole_value_block_custom.sheet.rules; 151 assert_equals(rules.length, 1); 152 assert_equals(rules[0].style.getPropertyValue('--y'), '{var(--x)}'); 153 }, 'Whole-value block with var() (custom property)'); 154 </script> 155 156 <style id=whole_value_block_with_space_custom> 157 .a { 158 --y: { var(--x) }; /* Valid */ 159 } 160 </style> 161 <script> 162 test(() => { 163 let rules = whole_value_block_with_space_custom.sheet.rules; 164 assert_equals(rules.length, 1); 165 assert_equals(rules[0].style.getPropertyValue('--y'), '{ var(--x) }'); 166 }, 'Whole-value block with var() (spaces, custom property)'); 167 </script> 168 169 <style id=trailing_block_custom> 170 .a { 171 --y:var(--x) { }; /* Valid */ 172 } 173 </style> 174 <script> 175 test(() => { 176 let rules = trailing_block_custom.sheet.rules; 177 assert_equals(rules.length, 1); 178 assert_equals(rules[0].style.getPropertyValue('--y'), 'var(--x) { }'); 179 }, 'Trailing block, leading var() (custom property)'); 180 </script> 181 182 <style id=leading_block_custom> 183 .a { 184 --y:{ } var(--x); /* Valid */ 185 } 186 </style> 187 <script> 188 test(() => { 189 let rules = leading_block_custom.sheet.rules; 190 assert_equals(rules.length, 1); 191 assert_equals(rules[0].style.getPropertyValue('--y'), '{ } var(--x)'); 192 }, 'Leading block, trailing var() (custom property)'); 193 </script> 194 195 <style id=in_block_var_with_trailing_token_custom> 196 .a { 197 --y:{ var(--x) } A; /* Valid */ 198 } 199 </style> 200 <script> 201 test(() => { 202 let rules = in_block_var_with_trailing_token_custom.sheet.rules; 203 assert_equals(rules.length, 1); 204 assert_equals(rules[0].style.getPropertyValue('--y'), '{ var(--x) } A'); 205 }, 'In-block var() with trailing token (custom property)'); 206 </script> 207 208 <style id=in_block_var_with_leading_token_custom> 209 .a { 210 --y:A { var(--x) }; /* Valid */ 211 } 212 </style> 213 <script> 214 test(() => { 215 let rules = in_block_var_with_leading_token_custom.sheet.rules; 216 assert_equals(rules.length, 1); 217 assert_equals(rules[0].style.getPropertyValue('--y'), 'A { var(--x) }'); 218 }, 'In-block var() with leading token (custom property)'); 219 </script>