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

Side by Side Diff: third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-definition/grid-support-repeat-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 'repeat()' notation for 'grid-templ ate-columns' and 'grid-template-rows' properties</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/#repeat-notation" title="5.1.2 Repeating Rows and Columns: the 'repeat()' notation" />
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 support 'repeat()' notation, so you can u se it to represents a repeated fragment of the track 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 .grid {
14 display: 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="grid"></div>
27 <div id="grid" class="grid">
28 <div id="item">GRID ITEM</div>
29 </div>
30
31 <script type="text/javascript"><![CDATA[
32 // Valid values.
33 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(1, aut o)", "repeat(1, auto)", "0px", "0px");
34 TestingUtils.testGridTemplateColumnsRows("grid", "repeat(1, auto)", "repeat(1, auto)", "90px", "10px");
35 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, aut o)", "repeat(2, auto)", ["0px 0px", "repeat(2, 0px)"], ["0px 0px", "repeat(2, 0p x)"]);
36 TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, auto)", "repeat(2, auto)", "90px 0px", "10px 0px");
37 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, min max(50px, calc(50px + 50%))", "repeat(2, minmax(50px, calc(50px + 50%))", ["400p x 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
38 TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, minmax(5 0px, calc(50px + 50%))", "repeat(2, minmax(50px, calc(50px + 50%))", ["400px 400 px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]);
39 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(5, 10% )", "repeat(5, 10%)", ["80px 80px 80px 80px 80px", "repeat(5, 80px)"], ["60px 60 px 60px 60px 60px", "repeat(5, 60px)"]);
40 TestingUtils.testGridTemplateColumnsRows("grid", "repeat(5, 10%)", " repeat(5, 10%)", ["80px 80px 80px 80px 80px", "repeat(5, 80px)"], ["60px 60px 60 px 60px 60px", "repeat(5, 60px)"]);
41 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content r epeat(2, 25%) 1fr", "100px repeat(2, 25%) 1fr", ["0px 200px 200px 400px", "0px r epeat(2, 200px) 400px"], ["100px 150px 150px 200px", "100px repeat(2, 150px) 200 px"]);
42 TestingUtils.testGridTemplateColumnsRows("grid", "max-content repeat (2, 25%) 1fr", "max-content repeat(2, 25%) 1fr", ["90px 200px 200px 310px", "90p x repeat(2, 200px) 310px"], ["10px 150px 150px 290px", "10px repeat(2, 150px) 29 0px"]);
43 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, min -content 50px)", "repeat(2, min-content 50px)", ["0px 50px 0px 50px", "repeat(2, 0px 50px)"], ["0px 50px 0px 50px", "repeat(2, 0px 50px)"]);
44 TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, min-cont ent 50px)", "repeat(2, min-content 50px)", "40px 50px 0px 50px", "20px 50px 0px 50px");
45 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "[a] 100px [b] 250px [c a] 100px [b] 250px [c]", "[a] 50px [b] 250px [c a] 50px [b] 250px [c]");
46 TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, [a] minm ax(50px, 100px) [b] 25em [c])", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c]) ", "[a] 100px [b] 250px [c a] 100px [b] 250px [c]", "[a] 50px [b] 250px [c a] 50 px [b] 250px [c]");
47 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, auto [b] 100px) [c]", "[a] repeat(2, auto [b] 100px) [c]", ["[a] 0px [b] 100px 0px [b] 100px [c]", "[a] repeat(2, 0px [b] 100px) [c]"], ["[a] 0px [b] 100px 0px [b] 100px [c]", "[a] repeat(2, 0px [b] 100px) [c]"]);
48 TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, auto [b] 100px) [c]", "[a] repeat(2, auto [b] 100px) [c]", "[a] 90px [b] 100px 0px [ b] 100px [c]", "[a] 10px [b] 100px 0px [b] 100px [c]");
49 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto repe at(2, [b] 100px) [c]", "[a] auto repeat(2, [b] 100px) [c]", ["[a] 0px [b] 100px [b] 100px [c]", "[a] 0px repeat(2, [b] 100px) [c]"], ["[a] 0px [b] 100px [b] 100 px [c]", "[a] 0px repeat(2, [b] 100px) [c]"]);
50 TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto repeat(2, [b] 100px) [c]", "[a] auto repeat(2, [b] 100px) [c]", ["[a] 90px [b] 100px [b] 100px [c]", "[a] 90px repeat(2, [b] 100px) [c]"], ["[a] 10px [b] 100px [b] 100px [c]", "[a] 10px repeat(2, [b] 100px) [c]"]);
51 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, auto [b]) 100px [c]", "[a] repeat(2, auto [b]) 100px [c]", "[a] 0px [b] 0px [b] 100px [c]", "[a] 0px [b] 0px [b] 100px [c]");
52 TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, auto [b]) 100px [c]", "[a] repeat(2, auto [b]) 100px [c]", "[a] 90px [b] 0px [b] 100 px [c]", "[a] 10px [b] 0px [b] 100px [c]");
53 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, [b] 100px)", "[a] repeat(2, [b] 100px)", ["[a b] 100px [b] 100px", "[a] repeat( 2, [b] 100px)"], ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"]);
54 TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, [b] 100px)", "[a] repeat(2, [b] 100px)", ["[a b] 100px [b] 100px", "[a] repeat(2, [b ] 100px)"], ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"]);
55 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, [b] auto [c]) [d]", "[a] repeat(2, [b] auto [c]) [d]", ["[a b] 0px [c b] 0px [c d]", "[a] repeat(2, [b] 0px [c]) [d]"], ["[a b] 0px [c b] 0px [c d]", "[a] repe at(2, [b] 0px [c]) [d]"]);
56 TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, [b] auto [c]) [d]", "[a] repeat(2, [b] auto [c]) [d]", "[a b] 90px [c b] 0px [c d]", "[a b] 10px [c b] 0px [c d]");
57 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] min-conte nt repeat(2, [b] 1fr [c] calc(20px + 10%)) [d] minmax(30em, 50em) [e]", "[z] min -content repeat(2, [y] 1fr [x] calc(10% + 40px)) [w] minmax(3em, 5em) [v]", ["[a ] 0px [b] 50px [c] 100px [b] 50px [c] 100px [d] 500px [e]", "[a] 0px repeat(2, [ b] 50px [c] 100px) [d] 500px [e]"], ["[z] 0px [y] 175px [x] 100px [y] 175px [x] 100px [w] 50px [v]", "[z] 0px repeat(2, [y] 175px [x] 100px) [w] 50px [v]"]);
58 TestingUtils.testGridTemplateColumnsRows("grid", "[a] min-content re peat(2, [b] 1fr [c] calc(20px + 10%)) [d] minmax(30em, 50em) [e]", "[z] min-cont ent repeat(2, [y] 1fr [x] calc(10% + 40px)) [w] minmax(3em, 5em) [v]", ["[a] 40p x [b] 30px [c] 100px [b] 30px [c] 100px [d] 500px [e]", "[a] 40px repeat(2, [b] 30px [c] 100px) [d] 500px [e]"], ["[z] 20px [y] 165px [x] 100px [y] 165px [x] 10 0px [w] 50px [v]", "[z] 20px repeat(2, [y] 165px [x] 100px) [w] 50px [v]"]);
59
60 // Reset values.
61 document.getElementById("emptyGrid").style.gridTemplateColumns = "";
62 document.getElementById("emptyGrid").style.gridTemplateRows = "";
63 document.getElementById("grid").style.gridTemplateColumns = "";
64 document.getElementById("grid").style.gridTemplateRows = "";
65
66 // Wrong values.
67 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(-1, au to)", "repeat(-1, auto)", "none", "none");
68 TestingUtils.testGridTemplateColumnsRows("grid", "repeat(-1, auto)", "repeat(-1, auto)", "90px", "10px");
69 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(auto, 2)", "repeat(auto, 2)", "none", "none");
70 TestingUtils.testGridTemplateColumnsRows("grid", "repeat(auto, 2)", "repeat(auto, 2)", "90px", "10px");
71 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat 2, aut o", "repeat 2, auto", "none", "none");
72 TestingUtils.testGridTemplateColumnsRows("grid", "repeat 2, auto", " repeat 2, auto", "90px", "10px");
73 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2 auto )", "repeat(2 auto)", "none", "none");
74 TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2 auto)", " repeat(2 auto)", "90px", "10px");
75 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px (repeat 2, auto)", "(repeat 2, auto)", "none", "none");
76 TestingUtils.testGridTemplateColumnsRows("grid", "100px (repeat 2, a uto)", "(repeat 2, auto)", "90px", "10px");
77 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, 50p x repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "none", "none");
78 TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, 50px rep eat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "90px", "10px");
79 TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px repeat( 2, [a])", "100px repeat(2, [a])", "none", "none");
80 TestingUtils.testGridTemplateColumnsRows("grid", "100px repeat(2, [a ])", "100px repeat(2, [a])", "90px", "10px");
81 ]]></script>
82 </body>
83 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698