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

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.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 }
13 #firstGridItem {
14 grid-row: auto;
15 grid-column: 'column';
16 }
17
18 #secondGridItem {
19 grid-row: 'row';
20 grid-column: auto;
21 }
22
23 #thirdGridItem {
24 grid-row: auto;
25 grid-column: auto;
26 }
27 </style>
28 <script>
29 function testGridDefinitions(gridDefinitionRows, gridDefinitionColumns, firstGri dItemData, secondGridItemData, thirdGridItemData)
30 {
31 var gridElement = document.getElementsByClassName("grid")[0];
32 gridElement.style.gridDefinitionRows = gridDefinitionRows;
33 gridElement.style.gridDefinitionColumns = gridDefinitionColumns;
34
35 var firstGridItem = document.getElementById("firstGridItem");
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.setAttribute("data-expected-width", secondGridItemData.width) ;
43 secondGridItem.setAttribute("data-expected-height", secondGridItemData.heigh t);
44 secondGridItem.setAttribute("data-offset-x", secondGridItemData.x);
45 secondGridItem.setAttribute("data-offset-y", secondGridItemData.y);
46
47 var thirdGridItem = document.getElementById("thirdGridItem");
48 thirdGridItem.setAttribute("data-expected-width", thirdGridItemData.width);
49 thirdGridItem.setAttribute("data-expected-height", thirdGridItemData.height) ;
50 thirdGridItem.setAttribute("data-offset-x", thirdGridItemData.x);
51 thirdGridItem.setAttribute("data-offset-y", thirdGridItemData.y);
52
53 checkLayout(".grid");
54 }
55
56 function testChangingGridDefinitions()
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' });
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' });
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 }
63
64 window.addEventListener("load", testChangingGridDefinitions, false);
65 </script>
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>
68
69 <div style="position: relative">
70 <div class="grid">
71 <div class="sizedToGridArea" id="firstGridItem"></div>
72 <div class="sizedToGridArea" id="secondGridItem"></div>
73 <div class="sizedToGridArea" id="thirdGridItem"></div>
74 </div>
75 </div>
76
77 </body>
78 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698