Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(202)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment.html

Issue 2080643002: [css-grid] Implement repeat(auto-fit) (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Patch for landing v3 Created 4 years, 5 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-positioned-items-padding.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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 <style> 4 <style>
5 .grid { 5 .grid {
6 grid-template-columns: 300px 200px 100px; 6 grid-template-columns: 300px 200px 100px;
7 grid-template-rows: 150px 100px 50px; 7 grid-template-rows: 150px 100px 50px;
8 width: 800px; 8 width: 800px;
9 height: 500px; 9 height: 500px;
10 } 10 }
11 11
12 .gaps { 12 .gaps {
13 grid-gap: 10px 20px; 13 grid-gap: 10px 20px;
14 } 14 }
15
16 .autoFit {
17 grid-template-columns: repeat(auto-fit, 75px);
18 grid-template-rows: 25px;
19 }
20
21 .width300 { width: 300px; }
22
23 .item:first-child { background: lime; }
24 .item:last-child { background: blue; }
15 </style> 25 </style>
16 26
17 <div class="grid contentStart" id="gridContentStart"></div> 27 <div class="grid contentStart" id="gridContentStart"></div>
18 <div class="grid contentCenter" id="gridContentCenter"></div> 28 <div class="grid contentCenter" id="gridContentCenter"></div>
19 <div class="grid contentEnd" id="gridContentEnd"></div> 29 <div class="grid contentEnd" id="gridContentEnd"></div>
20 <div class="grid contentSpaceBetween" id="gridContentSpaceBetween"></div> 30 <div class="grid contentSpaceBetween" id="gridContentSpaceBetween"></div>
21 <div class="grid contentSpaceAround" id="gridContentSpaceAround"></div> 31 <div class="grid contentSpaceAround" id="gridContentSpaceAround"></div>
22 <div class="grid contentSpaceEvenly" id="gridContentSpaceEvenly"></div> 32 <div class="grid contentSpaceEvenly" id="gridContentSpaceEvenly"></div>
23 <div class="grid contentStretch" id="gridContentStretch"></div> 33 <div class="grid contentStretch" id="gridContentStretch"></div>
24 34
25 <div class="grid gaps contentStart" id="gridGapsContentStart"></div> 35 <div class="grid gaps contentStart" id="gridGapsContentStart"></div>
26 <div class="grid gaps contentCenter" id="gridGapsContentCenter"></div> 36 <div class="grid gaps contentCenter" id="gridGapsContentCenter"></div>
27 <div class="grid gaps contentEnd" id="gridGapsContentEnd"></div> 37 <div class="grid gaps contentEnd" id="gridGapsContentEnd"></div>
28 <div class="grid gaps contentSpaceBetween" id="gridGapsContentSpaceBetween"></di v> 38 <div class="grid gaps contentSpaceBetween" id="gridGapsContentSpaceBetween"></di v>
29 <div class="grid gaps contentSpaceAround" id="gridGapsContentSpaceAround"></div> 39 <div class="grid gaps contentSpaceAround" id="gridGapsContentSpaceAround"></div>
30 <div class="grid gaps contentSpaceEvenly" id="gridGapsContentSpaceEvenly"></div> 40 <div class="grid gaps contentSpaceEvenly" id="gridGapsContentSpaceEvenly"></div>
31 <div class="grid gaps contentStretch" id="gridGapsContentStretch"></div> 41 <div class="grid gaps contentStretch" id="gridGapsContentStretch"></div>
32 42
43 <div class="grid gaps width300 autoFit" id="gridAutoFitEmpty"></div>
44 <div class="grid gaps width300 autoFit" id="gridAutoFitFirstColumnChild"><div cl ass="item"></div></div>
45 <div class="grid gaps width300 autoFit" id="gridAutoFitSecondColumnChild"><div c lass="item" style="grid-column: 2"></div></div>
46 <div class="grid gaps width300 autoFit" id="gridAutoFitThirdColumnChild"><div cl ass="item" style="grid-column: 3"></div></div>
47 <div class="grid gaps width300 autoFit" id="gridAutoFitTwoConsecutiveChildren">< div class="item"></div><div class="item"></div></div>
48 <div class="grid gaps width300 autoFit" id="gridAutoFitTwoConsecutiveChildrenTwo ">
49 <div class="item" style="grid-column: 2"></div><div class="item"></div>
50 </div>
51 <div class="grid gaps width300 autoFit" id="gridAutoFitTwoAlternatingChildren">
52 <div class="item"></div><div class="item" style="grid-column: 3"></div>
53 </div>
54
33 <script src="../../resources/js-test.js"></script> 55 <script src="../../resources/js-test.js"></script>
34 <script src="resources/grid-definitions-parsing-utils.js"></script> 56 <script src="resources/grid-definitions-parsing-utils.js"></script>
35 <script> 57 <script>
36 description("Test that computed style for grid-template-columns and grid-tem plate-rows works as expected with content alignment and gaps."); 58 description("Test that computed style for grid-template-columns and grid-tem plate-rows works as expected with content alignment and gaps.");
37
38 testGridDefinitionsValues(document.getElementById("gridContentStart"), "300p x 200px 100px", "150px 100px 50px"); 59 testGridDefinitionsValues(document.getElementById("gridContentStart"), "300p x 200px 100px", "150px 100px 50px");
39 testGridDefinitionsValues(document.getElementById("gridContentCenter"), "300 px 200px 100px", "150px 100px 50px"); 60 testGridDefinitionsValues(document.getElementById("gridContentCenter"), "300 px 200px 100px", "150px 100px 50px");
40 testGridDefinitionsValues(document.getElementById("gridContentEnd"), "300px 200px 100px", "150px 100px 50px"); 61 testGridDefinitionsValues(document.getElementById("gridContentEnd"), "300px 200px 100px", "150px 100px 50px");
41 testGridDefinitionsValues(document.getElementById("gridContentSpaceBetween") , "300px 200px 100px", "150px 100px 50px"); 62 testGridDefinitionsValues(document.getElementById("gridContentSpaceBetween") , "300px 200px 100px", "150px 100px 50px");
42 testGridDefinitionsValues(document.getElementById("gridContentSpaceAround"), "300px 200px 100px", "150px 100px 50px"); 63 testGridDefinitionsValues(document.getElementById("gridContentSpaceAround"), "300px 200px 100px", "150px 100px 50px");
43 testGridDefinitionsValues(document.getElementById("gridContentSpaceEvenly"), "300px 200px 100px", "150px 100px 50px"); 64 testGridDefinitionsValues(document.getElementById("gridContentSpaceEvenly"), "300px 200px 100px", "150px 100px 50px");
44 testGridDefinitionsValues(document.getElementById("gridContentStretch"), "30 0px 200px 100px", "150px 100px 50px"); 65 testGridDefinitionsValues(document.getElementById("gridContentStretch"), "30 0px 200px 100px", "150px 100px 50px");
45 66
46 testGridDefinitionsValues(document.getElementById("gridGapsContentStart"), " 300px 200px 100px", "150px 100px 50px"); 67 testGridDefinitionsValues(document.getElementById("gridGapsContentStart"), " 300px 200px 100px", "150px 100px 50px");
47 testGridDefinitionsValues(document.getElementById("gridGapsContentCenter"), "300px 200px 100px", "150px 100px 50px"); 68 testGridDefinitionsValues(document.getElementById("gridGapsContentCenter"), "300px 200px 100px", "150px 100px 50px");
48 testGridDefinitionsValues(document.getElementById("gridGapsContentEnd"), "30 0px 200px 100px", "150px 100px 50px"); 69 testGridDefinitionsValues(document.getElementById("gridGapsContentEnd"), "30 0px 200px 100px", "150px 100px 50px");
49 testGridDefinitionsValues(document.getElementById("gridGapsContentSpaceBetwe en"), "300px 200px 100px", "150px 100px 50px"); 70 testGridDefinitionsValues(document.getElementById("gridGapsContentSpaceBetwe en"), "300px 200px 100px", "150px 100px 50px");
50 testGridDefinitionsValues(document.getElementById("gridGapsContentSpaceAroun d"), "300px 200px 100px", "150px 100px 50px"); 71 testGridDefinitionsValues(document.getElementById("gridGapsContentSpaceAroun d"), "300px 200px 100px", "150px 100px 50px");
51 testGridDefinitionsValues(document.getElementById("gridGapsContentSpaceEvenl y"), "300px 200px 100px", "150px 100px 50px"); 72 testGridDefinitionsValues(document.getElementById("gridGapsContentSpaceEvenl y"), "300px 200px 100px", "150px 100px 50px");
52 testGridDefinitionsValues(document.getElementById("gridGapsContentStretch"), "300px 200px 100px", "150px 100px 50px"); 73 testGridDefinitionsValues(document.getElementById("gridGapsContentStretch"), "300px 200px 100px", "150px 100px 50px");
74
75 function testGapsAlignmentWithAutoFit(id, expectedColumns, expectedRows) {
76 var element = document.getElementById(id);
77 var alignmentClasses = [ '', 'contentStart', 'contentCenter', 'contentEn d', 'contentSpaceAround', 'contentSpaceBetween', 'contentSpaceEvenly', 'contentS tretch'];
78
79 for (alignmentClass in alignmentClasses) {
80 var originalClassName = element.className;
81 element.className += " " + alignmentClass;
82 testGridDefinitionsValues(element, expectedColumns, expectedRows);
83 element.className = originalClassName;
84 }
85 }
86
87 testGapsAlignmentWithAutoFit('gridAutoFitEmpty', "0px 0px 0px", "25px");
88 testGapsAlignmentWithAutoFit("gridAutoFitFirstColumnChild", "75px 0px 0px", "25px");
89 testGapsAlignmentWithAutoFit("gridAutoFitSecondColumnChild", "0px 75px 0px", "25px");
90 testGapsAlignmentWithAutoFit("gridAutoFitThirdColumnChild", "0px 0px 75px", "25px");
91 testGapsAlignmentWithAutoFit("gridAutoFitTwoConsecutiveChildren", "75px 75px 0px", "25px");
92 testGapsAlignmentWithAutoFit("gridAutoFitTwoConsecutiveChildrenTwo", "0px 75 px 75px", "25px");
93 testGapsAlignmentWithAutoFit("gridAutoFitTwoAlternatingChildren", "75px 0px 75px", "25px");
94
53 </script> 95 </script>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-positioned-items-padding.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-template-columns-rows-computed-style-gaps-content-alignment-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698