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

Side by Side Diff: third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-inline-support-named-grid-lines-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 named grid lines in 'grid-templ ate-columns' and 'grid-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/#named-lines" tit le="5.1.1. Named Grid Lines: the '(&lt;custom-ident\&gt;*)' syntax" />
7 <meta name="flags" content="ahem dom" />
8 <meta name="assert" content="This test checks that grid lines can be exp licitly named in 'grid-template-columns' and 'grid-template-rows' properties wit hin an inline grid." />
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 // Valid values.
33 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first] auto [last]", "[first] auto [last]", "[first] 0px [last]", "[first] 0px [last]");
34 TestingUtils.testGridTemplateColumnsRows("grid", "[first] auto [last ]", "[first] auto [last]", "[first] 90px [last]", "[first] 10px [last]");
35 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] 0px [L4st -L1_n3]", "[F1rst-L1_n3] 0px [L4st-L1_n3]");
36 TestingUtils.testGridTemplateColumnsRows("grid", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] 90px [L4st-L1_ n3]", "[F1rst-L1_n3] 10px [L4st-L1_n3]");
37 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[] auto [ ]", "[ ] auto []", "0px", "0px");
38 TestingUtils.testGridTemplateColumnsRows("grid", "[] auto [ ]", "[ ] auto []", "90px", "10px");
39 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first] auto" , "[first] auto", "[first] 0px", "[first] 0px");
40 TestingUtils.testGridTemplateColumnsRows("grid", "[first] auto", "[f irst] auto", "[first] 90px", "[first] 10px");
41 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [last]", "auto [last]", "0px [last]", "0px [last]");
42 TestingUtils.testGridTemplateColumnsRows("grid", "auto [last]", "aut o [last]", "90px [last]", "10px [last]");
43 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[line] auto [ line]", "[line] auto [line]", "[line] 0px [line]", "[line] 0px [line]");
44 TestingUtils.testGridTemplateColumnsRows("grid", "[line] auto [line] ", "[line] auto [line]", "[line] 90px [line]", "[line] 10px [line]");
45 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first line] auto [last line]", "[first line] auto [last line]", "[first line] 0px [last line ]", "[first line] 0px [last line]");
46 TestingUtils.testGridTemplateColumnsRows("grid", "[first line] auto [last line]", "[first line] auto [last line]", "[first line] 90px [last line]", "[first line] 10px [last line]");
47 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [b] auto [c]", "[a] auto [b] auto [c]", "[a] 0px [b] 0px [c]", "[a] 0px [b] 0px [c]" );
48 TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [b] auto [c]", "[a] auto [b] auto [c]", "[a] 90px [b] 0px [c]", "[a] 10px [b] 0px [c]");
49 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [b] auto [c]", "auto [b] auto [c]", "0px [b] 0px [c]", "0px [b] 0px [c]");
50 TestingUtils.testGridTemplateColumnsRows("grid", "auto [b] auto [c]" , "auto [b] auto [c]", "90px [b] 0px [c]", "10px [b] 0px [c]");
51 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto auto [c]", "[a] auto auto [c]", ["[a] 0px 0px [c]", "[a] repeat(2, 0px) [c]"], ["[a] 0px 0px [c]", "[a] repeat(2, 0px) [c]"]);
52 TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto auto [c]" , "[a] auto auto [c]", "[a] 90px 0px [c]", "[a] 10px 0px [c]");
53 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [b] auto", "[a] auto [b] auto", "[a] 0px [b] 0px", "[a] 0px [b] 0px");
54 TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [b] auto" , "[a] auto [b] auto", "[a] 90px [b] 0px", "[a] 10px [b] 0px");
55 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto auto ", "[a] auto auto", ["[a] 0px 0px", "[a] repeat(2, 0px)"], ["[a] 0px 0px", "[a] repeat(2, 0px)"]);
56 TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto auto", "[ a] auto auto", "[a] 90px 0px", "[a] 10px 0px");
57 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [b] auto ", "auto [b] auto", "0px [b] 0px", "0px [b] 0px");
58 TestingUtils.testGridTemplateColumnsRows("grid", "auto [b] auto", "a uto [b] auto", "90px [b] 0px", "10px [b] 0px");
59 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto auto [c] ", "auto auto [c]", ["0px 0px [c]", "repeat(2, 0px) [c]"], ["0px 0px [c]", "repe at(2, 0px) [c]"]);
60 TestingUtils.testGridTemplateColumnsRows("grid", "auto auto [c]", "a uto auto [c]", "90px 0px [c]", "10px 0px [c]");
61 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [a] auto [a]", "[a] auto [a] auto [a]", ["[a] 0px [a] 0px [a]", "repeat(2, [a] 0px) [a]"], ["[a] 0px [a] 0px [a]", "repeat(2, [a] 0px) [a]"]);
62 TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [a] auto [a]", "[a] auto [a] auto [a]", "[a] 90px [a] 0px [a]", "[a] 10px [a] 0px [a]");
63 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a b c] auto [a b c] auto [a b c]", "[a b c] auto [a b c] auto [a b c]", ["[a b c] 0px [a b c ] 0px [a b c]", "repeat(2, [a b c] 0px) [a b c]"], "[a b c] 0px [a b c] 0px [a b c]");
64 TestingUtils.testGridTemplateColumnsRows("grid", "[a b c] auto [a b c] auto [a b c]", "[a b c] auto [a b c] auto [a b c]", "[a b c] 90px [a b c] 0px [a b c]", "[a b c] 10px [a b c] 0px [a b c]");
65 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] 40em [b] 100px [c] 15% [d]", "[z] 50px [y] 20em [x] 10% [w]", "[a] 400px [b] 100px [c] 12 0px [d]", "[z] 50px [y] 200px [x] 60px [w]");
66 TestingUtils.testGridTemplateColumnsRows("grid", "[a] 40em [b] 100px [c] 15% [d]", "[z] 50px [y] 20em [x] 10% [w]", "[a] 400px [b] 100px [c] 120px [ d]", "[z] 50px [y] 200px [x] 60px [w]");
67 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] 200px [b] 1fr [c]", "[z] 1fr [y] 100px [x]", "[a] 200px [b] 600px [c]", "[z] 500px [y] 10 0px [x]");
68 TestingUtils.testGridTemplateColumnsRows("grid", "[a] 200px [b] 1fr [c]", "[z] 1fr [y] 100px [x]", "[a] 200px [b] 600px [c]", "[z] 500px [y] 100px [ x]");
69 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] min-conte nt [b] 1fr [c] calc(20px + 10%) [d] minmax(30em, 50em) [e]", "[z] min-content [y ] 1fr [x] calc(10% + 40px) [w] minmax(3em, 5em) [v]", "[a] 0px [b] 200px [c] 100 px [d] 500px [e]", "[z] 0px [y] 450px [x] 100px [w] 50px [v]");
70 TestingUtils.testGridTemplateColumnsRows("grid", "[a] min-content [b ] 1fr [c] calc(20px + 10%) [d] minmax(30em, 50em) [e]", "[z] min-content [y] 1fr [x] calc(10% + 40px) [w] minmax(3em, 5em) [v]", "[a] 40px [b] 160px [c] 100px [ d] 500px [e]", "[z] 20px [y] 430px [x] 100px [w] 50px [v]");
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", "[a]", "[a]", "none", "none");
80 TestingUtils.testGridTemplateColumnsRows("grid", "[a]", "[a]", "90px ", "10px");
81 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a b]", "[a b ]", "none", "none");
82 TestingUtils.testGridTemplateColumnsRows("grid", "[a b]", "[a b]", " 90px", "10px");
83 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] none [b]" , "[a] none [b]", "none", "none");
84 TestingUtils.testGridTemplateColumnsRows("grid", "[a] none [b]", "[a ] none [b]", "90px", "10px");
85 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b]", "[a ] [b]", "none", "none");
86 TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b]", "[a] [b] ", "90px", "10px");
87 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "a auto b", "a auto b", "none", "none");
88 TestingUtils.testGridTemplateColumnsRows("grid", "a auto b", "a auto b", "90px", "10px");
89 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(a) auto (b)" , "(a) auto (b)", "none", "none");
90 TestingUtils.testGridTemplateColumnsRows("grid", "(a) auto (b)", "(a ) auto (b)", "90px", "10px");
91 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "'a' auto 'b'" , "'a' auto 'b'", "none", "none");
92 TestingUtils.testGridTemplateColumnsRows("grid", "'a' auto 'b'", "'a ' auto 'b'", "90px", "10px");
93 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "\"a\" auto \" b\"", "\"a\" auto \"b\"", "none", "none");
94 TestingUtils.testGridTemplateColumnsRows("grid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "90px", "10px");
95 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a, b] auto [ a, b]", "[a, b] auto [a, b]", "none", "none");
96 TestingUtils.testGridTemplateColumnsRows("grid", "[a, b] auto [a, b] ", "[a, b] auto [a, b]", "90px", "10px");
97 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "none", "none");
98 TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "90px", "10px");
99 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a [b]] auto [c]", "[a [b]] auto [c]", "none", "none");
100 TestingUtils.testGridTemplateColumnsRows("grid", "[a [b]] auto [c]", "[a [b]] auto [c]", "90px", "10px");
101 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [[b] ]", "[a] auto [[b]]", "none", "none");
102 TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [[b]]", " [a] auto [[b]]", "90px", "10px");
103 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a auto [b]", "[a auto [b]", "none", "none");
104 TestingUtils.testGridTemplateColumnsRows("grid", "[a auto [b]", "[a auto [b]", "90px", "10px");
105 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 100px] aut o [b]", "[a 100px] auto [b]", "none", "none");
106 TestingUtils.testGridTemplateColumnsRows("grid", "[a 100px] auto [b] ", "[a 100px] auto [b]", "90px", "10px");
107 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 50%] auto [b]", "[a 50%] auto [b]", "none", "none");
108 TestingUtils.testGridTemplateColumnsRows("grid", "[a 50%] auto [b]", "[a 50%] auto [b]", "90px", "10px");
109 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[5] auto [10] ", "[5] auto [10]", "none", "none");
110 TestingUtils.testGridTemplateColumnsRows("grid", "[5] auto [10]", "[ 5] auto [10]", "90px", "10px");
111 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a.] auto [b* ]", "[a.] auto [b*]", "none", "none");
112 TestingUtils.testGridTemplateColumnsRows("grid", "[a.] auto [b*]", " [a.] auto [b*]", "90px", "10px");
113 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[#a] auto [$b ]", "[#a] auto [$b]", "none", "none");
114 TestingUtils.testGridTemplateColumnsRows("grid", "[#a] auto [$b]", " [#a] auto [$b]", "90px", "10px");
115 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[initial] aut o", "[initial] auto", "none", "none");
116 TestingUtils.testGridTemplateColumnsRows("grid", "[initial] auto", " [initial] auto", "90px", "10px");
117 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[inherit] aut o", "[inherit] auto", "none", "none");
118 TestingUtils.testGridTemplateColumnsRows("grid", "[inherit] auto", " [inherit] auto", "90px", "10px");
119 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[default] aut o", "[default] auto", "none", "none");
120 TestingUtils.testGridTemplateColumnsRows("grid", "[default] auto", " [default] auto", "90px", "10px");
121 ]]></script>
122 </body>
123 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698