Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(70)

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-item-change-order-auto-flow.html

Issue 21205004: [CSS Grid Layout] Store m_grid across layout (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Updated change after Ojan's review Created 7 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
(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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698