LayoutTests/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html - Issue 23528004: [CSS Grid Layout] Update named grid lines syntax to the last version of the specs

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

Issue 23528004: [CSS Grid Layout] Update named grid lines syntax to the last version of the specs (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@named

Patch Set: Patch for landing v2 Created 7 years, 1 month 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 <script>	3 <script>

4 if (window.testRunner)	4 if (window.testRunner)

5 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);	5 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);

6 </script>	6 </script>

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

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

9 <style>	9 <style>

10 .grid {	10 .grid {

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

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

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

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

52	52

53 checkLayout(".grid");	53 checkLayout(".grid");

54 }	54 }

55	55

56 function testChangingGridDefinitions()	56 function testChangingGridDefinitions()

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

63	63

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

65 </script>	65 </script>

66 <body>	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>	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	68

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

70 <div class="grid">	70 <div class="grid">

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

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

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

74 </div>	74 </div>

75 </div>	75 </div>

76	76

77 </body>	77 </body>

78 </html>	78 </html>

OLD	NEW