| OLD | NEW |
|---|
| 1 <!doctype html> | 1 <!doctype html> |
| 2 <script src="../../../resources/testharness.js"></script> | 2 <script src="../../../resources/testharness.js"></script> |
| 3 <script src="../../../resources/testharnessreport.js"></script> | 3 <script src="../../../resources/testharnessreport.js"></script> |
| 4 <style> | 4 <style> |
| 5 #e { | 5 #e { |
| 6 --green: { | 6 --green: { |
| 7 background-color: green; | 7 background-color: green; |
| 8 }; | 8 }; |
| 9 @apply --green; | 9 @apply --green; |
| 10 | 10 |
| 11 @apply --unknown; | 11 @apply --unknown; |
| 12 --red: { | 12 --red: { |
| 13 background-color: red; | 13 background-color: red; |
| 14 }; | 14 }; |
| 15 @apply--red; | 15 @apply--red; |
| 16 @apply red; | 16 @apply red; |
| 17 @apply(--red); | 17 @apply(--red); |
| 18 @apply --red !important; | 18 @apply --red !important; |
| 19 @apply --red { } | 19 @apply --red { } |
| 20 @apply { background-color: red; } | 20 @apply { background-color: red; } |
| 21 --redvar: --red; | 21 --redvar: --red; |
| 22 @apply var(--redvar); | 22 @apply var(--redvar); |
| 23 | 23 |
| 24 --red2: { background-color: red; } bla ; | 24 --red2: { background-color: red; } bla ; |
| 25 @apply --red2; | 25 @apply --red2; |
| 26 | 26 |
| 27 --var1: @apply; |
| 28 --var2: @apply foo; |
| 29 --var3: @apply --red :/ ; |
| 30 --var4: @apply --red @apply --red; |
| 31 --var5: @apply --red {; |
| 32 |
| 27 width: 100px; | 33 width: 100px; |
| 28 height: 100px; | 34 height: 100px; |
| 29 | 35 |
| 30 animation: anim 0s both; | 36 animation: anim 0s both; |
| 31 } | 37 } |
| 32 | 38 |
| 33 @apply --red; | 39 @apply --red; |
| 34 | 40 |
| 35 @keyframes anim { | 41 @keyframes anim { |
| 36 100% { | 42 100% { |
| 37 @apply --red; | 43 @apply --red; |
| 38 } | 44 } |
| 39 } | 45 } |
| 40 </style> | 46 </style> |
| 41 <div id=e> | 47 <div id=e> |
| 42 </div> | 48 </div> |
| 43 <script> | 49 <script> |
| 44 test(function(){ | 50 test(function(){ |
| 45 assert_equals(getComputedStyle(e).backgroundColor, "rgb(0, 128, 0)"); | 51 assert_equals(getComputedStyle(e).backgroundColor, "rgb(0, 128, 0)"); |
| 52 assert_equals(getComputedStyle(e).getPropertyValue("--var1"), ""); |
| 53 assert_equals(getComputedStyle(e).getPropertyValue("--var2"), ""); |
| 54 assert_equals(getComputedStyle(e).getPropertyValue("--var3"), ""); |
| 55 assert_equals(getComputedStyle(e).getPropertyValue("--var4"), ""); |
| 56 assert_equals(getComputedStyle(e).getPropertyValue("--var5"), ""); |
| 46 }, "Tests various invalid @apply rules get rejected"); | 57 }, "Tests various invalid @apply rules get rejected"); |
| 47 </script> | 58 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1752773003:
Check @apply syntax in custom properties declarations at parse time (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master