| 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 |