LayoutTests/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html - Issue 1168453002: [CSSGridLayout] Switch from parentheses to brackets for grid line names

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html

Issue 1168453002: [CSSGridLayout] Switch from parentheses to brackets for grid line names (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Patch for landing v2 Created 5 years, 6 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-columns-rows-get-set-multiple-expected.txt ('k') | LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set.html » ('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-auto-flow: row dense;	7 grid-auto-flow: row dense;

8 }	8 }

9 #firstGridItem {	9 #firstGridItem {

10 grid-row: auto;	10 grid-row: auto;

(...skipping 33 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
44 thirdGridItem.setAttribute("data-expected-width", thirdGridItemData.width);	44 thirdGridItem.setAttribute("data-expected-width", thirdGridItemData.width);

45 thirdGridItem.setAttribute("data-expected-height", thirdGridItemData.height) ;	45 thirdGridItem.setAttribute("data-expected-height", thirdGridItemData.height) ;

46 thirdGridItem.setAttribute("data-offset-x", thirdGridItemData.x);	46 thirdGridItem.setAttribute("data-offset-x", thirdGridItemData.x);

47 thirdGridItem.setAttribute("data-offset-y", thirdGridItemData.y);	47 thirdGridItem.setAttribute("data-offset-y", thirdGridItemData.y);

48	48

49 checkLayout(".grid");	49 checkLayout(".grid");

50 }	50 }

51	51

52 function testChangingGridDefinitions()	52 function testChangingGridDefinitions()

53 {	53 {

54 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' });	54 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' });

55 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' });	55 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' });

56 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' });	56 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' });

57 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' });	57 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' });

58 }	58 }

59	59

60 window.addEventListener("load", testChangingGridDefinitions, false);	60 window.addEventListener("load", testChangingGridDefinitions, false);

61 </script>	61 </script>

62 <body>	62 <body>

63 <div>This test checks that updating the named grid lines definitions in grid-tem plate-{rows\|columns} recomputes the positions of automatically placed grid items .</div>	63 <div>This test checks that updating the named grid lines definitions in grid-tem plate-{rows\|columns} recomputes the positions of automatically placed grid items .</div>

64	64

65 <div style="position: relative">	65 <div style="position: relative">

66 <div class="grid">	66 <div class="grid">

67 <div class="sizedToGridArea" id="firstGridItem"></div>	67 <div class="sizedToGridArea" id="firstGridItem"></div>

68 <div class="sizedToGridArea" id="secondGridItem"></div>	68 <div class="sizedToGridArea" id="secondGridItem"></div>

69 <div class="sizedToGridArea" id="thirdGridItem"></div>	69 <div class="sizedToGridArea" id="thirdGridItem"></div>

70 </div>	70 </div>

71 </div>	71 </div>

72	72

73 </body>	73 </body>

74 </html>	74 </html>

OLD	NEW