mixin-shadow-dom.html (3084B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Mixins: Shadow DOM</title> 5 <link rel="help" href="https://drafts.csswg.org/css-mixins-1/#defining-mixins"> 6 <link rel="help" href="https://drafts.csswg.org/css-scoping-1/#css-tree-scoped-name"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 </head> 10 <body> 11 12 <style> 13 @mixin --exists-only-outside-shadow() { 14 color: green; 15 } 16 </style> 17 <div id="host1"> 18 <template shadowrootmode="open"> 19 <style> 20 #e1 { 21 color: red; 22 @apply --exists-only-outside-shadow; 23 } 24 </style> 25 <div id="e1">This text should be green.</div> 26 </template> 27 </div> 28 <script> 29 test(() => { 30 let target = document.getElementById('host1').shadowRoot.getElementById('e1'); 31 assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)'); 32 }, 'Style in shadow DOM should have access to outside non-adopted mixins'); 33 </script> 34 35 36 <div id="host2"> 37 <template shadowrootmode="open"> 38 <style> 39 #e2 { 40 color: red; 41 @apply --m1; 42 } 43 </style> 44 <style> 45 @mixin --m1() { 46 color: green; 47 } 48 </style> 49 <div id="e2">This text should be green.</div> 50 </template> 51 </div> 52 <script> 53 test(() => { 54 let target = document.getElementById('host2').shadowRoot.getElementById('e2'); 55 assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)'); 56 }, 'Style in shadow DOM should have access to inside mixins'); 57 </script> 58 59 60 <style> 61 </style> 62 <div id="host3"> 63 <template shadowrootmode="open"> 64 <style> 65 #e3 { 66 color: red; 67 @apply --exists-only-in-adopted; 68 } 69 </style> 70 <div id="e3">This text should be green.</div> 71 </template> 72 </div> 73 <script> 74 test(() => { 75 const sheet = new CSSStyleSheet(); 76 sheet.replaceSync('@mixin --exists-only-in-adopted() { color: green; }'); 77 document.getElementById('host3').shadowRoot.adoptedStyleSheets = [sheet]; 78 79 let target = document.getElementById('host3').shadowRoot.getElementById('e3'); 80 assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)'); 81 }, 'Style in shadow DOM should have access to mixins from adopted stylesheets'); 82 </script> 83 84 85 <div id="host4"> 86 <template shadowrootmode="open"> 87 <style> 88 @mixin --in-shadow() { 89 color: red; 90 } 91 </style> 92 </template> 93 </div> 94 <style> 95 #e4 { 96 color: green; 97 @apply --in-shadow; 98 } 99 </style> 100 <div id="e4">This text should be green.</div> 101 <script> 102 test(() => { 103 let target = document.getElementById('e4'); 104 assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)'); 105 }, 'Style outside shadow DOM should _not_ have access to inside mixins'); 106 </script> 107 108 </body> 109 </html>