percent-height-flex-items-cross-sizes-with-mutations.html (4543B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#layout-algorithm"> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 7 <meta name="assert" content="Tests that the cross size of flexboxes and flex items with % height are computed correctly with various mutations."> 8 <style> 9 .flexbox { 10 display: flex; 11 font: 10px/1 Ahem; 12 outline: 1px solid black; 13 } 14 .grid { 15 display: grid; 16 outline: 1px solid magenta; 17 } 18 .flexbox > div { 19 width: min-content; 20 outline: 1px solid blue; 21 } 22 .percent-height { 23 min-height: 100%; 24 } 25 .fixed-height { 26 height: 100px; 27 } 28 .align-start { 29 align-items: start; 30 } 31 </style> 32 <script src="/resources/testharness.js"></script> 33 <script src="/resources/testharnessreport.js"></script> 34 <script> 35 function mutateContent() { 36 document.querySelectorAll("#one, #two, #three").forEach((element) => { 37 element.innerHTML += " a"; 38 }); 39 40 document.querySelector("#four").style.width = "auto"; 41 document.querySelector("#five").style.height = "auto"; 42 document.querySelector("#six").style.height = "100px"; 43 44 document.querySelectorAll("#seven, #eight").forEach((element) => { 45 element.style.alignItems = "start"; 46 }); 47 } 48 </script> 49 </head> 50 <body> 51 52 <!-- Non-percent height flex item is mutated and percent height flex item should be 53 stretched up. --> 54 <div class="flexbox test" data-expected-height="40"> 55 <div id="one" class="test" data-expected-height="40">a a a</div> 56 <div class="percent-height test" data-expected-height="40">a</div> 57 </div> 58 59 <!-- Non-percent height flex item content is mutated and should be stretched to percent 60 height flex item's size. --> 61 <div class="flexbox test" data-expected-height="40"> 62 <div id="two" class="min-content percent-height test" data-expected-height="40">a a a</div> 63 <div class="test" data-expected-height="40">a</div> 64 </div> 65 66 <!-- Percent height flex item content is mutated and increased flexbox's cross axis size. --> 67 <div class="flexbox test" data-expected-height="30"> 68 <div class="min-content percent-height test" data-expected-height="30">a a a</div> 69 <div id="three" data-expected-height="30">a</div> 70 </div> 71 72 <!-- Percent height flex item's main axis size changes from min-content to auto which 73 should result in different cross size. --> 74 <div class="flexbox test" data-expected-height="10"> 75 <div class="min-content percent-height test" id="four" data-expected-height="10">a a a</div> 76 </div> 77 78 <!-- Flexbox with align-items: flex-start changes from definite to indefinite cross size 79 which results in different hypothetical cross size for flex item.--> 80 <div class="flexbox fixed-height align-start test" id="five" data-expected-height="30"> 81 <div class="min-content percent-height test" data-expected-height="30">a a a</div> 82 <div class="test" data-expected-height="10">a</div> 83 </div> 84 85 86 <!-- Flexbox with align-items: flex-start changes from indefinite to definite cross size 87 which results in different hypothetical cross size for the flex item. --> 88 <div class="flexbox align-start test" id="six" data-expected-height="100"> 89 <div class="min-content percent-height test" data-expected-height="100">a a a</div> 90 </div> 91 92 <!-- Outer flexbox goes from stretching its content to no longer stretching with a 93 definite cross size. The inner flexbox is no longer stretching which affects the 94 hypothetical cross axis size of its flex item. --> 95 <div class="flexbox fixed-height test" id="seven" data-expected-height="100""> 96 <div class="flexbox align-start test" data-expected-height="30"> 97 <div class="min-content percent-height test" data-expected-height="30">a a a</div> 98 </div> 99 </div> 100 101 <!-- Grid goes from stretching its content to no longer stretching with a definite cross 102 size. The flexbox is no longer stretching which affects the hypothetical cross axis 103 size of tis flex item.--> 104 <div class="grid fixed-height test" id="eight" data-expected-height="100"> 105 <div class="flexbox align-start test" data-expected-height="30"> 106 <div class="min-content percent-height test" data-expected-height="30">a a a</div> 107 </div> 108 </div> 109 110 </body> 111 <script> 112 document.body.offsetHeight; 113 mutateContent(); 114 document.body.offsetHeight; 115 116 let tests = document.querySelectorAll(".test"); 117 tests.forEach((element) => { 118 test(function() { 119 let expectedHeight = element.getAttribute("data-expected-height"); 120 assert_equals(element.offsetHeight, Number(expectedHeight), "height"); 121 }); 122 }); 123 </script> 124 </html>