| <!DOCTYPE HTML> |
| <html> |
| <head> |
| <link href="resources/grid.css" rel="stylesheet"> |
| <style> |
| .gridItem { |
| grid-column: 1; |
| grid-row: 1; |
| height: 22px; |
| width: 77px; |
| } |
| .gridWithFixed { |
| grid-template-columns: [first] 10px; |
| grid-template-rows: [first] 15px; |
| } |
| .gridWithPercent { |
| grid-template-columns: 53% [last]; |
| grid-template-rows: 27% [last]; |
| } |
| .gridWithAuto { |
| grid-template-columns: [first] auto; |
| grid-template-rows: auto [last]; |
| } |
| .gridWithMinMax { |
| grid-template-columns: [first] minmax(10%, 15px); |
| grid-template-rows: minmax(20px, 50%) [last]; |
| } |
| .gridWithFixedMultiple { |
| grid-template-columns: [first nav] 10px [last]; |
| grid-template-rows: [first nav] 15px [last]; |
| } |
| .gridWithPercentageSameStringMultipleTimes { |
| grid-template-columns: [first nav] 10% [nav] 15% [last]; |
| grid-template-rows: [first nav2] 25% [nav2] 75% [last]; |
| } |
| .gridWithRepeat { |
| grid-template-columns: [first] 10px repeat(2, [nav nav2] 50%); |
| grid-template-rows: 100px repeat(2, [nav nav2] 25%) [last]; |
| } |
| .gridWithEmptyBrackets { |
| grid-template-columns: [] 10px; |
| grid-template-rows: 20px [ ] 50px []; |
| } |
| </style> |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <div class="gridWithFixed" id="gridWithFixedElement"></div> |
| <div class="gridWithPercent" id="gridWithPercentElement"></div> |
| <div class="gridWithAuto" id="gridWithAutoElement"></div> |
| <div class="gridWithAuto" id="gridWithAutoWithChildrenElement"> |
| <div class="gridItem"></div> |
| </div> |
| <div class="gridWithMinMax" id="gridWithMinMax"></div> |
| <div class="gridWithFixedMultiple" id="gridWithFixedMultiple"></div> |
| <div class="gridWithPercentageSameStringMultipleTimes" id="gridWithPercentageSameStringMultipleTimes"></div> |
| <div class="gridWithRepeat" id="gridWithRepeatElement"></div> |
| <div class="gridWithEmptyBrackets" id="gridWithEmptyBrackets"></div> |
| |
| <script src="resources/grid-definitions-parsing-utils.js"></script> |
| <script> |
| description('Test that setting and getting grid-template-columns and grid-template-rows works as expected'); |
| |
| debug("Test getting grid-template-columns and grid-template-rows set through CSS"); |
| testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "[first] 10px", "[first] 15px"); |
| testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "53% [last]", "27% [last]"); |
| testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "[first] auto", "auto [last]"); |
| testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "[first] minmax(10%, 15px)", "minmax(20px, 50%) [last]"); |
| testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"), "[first nav] 10px [last]", "[first nav] 15px [last]"); |
| testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStringMultipleTimes"), "[first nav] 10% [nav] 15% [last]", "[first nav2] 25% [nav2] 75% [last]"); |
| testGridDefinitionsValues(document.getElementById("gridWithRepeatElement"), "[first] 10px [nav nav2] 50% [nav nav2] 50%", "100px [nav nav2] 25% [nav nav2] 25% [last]"); |
| testGridDefinitionsValues(document.getElementById("gridWithEmptyBrackets"), "10px", "20px 50px"); |
| |
| debug(""); |
| debug("Test getting and setting grid-template-columns and grid-template-rows through JS"); |
| testNonGridDefinitionsSetJSValues("[first] 18px", "66px [last]", "[first] 18px", "66px [last]", "[first] 18px", "66px [last]"); |
| testNonGridDefinitionsSetJSValues("[first] 55%", "40% [last]", "[first] 55%", "40% [last]", "[first] 55%", "40% [last]"); |
| testNonGridDefinitionsSetJSValues("[first] auto", "auto [last]", "[first] auto", "auto [last]", "[first] auto", "auto [last]"); |
| testNonGridDefinitionsSetJSValues("[first] min-content", "min-content [last]", "[first] min-content", "min-content [last]", "[first] min-content", "min-content [last]"); |
| testNonGridDefinitionsSetJSValues("[first] max-content", "max-content [last]", "[first] max-content", "max-content [last]", "[first] max-content", "max-content [last]"); |
| 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]"); |
| testNonGridDefinitionsSetJSValues("[first] minmax(22em, max-content)", "minmax(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]"); |
| testNonGridDefinitionsSetJSValues("[first] minmax(22em, min-content)", "minmax(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]"); |
| testNonGridDefinitionsSetJSValues("[first] minmax(min-content, max-content)", "minmax(max-content, min-content) [last]", "[first] minmax(min-content, max-content)", "minmax(max-content, min-content) [last]", "[first] minmax(min-content, max-content)", "minmax(max-content, min-content) [last]"); |
| testNonGridDefinitionsSetJSValues("[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]", "[first nav] minmax(min-content, max-content) [last]", "[first nav] minmax(max-content, min-content) [last]"); |
| testNonGridDefinitionsSetJSValues("[first nav] minmax(min-content, max-content) [nav] auto [last]", "[first nav2] minmax(max-content, min-content) [nav2] minmax(10px, 15px) [last]", "[first nav] minmax(min-content, max-content) [nav] auto [last]", "[first nav2] minmax(max-content, min-content) [nav2] minmax(10px, 15px) [last]", "[first nav] minmax(min-content, max-content) [nav] auto [last]", "[first nav2] minmax(max-content, min-content) [nav2] minmax(10px, 15px) [last]");; |
| testNonGridDefinitionsSetJSValues("[foo bar] auto [foo] auto [bar]", "[foo bar] auto [foo] auto [bar]", "[foo bar] auto [foo] auto [bar]", "[foo bar] auto [foo] auto [bar]"); |
| |
| debug(""); |
| debug("Test getting and setting invalid grid-template-columns and grid-template-rows through JS"); |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| element.style.gridTemplateColumns = "'foo'"; |
| element.style.gridTemplateRows = "'bar"; |
| shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "none"); |
| shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "none"); |
| |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| element.style.gridTemplateColumns = "'foo' 'bar'"; |
| element.style.gridTemplateRows = "'bar' 'foo'"; |
| shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "none"); |
| shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-template-rows')", "none"); |
| </script> |
| </body> |
| </html> |
