display-contents.html (2476B)
1 <!doctype html> 2 <title>@container and display:contents</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#size-container"> 4 <link rel="help" href="https://drafts.csswg.org/css-contain-2/#containment-size"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="support/cq-testcommon.js"></script> 8 <script> 9 setup(() => assert_implements_size_container_queries()); 10 </script> 11 <style> 12 .container { 13 container-type: inline-size; 14 width: 30px; 15 height: 30px; 16 background: tomato; 17 } 18 .big { 19 width: 50px; 20 height: 50px; 21 background: skyblue; 22 } 23 .contents { 24 display: contents; 25 } 26 27 @container (width: 30px) { 28 .target { --x:30; } 29 } 30 31 @container (width: 50px) { 32 .target { --x:50; } 33 } 34 35 main { 36 display: flex; 37 flex-wrap: wrap; 38 } 39 40 </style> 41 42 <main> 43 <!-- Container is display:contents --> 44 <div class="container contents"> 45 <div> 46 <div class="target" id=target1></div> 47 </div> 48 </div> 49 <script> 50 test(function() { 51 let s = getComputedStyle(target1); 52 assert_equals(s.getPropertyValue('--x'), ''); 53 }, 'getComputedStyle when container is display:contents'); 54 </script> 55 56 <!-- Container becomes display:contents --> 57 <div id=container2 class="container"> 58 <div> 59 <div class="target" id=target2></div> 60 </div> 61 </div> 62 <script> 63 test(function() { 64 let s = getComputedStyle(target2); 65 assert_equals(s.getPropertyValue('--x'), '30'); 66 container2.classList.add('contents'); 67 assert_equals(s.getPropertyValue('--x'), ''); 68 container2.classList.remove('contents'); 69 assert_equals(s.getPropertyValue('--x'), '30'); 70 }, 'getComputedStyle when container becomes display:contents'); 71 </script> 72 73 <!-- Intermediate container becomes display:contents --> 74 <div class="container"> 75 <div> 76 <div id=container3 class="container"> 77 <div> 78 <div class="target" id=target3></div> 79 </div> 80 </div> 81 </div> 82 </div> 83 <script> 84 test(function() { 85 let s = getComputedStyle(target3); 86 assert_equals(s.getPropertyValue('--x'), '30'); 87 container3.classList.add('contents'); 88 assert_equals(s.getPropertyValue('--x'), ''); 89 container3.classList.remove('contents'); 90 assert_equals(s.getPropertyValue('--x'), '30'); 91 }, 'getComputedStyle when intermediate container becomes display:contents'); 92 </script> 93 </main>