third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content.html - Issue 1702013003: [css-grid] Swap columns and rows in grid-template shorthand

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content.html

Issue 1702013003: [css-grid] Swap columns and rows in grid-template shorthand (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Swap columns and rows in tests under fast/repaint/ 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-gutters-and-alignment.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-and-tracks.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 <link href="resources/grid.css" rel="stylesheet">	2 <link href="resources/grid.css" rel="stylesheet">

3 <link href="resources/grid-alignment.css" rel="stylesheet">	3 <link href="resources/grid-alignment.css" rel="stylesheet">

4 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel =stylesheet>	4 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel =stylesheet>

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

6 <script src="../../resources/js-test.js"></script>	6 <script src="../../resources/js-test.js"></script>

7 <style>	7 <style>

8 .gridPercentAndFlexContent { grid-template: 50% minmax(30px, 2fr) / 50px; }	8 .gridPercentAndFlexContent { grid-template: 50px / 50% minmax(30px, 2fr); }

9 .gridTwoDoubleMaxFlexContent { grid-template: minmax(10px, 0.5fr) minmax(10px, 2 fr) / 50px; }	9 .gridTwoDoubleMaxFlexContent { grid-template: 50px / minmax(10px, 0.5fr) minmax( 10px, 2fr); }

10 .gridIgnoreSecondGridItem { grid-template: minmax(300px, 3fr) minmax(150px, 1fr) / 50px; }	10 .gridIgnoreSecondGridItem { grid-template: 50px / minmax(300px, 3fr) minmax(150p x, 1fr); }

11	11

12 .gridRowsPercentAndFlexContent { grid-template: 50px / minmax(30px, 2fr) 50%; }	12 .gridRowsPercentAndFlexContent { grid-template: minmax(30px, 2fr) 50% / 50px; }

13 .gridRowsTwoMaxFlexContent { grid-template: 50px / minmax(10px, 1fr) minmax(10px , 2fr); }	13 .gridRowsTwoMaxFlexContent { grid-template: minmax(10px, 1fr) minmax(10px, 2fr) / 50px; }

14 .gridRowsTwoDoubleMaxFlexContent { grid-template: 50px / minmax(10px, 0.5fr) min max(10px, 2fr); }	14 .gridRowsTwoDoubleMaxFlexContent { grid-template: minmax(10px, 0.5fr) minmax(10p x, 2fr) / 50px; }

15	15

16 .gridMinMaxFlexFixedAndMinContentAndFixed { grid-template-columns: minmax(0.5fr, 35px) min-content 25px; }	16 .gridMinMaxFlexFixedAndMinContentAndFixed { grid-template-columns: minmax(0.5fr, 35px) min-content 25px; }

17 .gridMinContentAndMinMaxFixedMinContentAndFlex { grid-template-columns: min-cont ent minmax(20px, min-content) 2fr; }	17 .gridMinContentAndMinMaxFixedMinContentAndFlex { grid-template-columns: min-cont ent minmax(20px, min-content) 2fr; }

18 .gridMaxContentAndMinMaxFixedMaxContentAndFlex { grid-template-columns: max-cont ent minmax(20px, max-content) 1fr; }	18 .gridMaxContentAndMinMaxFixedMaxContentAndFlex { grid-template-columns: max-cont ent minmax(20px, max-content) 1fr; }

19	19

20 div.grid > div { font: 10px/1 Ahem; }	20 div.grid > div { font: 10px/1 Ahem; }

21	21

22 .gridRowColumnGaps {	22 .gridRowColumnGaps {

23 grid-row-gap: 33px;	23 grid-row-gap: 33px;

24 grid-column-gap: 19px;	24 grid-column-gap: 19px;

(...skipping 71 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
96 <div style="position: relative; width: 100px;">	96 <div style="position: relative; width: 100px;">

97 <div class="grid gridMaxContentAndMinMaxFixedMaxContentAndFlex gridRowColumn Gaps" data-expected-width="100" data-expected-height="139">	97 <div class="grid gridMaxContentAndMinMaxFixedMaxContentAndFlex gridRowColumn Gaps" data-expected-width="100" data-expected-height="139">

98 <div style="grid-column: 2 / span 2;" data-expected-width="39">XX</div>	98 <div style="grid-column: 2 / span 2;" data-expected-width="39">XX</div>

99 <div style="grid-column: 1 / -1; grid-row: 2;" data-expected-width="109" >XXX XXX XXX</div>	99 <div style="grid-column: 1 / -1; grid-row: 2;" data-expected-width="109" >XXX XXX XXX</div>

100 <div style="grid-column: 1 / span 2; grid-row: 3;" data-expected-width=" 90">XXXX XXXX</div>	100 <div style="grid-column: 1 / span 2; grid-row: 3;" data-expected-width=" 90">XXXX XXXX</div>

101 <div style="grid-column: 1; grid-row: 4;" data-expected-width="51" data- expected-height="0"></div>	101 <div style="grid-column: 1; grid-row: 4;" data-expected-width="51" data- expected-height="0"></div>

102 </div>	102 </div>

103 </div>	103 </div>

104	104

105 </body>	105 </body>

OLD	NEW