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

Side by Side Diff: third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-inline-support-grid-template-columns-rows-001.xht

Issue 2670473003: [css-grid] Import W3C Test Suite (Closed)
Patch Set: Add comment about skipped tests Created 3 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
OLDNEW
(Empty)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x html1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>CSS Grid Layout Test: Support for 'grid-template-columns' and 'gr id-template-rows' properties within an inline grid</title>
5 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igal ia.com" />
6 <link rel="help" href="http://www.w3.org/TR/css-grid-1/#track-sizing" ti tle="5.1 Track Sizing: the 'grid-template-rows' and 'grid-template-columns' prop erties" />
7 <meta name="flags" content="ahem dom" />
8 <meta name="assert" content="This test checks that 'grid-template-column s' and 'grid-template-rows' properties are supported in an inline grid. So you c an use the different syntax options to define the trak list." />
9 <script src="/resources/testharness.js" type="text/javascript"></script>
10 <script src="/resources/testharnessreport.js" type="text/javascript"></s cript>
11 <script src="support/testing-utils.js" type="text/javascript"></script>
12 <style type="text/css"><![CDATA[
13 .inline-grid {
14 display: inline-grid;
15 width: 800px;
16 height: 600px;
17 font: 10px/1 Ahem;
18 justify-content: start;
19 align-content: start;
20 }
21 ]]></style>
22 </head>
23 <body>
24 <div id="log"></div>
25
26 <div id="emptyGrid" class="inline-grid"></div>
27 <div id="grid" class="inline-grid">
28 <div id="item">GRID ITEM</div>
29 </div>
30
31 <script type="text/javascript"><![CDATA[
32 // Single values.
33 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "none", "none" , "none", "none");
34 TestingUtils.testGridTemplateColumnsRows("grid", "none", "none", "90 px", "10px");
35 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto", "auto" , "0px", "0px");
36 TestingUtils.testGridTemplateColumnsRows("grid", "auto", "auto", "90 px", "10px");
37 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "500px", "300p x", "500px", "300px");
38 TestingUtils.testGridTemplateColumnsRows("grid", "500px", "300px", " 500px", "300px");
39 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "40em", "20em" , "400px", "200px");
40 TestingUtils.testGridTemplateColumnsRows("grid", "40em", "20em", "40 0px", "200px");
41 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "25%", "50%", "200px", "300px");
42 TestingUtils.testGridTemplateColumnsRows("grid", "25%", "50%", "200p x", "300px");
43 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(200px + 10%)", "calc(25% + 50px)", "280px", "200px");
44 TestingUtils.testGridTemplateColumnsRows("grid", "calc(200px + 10%)" , "calc(25% + 50px)", "280px", "200px");
45 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr", "1fr", "800px", "600px");
46 TestingUtils.testGridTemplateColumnsRows("grid", "1fr", "1fr", "800p x", "600px");
47 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content", "max-content", "0px", "0px");
48 TestingUtils.testGridTemplateColumnsRows("grid", "max-content", "max -content", "90px", "10px");
49 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content", "min-content", "0px", "0px");
50 TestingUtils.testGridTemplateColumnsRows("grid", "min-content", "min -content", "40px", "20px");
51 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(200px, 400px)", "minmax(50px, 100px)", "400px", "100px");
52 TestingUtils.testGridTemplateColumnsRows("grid", "minmax(200px, 400p x)", "minmax(50px, 100px)", "400px", "100px");
53 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(calc(1 0% + 200px), calc(800px - 20%))", "minmax(calc(20% + 50px), calc(600px - 10%))", "640px", "540px");
54 TestingUtils.testGridTemplateColumnsRows("grid", "minmax(calc(10% + 200px), calc(800px - 20%))", "minmax(calc(20% + 50px), calc(600px - 10%))", "640 px", "540px");
55
56 // Multiple values.
57 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "500px 200px 5 0px", "100px 300px", "500px 200px 50px", "100px 300px");
58 TestingUtils.testGridTemplateColumnsRows("grid", "500px 200px 50px", "100px 300px", "500px 200px 50px", "100px 300px");
59 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "40em 100px 15 %", "50px 20em 10%", "400px 100px 120px", "50px 200px 60px");
60 TestingUtils.testGridTemplateColumnsRows("grid", "40em 100px 15%", " 50px 20em 10%", "400px 100px 120px", "50px 200px 60px");
61 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "200px 1fr", " 1fr 100px", "200px 600px", "500px 100px");
62 TestingUtils.testGridTemplateColumnsRows("grid", "200px 1fr", "1fr 1 00px", "200px 600px", "500px 100px");
63 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr", "a uto 1fr", "0px 800px", "0px 600px");
64 TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr", "auto 1 fr", "90px 710px", "10px 590px");
65 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 3fr", "2f r 1fr", "200px 600px", "400px 200px");
66 TestingUtils.testGridTemplateColumnsRows("grid", "1fr 3fr", "2fr 1fr ", "200px 600px", "400px 200px");
67 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(25px, 75px) 750px", "minmax(50px, 150px) 500px", "50px 750px", "100px 500px");
68 TestingUtils.testGridTemplateColumnsRows("grid", "minmax(25px, 75px) 750px", "minmax(50px, 150px) 500px", "50px 750px", "100px 500px");
69 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content 1 fr calc(20px + 10%) minmax(30em, 50em)", "min-content 1fr calc(10% + 40px) minma x(3em, 5em)", "0px 200px 100px 500px", "0px 450px 100px 50px");
70 TestingUtils.testGridTemplateColumnsRows("grid", "min-content 1fr ca lc(20px + 10%) minmax(30em, 50em)", "min-content 1fr calc(10% + 40px) minmax(3e m, 5em)", "40px 160px 100px 500px", "20px 430px 100px 50px");
71
72 // Reset values.
73 document.getElementById("emptyGrid").style.gridTemplateColumns = "";
74 document.getElementById("emptyGrid").style.gridTemplateRows = "";
75 document.getElementById("grid").style.gridTemplateColumns = "";
76 document.getElementById("grid").style.gridTemplateRows = "";
77
78 // Wrong values.
79 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "foo", "bar", "none", "none");
80 TestingUtils.testGridTemplateColumnsRows("grid", "foo", "bar", "90px ", "10px");
81 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto none", " none auto", "none", "none");
82 TestingUtils.testGridTemplateColumnsRows("grid", "auto none", "none auto", "90px", "10px");
83 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px, 200px" , "300px, 400px", "none", "none");
84 TestingUtils.testGridTemplateColumnsRows("grid", "100px, 200px", "30 0px, 400px", "90px", "10px");
85 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "none", "none");
86 TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 200p x, 300px)", "minmax(100px, 200px, 300px)", "90px", "10px");
87 ]]></script>
88 </body>
89 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698