LayoutTests/fast/css-grid-layout/grid-dynamic-updates-relayout.html - Issue 208133003: [CSS Grid Layout] Prevent issues with checkLayout() in grid items

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-dynamic-updates-relayout.html

Issue 208133003: [CSS Grid Layout] Prevent issues with checkLayout() in grid items (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Created 6 years, 9 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-columns-rows-update-expected.txt ('k') | LayoutTests/fast/css-grid-layout/grid-dynamic-updates-relayout-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 <script>	5 <script>

6 function testLayout(gridElementID, gridTracks, size)	6 function testLayout(gridElementID, gridTracks, size)

7 {	7 {

8 var gridElement = document.getElementById(gridElementID);	8 var gridElement = document.getElementById(gridElementID);

9 gridElement.style.gridTemplateColumns = gridTracks.columns;	9 gridElement.style.gridTemplateColumns = gridTracks.columns;

10 gridElement.style.gridTemplateRows = gridTracks.rows;	10 gridElement.style.gridTemplateRows = gridTracks.rows;

11 var gridItem = gridElement.firstChild.nextSibling;	11 var gridItem = gridElement.firstChild.nextSibling;

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

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

14 checkLayout("#" + gridElementID);	14 checkLayout("#" + gridElementID, document.getElementById("test-output"));

15 }	15 }

16	16

17 function updateRowsColumns()	17 function updateRowsColumns()

18 {	18 {

19 // In the constrained grid case, we will always end up sizing after the min width. This means we don't test max width changes as they would not be detectabl e.	19 // In the constrained grid case, we will always end up sizing after the min width. This means we don't test max width changes as they would not be detectabl e.

20 testLayout("constrainedGrid", { 'rows': 'minmax(20px, 50px)', 'columns': 'mi nmax(30px, 50px)' }, { 'width': '30', 'height': '20' });	20 testLayout("constrainedGrid", { 'rows': 'minmax(20px, 50px)', 'columns': 'mi nmax(30px, 50px)' }, { 'width': '30', 'height': '20' });

21 testLayout("constrainedGrid", { 'rows': 'minmax(40px, 50px)', 'columns': 'mi nmax(30px, 50px)' }, { 'width': '30', 'height': '40' });	21 testLayout("constrainedGrid", { 'rows': 'minmax(40px, 50px)', 'columns': 'mi nmax(30px, 50px)' }, { 'width': '30', 'height': '40' });

22 testLayout("constrainedGrid", { 'rows': 'minmax(40px, 50px)', 'columns': 'mi nmax(50px, 50px)' }, { 'width': '50', 'height': '40' });	22 testLayout("constrainedGrid", { 'rows': 'minmax(40px, 50px)', 'columns': 'mi nmax(50px, 50px)' }, { 'width': '50', 'height': '40' });

23 testLayout("constrainedGrid", { 'rows': 'auto', 'columns': 'minmax(50px, 50p x)' }, { 'width': '50', 'height': '20' });	23 testLayout("constrainedGrid", { 'rows': 'auto', 'columns': 'minmax(50px, 50p x)' }, { 'width': '50', 'height': '20' });

24 testLayout("constrainedGrid", { 'rows': 'auto', 'columns': 'minmax(max-conte nt, 50px)' }, { 'width': '120', 'height': '10' });	24 testLayout("constrainedGrid", { 'rows': 'auto', 'columns': 'minmax(max-conte nt, 50px)' }, { 'width': '120', 'height': '10' });

(...skipping 31 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
56 <div class="grid" id="constrainedGridUndefinedHeight">	56 <div class="grid" id="constrainedGridUndefinedHeight">

57 <div class="sizedToGridArea">XXXXX XXXXXX</div>	57 <div class="sizedToGridArea">XXXXX XXXXXX</div>

58 </div>	58 </div>

59 </div>	59 </div>

60	60

61 <div class="unconstrainedContainer">	61 <div class="unconstrainedContainer">

62 <div class="grid" id="unconstrainedGrid">	62 <div class="grid" id="unconstrainedGrid">

63 <div class="sizedToGridArea">XXXXX XXXXXX</div>	63 <div class="sizedToGridArea">XXXXX XXXXXX</div>

64 </div>	64 </div>

65 </div>	65 </div>

	66

	67 <div id="test-output"></div>

	68

66 </body>	69 </body>

67 </html>	70 </html>

OLD	NEW