OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <link href="resources/grid.css" rel="stylesheet"> | 2 <link href="resources/grid.css" rel="stylesheet"> |
3 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel
=stylesheet> | 3 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel
=stylesheet> |
4 <script src="../../resources/check-layout.js"></script> | 4 <script src="../../resources/check-layout.js"></script> |
5 <script src="../../resources/js-test.js"></script> | 5 <script src="../../resources/js-test.js"></script> |
6 <style> | 6 <style> |
7 body { margin: 0px; } | 7 body { margin: 0px; } |
8 | 8 |
9 .normalGap { grid-gap: normal; } | 9 .normalGap { grid-gap: normal; } |
10 | 10 |
11 .gridGap { grid-gap: 16px; } | 11 .gridGap { grid-gap: 16px; } |
12 | 12 |
13 .gridRowColumnGaps { | 13 .gridRowColumnGaps { |
14 grid-row-gap: 12px; | 14 grid-row-gap: 12px; |
15 grid-column-gap: 23px; | 15 grid-column-gap: 23px; |
16 } | 16 } |
17 | 17 |
18 .gridMultipleCols { grid-template-columns: 30px minmax(10px, 50px) 80px; } | 18 .gridMultipleCols { grid-template-columns: 30px minmax(10px, 50px) 80px; } |
19 .gridMultipleRows { grid-template-rows: 90px 70px min-content; } | 19 .gridMultipleRows { grid-template-rows: 90px 70px min-content; } |
20 .gridAutoAuto { grid-template: auto auto / auto auto; } | 20 .gridAutoAuto { grid-template: auto auto / auto auto; } |
21 .gridMultipleFixed { grid-template: [first] 15px [foo] 25px [bar] 35px [last] /
[first] 37px [foo] 57px [bar] 77px [last]; } | 21 .gridMultipleFixed { grid-template: [first] 37px [foo] 57px [bar] 77px [last] /
[first] 15px [foo] 25px [bar] 35px [last]; } |
22 .gridFixed100 { grid-template: repeat(2, 100px) / repeat(2, 100px); } | 22 .gridFixed100 { grid-template: repeat(2, 100px) / repeat(2, 100px); } |
23 .gridWithPercent { grid-template-columns: 10px 20% repeat(2, 30px); } | 23 .gridWithPercent { grid-template-columns: 10px 20% repeat(2, 30px); } |
24 .gridWithDoublePercent { grid-template-columns: 60% 40%; } | 24 .gridWithDoublePercent { grid-template-columns: 60% 40%; } |
25 .gridWithRowPercent { grid-template: 20px / 10px 20% 30px; } | 25 .gridWithRowPercent { grid-template: 10px 20% 30px / 20px; } |
26 .gridWithRowDoublePercent { grid-template: 20px / 60% 40%; } | 26 .gridWithRowDoublePercent { grid-template: 60% 40% / 20px; } |
27 | 27 |
28 .width220 { width: 220px; } | 28 .width220 { width: 220px; } |
29 .height100 { height: 100px; } | 29 .height100 { height: 100px; } |
30 .gridAutoRows20 { grid-auto-rows: 20px; } | 30 .gridAutoRows20 { grid-auto-rows: 20px; } |
31 | 31 |
32 .thirdRowThirdColumn { grid-area: 3 / 3; } | 32 .thirdRowThirdColumn { grid-area: 3 / 3; } |
33 .firstRowThirdColumn { grid-area: 1 / 3; } | 33 .firstRowThirdColumn { grid-area: 1 / 3; } |
34 | 34 |
35 div.grid > div { font: 10px/1 Ahem; } | 35 div.grid > div { font: 10px/1 Ahem; } |
36 | 36 |
(...skipping 133 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
170 <div style="position: relative"> | 170 <div style="position: relative"> |
171 <div class="grid gridFixed100 verticalRL directionRTL gridGap"> | 171 <div class="grid gridFixed100 verticalRL directionRTL gridGap"> |
172 <div class="gridItemMargins firstRowFirstColumn" data-offset-x="166" dat
a-offset-y="136" data-expected-width="20" data-expected-height="40"></div> | 172 <div class="gridItemMargins firstRowFirstColumn" data-offset-x="166" dat
a-offset-y="136" data-expected-width="20" data-expected-height="40"></div> |
173 <div class="gridItemMargins firstRowSecondColumn" data-offset-x="166" da
ta-offset-y="20" data-expected-width="20" data-expected-height="40"></div> | 173 <div class="gridItemMargins firstRowSecondColumn" data-offset-x="166" da
ta-offset-y="20" data-expected-width="20" data-expected-height="40"></div> |
174 <div class="gridItemMargins secondRowFirstColumn" data-offset-x="50" dat
a-offset-y="136" data-expected-width="20" data-expected-height="40"></div> | 174 <div class="gridItemMargins secondRowFirstColumn" data-offset-x="50" dat
a-offset-y="136" data-expected-width="20" data-expected-height="40"></div> |
175 <div class="gridItemMargins secondRowSecondColumn" data-offset-x="50" da
ta-offset-y="20" data-expected-width="20" data-expected-height="40"></div> | 175 <div class="gridItemMargins secondRowSecondColumn" data-offset-x="50" da
ta-offset-y="20" data-expected-width="20" data-expected-height="40"></div> |
176 </div> | 176 </div> |
177 </div> | 177 </div> |
178 | 178 |
179 </body> | 179 </body> |
OLD | NEW |