contain-size-grid-006.html (3245B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Test: 'contain: size' on grid elements should cause them to be sized as if they had no contents.</title> 6 <link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> 7 <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size"> 8 <style> 9 .grid { 10 display: inline-grid; 11 contain: size; 12 border: 5px solid green; 13 background: lightblue; 14 } 15 .item { 16 color: transparent; 17 grid-column: 1 / -1; 18 grid-row: 1 / -1; 19 height: 100px; 20 width: 100px; 21 } 22 .min-size { 23 min-height: 55px; 24 min-width: 55px; 25 } 26 .max-size { 27 max-height: 70px; 28 max-width: 70px; 29 } 30 .auto-tracks { 31 grid-template-columns: auto auto; 32 grid-template-rows: auto auto; 33 } 34 .fixed-tracks { 35 grid-template-columns: 70px 30px; 36 grid-template-rows: 30px 70px; 37 } 38 .fr-tracks { 39 grid-template-columns: 1fr 2fr; 40 grid-template-rows: 2fr 1fr; 41 } 42 .auto-repeat-tracks { 43 grid-template-columns: repeat(auto-fill, 40px); 44 grid-template-rows: repeat(auto-fill, 40px); 45 } 46 </style> 47 <script src="/resources/testharness.js"></script> 48 <script src="/resources/testharnessreport.js"></script> 49 <script src="/resources/check-layout-th.js"></script> 50 </head> 51 <body onload="checkLayout('.grid')"> 52 <div id="log"></div> 53 54 <div class="grid auto-tracks" data-expected-height="10" data-expected-width="10"><div class="item"></div></div> 55 <div class="grid min-size auto-tracks" data-expected-height="65" data-expected-width="65"><div class="item"></div></div> 56 <div class="grid max-size auto-tracks" data-expected-height="10" data-expected-width="10"><div class="item"></div></div> 57 <div class="grid min-size max-size auto-tracks" data-expected-height="65" data-expected-width="65"><div class="item"></div></div> 58 59 <div class="grid fixed-tracks" data-expected-height="110" data-expected-width="110"><div class="item"></div></div> 60 <div class="grid min-size fixed-tracks" data-expected-height="110" data-expected-width="110"><div class="item"></div></div> 61 <div class="grid max-size fixed-tracks" data-expected-height="80" data-expected-width="80"><div class="item"></div></div> 62 <div class="grid min-size max-size fixed-tracks" data-expected-height="80" data-expected-width="80"><div class="item"></div></div> 63 64 <div class="grid fr-tracks" data-expected-height="10" data-expected-width="10"><div class="item"></div></div> 65 <div class="grid min-size fr-tracks" data-expected-height="65" data-expected-width="65"><div class="item"></div></div> 66 <div class="grid max-size fr-tracks" data-expected-height="10" data-expected-width="10"><div class="item"></div></div> 67 <div class="grid min-size max-size fr-tracks" data-expected-height="65" data-expected-width="65"><div class="item"></div></div> 68 69 <div class="grid auto-repeat-tracks" data-expected-height="50" data-expected-width="50"><div class="item"></div></div> 70 <div class="grid min-size auto-repeat-tracks" data-expected-height="90" data-expected-width="90"><div class="item"></div></div> 71 <div class="grid max-size auto-repeat-tracks" data-expected-height="50" data-expected-width="50"><div class="item"></div></div> 72 <div class="grid min-size max-size auto-repeat-tracks" data-expected-height="65" data-expected-width="65"><div class="item"></div></div> 73 </body> 74 </html>