| OLD | NEW |
| 1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> | 1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <link href="resources/grid.css" rel="stylesheet"> | 4 <link href="resources/grid.css" rel="stylesheet"> |
| 5 <style> | 5 <style> |
| 6 .grid { | 6 .grid { |
| 7 grid-template-rows: 5px; | 7 grid-template-rows: 5px; |
| 8 grid-template-columns: 10px; | 8 grid-template-columns: 10px; |
| 9 } | 9 } |
| 10 | 10 |
| (...skipping 13 matching lines...) Expand all Loading... |
| 24 grid-auto-columns: max-content; | 24 grid-auto-columns: max-content; |
| 25 } | 25 } |
| 26 </style> | 26 </style> |
| 27 </head> | 27 </head> |
| 28 <script src="../../resources/check-layout.js"></script> | 28 <script src="../../resources/check-layout.js"></script> |
| 29 <body onload="checkLayout('.grid');"> | 29 <body onload="checkLayout('.grid');"> |
| 30 | 30 |
| 31 <div>This test checks that grid rows / columns created via the auto-placement al
gorithm do follow, grid-auto-{rows|columns}.</div> | 31 <div>This test checks that grid rows / columns created via the auto-placement al
gorithm do follow, grid-auto-{rows|columns}.</div> |
| 32 | 32 |
| 33 <div class="unconstrainedContainer" style="position: relative"> | 33 <div class="unconstrainedContainer" style="position: relative"> |
| 34 <div class="grid gridAutoFixedFixed gridAutoFlowRow"> | 34 <div class="grid gridAutoFixedFixed gridAutoFlowRowDense"> |
| 35 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-
offset-y="0" data-expected-width="50" data-expected-height="5">XXXXX XXXXXX</div
> | 35 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-
offset-y="0" data-expected-width="50" data-expected-height="5">XXXXX XXXXXX</div
> |
| 36 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> | 36 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> |
| 37 </div> | 37 </div> |
| 38 </div> | 38 </div> |
| 39 | 39 |
| 40 <div class="unconstrainedContainer" style="position: relative"> | 40 <div class="unconstrainedContainer" style="position: relative"> |
| 41 <div class="grid gridAutoFixedFixed gridAutoFlowColumn"> | 41 <div class="grid gridAutoFixedFixed gridAutoFlowColumnDense"> |
| 42 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-o
ffset-y="5" data-expected-width="10" data-expected-height="30">XXXXX XXXXXX</div
> | 42 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-o
ffset-y="5" data-expected-width="10" data-expected-height="30">XXXXX XXXXXX</div
> |
| 43 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> | 43 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> |
| 44 </div> | 44 </div> |
| 45 </div> | 45 </div> |
| 46 | 46 |
| 47 <div class="unconstrainedContainer" style="position: relative"> | 47 <div class="unconstrainedContainer" style="position: relative"> |
| 48 <div class="grid gridAutoFixedFixed gridAutoFlowRow"> | 48 <div class="grid gridAutoFixedFixed gridAutoFlowRowDense"> |
| 49 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-o
ffset-y="5" data-expected-width="10" data-expected-height="30">XXXXX XXXXXX</div
> | 49 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-o
ffset-y="5" data-expected-width="10" data-expected-height="30">XXXXX XXXXXX</div
> |
| 50 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> | 50 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> |
| 51 </div> | 51 </div> |
| 52 </div> | 52 </div> |
| 53 | 53 |
| 54 <div class="unconstrainedContainer" style="position: relative"> | 54 <div class="unconstrainedContainer" style="position: relative"> |
| 55 <div class="grid gridAutoFixedFixed gridAutoFlowColumn"> | 55 <div class="grid gridAutoFixedFixed gridAutoFlowColumnDense"> |
| 56 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-
offset-y="0" data-expected-width="50" data-expected-height="5">XXXXX XXXXXX</div
> | 56 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-
offset-y="0" data-expected-width="50" data-expected-height="5">XXXXX XXXXXX</div
> |
| 57 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> | 57 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> |
| 58 </div> | 58 </div> |
| 59 </div> | 59 </div> |
| 60 | 60 |
| 61 <div class="unconstrainedContainer" style="position: relative"> | 61 <div class="unconstrainedContainer" style="position: relative"> |
| 62 <div class="grid gridAutoMinMax gridAutoFlowRow"> | 62 <div class="grid gridAutoMinMax gridAutoFlowRowDense"> |
| 63 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-
offset-y="0" data-expected-width="300" data-expected-height="5">XXXXX XXXXXX</di
v> | 63 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-
offset-y="0" data-expected-width="300" data-expected-height="5">XXXXX XXXXXX</di
v> |
| 64 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> | 64 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> |
| 65 </div> | 65 </div> |
| 66 </div> | 66 </div> |
| 67 | 67 |
| 68 <div class="unconstrainedContainer" style="position: relative"> | 68 <div class="unconstrainedContainer" style="position: relative"> |
| 69 <div class="grid gridAutoMinMax gridAutoFlowColumn"> | 69 <div class="grid gridAutoMinMax gridAutoFlowColumnDense"> |
| 70 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-o
ffset-y="5" data-expected-width="10" data-expected-height="100">XXXXX XXXXXX</di
v> | 70 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-o
ffset-y="5" data-expected-width="10" data-expected-height="100">XXXXX XXXXXX</di
v> |
| 71 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> | 71 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> |
| 72 </div> | 72 </div> |
| 73 </div> | 73 </div> |
| 74 | 74 |
| 75 <div class="unconstrainedContainer" style="position: relative"> | 75 <div class="unconstrainedContainer" style="position: relative"> |
| 76 <div class="grid gridAutoMinMax gridAutoFlowRow"> | 76 <div class="grid gridAutoMinMax gridAutoFlowRowDense"> |
| 77 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-o
ffset-y="5" data-expected-width="10" data-expected-height="100">XXXXX XXXXXX</di
v> | 77 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-o
ffset-y="5" data-expected-width="10" data-expected-height="100">XXXXX XXXXXX</di
v> |
| 78 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> | 78 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> |
| 79 </div> | 79 </div> |
| 80 </div> | 80 </div> |
| 81 | 81 |
| 82 <div class="unconstrainedContainer" style="position: relative"> | 82 <div class="unconstrainedContainer" style="position: relative"> |
| 83 <div class="grid gridAutoMinMax gridAutoFlowColumn"> | 83 <div class="grid gridAutoMinMax gridAutoFlowColumnDense"> |
| 84 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-
offset-y="0" data-expected-width="300" data-expected-height="5">XXXXX XXXXXX</di
v> | 84 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-
offset-y="0" data-expected-width="300" data-expected-height="5">XXXXX XXXXXX</di
v> |
| 85 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> | 85 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> |
| 86 </div> | 86 </div> |
| 87 </div> | 87 </div> |
| 88 | 88 |
| 89 <div class="unconstrainedContainer" style="position: relative"> | 89 <div class="unconstrainedContainer" style="position: relative"> |
| 90 <div class="grid gridAutoMinMaxContent gridAutoFlowRow"> | 90 <div class="grid gridAutoMinMaxContent gridAutoFlowRowDense"> |
| 91 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-
offset-y="0" data-expected-width="120" data-expected-height="5">XXXXX XXXXXX</di
v> | 91 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-
offset-y="0" data-expected-width="120" data-expected-height="5">XXXXX XXXXXX</di
v> |
| 92 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> | 92 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> |
| 93 </div> | 93 </div> |
| 94 </div> | 94 </div> |
| 95 | 95 |
| 96 <div class="unconstrainedContainer" style="position: relative"> | 96 <div class="unconstrainedContainer" style="position: relative"> |
| 97 <div class="grid gridAutoMinMaxContent gridAutoFlowColumn"> | 97 <div class="grid gridAutoMinMaxContent gridAutoFlowColumnDense"> |
| 98 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-o
ffset-y="5" data-expected-width="10" data-expected-height="20">XXXXX XXXXXX</div
> | 98 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-o
ffset-y="5" data-expected-width="10" data-expected-height="20">XXXXX XXXXXX</div
> |
| 99 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> | 99 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> |
| 100 </div> | 100 </div> |
| 101 </div> | 101 </div> |
| 102 | 102 |
| 103 <div class="unconstrainedContainer" style="position: relative"> | 103 <div class="unconstrainedContainer" style="position: relative"> |
| 104 <div class="grid gridAutoMinMaxContent gridAutoFlowRow"> | 104 <div class="grid gridAutoMinMaxContent gridAutoFlowRowDense"> |
| 105 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-o
ffset-y="5" data-expected-width="10" data-expected-height="20">XXXXX XXXXXX</div
> | 105 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-o
ffset-y="5" data-expected-width="10" data-expected-height="20">XXXXX XXXXXX</div
> |
| 106 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> | 106 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> |
| 107 </div> | 107 </div> |
| 108 </div> | 108 </div> |
| 109 | 109 |
| 110 <div class="unconstrainedContainer" style="position: relative"> | 110 <div class="unconstrainedContainer" style="position: relative"> |
| 111 <div class="grid gridAutoMinMaxContent gridAutoFlowColumn"> | 111 <div class="grid gridAutoMinMaxContent gridAutoFlowColumnDense"> |
| 112 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-
offset-y="0" data-expected-width="120" data-expected-height="5">XXXXX XXXXXX</di
v> | 112 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="10" data-
offset-y="0" data-expected-width="120" data-expected-height="5">XXXXX XXXXXX</di
v> |
| 113 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> | 113 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-
offset-y="0" data-expected-width="10" data-expected-height="5"></div> |
| 114 </div> | 114 </div> |
| 115 </div> | 115 </div> |
| 116 | 116 |
| 117 </body> | 117 </body> |
| 118 </html> | 118 </html> |
| OLD | NEW |