mixin-invalidation.tentative.html (2542B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Mixins: Invalidation after CSSOM changes</title> 5 <link rel="help" href="https://drafts.csswg.org/css-mixins/#cssom"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 @mixin --m1() { 10 color: red; 11 & { 12 --foo: bar; 13 } 14 } 15 @mixin --m2() { 16 color: red; 17 } 18 #target1 { 19 @apply --m1; 20 } 21 </style> 22 <style> 23 #target2 { 24 @apply --m2; 25 } 26 </style> 27 <style> 28 @mixin --m3() { 29 color: green; 30 } 31 #target3 { 32 color: red; 33 } 34 </style> 35 </head> 36 <body> 37 <div id="target1">Some text.</div> 38 <div id="target2">Some text.</div> 39 <div id="target3">Some text.</div> 40 <script> 41 test(() => { 42 let ss = document.styleSheets[0]; 43 assert_equals(ss.cssRules[0].name, '--m1'); 44 assert_equals(ss.cssRules[0].cssRules.length, 2); 45 let target = document.getElementById('target1'); 46 47 assert_equals(getComputedStyle(target).color, 'rgb(255, 0, 0)'); 48 ss.cssRules[0].cssRules[1].style.color = 'green'; 49 assert_equals(ss.cssRules[0].cssText, 50 `@mixin --m1() { 51 color: red; 52 & { --foo: bar; color: green; } 53 }`); 54 assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)'); 55 }, 'invalidation of @mixin from same stylesheet'); 56 57 test(() => { 58 let ss = document.styleSheets[0]; 59 assert_equals(ss.cssRules[1].name, '--m2'); 60 let target = document.getElementById('target2'); 61 62 assert_equals(getComputedStyle(target).color, 'rgb(255, 0, 0)'); 63 ss.cssRules[1].cssRules[0].style.color = 'green'; 64 assert_equals(ss.cssRules[1].cssText, 65 `@mixin --m2() { 66 color: green; 67 }`); 68 assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)'); 69 }, 'invalidation of @mixin from different stylesheet'); 70 71 test(() => { 72 let ss = document.styleSheets[2]; 73 let target = document.getElementById('target3'); 74 75 assert_equals(getComputedStyle(target).color, 'rgb(255, 0, 0)'); 76 ss.cssRules[1].insertRule('@apply --m3;'); 77 assert_equals(ss.cssRules[1].cssText, 78 `#target3 { 79 color: red; 80 @apply --m3; 81 }`); 82 assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)'); 83 }, 'invalidation on adding @apply rule'); 84 </script> 85 </body> 86 </html>