LayoutTests/fast/css-grid-layout/grid-auto-flow-update.html - Issue 333563003: [CSS Grid Layout] Update grid-auto-flow to the new syntax

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-auto-flow-update.html

Issue 333563003: [CSS Grid Layout] Update grid-auto-flow to the new syntax (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Attempt 2 to fix win_blink_rel Created 6 years, 5 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

« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-auto-flow-resolution.html ('k') | LayoutTests/fast/css-grid-layout/grid-auto-flow-update-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!DOCTYPE html>	1 <!DOCTYPE html>

2 <html>	2 <html>

3 <link href="resources/grid.css" rel="stylesheet">	3 <link href="resources/grid.css" rel="stylesheet">

4 <script src="../../resources/check-layout.js"></script>	4 <script src="../../resources/check-layout.js"></script>

5 <style>	5 <style>

6 .grid {	6 .grid {

7 grid-template-columns: 50px 100px;	7 grid-template-columns: 50px 100px;

8 grid-template-rows: 50px 100px;	8 grid-template-rows: 50px 100px;

9 }	9 }

10 </style>	10 </style>

11 <script>	11 <script>

12 function testGrid(flow, positionAndSize)	12 function testGrid(flow, positionAndSize)

13 {	13 {

14 var gridElement = document.getElementsByClassName("grid")[0];	14 var gridElement = document.getElementsByClassName("grid")[0];

15 gridElement.style.gridAutoFlow = flow;	15 gridElement.style.gridAutoFlow = flow;

16 var gridItem = document.getElementById("autoItem");	16 var gridItem = document.getElementById("autoItem");

17 gridItem.setAttribute("data-offset-x", positionAndSize.offsetX);	17 gridItem.setAttribute("data-offset-x", positionAndSize.offsetX);

18 gridItem.setAttribute("data-offset-y", positionAndSize.offsetY);	18 gridItem.setAttribute("data-offset-y", positionAndSize.offsetY);

19 gridItem.setAttribute("data-expected-width", positionAndSize.width);	19 gridItem.setAttribute("data-expected-width", positionAndSize.width);

20 gridItem.setAttribute("data-expected-height", positionAndSize.height);	20 gridItem.setAttribute("data-expected-height", positionAndSize.height);

21 checkLayout(".grid");	21 checkLayout(".grid");

22 }	22 }

23	23

24 function updateAutoFlow()	24 function updateAutoFlow()

25 {	25 {

26 checkLayout(".grid");	26 checkLayout(".grid");

27	27

28 testGrid("row", { 'offsetX': '50', 'offsetY': '0', 'width': '100', 'height': '50' });

29 testGrid("column", { 'offsetX': '0', 'offsetY': '50', 'width': '50', 'height ': '100' });	28 testGrid("column", { 'offsetX': '0', 'offsetY': '50', 'width': '50', 'height ': '100' });

30 testGrid("invalid", { 'offsetX': '0', 'offsetY': '50', 'width': '50', 'heigh t': '100' });	29 testGrid("stack", { 'offsetX': '0', 'offsetY': '0', 'width': '50', 'height': '50' });

31 testGrid("none", { 'offsetX': '0', 'offsetY': '0', 'width': '50', 'height': '50' });	30 testGrid("", { 'offsetX': '50', 'offsetY': '0', 'width': '100', 'height': '5 0' });

	31 testGrid("invalid", { 'offsetX': '50', 'offsetY': '0', 'width': '100', 'heig ht': '50' });

	32 testGrid("none", { 'offsetX': '50', 'offsetY': '0', 'width': '100', 'height' : '50' });

32 }	33 }

33 window.addEventListener("load", updateAutoFlow, false);	34 window.addEventListener("load", updateAutoFlow, false);

34 </script>	35 </script>

35 <body>	36 <body>

36 <div>This test checks that updating the grid's element's grid-auto-flow property recomputes the grid.</div>	37 <div>This test checks that updating the grid's element's grid-auto-flow property recomputes the grid.</div>

37 <div style="position: relative">	38 <div style="position: relative">

38 <div class="grid">	39 <div class="grid">

39 <div class="sizedToGridArea autoRowAutoColumn" id="autoItem" data-offset -x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></di v>	40 <div class="sizedToGridArea autoRowAutoColumn" id="autoItem" data-offset -x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></ div>

40 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data- offset-y="0" data-expected-width="50" data-expected-height="50"></div>	41 <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data- offset-y="0" data-expected-width="50" data-expected-height="50"></div>

41 </div>	42 </div>

42 </div>	43 </div>

43 </body>	44 </body>

44 </html>	45 </html>

OLD	NEW