| OLD | NEW |
| (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</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 '(<custom-ident\>*)' 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." /
> |
| 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", "[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> |
| OLD | NEW |