| OLD | NEW |
|---|
| 1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <script src="../resources/js-test.js"></script> | 4 <script src="../resources/js-test.js"></script> |
| 5 <style> | 5 <style> |
| 6 .test { | 6 .test { |
| 7 background-color: blue; | 7 content: "UNTOUCHED"; |
| 8 } | 8 } |
| 9 | 9 |
| 10 @supports (display: none) { | 10 @supports (display: none) { |
| 11 #t0 { background-color: green; } | 11 #t0 { content: "APPLIED" } |
| 12 } | 12 } |
| 13 | 13 |
| 14 @supports (display: deadbeef) { | 14 @supports (display: deadbeef) { |
| 15 #t1 { background-color: red; } | 15 #t1 { content: "FAIL" } |
| 16 } | 16 } |
| 17 | 17 |
| 18 /* Negation */ | 18 /* Negation */ |
| 19 @supports not (display: deadbeef) { | 19 @supports not (display: deadbeef) { |
| 20 #t2 { background-color: green; } | 20 #t2 { content: "APPLIED" } |
| 21 } | 21 } |
| 22 | 22 |
| 23 @supports not (display: none) { | 23 @supports not (display: none) { |
| 24 #t3 { background-color: red; } | 24 #t3 { content: "FAIL" } |
| 25 } | 25 } |
| 26 | 26 |
| 27 @supports not (not (display: none)) { | 27 @supports not (not (display: none)) { |
| 28 #t4 { background-color: green; } | 28 #t4 { content: "APPLIED" } |
| 29 } | 29 } |
| 30 | 30 |
| 31 @supports not (not (not (display: none))) { | 31 @supports not (not (not (display: none))) { |
| 32 #t5 { background-color: red; } | 32 #t5 { content: "FAIL" } |
| 33 } | 33 } |
| 34 | 34 |
| 35 /* Conjunction */ | 35 /* Conjunction */ |
| 36 @supports (display: none) and (display: block) { | 36 @supports (display: none) and (display: block) { |
| 37 #t6 { background-color: green; } | 37 #t6 { content: "APPLIED" } |
| 38 } | 38 } |
| 39 | 39 |
| 40 @supports (display: none) and (display: block) and (display: inline) { | 40 @supports (display: none) and (display: block) and (display: inline) { |
| 41 #t7 { background-color: green; } | 41 #t7 { content: "APPLIED" } |
| 42 } | 42 } |
| 43 | 43 |
| 44 @supports (display: none) and (display: block) and (display: deadbeef) and (
display: inline) { | 44 @supports (display: none) and (display: block) and (display: deadbeef) and (
display: inline) { |
| 45 #t8 { background-color: red; } | 45 #t8 { content: "FAIL" } |
| 46 } | 46 } |
| 47 | 47 |
| 48 /* Disjunction */ | 48 /* Disjunction */ |
| 49 @supports (display: none) or (display: inline) { | 49 @supports (display: none) or (display: inline) { |
| 50 #t9 { background-color: green; } | 50 #t9 { content: "APPLIED" } |
| 51 } | 51 } |
| 52 | 52 |
| 53 @supports (display: none) or (display: block) or (display: inline) { | 53 @supports (display: none) or (display: block) or (display: inline) { |
| 54 #t10 { background-color: green; } | 54 #t10 { content: "APPLIED" } |
| 55 } | 55 } |
| 56 | 56 |
| 57 @supports (display: none) or (display: deadbeef) or (display: inline) { | 57 @supports (display: none) or (display: deadbeef) or (display: inline) { |
| 58 #t11 { background-color: green; } | 58 #t11 { content: "APPLIED" } |
| 59 } | 59 } |
| 60 | 60 |
| 61 @supports (display: ohhai) or (display: deadbeef) or (display: rainbows) { | 61 @supports (display: ohhai) or (display: deadbeef) or (display: rainbows) { |
| 62 #t12 { background-color: red; } | 62 #t12 { content: "FAIL" } |
| 63 } | 63 } |
| 64 | 64 |
| 65 /* Bad syntax. Can't mix operators without a layer of parentheses. */ | 65 /* Bad syntax. Can't mix operators without a layer of parentheses. */ |
| 66 @supports (display: none) and (display: block) or (display: inline) { | 66 @supports (display: none) and (display: block) or (display: inline) { |
| 67 #t13 { background-color: red; } | 67 #t13 { content: "FAIL" } |
| 68 } | 68 } |
| 69 | 69 |
| 70 @supports not (display: deadbeef) and (display: block) { | 70 @supports not (display: deadbeef) and (display: block) { |
| 71 #t14 { background-color: red; } | 71 #t14 { content: "FAIL" } |
| 72 } | 72 } |
| 73 | 73 |
| 74 /* Mix 'n match */ | 74 /* Mix 'n match */ |
| 75 @supports (not (border: 1px 1px 1px 1px 1px solid #000)) and (display: block
) { | 75 @supports (not (border: 1px 1px 1px 1px 1px solid #000)) and (display: block
) { |
| 76 #t15 { background-color: green; } | 76 #t15 { content: "APPLIED" } |
| 77 } | 77 } |
| 78 | 78 |
| 79 @supports (display: block !important) and ((display: inline) or (display: de
adbeef)){ | 79 @supports (display: block !important) and ((display: inline) or (display: de
adbeef)){ |
| 80 #t16 { background-color: green; } | 80 #t16 { content: "APPLIED" } |
| 81 } | 81 } |
| 82 | 82 |
| 83 @supports not ((not (display: block)) or ((display: none) and (deadbeef: 1px
))) { | 83 @supports not ((not (display: block)) or ((display: none) and (deadbeef: 1px
))) { |
| 84 #t17 { background-color: green; } | 84 #t17 { content: "APPLIED" } |
| 85 } | 85 } |
| 86 | 86 |
| 87 /* Whitespace/Syntax */ | 87 /* Whitespace/Syntax */ |
| 88 @supports not( display: deadbeef) { | 88 @supports not( display: deadbeef) { |
| 89 #t22 { background-color: red; } | 89 #t22 { content: "FAIL" } |
| 90 } | 90 } |
| 91 | 91 |
| 92 @supports (display: none)and ( -webkit-transition: all 1s ) { | 92 @supports (display: none)and ( -webkit-transition: all 1s ) { |
| 93 #t23 { background-color: red; } | 93 #t23 { content: "FAIL" } |
| 94 } | 94 } |
| 95 | 95 |
| 96 @supports (display: none)or(-webkit-transition: all 1s) { | 96 @supports (display: none)or(-webkit-transition: all 1s) { |
| 97 #t24 { background-color: red; } | 97 #t24 { content: "FAIL" } |
| 98 } | 98 } |
| 99 | 99 |
| 100 @supports (display: none) or(-webkit-transition: all 1s ) { | 100 @supports (display: none) or(-webkit-transition: all 1s ) { |
| 101 #t25 { background-color: red; } | 101 #t25 { content: "FAIL" } |
| 102 } | 102 } |
| 103 | 103 |
| 104 @supports (((((((display: none))))))) { | 104 @supports (((((((display: none))))))) { |
| 105 #t26 { background-color: green; } | 105 #t26 { content: "APPLIED" } |
| 106 } | 106 } |
| 107 | 107 |
| 108 @supports(((((((display: none))))))) { | 108 @supports(((((((display: none))))))) { |
| 109 #t27 { background-color: green; } | 109 #t27 { content: "APPLIED" } |
| 110 } | 110 } |
| 111 | 111 |
| 112 @supports (!important) { | 112 @supports (!important) { |
| 113 #t28 { background-color: red; } | 113 #t28 { content: "FAIL" } |
| 114 } | 114 } |
| 115 | 115 |
| 116 @supports not not not not (display: none) { | 116 @supports not not not not (display: none) { |
| 117 #t29 { background-color: red; } | 117 #t29 { content: "FAIL" } |
| 118 } | 118 } |
| 119 | 119 |
| 120 /* Functions */ | 120 /* Functions */ |
| 121 | 121 |
| 122 @supports (top: -webkit-calc(80% - 20px)) { | 122 @supports (top: -webkit-calc(80% - 20px)) { |
| 123 #t30 { background-color: green; } | 123 #t30 { content: "APPLIED" } |
| 124 } | 124 } |
| 125 | 125 |
| 126 @supports (background-color: rgb(0, 128, 0)) { | 126 @supports (background-color: rgb(0, 128, 0)) { |
| 127 #t31 { background-color: green; } | 127 #t31 { content: "APPLIED" } |
| 128 } | 128 } |
| 129 | 129 |
| 130 @supports (background: url("/blah")) { | 130 @supports (background: url("/blah")) { |
| 131 #t32 { background-color: green; } | 131 #t32 { content: "APPLIED" } |
| 132 } | 132 } |
| 133 | 133 |
| 134 @supports ((top: -webkit-calc(80% - 20px)) and (not (background-color: rgb(0
, 128, 0)))) or (background: url("/blah")) { | 134 @supports ((top: -webkit-calc(80% - 20px)) and (not (background-color: rgb(0
, 128, 0)))) or (background: url("/blah")) { |
| 135 #t33 { background-color: green; } | 135 #t33 { content: "APPLIED" } |
| 136 } | 136 } |
| 137 | 137 |
| 138 @supports (background: invalid("/blah")) { | 138 @supports (background: invalid("/blah")) { |
| 139 #t34 { background-color: red; } | 139 #t34 { content: "FAIL" } |
| 140 } | 140 } |
| 141 | 141 |
| 142 /* Nesting. */ | 142 /* Nesting. */ |
| 143 @supports (display: none) { | 143 @supports (display: none) { |
| 144 @supports (display: deadbeef) { | 144 @supports (display: deadbeef) { |
| 145 #t18 { background-color: red; } | 145 #t18 { content: "FAIL" } |
| 146 } | 146 } |
| 147 @supports (display: inline) { | 147 @supports (display: inline) { |
| 148 #t19 { background-color: green; } | 148 #t19 { content: "APPLIED" } |
| 149 } | 149 } |
| 150 @supports (display: inline) { | 150 @supports (display: inline) { |
| 151 } | 151 } |
| 152 @media all { | 152 @media all { |
| 153 #t20 { background-color: green; } | 153 #t20 { content: "APPLIED" } |
| 154 @supports (display: inline) { | 154 @supports (display: inline) { |
| 155 #t21 { background-color: green; } | 155 #t21 { content: "APPLIED" } |
| 156 } | 156 } |
| 157 } | 157 } |
| 158 } | 158 } |
| 159 | 159 |
| 160 @media all { | 160 @media all { |
| 161 @supports (display: inline) { | 161 @supports (display: inline) { |
| 162 @media all { | 162 @media all { |
| 163 @supports (display: none) { | 163 @supports (display: none) { |
| 164 #t35 { background-color: green; } | 164 #t35 { content: "APPLIED" } |
| 165 } | 165 } |
| 166 } | 166 } |
| 167 } | 167 } |
| 168 } | 168 } |
| 169 | 169 |
| 170 @media not all { | 170 @media not all { |
| 171 @supports (display: none) { | 171 @supports (display: none) { |
| 172 #t36 { background-color: red; } | 172 #t36 { content: "FAIL" } |
| 173 } | 173 } |
| 174 } | 174 } |
| 175 | 175 |
| 176 /* Invalid syntax error recovery */ | 176 /* Invalid syntax error recovery */ |
| 177 | 177 |
| 178 @supports (display: none); | 178 @supports (display: none); |
| 179 @supports (display: none) and ( (display: none) ) { | 179 @supports (display: none) and ( (display: none) ) { |
| 180 #t37 { background-color: green; } | 180 #t37 { content: "APPLIED" } |
| 181 } | 181 } |
| 182 | 182 |
| 183 @supports (display: none)) ; | 183 @supports (display: none)) ; |
| 184 @supports (display: none) { | 184 @supports (display: none) { |
| 185 #t38 { background-color: green; } | 185 #t38 { content: "APPLIED" } |
| 186 } | 186 } |
| 187 | 187 |
| 188 @supports; | 188 @supports; |
| 189 @supports (display: none) { | 189 @supports (display: none) { |
| 190 #t39 { background-color: green; } | 190 #t39 { content: "APPLIED" } |
| 191 } | 191 } |
| 192 | 192 |
| 193 @supports ; | 193 @supports ; |
| 194 @supports (display: none) { | 194 @supports (display: none) { |
| 195 #t40 { background-color: green; } | 195 #t40 { content: "APPLIED" } |
| 196 } | 196 } |
| 197 | 197 |
| 198 @supports (display: none)) { | 198 @supports (display: none)) { |
| 199 #t41 { background-color: red; } | 199 #t41 { content: "FAIL" } |
| 200 } | 200 } |
| 201 @supports (display: none) { | 201 @supports (display: none) { |
| 202 #t41 { background-color: green; } | 202 #t41 { content: "APPLIED" } |
| 203 } | 203 } |
| 204 | 204 |
| 205 @supports (display: )) { | 205 @supports (display: )) { |
| 206 #t42 { background-color: red; } | 206 #t42 { content: "FAIL" } |
| 207 } | 207 } |
| 208 @supports (display: none) { | 208 @supports (display: none) { |
| 209 #t42 { background-color: green; } | 209 #t42 { content: "APPLIED" } |
| 210 } | 210 } |
| 211 | 211 |
| 212 @supports ((display: none) and { | 212 @supports ((display: none) and { |
| 213 #t43 { background-color: red; } | 213 #t43 { content: "FAIL" } |
| 214 } | 214 } |
| 215 @supports (display: none) { | 215 @supports (display: none) { |
| 216 #t43 { background-color: red; } | 216 #t43 { content: "FAIL" } |
| 217 } | 217 } |
| 218 ); | 218 ); |
| 219 | 219 |
| 220 @supports ((display: none) and ; | 220 @supports ((display: none) and ; |
| 221 @supports (display: none) { | 221 @supports (display: none) { |
| 222 #t44 { background-color: red; } | 222 #t44 { content: "FAIL" } |
| 223 } | 223 } |
| 224 ); | 224 ); |
| 225 | 225 |
| 226 @supports (#(display: none) {} | 226 @supports (#(display: none) {} |
| 227 #t45 { background-color: red; } | 227 #t45 { content: "FAIL" } |
| 228 ); | 228 ); |
| 229 | 229 |
| 230 @supports ((display: none#) {} | 230 @supports ((display: none#) {} |
| 231 #t46 { background-color: red; } | 231 #t46 { content: "FAIL" } |
| 232 ); | 232 ); |
| 233 | 233 |
| 234 @supports (#) or (display: none) { | 234 @supports (#) or (display: none) { |
| 235 #t47 { background-color: green;; } | 235 #t47 { content: "APPLIED"; } |
| 236 } | 236 } |
| 237 | 237 |
| 238 </style> | 238 </style> |
| 239 </head> | 239 </head> |
| 240 <body> | 240 <body> |
| 241 <div id="test_container"></div> | 241 <div id="test_container"></div> |
| 242 | 242 |
| 243 <script> | 243 <script> |
| 244 description("Test the @supports rule."); | 244 description("Test the @supports rule."); |
| 245 var numTests = 48; | 245 var numTests = 48; |
| 246 var untouchedTests = [1, 3, 5, 8, 12, 13, 14, 18, 22, 23, 24, 25, 28, 29, 34
, 36, 43, 44, 45, 46]; // Tests whose content shouldn't change from the UNTOUCHE
D default. | 246 var untouchedTests = [1, 3, 5, 8, 12, 13, 14, 18, 22, 23, 24, 25, 28, 29, 34
, 36, 43, 44, 45, 46]; // Tests whose content shouldn't change from the UNTOUCHE
D default. |
| 247 var UNTOUCHED = "rgb(0, 0, 255)"; | |
| 248 var APPLIED = "rgb(0, 128, 0)"; | |
| 249 | 247 |
| 250 var container = document.getElementById("test_container"); | 248 var container = document.getElementById("test_container"); |
| 251 for (var i=0; i < numTests; i++) { | 249 for (var i=0; i < numTests; i++) { |
| 252 var div = document.createElement("div"); | 250 var div = document.createElement("div"); |
| 253 div.id = "t" + i; | 251 div.id = "t" + i; |
| 254 div.className = "test"; | 252 div.className = "test"; |
| 255 container.appendChild(div); | 253 container.appendChild(div); |
| 256 shouldBeEqualToString("getComputedStyle(document.getElementById('t"+i+"'
)).backgroundColor", untouchedTests.indexOf(i) >= 0 ? UNTOUCHED : APPLIED); | 254 shouldBeEqualToString("getComputedStyle(document.getElementById('t"+i+"'
)).content", untouchedTests.indexOf(i) >= 0 ? '"UNTOUCHED"' : '"APPLIED"'); |
| 257 } | 255 } |
| 258 | 256 |
| 259 test_container.parentNode.removeChild(test_container); | 257 test_container.parentNode.removeChild(test_container); |
| 260 </script> | 258 </script> |
| 261 </body> | 259 </body> |
| 262 </html> | 260 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1977323002:
Revert of Pseudo and non pseudo elements should return correct computed content value (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master