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 alignSelfStart justifySelfStretch sec ondRowSecondColumn" data-offset-x="100" data-offset-y="200" data-expected-width= "90" data-expected-height="40"></div> |
Manuel Rego
2015/07/13 12:40:06
Why do you change align and justify properties her
jfernandez
2015/07/14 13:36:07
This specific test case was designed to verify tha
| |
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 |