sibling-layout-dependency.html (3516B)
1 <!doctype html> 2 <title>@container-dependent styles respond to layout changes</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 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="support/cq-testcommon.js"></script> 9 <script> 10 setup(() => assert_implements_size_container_queries()); 11 </script> 12 <style> 13 14 @container (width: 10px) { .affected { --x:10; } } 15 @container (width: 20px) { .affected { --x:20; } } 16 17 .flex { 18 display: flex; 19 height: 30px; 20 width: 30px; 21 } 22 23 .container { 24 container-type: size; 25 flex: 1; 26 background: tomato; 27 } 28 29 .sibling { 30 background-color: skyblue; 31 } 32 .w10 { 33 width: 10px; 34 } 35 .ahem { font: 5px Ahem; } 36 37 /* The following is just to make the results more human-readable. */ 38 main { 39 display: flex; 40 flex-wrap: wrap; 41 } 42 43 </style> 44 45 <main> 46 <!-- A sibling of the container gets a layout-affecting style change --> 47 <div class=flex> 48 <div class=container> 49 <div> 50 <div> 51 <div class=affected id=target1></div> 52 </div> 53 </div> 54 </div> 55 <div class="sibling w10" id=sibling1></div> 56 </div> 57 <script> 58 test(function() { 59 let cs = getComputedStyle(target1); 60 assert_equals(cs.getPropertyValue('--x'), '20'); 61 62 sibling1.style.width = '20px'; 63 assert_equals(cs.getPropertyValue('--x'), '10'); 64 }, 'Sibling style mutation'); 65 </script> 66 67 <!-- A sibling of the container gets a layout-affecting style change 68 affecting the parent of the gCS target --> 69 <div class=flex> 70 <div class=container> 71 <div> 72 <div class=affected id=parent2> 73 <div id=target2></div> 74 </div> 75 </div> 76 </div> 77 <div class="sibling w10" id=sibling2></div> 78 </div> 79 <script> 80 test(function() { 81 let cs = getComputedStyle(target2); 82 assert_equals(cs.getPropertyValue('--x'), '20'); 83 84 sibling2.style.width = '20px'; 85 assert_equals(cs.getPropertyValue('--x'), '10'); 86 }, 'Sibling style mutation, parent is affected'); 87 </script> 88 89 <!-- A sibling of the container gets a layout-affecting style change 90 affecting an ancestor of the gCS target --> 91 <div class=flex> 92 <div class=container> 93 <div class=affected id=ancestor3> 94 <div> 95 <div id=target3></div> 96 </div> 97 </div> 98 </div> 99 <div class="sibling w10" id=sibling3></div> 100 </div> 101 <script> 102 test(function() { 103 let cs = getComputedStyle(target3); 104 assert_equals(cs.getPropertyValue('--x'), '20'); 105 106 sibling3.style.width = '20px'; 107 assert_equals(cs.getPropertyValue('--x'), '10'); 108 }, 'Sibling style mutation, ancestor is affected'); 109 </script> 110 111 <!-- A sibling of the container needs layout via text mutation --> 112 <div class=flex> 113 <div class=container> 114 <div> 115 <div> 116 <div class=affected id=target4></div> 117 </div> 118 </div> 119 </div> 120 <div class="sibling ahem" id=sibling4>XX</div> 121 </div> 122 <script> 123 promise_test(async function() { 124 await document.fonts.ready; 125 126 let cs = getComputedStyle(target4); 127 assert_equals(cs.getPropertyValue('--x'), '20'); 128 129 sibling4.textContent = 'XXXX'; 130 assert_equals(cs.getPropertyValue('--x'), '10'); 131 }, 'Sibling text mutation'); 132 </script> 133 134 </main>