grid-gutters-and-flex-content-001.html (5634B)
1 <!DOCTYPE html> 2 <title>CSS Grid: grid gutters and flex content.</title> 3 <link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/> 4 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#gutters"/> 5 <meta name="assert" content="Check that gutters do not interfere with flex content resolution for columns or with content sized tracks."/> 6 <link rel="stylesheet" href="/css/support/grid.css"/> 7 <link rel="stylesheet" href="/css/support/width-keyword-classes.css"/> 8 <link rel="stylesheet" href="/css/support/alignment.css"> 9 <link rel="stylesheet" href="/fonts/ahem.css" type="text/css"/> 10 <style> 11 .gridPercentAndFlexContent { grid-template: 50px / 50% minmax(30px, 2fr); } 12 .gridTwoDoubleMaxFlexContent { grid-template: 50px / minmax(10px, 0.5fr) minmax(10px, 2fr); } 13 .gridIgnoreSecondGridItem { grid-template: 50px / minmax(300px, 3fr) minmax(150px, 1fr); } 14 15 .gridRowsPercentAndFlexContent { grid-template: minmax(30px, 2fr) 50% / 50px; } 16 .gridRowsTwoMaxFlexContent { grid-template: minmax(10px, 1fr) minmax(10px, 2fr) / 50px; } 17 .gridRowsTwoDoubleMaxFlexContent { grid-template: minmax(10px, 0.5fr) minmax(10px, 2fr) / 50px; } 18 19 .gridMinContentAndMinMaxFixedMinContentAndFlex { grid-template-columns: min-content minmax(20px, min-content) 2fr; } 20 .gridMaxContentAndMinMaxFixedMaxContentAndFlex { grid-template-columns: max-content minmax(20px, max-content) 1fr; } 21 22 div.grid > div { font: 10px/1 Ahem; } 23 24 .gridRowColumnGaps { 25 grid-row-gap: 33px; 26 grid-column-gap: 19px; 27 } 28 </style> 29 30 <script src="/resources/testharness.js"></script> 31 <script src="/resources/testharnessreport.js"></script> 32 <script src="/resources/check-layout-th.js"></script> 33 <script type="text/javascript"> 34 setup({ explicit_done: true }); 35 </script> 36 37 <body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> 38 39 <!-- Check that gutters do not interfere with flex content resolution for columns --> 40 41 <div style="width: 120px; height: 10px;"> 42 <div class="grid gridTwoDoubleMaxFlexContent gridRowColumnGaps" data-expected-width="120" data-expected-height="50"> 43 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="20" data-expected-height="50"></div> 44 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="81" data-expected-height="50"></div> 45 </div> 46 </div> 47 48 <div style="width: 570px; height: 10px;"> 49 <div class="grid gridIgnoreSecondGridItem gridRowColumnGaps" data-expected-width="570" data-expected-height="50"> 50 <div class="firstRowFirstColumn" data-expected-width="401" data-expected-height="50"></div> 51 <div class="firstRowSecondColumn" data-expected-width="150" data-expected-height="50"></div> 52 </div> 53 </div> 54 55 <div style="width: 120px; height: 10px;"> 56 <div class="grid gridPercentAndFlexContent gridRowColumnGaps" data-expected-width="120" data-expected-height="50"> 57 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="60" data-expected-height="50"></div> 58 <div class="firstRowSecondColumn" data-expected-width="41" data-expected-height="50"></div> 59 </div> 60 </div> 61 62 <!-- Check that gutters do not interfere with flex content resolution for rows --> 63 64 <div style="width: 10px; height: 60px"> 65 <div class="grid gridRowsTwoMaxFlexContent gridRowColumnGaps" style="height: 100%" data-expected-width="10" data-expected-height="60"> 66 <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div> 67 <div class="secondRowFirstColumn" data-expected-width="50" data-expected-height="17"></div> 68 </div> 69 </div> 70 71 <div style="width: 10px; height: 60px"> 72 <div class="grid gridRowsTwoDoubleMaxFlexContent gridRowColumnGaps" data-expected-width="10" data-expected-height="63"> 73 <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div> 74 <div class="secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div> 75 </div> 76 </div> 77 78 <div style="width: 10px;"> 79 <div class="grid gridRowsPercentAndFlexContent gridRowColumnGaps" style="height: 150px" data-expected-width="10" data-expected-height="150"> 80 <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="42"></div> 81 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="75"></div> 82 </div> 83 </div> 84 85 <!-- Check that gutters do not interfere with flex content resolution with content sized tracks --> 86 87 <div style="position: relative; width: 100px;"> 88 <div class="grid gridMinContentAndMinMaxFixedMinContentAndFlex gridRowColumnGaps" data-expected-width="100" data-expected-height="149"> 89 <div style="grid-column: 2 / span 2;" data-expected-width="80">XXXXX</div> 90 <div style="grid-column: 1 / -1; grid-row: 2;" data-expected-width="100">XXX XXX XXX</div> 91 <div style="grid-column: 1 / span 2; grid-row: 3;" data-expected-width="40">XXXX XXXX</div> 92 <div style="grid-column: 1; grid-row: 4;" data-expected-width="1" data-expected-height="0"></div> 93 </div> 94 </div> 95 96 <div style="position: relative; width: 100px;"> 97 <div class="grid gridMaxContentAndMinMaxFixedMaxContentAndFlex gridRowColumnGaps" data-expected-width="100" data-expected-height="139"> 98 <div style="grid-column: 2 / span 2;" data-expected-width="39">XX</div> 99 <div style="grid-column: 1 / -1; grid-row: 2;" data-expected-width="109">XXX XXX XXX</div> 100 <div style="grid-column: 1 / span 2; grid-row: 3;" data-expected-width="90">XXXX XXXX</div> 101 <div style="grid-column: 1; grid-row: 4;" data-expected-width="51" data-expected-height="0"></div> 102 </div> 103 </div> 104 105 </body>