grid-extrinsically-sized-mutations.html (3386B)
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-grid-2/#layout-algorithm"> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 7 <meta name="assert" content="Tests that an extrinsically sized grid responds to various changes to both the grid and its constraints."> 8 <style> 9 .container { 10 width: 50px; 11 } 12 .grid { 13 display: grid; 14 grid-template-columns: 100%; 15 grid-template-rows: 50px; 16 height: 50px; 17 outline: 1px solid blue; 18 font: 10px/1 Ahem; 19 } 20 21 .alignStart { 22 align-items: start; 23 } 24 25 .fixedHeight { 26 height: 100px; 27 } 28 29 .percentHeight { 30 height: 100%; 31 } 32 33 .percentRow { 34 grid-template-rows: 100%; 35 } 36 </style> 37 <script src="/resources/testharness.js"></script> 38 <script src="/resources/testharnessreport.js"></script> 39 <script> 40 function mutateContent() { 41 document.getElementById("one").style.width = "10px"; 42 document.getElementById("two").style.alignItems = "stretch"; 43 document.getElementById("three").style.gridTemplateRows = "30px"; 44 document.getElementById("four").style.height = "10px"; 45 document.getElementById("five").innerHTML += " x x x x x x"; 46 document.getElementById("six").style.height = "50px"; 47 document.getElementById("seven").style.gridTemplateColumns = "20%"; 48 49 document.getElementById("eight").innerHTML += "<div class='test' data-expected-height='40'>x x x x</div>"; 50 } 51 </script> 52 </head> 53 <body> 54 55 <!-- Inline constraint on the grid changes --> 56 <div class="container" id="one"> 57 <div class="grid alignStart"> 58 <div class="test" data-expected-height="40">x x x x</div> 59 </div> 60 </div> 61 62 <!-- Alignment of grid items changes --> 63 <div class="container"> 64 <div id="two" class="grid alignStart"> 65 <div class="test" data-expected-height="50">x x x</div> 66 </div> 67 </div> 68 69 <!-- grid-template-rows changes to different fixed size. --> 70 <div id="three" class="grid"> 71 <div class="test" data-expected-height="30">xx</div> 72 </div> 73 74 <!-- Grid block size changes with % based rows --> 75 <div id="four" class="grid percentRow"> 76 <div class="test" data-expected-height="10">xx</div> 77 </div> 78 79 <!-- Grid item content changes --> 80 <div class="container"> 81 <div class="grid alignStart"> 82 <div id="five" class="test" data-expected-height="30">x x x</div> 83 </div> 84 </div> 85 86 <!-- Grid with % height and rows has fixed block constraint changed --> 87 <div class="container fixedHeight" id="six"> 88 <div class="grid percentRow percentHeight"> 89 <div class="test" data-expected-height="50">xx</div> 90 </div> 91 </div> 92 93 <!-- grid-template-columns changes to different % value --> 94 <div class="container"> 95 <div id="seven" class="grid alignStart"> 96 <div class="test" data-expected-height="30">x x x</div> 97 </div> 98 </div> 99 100 <!-- Grid has new item added --> 101 <div class="container"> 102 <div id="eight" class="grid alignStart" style="grid-template-columns: 50% 50%;"> 103 <div>xx xx</div> 104 </div> 105 </div> 106 </body> 107 <script> 108 setup({ explicit_done: true }); 109 document.fonts.ready.then(() => { 110 document.body.offsetHeight; 111 mutateContent(); 112 document.body.offsetHeight; 113 114 let tests = document.querySelectorAll(".test"); 115 tests.forEach((element) => { 116 test(function() { 117 let expectedHeight = element.getAttribute("data-expected-height"); 118 assert_equals(element.offsetHeight, Number(expectedHeight), "height"); 119 }); 120 }); 121 done(); 122 }) 123 </script> 124 </html>