| <!DOCTYPE HTML> |
| <html> |
| <head> |
| <script> |
| if (window.testRunner) |
| testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); |
| </script> |
| <link href="resources/grid.css" rel="stylesheet"> |
| <style> |
| .gridWithFixed { |
| -webkit-grid-definition-columns: "first" 10px; |
| -webkit-grid-definition-rows: "first" 15px; |
| } |
| .gridWithPercent { |
| -webkit-grid-definition-columns: 53% "last"; |
| -webkit-grid-definition-rows: 27% "last"; |
| } |
| .gridWithAuto { |
| -webkit-grid-definition-columns: "first" auto; |
| -webkit-grid-definition-rows: auto "last"; |
| } |
| .gridWithMinMax { |
| -webkit-grid-definition-columns: "first" minmax(10%, 15px); |
| -webkit-grid-definition-rows: minmax(20px, 50%) "last"; |
| } |
| .gridWithFixedMultiple { |
| -webkit-grid-definition-columns: "first" "nav" 10px "last"; |
| -webkit-grid-definition-rows: "first" "nav" 15px "last"; |
| } |
| .gridWithPercentageSameStringMultipleTimes { |
| -webkit-grid-definition-columns: "first" "nav" 10% "nav" 15% "last"; |
| -webkit-grid-definition-rows: "first" "nav2" 25% "nav2" 75% "last"; |
| } |
| </style> |
| <script src="../../resources/js-test-pre.js"></script> |
| </head> |
| <body> |
| <div class="grid gridWithFixed" id="gridWithFixedElement"></div> |
| <div class="grid gridWithPercent" id="gridWithPercentElement"></div> |
| <div class="grid gridWithAuto" id="gridWithAutoElement"></div> |
| <div class="grid gridWithMinMax" id="gridWithMinMax"></div> |
| <div class="grid gridWithFixedMultiple" id="gridWithFixedMultiple"></div> |
| <div class="grid gridWithPercentageSameStringMultipleTimes" id="gridWithPercentageSameStringMultipleTimes"></div> |
| <script src="resources/grid-definitions-parsing-utils.js"></script> |
| <script> |
| description('Test that setting and getting grid-definition-columns and grid-definition-rows works as expected'); |
| |
| debug("Test getting -webkit-grid-definition-columns and -webkit-grid-definition-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"), "nav first 10px last", "nav first 15px last"); |
| testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStringMultipleTimes"), "nav first 10% nav 15% last", "first nav2 25% nav2 75% last"); |
| |
| debug(""); |
| debug("Test getting and setting -webkit-grid-definition-columns and -webkit-grid-definition-rows through JS"); |
| testGridDefinitionsSetJSValues("'first' 18px", "66px 'last'", "first 18px", "66px last", "first 18px", "66px last"); |
| testGridDefinitionsSetJSValues("'first' 55%", "40% 'last'", "first 55%", "40% last", "first 55%", "40% last"); |
| testGridDefinitionsSetJSValues("'first' auto", "auto 'last'", "first auto", "auto last", "first auto", "auto last"); |
| testGridDefinitionsSetJSValues("'first' -webkit-min-content", "-webkit-min-content 'last'", "first -webkit-min-content", "-webkit-min-content last", "first -webkit-min-content", "-webkit-min-content last"); |
| testGridDefinitionsSetJSValues("'first' -webkit-max-content", "-webkit-max-content 'last'", "first -webkit-max-content", "-webkit-max-content last", "first -webkit-max-content", "-webkit-max-content last"); |
| testGridDefinitionsSetJSValues("'first' minmax(55%, 45px)", "minmax(30px, 40%) 'last'", "first minmax(55%, 45px)", "minmax(30px, 40%) last", "first minmax(55%, 45px)", "minmax(30px, 40%) last"); |
| testGridDefinitionsSetJSValues("'first' minmax(22em, -webkit-max-content)", "minmax(-webkit-max-content, 5em) 'last'", "first minmax(220px, -webkit-max-content)" ,"minmax(-webkit-max-content, 50px) last", "first minmax(22em, -webkit-max-content)" ,"minmax(-webkit-max-content, 5em) last"); |
| testGridDefinitionsSetJSValues("'first' minmax(22em, -webkit-min-content)", "minmax(-webkit-min-content, 5em) 'last'", "first minmax(220px, -webkit-min-content)", "minmax(-webkit-min-content, 50px) last", "first minmax(22em, -webkit-min-content)", "minmax(-webkit-min-content, 5em) last"); |
| testGridDefinitionsSetJSValues("'first' minmax(-webkit-min-content, -webkit-max-content)", "minmax(-webkit-max-content, -webkit-min-content) 'last'", "first minmax(-webkit-min-content, -webkit-max-content)", "minmax(-webkit-max-content, -webkit-min-content) last", "first minmax(-webkit-min-content, -webkit-max-content)", "minmax(-webkit-max-content, -webkit-min-content) last"); |
| testGridDefinitionsSetJSValues("'first' 'nav' minmax(-webkit-min-content, -webkit-max-content) 'last'", "'first' 'nav' minmax(-webkit-max-content, -webkit-min-content) 'last'", "nav first minmax(-webkit-min-content, -webkit-max-content) last", "nav first minmax(-webkit-max-content, -webkit-min-content) last", "first nav minmax(-webkit-min-content, -webkit-max-content) last", "first nav minmax(-webkit-max-content, -webkit-min-content) last"); |
| testGridDefinitionsSetJSValues("'first' 'nav' minmax(-webkit-min-content, -webkit-max-content) 'nav' auto 'last'", "'first' 'nav2' minmax(-webkit-max-content, -webkit-min-content) 'nav2' minmax(10px, 15px) 'last'", "nav first minmax(-webkit-min-content, -webkit-max-content) nav auto last", "first nav2 minmax(-webkit-max-content, -webkit-min-content) nav2 minmax(10px, 15px) last", "first nav minmax(-webkit-min-content, -webkit-max-content) nav auto last", "first nav2 minmax(-webkit-max-content, -webkit-min-content) nav2 minmax(10px, 15px) last"); |
| testGridDefinitionsSetJSValues("'foo' 'bar' auto 'foo' auto 'bar'", "'foo' 'bar' auto 'foo' auto 'bar'", "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 -webkit-grid-definition-columns and -webkit-grid-definition-rows through JS"); |
| testGridDefinitionsSetBadJSValues("foo", "bar"); |
| testGridDefinitionsSetBadJSValues("foo bar", "bar foo"); |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
