LayoutTests/fast/css-grid-layout/grid-dynamic-updates-relayout.html - Issue 16404015: Unprefix -webkit-min-content and -webkit-max-content for grid layout

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

Issue 16404015: Unprefix -webkit-min-content and -webkit-max-content for grid layout (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: Rebaselined change Created 7 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 | Annotate | Revision Log

« 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-item-addition-track-breadth-update.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 <script>	9 <script>

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

11 {	11 {

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

13 gridElement.style.gridColumns = gridTracks.columns;	13 gridElement.style.gridColumns = gridTracks.columns;

14 gridElement.style.gridRows = gridTracks.rows;	14 gridElement.style.gridRows = gridTracks.rows;

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

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

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

18 checkLayout("#" + gridElementID);	18 checkLayout("#" + gridElementID);

19 }	19 }

20	20

21 function updateRowsColumns()	21 function updateRowsColumns()

22 {	22 {

23 // 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.	23 // 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.

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

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

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

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

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

29 testLayout("constrainedGrid", { 'rows': '70px', 'columns': 'minmax(-webkit-m ax-content, 50px)' }, { 'width': '120', 'height': '70' });	29 testLayout("constrainedGrid", { 'rows': '70px', 'columns': 'minmax(max-conte nt, 50px)' }, { 'width': '120', 'height': '70' });

30	30

31 testLayout("unconstrainedGrid", { 'rows': 'minmax(20px, 50px)', 'columns': ' minmax(20px, 60px)' }, { 'width': '60', 'height': '50' });	31 testLayout("unconstrainedGrid", { 'rows': 'minmax(20px, 50px)', 'columns': ' minmax(20px, 60px)' }, { 'width': '60', 'height': '50' });

32 testLayout("unconstrainedGrid", { 'rows': 'minmax(20px, 50px)', 'columns': ' minmax(20px, 40px)' }, { 'width': '40', 'height': '50' });	32 testLayout("unconstrainedGrid", { 'rows': 'minmax(20px, 50px)', 'columns': ' minmax(20px, 40px)' }, { 'width': '40', 'height': '50' });

33 testLayout("unconstrainedGrid", { 'rows': 'minmax(20px, 30px)', 'columns': ' minmax(20px, 40px)' }, { 'width': '40', 'height': '30' });	33 testLayout("unconstrainedGrid", { 'rows': 'minmax(20px, 30px)', 'columns': ' minmax(20px, 40px)' }, { 'width': '40', 'height': '30' });

34 testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(20px, 4 0px)' }, { 'width': '40', 'height': '20' });	34 testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(20px, 4 0px)' }, { 'width': '40', 'height': '20' });

35 testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(20px, - webkit-max-content)' }, { 'width': '120', 'height': '10' });	35 testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(20px, m ax-content)' }, { 'width': '120', 'height': '10' });

36 testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(150px, -webkit-max-content)' }, { 'width': '150', 'height': '10' });	36 testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(150px, max-content)' }, { 'width': '150', 'height': '10' });

37 testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'auto' }, { 'wi dth': '120', 'height': '10' });	37 testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'auto' }, { 'wi dth': '120', 'height': '10' });

38 }	38 }

39	39

40 window.addEventListener("load", updateRowsColumns, false);	40 window.addEventListener("load", updateRowsColumns, false);

41 </script>	41 </script>

42 <body>	42 <body>

43 <div>This test checks that grid-{rows\|columns} dynamic updates properly relayout the grid items.</div>	43 <div>This test checks that grid-{rows\|columns} dynamic updates properly relayout the grid items.</div>

44 <div class="constrainedContainer">	44 <div class="constrainedContainer">

45 <div class="grid" id="constrainedGrid">	45 <div class="grid" id="constrainedGrid">

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

47 </div>	47 </div>

48 </div>	48 </div>

49	49

50 <div class="unconstrainedContainer">	50 <div class="unconstrainedContainer">

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

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

53 </div>	53 </div>

54 </div>	54 </div>

55 </body>	55 </body>

56 </html>	56 </html>

OLD	NEW