OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <script> |
| 4 if (window.testRunner) |
| 5 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); |
| 6 </script> |
| 7 <link href="resources/grid.css" rel="stylesheet"> |
| 8 <script src="../../resources/check-layout.js"></script> |
| 9 <style> |
| 10 .grid { |
| 11 grid-auto-flow: row; |
| 12 grid-definition-rows: 50px 100px; |
| 13 grid-definition-columns: 40px; |
| 14 } |
| 15 |
| 16 #firstGridItem { |
| 17 grid-row: auto; |
| 18 grid-column: 1; |
| 19 } |
| 20 |
| 21 #secondGridItem { |
| 22 grid-row: 1; |
| 23 grid-column: auto; |
| 24 } |
| 25 |
| 26 #thirdGridItem { |
| 27 grid-row: auto; |
| 28 grid-column: auto; |
| 29 } |
| 30 </style> |
| 31 <script> |
| 32 function testGridItemsOrder(firstGridItemData, secondGridItemData, thirdGridItem
Data) |
| 33 { |
| 34 var firstGridItem = document.getElementById("firstGridItem"); |
| 35 firstGridItem.style.order = firstGridItemData.order; |
| 36 firstGridItem.setAttribute("data-expected-width", firstGridItemData.width); |
| 37 firstGridItem.setAttribute("data-expected-height", firstGridItemData.height)
; |
| 38 firstGridItem.setAttribute("data-offset-x", firstGridItemData.x); |
| 39 firstGridItem.setAttribute("data-offset-y", firstGridItemData.y); |
| 40 |
| 41 var secondGridItem = document.getElementById("secondGridItem"); |
| 42 secondGridItem.style.order = secondGridItemData.order; |
| 43 secondGridItem.setAttribute("data-expected-width", secondGridItemData.width)
; |
| 44 secondGridItem.setAttribute("data-expected-height", secondGridItemData.heigh
t); |
| 45 secondGridItem.setAttribute("data-offset-x", secondGridItemData.x); |
| 46 secondGridItem.setAttribute("data-offset-y", secondGridItemData.y); |
| 47 |
| 48 var thirdGridItem = document.getElementById("thirdGridItem"); |
| 49 thirdGridItem.style.order = thirdGridItemData.order; |
| 50 thirdGridItem.setAttribute("data-expected-width", thirdGridItemData.width); |
| 51 thirdGridItem.setAttribute("data-expected-height", thirdGridItemData.height)
; |
| 52 thirdGridItem.setAttribute("data-offset-x", thirdGridItemData.x); |
| 53 thirdGridItem.setAttribute("data-offset-y", thirdGridItemData.y); |
| 54 |
| 55 checkLayout(".grid"); |
| 56 } |
| 57 |
| 58 function testChangingGridItemsOrder() |
| 59 { |
| 60 testGridItemsOrder({ 'order': '0', 'width': '40', 'height': '100', 'x': '0',
'y': '50' }, { 'order': '0', 'width': '40', 'height': '50', 'x': '0', 'y': '0'
}, { 'order': '0', 'width': '40', 'height': '0', 'x': '0', 'y': '150' }); |
| 61 testGridItemsOrder({ 'order': '0', 'width': '40', 'height': '100', 'x': '0',
'y': '50' }, { 'order': '-1', 'width': '40', 'height': '50', 'x': '0', 'y': '0'
}, { 'order': '0', 'width': '40', 'height': '0', 'x': '0', 'y': '150' }); |
| 62 testGridItemsOrder({ 'order': '1', 'width': '40', 'height': '0', 'x': '0', '
y': '150' }, { 'order': '-1', 'width': '40', 'height': '50', 'x': '0', 'y': '0'
}, { 'order': '0', 'width': '40', 'height': '100', 'x': '0', 'y': '50' }); |
| 63 testGridItemsOrder({ 'order': '1', 'width': '40', 'height': '100', 'x': '0',
'y': '50' }, { 'order': '-1', 'width': '40', 'height': '50', 'x': '0', 'y': '0'
}, { 'order': '10', 'width': '40', 'height': '0', 'x': '0', 'y': '150' }); |
| 64 } |
| 65 |
| 66 window.addEventListener("load", testChangingGridItemsOrder, false); |
| 67 </script> |
| 68 <body> |
| 69 <div>This test checks that grid items' 'order' dynamic updates recomputes the po
sitions of automatically placed grid items.</div> |
| 70 |
| 71 <div style="position: relative"> |
| 72 <div class="grid"> |
| 73 <div class="sizedToGridArea" id="firstGridItem"></div> |
| 74 <div class="sizedToGridArea" id="secondGridItem"></div> |
| 75 <div class="sizedToGridArea" id="thirdGridItem"></div> |
| 76 </div> |
| 77 </div> |
| 78 |
| 79 </body> |
| 80 </html> |
OLD | NEW |