container-units-shadow.html (1499B)
1 <!doctype html> 2 <title>Container Relative Units: Shadow DOM</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-lengths"> 4 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-queries"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="support/cq-testcommon.js"></script> 8 <style> 9 #outer { 10 container-type: size; 11 width: 200px; 12 height: 200px; 13 } 14 #direct { 15 container-type: inline-size; 16 width: 50cqw; 17 height: 50cqh; 18 } 19 #nondirect { 20 width: 10cqw; 21 height: 10cqh; 22 background: green; 23 } 24 </style> 25 <div id=outer> 26 <div> 27 <template shadowrootmode="open"> 28 <style> 29 #inner { 30 container-type: size; 31 width: 30px; 32 height: 30px; 33 } 34 </style> 35 <div id=inner> 36 <slot></slot> 37 </div> 38 </template> 39 <div> 40 <div id=direct> 41 <div id=nondirect> 42 </div> 43 </div> 44 </div> 45 </div> 46 </div> 47 <script> 48 setup(() => { 49 assert_implements_size_container_queries(); 50 }); 51 52 test(() => { 53 let cs = getComputedStyle(direct); 54 assert_equals(cs.width, '15px'); 55 assert_equals(cs.height, '15px'); 56 }, 'Direct slotted child queries flat tree'); 57 58 test(() => { 59 let cs = getComputedStyle(nondirect); 60 assert_equals(cs.width, '1.5px'); 61 assert_equals(cs.height, '3px'); 62 }, 'Nondirect slotted child queries flat tree ancestors'); 63 </script>