third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-addition-track-breadth-update.html - Issue 1583433002: [css-align] New CSS Value 'normal' for Content Alignment

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-addition-track-breadth-update.html

Issue 1583433002: [css-align] New CSS Value 'normal' for Content Alignment (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Fixed layout tests failing. Created 4 years, 10 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 | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-addition-auto-placement-update.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-multiple-minmax-content-resolution.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 <link href="resources/grid-alignment.css" rel="stylesheet">

4 <style>	5 <style>

5 .gridFixedContent {	6 .gridFixedContent {

6 grid-template-columns: 50px minmax(min-content, 50px) minmax(max-content, 50 px) minmax(50px, min-content);	7 grid-template-columns: 50px minmax(min-content, 50px) minmax(max-content, 50 px) minmax(50px, min-content);

7 grid-template-rows: 70px minmax(max-content, 70px) minmax(50px, min-content) minmax(65px, max-content);	8 grid-template-rows: 70px minmax(max-content, 70px) minmax(50px, min-content) minmax(65px, max-content);

8 }	9 }

9	10

10 .sizedToGridArea {	11 .sizedToGridArea {

11 font: 10px/1 Ahem;	12 font: 10px/1 Ahem;

12 /* Make us fit our grid area. */	13 /* Make us fit our grid area. */

13 width: 100%;	14 width: 100%;

14 height: 100%;	15 height: 100%;

15 }	16 }

16 </style>	17 </style>

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

18 <script>	19 <script>

19 function testPosition(gridElementID, content, position, size)	20 function testPosition(gridElementID, content, position, size)

20 {	21 {

21 var gridItem = document.createElement("div");	22 var gridItem = document.createElement("div");

22 gridItem.classList.add("sizedToGridArea");	23 gridItem.classList.add("sizedToGridArea");

23 gridItem.innerHTML = content;	24 gridItem.innerHTML = content;

24 gridItem.style.gridColumn = position.column;	25 gridItem.style.gridColumn = position.column;

25 gridItem.style.gridRow = position.row;	26 gridItem.style.gridRow = position.row;

26 gridItem.setAttribute("data-expected-width", size.width);	27 gridItem.setAttribute("data-expected-width", size.width);

27 gridItem.setAttribute("data-expected-height", size.height);	28 gridItem.setAttribute("data-expected-height", size.height);

28 var gridElement = document.getElementById(gridElementID);	29 var gridElement = document.getElementById(gridElementID);

	30 gridElement.classList.add("contentStart");

29 gridElement.appendChild(gridItem);	31 gridElement.appendChild(gridItem);

30 checkLayout("#" + gridElementID);	32 checkLayout("#" + gridElementID);

31 }	33 }

32	34

33 function updateImplicitGridColumn()	35 function updateImplicitGridColumn()

34 {	36 {

35 testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '10', 'row': ' 15' }, { 'width': '40', 'height': '30' });	37 testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '10', 'row': ' 15' }, { 'width': '40', 'height': '30' });

36	38

37 testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '1', 'row': '1 ' }, { 'width': '50', 'height': '70' });	39 testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '1', 'row': '1 ' }, { 'width': '50', 'height': '70' });

38 testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '1', 'row': '2 ' }, { 'width': '50', 'height': '30' });	40 testPosition("constrainedGrid", "XXXX XXXX XXXX", { 'column': '1', 'row': '2 ' }, { 'width': '50', 'height': '30' });

(...skipping 86 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
125 <div class="grid gridFixedContent" id="constrainedGridUndefinedHeight"></div >	127 <div class="grid gridFixedContent" id="constrainedGridUndefinedHeight"></div >

126 </div>	128 </div>

127	129

128 <!-- Allow the extra logical space distribution to occur. -->	130 <!-- Allow the extra logical space distribution to occur. -->

129 <div style="width: 1000px; height: 1000px">	131 <div style="width: 1000px; height: 1000px">

130 <div class="grid gridFixedContent" id="unconstrainedGrid"><div class="sizedT oGridArea">XXXXXX XXXXXX</div></div>	132 <div class="grid gridFixedContent" id="unconstrainedGrid"><div class="sizedT oGridArea">XXXXXX XXXXXX</div></div>

131 </div>	133 </div>

132	134

133 </body>	135 </body>

134 </html>	136 </html>

OLD	NEW