| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 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 <script src="../../resources/check-layout.js"></script> | 5 <script src="../../resources/check-layout.js"></script> |
| 6 <style> | 6 <style> |
| 7 body { | 7 body { |
| 8 margin: 0; | 8 margin: 0; |
| 9 } | 9 } |
| 10 | 10 |
| (...skipping 81 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 92 justify-self: start; | 92 justify-self: start; |
| 93 } | 93 } |
| 94 </style> | 94 </style> |
| 95 </head> | 95 </head> |
| 96 <body onload="checkLayout('.grid')"> | 96 <body onload="checkLayout('.grid')"> |
| 97 | 97 |
| 98 <p>This test checks that the 'stretch' value is applied correctly for 'align' an
d 'justify' properties.</p> | 98 <p>This test checks that the 'stretch' value is applied correctly for 'align' an
d 'justify' properties.</p> |
| 99 | 99 |
| 100 <div style="position: relative"> | 100 <div style="position: relative"> |
| 101 <div class="grid" data-expected-width="200" data-expected-height="400"> | 101 <div class="grid" data-expected-width="200" data-expected-height="400"> |
| 102 <div class="alignSelfStretch justifySelfStart firstRowFirstColumn" data-
offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="2
00"></div> | 102 <div class="alignSelfStretch justifySelfStart firstRowFirstColumn" data-
offset-x="0" data-offset-y="0" data-expected-width="0" data-expected-height="200
"></div> |
| 103 <div class="widthAndHeightSet alignSelfStretch justifySelfStart firstRow
SecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" dat
a-expected-height="40"></div> | 103 <div class="widthAndHeightSet alignSelfStretch justifySelfStart firstRow
SecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" dat
a-expected-height="40"></div> |
| 104 <div class="onlyWidthSet alignSelfStretch justifySelfStart secondRowFirs
tColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-exp
ected-height="200"></div> | 104 <div class="onlyWidthSet alignSelfStretch justifySelfStart secondRowFirs
tColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-exp
ected-height="200"></div> |
| 105 <div class="onlyHeightSet alignSelfStretch justifySelfStart secondRowSec
ondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" dat
a-expected-height="40"></div> | 105 <div class="onlyHeightSet alignSelfStretch justifySelfStart secondRowSec
ondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="0" data-
expected-height="40"></div> |
| 106 </div> | 106 </div> |
| 107 </div> | 107 </div> |
| 108 | 108 |
| 109 <div style="position: relative"> | 109 <div style="position: relative"> |
| 110 <div class="grid" data-expected-width="200" data-expected-height="400"> | 110 <div class="grid" data-expected-width="200" data-expected-height="400"> |
| 111 <div class="alignSelfStart justifySelfStretch firstRowFirstColumn" data-
offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="0
"></div> | 111 <div class="alignSelfStart justifySelfStretch firstRowFirstColumn" data-
offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="0
"></div> |
| 112 <div class="widthAndHeightSet alignSelfStart justifySelfStretch firstRow
SecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" dat
a-expected-height="40"></div> | 112 <div class="widthAndHeightSet alignSelfStart justifySelfStretch firstRow
SecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" dat
a-expected-height="40"></div> |
| 113 <div class="onlyWidthSet alignSelfStart justifySelfStretch secondRowFirs
tColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-exp
ected-height="0"></div> | 113 <div class="onlyWidthSet alignSelfStart justifySelfStretch secondRowFirs
tColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-exp
ected-height="0"></div> |
| 114 <div class="onlyHeightSet alignSelfStart justifySelfStretch secondRowSec
ondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" dat
a-expected-height="40"></div> | 114 <div class="onlyHeightSet alignSelfStart justifySelfStretch secondRowSec
ondColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" dat
a-expected-height="40"></div> |
| 115 </div> | 115 </div> |
| 116 </div> | 116 </div> |
| 117 | 117 |
| 118 <div style="position: relative"> | 118 <div style="position: relative"> |
| 119 <div class="grid" data-expected-width="200" data-expected-height="400"> | 119 <div class="grid" data-expected-width="200" data-expected-height="400"> |
| 120 <div class="maxHeight alignSelfStretch justifySelfStart firstRowFirstCol
umn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected
-height="160"></div> | 120 <div class="maxHeight alignSelfStretch justifySelfStart firstRowFirstCol
umn" data-offset-x="0" data-offset-y="0" data-expected-width="0" data-expected-h
eight="160"></div> |
| 121 <div class="minWidth widthAndHeightSet alignSelfStretch justifySelfStart
firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width
="120" data-expected-height="40"></div> | 121 <div class="minWidth widthAndHeightSet alignSelfStretch justifySelfStart
firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width
="120" data-expected-height="40"></div> |
| 122 <div class="minHeight onlyWidthSet alignSelfStretch justifySelfStart sec
ondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20
" data-expected-height="220"></div> | 122 <div class="minHeight onlyWidthSet alignSelfStretch justifySelfStart sec
ondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20
" data-expected-height="220"></div> |
| 123 <div class="maxWidth onlyHeightSet alignSelfStretch justifySelfStart sec
ondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width=
"90" data-expected-height="40"></div> | 123 <div class="maxWidth onlyHeightSet alignSelfStretch justifySelfStretch s
econdRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-widt
h="90" data-expected-height="40"></div> |
| 124 </div> | 124 </div> |
| 125 </div> | 125 </div> |
| 126 | 126 |
| 127 <div style="position: relative"> | 127 <div style="position: relative"> |
| 128 <div class="grid" data-expected-width="200" data-expected-height="400"> | 128 <div class="grid" data-expected-width="200" data-expected-height="400"> |
| 129 <div class="alignSelfStretch justifySelfStretch firstRowFirstColumn" dat
a-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height=
"200"></div> | 129 <div class="alignSelfStretch justifySelfStretch firstRowFirstColumn" dat
a-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height=
"200"></div> |
| 130 <div class="widthAndHeightSet alignSelfStretch justifySelfStretch firstR
owSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" d
ata-expected-height="40"></div> | 130 <div class="widthAndHeightSet alignSelfStretch justifySelfStretch firstR
owSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" d
ata-expected-height="40"></div> |
| 131 <div class="onlyWidthSet alignSelfStretch justifySelfStretch secondRowFi
rstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-e
xpected-height="200"></div> | 131 <div class="onlyWidthSet alignSelfStretch justifySelfStretch secondRowFi
rstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-e
xpected-height="200"></div> |
| 132 <div class="onlyHeightSet alignSelfStretch justifySelfStretch secondRowS
econdColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" d
ata-expected-height="40"></div> | 132 <div class="onlyHeightSet alignSelfStretch justifySelfStretch secondRowS
econdColumn" data-offset-x="100" data-offset-y="200" data-expected-width="100" d
ata-expected-height="40"></div> |
| 133 </div> | 133 </div> |
| 134 </div> | 134 </div> |
| 135 | 135 |
| 136 <div style="position: relative"> | 136 <div style="position: relative"> |
| 137 <div class="grid alignItemsStretch justifyItemsStart" data-expected-width="2
00" data-expected-height="400"> | 137 <div class="grid alignItemsStretch justifyItemsStart" data-expected-width="2
00" data-expected-height="400"> |
| 138 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" dat
a-expected-width="100" data-expected-height="200"></div> | 138 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" dat
a-expected-width="0" data-expected-height="200"></div> |
| 139 <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100"
data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> | 139 <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100"
data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
| 140 <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-of
fset-y="200" data-expected-width="20" data-expected-height="200"></div> | 140 <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-of
fset-y="200" data-expected-width="20" data-expected-height="200"></div> |
| 141 <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="100" dat
a-offset-y="200" data-expected-width="100" data-expected-height="40"></div> | 141 <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="100" dat
a-offset-y="200" data-expected-width="0" data-expected-height="40"></div> |
| 142 </div> | 142 </div> |
| 143 </div> | 143 </div> |
| 144 | 144 |
| 145 <div style="position: relative"> | 145 <div style="position: relative"> |
| 146 <div class="grid alignItemsStart justifyItemsStretch" data-expected-width="2
00" data-expected-height="400"> | 146 <div class="grid alignItemsStart justifyItemsStretch" data-expected-width="2
00" data-expected-height="400"> |
| 147 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" dat
a-expected-width="100" data-expected-height="0"></div> | 147 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" dat
a-expected-width="100" data-expected-height="0"></div> |
| 148 <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100"
data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> | 148 <div class="widthAndHeightSet firstRowSecondColumn" data-offset-x="100"
data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> |
| 149 <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-of
fset-y="200" data-expected-width="20" data-expected-height="0"></div> | 149 <div class="onlyWidthSet secondRowFirstColumn" data-offset-x="0" data-of
fset-y="200" data-expected-width="20" data-expected-height="0"></div> |
| 150 <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="100" dat
a-offset-y="200" data-expected-width="100" data-expected-height="40"></div> | 150 <div class="onlyHeightSet secondRowSecondColumn" data-offset-x="100" dat
a-offset-y="200" data-expected-width="100" data-expected-height="40"></div> |
| 151 </div> | 151 </div> |
| (...skipping 88 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 240 <div class="grid verticalLR" data-expected-width="400" data-expected-height=
"200"> | 240 <div class="grid verticalLR" data-expected-width="400" data-expected-height=
"200"> |
| 241 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" dat
a-expected-width="200" data-expected-height="100"></div> | 241 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" dat
a-expected-width="200" data-expected-height="100"></div> |
| 242 <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="100"
data-expected-width="200" data-expected-height="100"></div> | 242 <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="100"
data-expected-width="200" data-expected-height="100"></div> |
| 243 <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0"
data-expected-width="200" data-expected-height="100"></div> | 243 <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0"
data-expected-width="200" data-expected-height="100"></div> |
| 244 <div class="secondRowSecondColumn" data-offset-x="200" data-offset-y="10
0" data-expected-width="200" data-expected-height="100"></div> | 244 <div class="secondRowSecondColumn" data-offset-x="200" data-offset-y="10
0" data-expected-width="200" data-expected-height="100"></div> |
| 245 </div> | 245 </div> |
| 246 </div> | 246 </div> |
| 247 | 247 |
| 248 </body> | 248 </body> |
| 249 </html> | 249 </html> |
| OLD | NEW |