grid-align-content.html (11312B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout test: align-content property</title> 4 <link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> 6 <link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distribution"> 7 <meta name="assert" content="This test checks that the align-content property is applied correctly in both directions RTL and LTR."> 8 <meta name="flags" content="ahem"> 9 <link rel="stylesheet" href="/css/support/grid.css"> 10 <link rel="stylesheet" href="/css/support/alignment.css"> 11 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 12 13 <style> 14 body { 15 margin: 0; 16 } 17 18 .grid { 19 grid: 100px 100px / 50px 50px; 20 position: relative; 21 width: 200px; 22 height: 300px; 23 } 24 25 .verticalGrid { 26 width: 300px; 27 height: 200px; 28 } 29 30 .cell { 31 width: 20px; 32 height: 40px; 33 } 34 </style> 35 36 <script src="/resources/testharness.js"></script> 37 <script src="/resources/testharnessreport.js"></script> 38 <script src="/resources/check-layout-th.js"></script> 39 <script type="text/javascript"> 40 setup({ explicit_done: true }); 41 </script> 42 43 <body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> 44 45 <div style="position: relative"> 46 <p>direction: LTR | align-content: 'center'</p> 47 <div class="grid alignContentCenter" data-expected-width="200" data-expected-height="300"> 48 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div> 49 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div> 50 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div> 51 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="150" data-expected-width="20" data-expected-height="40"></div> 52 </div> 53 </div> 54 55 <div style="position: relative"> 56 <p>direction: LTR | align-content: 'left'</p> 57 <div class="grid alignContentLeft" data-expected-width="200" data-expected-height="300"> 58 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 59 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> 60 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> 61 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> 62 </div> 63 </div> 64 65 <div style="position: relative"> 66 <p>direction: LTR | align-content: 'right'</p> 67 <div class="grid alignContentRight" data-expected-width="200" data-expected-height="300"> 68 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 69 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> 70 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> 71 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> 72 </div> 73 </div> 74 75 <div style="position: relative"> 76 <p>direction: LTR | align-content: 'start'</p> 77 <div class="grid alignContentStart" data-expected-width="200" data-expected-height="300"> 78 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 79 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> 80 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> 81 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> 82 </div> 83 </div> 84 85 <div style="position: relative"> 86 <p>direction: LTR | align-content: 'end'</p> 87 <div class="grid alignContentEnd" data-expected-width="200" data-expected-height="300"> 88 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> 89 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> 90 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div> 91 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div> 92 </div> 93 </div> 94 95 <div style="position: relative"> 96 <p>direction: LTR | align-content: 'flex-start'</p> 97 <div class="grid alignContentFlexStart" data-expected-width="200" data-expected-height="300"> 98 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 99 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> 100 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> 101 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> 102 </div> 103 </div> 104 105 <div style="position: relative"> 106 <p>direction: LTR | align-content: 'flex-end</p> 107 <div class="grid alignContentFlexEnd" data-expected-width="200" data-expected-height="300"> 108 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> 109 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> 110 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div> 111 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div> 112 </div> 113 </div> 114 115 <!-- Default alignment and initial values. --> 116 <div style="position: relative"> 117 <p>direction: LTR | align-content: 'auto' (resolved to 'start')</p> 118 <div class="grid" data-expected-width="200" data-expected-height="300"> 119 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 120 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> 121 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> 122 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> 123 </div> 124 </div> 125 126 <!-- RTL direction. --> 127 <div style="position: relative"> 128 <p>direction: RTL | align-content: 'center'</p> 129 <div class="grid directionRTL alignContentCenter" data-expected-width="200" data-expected-height="300"> 130 <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div> 131 <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div> 132 <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div> 133 <div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="150" data-expected-width="20" data-expected-height="40"></div> 134 </div> 135 </div> 136 137 <div style="position: relative"> 138 <p>direction: RTL | align-content: 'left'</p> 139 <div class="grid directionRTL alignContentLeft" data-expected-width="200" data-expected-height="300"> 140 <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 141 <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> 142 <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> 143 <div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> 144 </div> 145 </div> 146 147 <div style="position: relative"> 148 <p>direction: RTL | align-content: 'right'</p> 149 <div class="grid directionRTL alignContentRight" data-expected-width="200" data-expected-height="300"> 150 <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 151 <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> 152 <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> 153 <div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> 154 </div> 155 </div> 156 157 <div style="position: relative"> 158 <p>direction: RTL | align-content: 'start'</p> 159 <div class="grid directionRTL alignContentStart" data-expected-width="200" data-expected-height="300"> 160 <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 161 <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> 162 <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> 163 <div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> 164 </div> 165 </div> 166 167 <div style="position: relative"> 168 <p>direction: RTL | align-content: 'end'</p> 169 <div class="grid directionRTL alignContentEnd" data-expected-width="200" data-expected-height="300"> 170 <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> 171 <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> 172 <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div> 173 <div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div> 174 </div> 175 </div> 176 177 </body>