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 <script src="../../resources/check-layout.js"></script> | 3 <script src="../../resources/check-layout.js"></script> |
4 <style> | 4 <style> |
5 .grid { | 5 .grid { |
6 grid-template: 200px 200px / 200px 200px; | 6 grid-template: 200px 200px / 200px 200px; |
7 width: -webkit-fit-content; | 7 width: -webkit-fit-content; |
8 position: relative; | 8 position: relative; |
9 } | 9 } |
10 #fromFixedWidth { width: 150px; } | |
10 #fromFixedHeight { height: 100px; } | 11 #fromFixedHeight { height: 100px; } |
11 #fromMarginAuto { margin: auto; } | 12 #fromMarginAuto { margin: auto; } |
12 </style> | 13 </style> |
13 <p>The grids below had initially 'stretched' items, but we have changed 'height' and 'margin' to values which don't allow stretch. This test verifies that the l ayout algorithm properly detects such changes and clear the override height acco rdingly.</p> | 14 <p>The grids below had initially 'stretched' items, but we have changed 'height' , 'width' and 'margin' to values which don't allow stretch. This test verifies t hat the layout algorithm properly detects such changes and clear the override he ight accordingly.</p> |
Manuel Rego
2015/07/16 10:45:05
Nit: Again you need "height and width" here.
As y
jfernandez
2015/07/16 11:06:03
Done.
| |
14 <div class="grid"> | 15 <div class="grid"> |
15 <div id="toFixedHeight" class="firstRowFirstColumn" data-expected-height="10 0"></div> | 16 <div id="toFixedHeight" class="firstRowFirstColumn" data-expected-width="200 " data-expected-height="100"></div> |
16 <div class="firstRowSecondColumn" data-expected-height="200"></div> | 17 <div class="firstRowSecondColumn" data-expected-width="200" data-expected-he ight="200"></div> |
17 <div class="secondRowFirstColumn" data-expected-height="200"></div> | 18 <div class="secondRowFirstColumn" data-expected-width="200" data-expected-he ight="200"></div> |
18 <div id="fromFixedHeight" class="secondRowSecondColumn" data-expected-height ="200"></div> | 19 <div id="fromFixedHeight" class="secondRowSecondColumn" data-expected-width= "200" data-expected-height="200"></div> |
19 </div> | 20 </div> |
20 <div class="grid"> | 21 <div class="grid"> |
21 <div id="toMarginAuto" class="firstRowFirstColumn" data-expected-height="100 "> | 22 <div id="toFixedWidth" class="firstRowFirstColumn" data-expected-width="150" data-expected-height="200"></div> |
22 <div style="height: 100px"></div> | 23 <div class="firstRowSecondColumn" data-expected-width="200" data-expected-he ight="200"></div> |
24 <div class="secondRowFirstColumn" data-expected-width="200" data-expected-he ight="200"></div> | |
25 <div id="fromFixedWidth" class="secondRowSecondColumn" data-expected-width=" 200" data-expected-height="200"></div> | |
26 </div> | |
27 <div class="grid"> | |
28 <div id="toMarginAuto" class="firstRowFirstColumn" data-expected-width="150" data-expected-height="100"> | |
29 <div style="width: 150px; height: 100px"></div> | |
23 </div> | 30 </div> |
24 <div class="firstRowSecondColumn" data-expected-height="200"></div> | 31 <div class="firstRowSecondColumn" data-expected-width="200" data-expected-he ight="200"></div> |
25 <div class="secondRowFirstColumn" data-expected-height="200"></div> | 32 <div class="secondRowFirstColumn" data-expected-width="200" data-expected-he ight="200"></div> |
26 <div id="fromMarginAuto" class="secondRowSecondColumn" data-expected-height= "200"> | 33 <div id="fromMarginAuto" class="secondRowSecondColumn" data-expected-width=" 200" data-expected-height="200"> |
27 <div style="height: 100px"></div> | 34 <div style="width: 150px; height: 100px"></div> |
28 </div> | 35 </div> |
29 </div> | 36 </div> |
30 <script> | 37 <script> |
31 document.body.offsetLeft; | 38 document.body.offsetLeft; |
32 document.getElementById("fromFixedHeight").style.height = "auto"; | 39 document.getElementById("fromFixedHeight").style.height = "auto"; |
33 document.getElementById("toFixedHeight").style.height = "100px"; | 40 document.getElementById("toFixedHeight").style.height = "100px"; |
41 document.getElementById("fromFixedWidth").style.width = "auto"; | |
42 document.getElementById("toFixedWidth").style.width = "150px"; | |
34 document.getElementById("fromMarginAuto").style.margin = "0"; | 43 document.getElementById("fromMarginAuto").style.margin = "0"; |
35 document.getElementById("toMarginAuto").style.margin = "auto"; | 44 document.getElementById("toMarginAuto").style.margin = "auto"; |
36 checkLayout(".grid"); | 45 checkLayout(".grid"); |
37 </script> | 46 </script> |
OLD | NEW |