OLD | NEW |
1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <link href="resources/grid.css" rel="stylesheet"> | 4 <link href="resources/grid.css" rel="stylesheet"> |
5 <style> | 5 <style> |
6 .gridItem { | 6 .gridItem { |
7 grid-column: 1; | 7 grid-column: 1; |
8 grid-row: 1; | 8 grid-row: 1; |
9 height: 22px; | 9 height: 22px; |
10 width: 77px; | 10 width: 77px; |
(...skipping 23 matching lines...) Expand all Loading... |
34 grid-template-rows: (first nav2) 25% (nav2) 75% (last); | 34 grid-template-rows: (first nav2) 25% (nav2) 75% (last); |
35 } | 35 } |
36 .gridWithRepeat { | 36 .gridWithRepeat { |
37 grid-template-columns: (first) 10px repeat(2, (nav nav2) 50%); | 37 grid-template-columns: (first) 10px repeat(2, (nav nav2) 50%); |
38 grid-template-rows: 100px repeat(2, (nav nav2) 25%) (last); | 38 grid-template-rows: 100px repeat(2, (nav nav2) 25%) (last); |
39 } | 39 } |
40 .gridWithEmptyParentheses { | 40 .gridWithEmptyParentheses { |
41 grid-template-columns: () 10px; | 41 grid-template-columns: () 10px; |
42 grid-template-rows: 20px ( ) 50px (); | 42 grid-template-rows: 20px ( ) 50px (); |
43 } | 43 } |
| 44 .gridWithAutoAsCustomIdent { |
| 45 grid-template-columns: (auto) 10px 50px; |
| 46 grid-template-rows: 50px (auto) 10px; |
| 47 } |
| 48 .gridWithMinmaxAsCustomIdent { |
| 49 grid-template-columns: (minmax) 10px 50px; |
| 50 grid-template-rows: 50px (minmax) 10px; |
| 51 } |
| 52 .gridWithSubgridAsCustomIdent { |
| 53 grid-template-columns: (subgrid) 10px 50px; |
| 54 grid-template-rows: 50px (subgrid) 10px; |
| 55 } |
44 </style> | 56 </style> |
45 <script src="../../resources/js-test.js"></script> | 57 <script src="../../resources/js-test.js"></script> |
46 </head> | 58 </head> |
47 <body> | 59 <body> |
48 <div class="gridWithFixed" id="gridWithFixedElement"></div> | 60 <div class="gridWithFixed" id="gridWithFixedElement"></div> |
49 <div class="gridWithPercent" id="gridWithPercentElement"></div> | 61 <div class="gridWithPercent" id="gridWithPercentElement"></div> |
50 <div class="gridWithAuto" id="gridWithAutoElement"></div> | 62 <div class="gridWithAuto" id="gridWithAutoElement"></div> |
51 <div class="gridWithAuto" id="gridWithAutoWithChildrenElement"> | 63 <div class="gridWithAuto" id="gridWithAutoWithChildrenElement"> |
52 <div class="gridItem"></div> | 64 <div class="gridItem"></div> |
53 </div> | 65 </div> |
54 <div class="gridWithMinMax" id="gridWithMinMax"></div> | 66 <div class="gridWithMinMax" id="gridWithMinMax"></div> |
55 <div class="gridWithFixedMultiple" id="gridWithFixedMultiple"></div> | 67 <div class="gridWithFixedMultiple" id="gridWithFixedMultiple"></div> |
56 <div class="gridWithPercentageSameStringMultipleTimes" id="gridWithPercentageSam
eStringMultipleTimes"></div> | 68 <div class="gridWithPercentageSameStringMultipleTimes" id="gridWithPercentageSam
eStringMultipleTimes"></div> |
57 <div class="gridWithRepeat" id="gridWithRepeatElement"></div> | 69 <div class="gridWithRepeat" id="gridWithRepeatElement"></div> |
58 <div class="gridWithEmptyParentheses" id="gridWithEmptyParentheses"></div> | 70 <div class="gridWithEmptyParentheses" id="gridWithEmptyParentheses"></div> |
| 71 <div class="gridWithAutoAsCustomIdent" id="gridWithAutoAsCustomIdent"></div> |
| 72 <div class="gridWithMinmaxAsCustomIdent" id="gridWithMinmaxAsCustomIdent"></div> |
| 73 <div class="gridWithSubgridAsCustomIdent" id="gridWithSubgridAsCustomIdent"></di
v> |
59 | 74 |
60 <script src="resources/grid-definitions-parsing-utils.js"></script> | 75 <script src="resources/grid-definitions-parsing-utils.js"></script> |
61 <script> | 76 <script> |
62 description('Test that setting and getting grid-template-columns and grid-te
mplate-rows works as expected'); | 77 description('Test that setting and getting grid-template-columns and grid-te
mplate-rows works as expected'); |
63 | 78 |
64 debug("Test getting grid-template-columns and grid-template-rows set through
CSS"); | 79 debug("Test getting grid-template-columns and grid-template-rows set through
CSS"); |
65 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "
(first) 10px", "(first) 15px"); | 80 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "
(first) 10px", "(first) 15px"); |
66 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"),
"53% (last)", "27% (last)"); | 81 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"),
"53% (last)", "27% (last)"); |
67 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "(
first) auto", "auto (last)"); | 82 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "(
first) auto", "auto (last)"); |
68 testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "(first
) minmax(10%, 15px)", "minmax(20px, 50%) (last)"); | 83 testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "(first
) minmax(10%, 15px)", "minmax(20px, 50%) (last)"); |
(...skipping 11 matching lines...) Expand all Loading... |
80 testNonGridDefinitionsSetJSValues("(first) max-content", "max-content (last)
", "(first) max-content", "max-content (last)", "(first) max-content", "max-cont
ent (last)"); | 95 testNonGridDefinitionsSetJSValues("(first) max-content", "max-content (last)
", "(first) max-content", "max-content (last)", "(first) max-content", "max-cont
ent (last)"); |
81 testNonGridDefinitionsSetJSValues("(first) minmax(55%, 45px)", "minmax(30px,
40%) (last)", "(first) minmax(55%, 45px)", "minmax(30px, 40%) (last)", "(first)
minmax(55%, 45px)", "minmax(30px, 40%) (last)"); | 96 testNonGridDefinitionsSetJSValues("(first) minmax(55%, 45px)", "minmax(30px,
40%) (last)", "(first) minmax(55%, 45px)", "minmax(30px, 40%) (last)", "(first)
minmax(55%, 45px)", "minmax(30px, 40%) (last)"); |
82 testNonGridDefinitionsSetJSValues("(first) minmax(22em, max-content)", "minm
ax(max-content, 5em) (last)", "(first) minmax(220px, max-content)", "minmax(max-
content, 50px) (last)", "(first) minmax(22em, max-content)", "minmax(max-content
, 5em) (last)", "(first) minmax(220px, max-content)", "minmax(max-content, 50px)
(last)", "minmax(max-content, 50px) (last)"); | 97 testNonGridDefinitionsSetJSValues("(first) minmax(22em, max-content)", "minm
ax(max-content, 5em) (last)", "(first) minmax(220px, max-content)", "minmax(max-
content, 50px) (last)", "(first) minmax(22em, max-content)", "minmax(max-content
, 5em) (last)", "(first) minmax(220px, max-content)", "minmax(max-content, 50px)
(last)", "minmax(max-content, 50px) (last)"); |
83 testNonGridDefinitionsSetJSValues("(first) minmax(22em, min-content)", "minm
ax(min-content, 5em) (last)", "(first) minmax(220px, min-content)", "minmax(min-
content, 50px) (last)", "(first) minmax(22em, min-content)", "minmax(min-content
, 5em) (last)", "(first) minmax(220px, min-content)", "minmax(min-content, 50px)
(last)", "minmax(min-content, 50px) (last)"); | 98 testNonGridDefinitionsSetJSValues("(first) minmax(22em, min-content)", "minm
ax(min-content, 5em) (last)", "(first) minmax(220px, min-content)", "minmax(min-
content, 50px) (last)", "(first) minmax(22em, min-content)", "minmax(min-content
, 5em) (last)", "(first) minmax(220px, min-content)", "minmax(min-content, 50px)
(last)", "minmax(min-content, 50px) (last)"); |
84 testNonGridDefinitionsSetJSValues("(first) minmax(min-content, max-content)"
, "minmax(max-content, min-content) (last)", "(first) minmax(min-content, max-co
ntent)", "minmax(max-content, min-content) (last)", "(first) minmax(min-content,
max-content)", "minmax(max-content, min-content) (last)"); | 99 testNonGridDefinitionsSetJSValues("(first) minmax(min-content, max-content)"
, "minmax(max-content, min-content) (last)", "(first) minmax(min-content, max-co
ntent)", "minmax(max-content, min-content) (last)", "(first) minmax(min-content,
max-content)", "minmax(max-content, min-content) (last)"); |
85 testNonGridDefinitionsSetJSValues("(first nav) minmax(min-content, max-conte
nt) (last)", "(first nav) minmax(max-content, min-content) (last)", "(first nav)
minmax(min-content, max-content) (last)", "(first nav) minmax(max-content, min-
content) (last)", "(first nav) minmax(min-content, max-content) (last)", "(first
nav) minmax(max-content, min-content) (last)"); | 100 testNonGridDefinitionsSetJSValues("(first nav) minmax(min-content, max-conte
nt) (last)", "(first nav) minmax(max-content, min-content) (last)", "(first nav)
minmax(min-content, max-content) (last)", "(first nav) minmax(max-content, min-
content) (last)", "(first nav) minmax(min-content, max-content) (last)", "(first
nav) minmax(max-content, min-content) (last)"); |
86 testNonGridDefinitionsSetJSValues("(first nav) minmax(min-content, max-conte
nt) (nav) auto (last)", "(first nav2) minmax(max-content, min-content) (nav2) mi
nmax(10px, 15px) (last)", "(first nav) minmax(min-content, max-content) (nav) au
to (last)", "(first nav2) minmax(max-content, min-content) (nav2) minmax(10px, 1
5px) (last)", "(first nav) minmax(min-content, max-content) (nav) auto (last)",
"(first nav2) minmax(max-content, min-content) (nav2) minmax(10px, 15px) (last)"
);; | 101 testNonGridDefinitionsSetJSValues("(first nav) minmax(min-content, max-conte
nt) (nav) auto (last)", "(first nav2) minmax(max-content, min-content) (nav2) mi
nmax(10px, 15px) (last)", "(first nav) minmax(min-content, max-content) (nav) au
to (last)", "(first nav2) minmax(max-content, min-content) (nav2) minmax(10px, 1
5px) (last)", "(first nav) minmax(min-content, max-content) (nav) auto (last)",
"(first nav2) minmax(max-content, min-content) (nav2) minmax(10px, 15px) (last)"
);; |
87 testNonGridDefinitionsSetJSValues("(foo bar) auto (foo) auto (bar)", "(foo b
ar) auto (foo) auto (bar)", "(foo bar) auto (foo) auto (bar)", "(foo bar) auto (
foo) auto (bar)"); | 102 testNonGridDefinitionsSetJSValues("(foo bar) auto (foo) auto (bar)", "(foo b
ar) auto (foo) auto (bar)", "(foo bar) auto (foo) auto (bar)", "(foo bar) auto (
foo) auto (bar)"); |
88 | 103 |
89 debug(""); | 104 debug(""); |
| 105 debug("Test getting invalid grid-template-columns and grid-template-rows set
through CSS"); |
| 106 testGridDefinitionsValues(document.getElementById("gridWithAutoAsCustomIdent
"), "none", "none"); |
| 107 testGridDefinitionsValues(document.getElementById("gridWithMinmaxAsCustomIde
nt"), "none", "none"); |
| 108 testGridDefinitionsValues(document.getElementById("gridWithSubgridAsCustomId
ent"), "none", "none"); |
| 109 |
| 110 debug(""); |
90 debug("Test getting and setting invalid grid-template-columns and grid-templ
ate-rows through JS"); | 111 debug("Test getting and setting invalid grid-template-columns and grid-templ
ate-rows through JS"); |
91 element = document.createElement("div"); | 112 testGridDefinitionsSetBadJSValues("'foo'", "'bar'"); |
92 document.body.appendChild(element); | 113 testGridDefinitionsSetBadJSValues("'foo' 'bar'", "'bar' 'foo'"); |
93 element.style.gridTemplateColumns = "'foo'"; | |
94 element.style.gridTemplateRows = "'bar"; | |
95 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-
template-columns')", "none"); | |
96 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-
template-rows')", "none"); | |
97 | |
98 element = document.createElement("div"); | |
99 document.body.appendChild(element); | |
100 element.style.gridTemplateColumns = "'foo' 'bar'"; | |
101 element.style.gridTemplateRows = "'bar' 'foo'"; | |
102 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-
template-columns')", "none"); | |
103 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-
template-rows')", "none"); | |
104 </script> | 114 </script> |
105 </body> | 115 </body> |
106 </html> | 116 </html> |
OLD | NEW |