grid-size-shrink-to-fit-001.html (2414B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Grid: shrink-to-fit behavior on grid containers</title> 4 <link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.org"> 5 <link rel="help" href="https://drafts.csswg.org/css-grid/#intrinsic-sizes"> 6 <link rel="help" href="https://crbug.com/234204"> 7 <meta name="assert" content="This test checks that the shrink-to-fit behavior is applied to the float and out-of-flow positioned grid containers."> 8 <style> 9 .grid { 10 display: grid; 11 grid-template-columns: 200px 200px; 12 grid-template-rows: 200px 200px; 13 } 14 .container { 15 width: 600px; 16 height: 600px; 17 } 18 19 #absolutePos { 20 position: absolute; 21 } 22 23 #fixedPos { 24 position: fixed; 25 } 26 27 #floatPos { 28 float: left; 29 } 30 31 #one { 32 color: blue; 33 background: red; 34 grid-column: 1; 35 grid-row: 1; 36 } 37 38 #two { 39 color: yellow; 40 background: green; 41 grid-column: 2; 42 grid-row: 1; 43 } 44 #three { 45 color: gray; 46 background: pink; 47 grid-column: 1; 48 grid-row: 2; 49 } 50 #four { 51 color: orange; 52 background: brown; 53 grid-column: 2; 54 grid-row: 2; 55 } 56 </style> 57 <script src="/resources/testharness.js"></script> 58 <script src="/resources/testharnessreport.js"></script> 59 <script src="/resources/check-layout-th.js"></script> 60 <body onload="checkLayout('.grid')"> 61 62 <p>The following grids should be 400px * 400px, except the first one which uses 'relative' positioning.</p> 63 64 <div class="container"> 65 <div class="grid" id="regularGrid" data-expected-height="400" data-expected-width="600"> 66 <div id="one"></div> 67 <div id="two"></div> 68 <div id="three"></div> 69 <div id="four"></div> 70 </div> 71 </div> 72 73 <div class="container"> 74 <div class="grid" id="absolutePos" data-expected-height="400" data-expected-width="400"> 75 <div id="one"></div> 76 <div id="two"></div> 77 <div id="three"></div> 78 <div id="four"></div> 79 </div> 80 </div> 81 82 <div class="container"> 83 <div class="grid" id="fixedPos" data-expected-height="400" data-expected-width="400"> 84 <div id="one"></div> 85 <div id="two"></div> 86 <div id="three"></div> 87 <div id="four"></div> 88 </div> 89 </div> 90 91 <div class="container"> 92 <div class="grid" id="floatPos" data-expected-height="400" data-expected-width="400"> 93 <div id="one"></div> 94 <div id="two"></div> 95 <div id="three"></div> 96 <div id="four"></div> 97 </div> 98 </div> 99 100 </body> 101 </html>