OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <script> | 3 <script> |
4 if (window.testRunner) | 4 if (window.testRunner) |
5 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); | 5 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); |
6 </script> | 6 </script> |
7 <link href="resources/grid.css" rel="stylesheet"> | 7 <link href="resources/grid.css" rel="stylesheet"> |
8 <script src="../../resources/check-layout.js"></script> | 8 <script src="../../resources/check-layout.js"></script> |
9 <style> | 9 <style> |
10 .grid { | 10 .grid { |
(...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
48 thirdGridItem.setAttribute("data-expected-width", thirdGridItemData.width); | 48 thirdGridItem.setAttribute("data-expected-width", thirdGridItemData.width); |
49 thirdGridItem.setAttribute("data-expected-height", thirdGridItemData.height)
; | 49 thirdGridItem.setAttribute("data-expected-height", thirdGridItemData.height)
; |
50 thirdGridItem.setAttribute("data-offset-x", thirdGridItemData.x); | 50 thirdGridItem.setAttribute("data-offset-x", thirdGridItemData.x); |
51 thirdGridItem.setAttribute("data-offset-y", thirdGridItemData.y); | 51 thirdGridItem.setAttribute("data-offset-y", thirdGridItemData.y); |
52 | 52 |
53 checkLayout(".grid"); | 53 checkLayout(".grid"); |
54 } | 54 } |
55 | 55 |
56 function testChangingGridDefinitions() | 56 function testChangingGridDefinitions() |
57 { | 57 { |
58 testGridDefinitions('10px "row" 20px', '30px "column"', { 'width': '0', 'hei
ght': '10', 'x': '30', 'y': '0' }, { 'width': '30', 'height': '20', 'x': '0', 'y
': '10' }, { 'width': '30', 'height': '10', 'x': '0', 'y': '0' }); | 58 testGridDefinitions('10px (row) 20px', '30px (column)', { 'width': '0', 'hei
ght': '10', 'x': '30', 'y': '0' }, { 'width': '30', 'height': '20', 'x': '0', 'y
': '10' }, { 'width': '30', 'height': '10', 'x': '0', 'y': '0' }); |
59 testGridDefinitions('10px "row" 20px', '30px', { 'width': '30', 'height': '1
0', 'x': '0', 'y': '0' }, { 'width': '30', 'height': '20', 'x': '0', 'y': '10' }
, { 'width': '30', 'height': '0', 'x': '0', 'y': '30' }); | 59 testGridDefinitions('10px (row) 20px', '30px', { 'width': '30', 'height': '1
0', 'x': '0', 'y': '0' }, { 'width': '30', 'height': '20', 'x': '0', 'y': '10' }
, { 'width': '30', 'height': '0', 'x': '0', 'y': '30' }); |
60 testGridDefinitions('10px 20px "row"', '30px', { 'width': '30', 'height': '1
0', 'x': '0', 'y': '0' }, { 'width': '30', 'height': '0', 'x': '0', 'y': '30' },
{ 'width': '30', 'height': '20', 'x': '0', 'y': '10' }); | 60 testGridDefinitions('10px 20px (row)', '30px', { 'width': '30', 'height': '1
0', 'x': '0', 'y': '0' }, { 'width': '30', 'height': '0', 'x': '0', 'y': '30' },
{ 'width': '30', 'height': '20', 'x': '0', 'y': '10' }); |
61 testGridDefinitions('10px 20px "row"', '30px "column"', { 'width': '0', 'hei
ght': '10', 'x': '30', 'y': '0' }, { 'width': '30', 'height': '0', 'x': '0', 'y'
: '30' }, { 'width': '30', 'height': '10', 'x': '0', 'y': '0' }); | 61 testGridDefinitions('10px 20px (row)', '30px (column)', { 'width': '0', 'hei
ght': '10', 'x': '30', 'y': '0' }, { 'width': '30', 'height': '0', 'x': '0', 'y'
: '30' }, { 'width': '30', 'height': '10', 'x': '0', 'y': '0' }); |
62 } | 62 } |
63 | 63 |
64 window.addEventListener("load", testChangingGridDefinitions, false); | 64 window.addEventListener("load", testChangingGridDefinitions, false); |
65 </script> | 65 </script> |
66 <body> | 66 <body> |
67 <div>This test checks that updating the named grid lines definitions in grid-def
inition-{rows|columns} recomputes the positions of automatically placed grid ite
ms.</div> | 67 <div>This test checks that updating the named grid lines definitions in grid-def
inition-{rows|columns} recomputes the positions of automatically placed grid ite
ms.</div> |
68 | 68 |
69 <div style="position: relative"> | 69 <div style="position: relative"> |
70 <div class="grid"> | 70 <div class="grid"> |
71 <div class="sizedToGridArea" id="firstGridItem"></div> | 71 <div class="sizedToGridArea" id="firstGridItem"></div> |
72 <div class="sizedToGridArea" id="secondGridItem"></div> | 72 <div class="sizedToGridArea" id="secondGridItem"></div> |
73 <div class="sizedToGridArea" id="thirdGridItem"></div> | 73 <div class="sizedToGridArea" id="thirdGridItem"></div> |
74 </div> | 74 </div> |
75 </div> | 75 </div> |
76 | 76 |
77 </body> | 77 </body> |
78 </html> | 78 </html> |
OLD | NEW |