OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE HTML> |
| 2 <html> |
| 3 <head> |
| 4 <script> |
| 5 if (window.testRunner) |
| 6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); |
| 7 </script> |
| 8 <link href="resources/grid.css" rel="stylesheet"> |
| 9 <style> |
| 10 .gridWithFixed { |
| 11 -webkit-grid-columns: "first" 10px; |
| 12 -webkit-grid-rows: "first" 15px; |
| 13 } |
| 14 .gridWithPercent { |
| 15 -webkit-grid-columns: 53% "last"; |
| 16 -webkit-grid-rows: 27% "last"; |
| 17 } |
| 18 .gridWithAuto { |
| 19 -webkit-grid-columns: "first" auto; |
| 20 -webkit-grid-rows: auto "last"; |
| 21 } |
| 22 .gridWithMinMax { |
| 23 -webkit-grid-columns: "first" minmax(10%, 15px); |
| 24 -webkit-grid-rows: minmax(20px, 50%) "last"; |
| 25 } |
| 26 .gridWithFixedMultiple { |
| 27 -webkit-grid-columns: "first" "nav" 10px "last"; |
| 28 -webkit-grid-rows: "first" "nav" 15px "last"; |
| 29 } |
| 30 .gridWithPercentageSameStringMultipleTimes { |
| 31 -webkit-grid-columns: "first" "nav" 10% "nav" 15% "last"; |
| 32 -webkit-grid-rows: "first" "nav2" 25% "nav2" 75% "last"; |
| 33 } |
| 34 </style> |
| 35 <script src="../js/resources/js-test-pre.js"></script> |
| 36 </head> |
| 37 <body> |
| 38 <div class="grid gridWithFixed" id="gridWithFixedElement"></div> |
| 39 <div class="grid gridWithPercent" id="gridWithPercentElement"></div> |
| 40 <div class="grid gridWithAuto" id="gridWithAutoElement"></div> |
| 41 <div class="grid gridWithMinMax" id="gridWithMinMax"></div> |
| 42 <div class="grid gridWithFixedMultiple" id="gridWithFixedMultiple"></div> |
| 43 <div class="grid gridWithPercentageSameStringMultipleTimes" id="gridWithPercenta
geSameStringMultipleTimes"></div> |
| 44 <script> |
| 45 description('Test that setting and getting grid-columns and grid-rows works
as expected'); |
| 46 |
| 47 function testValue(gridElement, namedGridColumns, namedGridRows) |
| 48 { |
| 49 this.gridElement = gridElement; |
| 50 shouldBeEqualToString("getComputedStyle(gridElement, '').getPropertyValu
e('-webkit-grid-columns')", namedGridColumns); |
| 51 shouldBeEqualToString("getComputedStyle(gridElement, '').getPropertyValu
e('-webkit-grid-rows')", namedGridRows); |
| 52 } |
| 53 |
| 54 function testCSSValue(gridElementId, namedGridColumns, namedGridRows) |
| 55 { |
| 56 testValue(document.getElementById(gridElementId), namedGridColumns, name
dGridRows); |
| 57 } |
| 58 |
| 59 debug("Test getting -webkit-grid-columns and -webkit-grid-rows set through C
SS"); |
| 60 testCSSValue("gridWithFixedElement", "first 10px", "first 15px"); |
| 61 testCSSValue("gridWithPercentElement", "53% last", "27% last"); |
| 62 testCSSValue("gridWithAutoElement", "first auto", "auto last"); |
| 63 testCSSValue("gridWithMinMax", "first minmax(10%, 15px)", "minmax(20px, 50%)
last"); |
| 64 testCSSValue("gridWithFixedMultiple", "nav first 10px last", "nav first 15px
last"); |
| 65 testCSSValue("gridWithPercentageSameStringMultipleTimes", "nav first 10% nav
15% last", "first nav2 25% nav2 75% last"); |
| 66 |
| 67 debug(""); |
| 68 debug("Test getting and setting -webkit-grid-columns and -webkit-grid-rows t
hrough JS"); |
| 69 var element = document.createElement("div"); |
| 70 document.body.appendChild(element); |
| 71 element.style.webkitGridColumns = "'first' 18px"; |
| 72 element.style.webkitGridRows = "66px 'last'"; |
| 73 testValue(element, "first 18px", "66px last"); |
| 74 |
| 75 element = document.createElement("div"); |
| 76 document.body.appendChild(element); |
| 77 element.style.webkitGridColumns = "'first' 55%"; |
| 78 element.style.webkitGridRows = "40% 'last'"; |
| 79 testValue(element, "first 55%", "40% last"); |
| 80 |
| 81 element = document.createElement("div"); |
| 82 document.body.appendChild(element); |
| 83 element.style.webkitGridColumns = "'first' auto"; |
| 84 element.style.webkitGridRows = "auto 'last'"; |
| 85 testValue(element, "first auto", "auto last"); |
| 86 |
| 87 element = document.createElement("div"); |
| 88 document.body.appendChild(element); |
| 89 element.style.webkitGridColumns = "'first' -webkit-min-content"; |
| 90 element.style.webkitGridRows = "-webkit-min-content 'last'"; |
| 91 testValue(element, "first -webkit-min-content", "-webkit-min-content last"); |
| 92 |
| 93 element = document.createElement("div"); |
| 94 document.body.appendChild(element); |
| 95 element.style.webkitGridColumns = "'first' -webkit-max-content"; |
| 96 element.style.webkitGridRows = "-webkit-max-content 'last'"; |
| 97 testValue(element, "first -webkit-max-content", "-webkit-max-content last"); |
| 98 |
| 99 element = document.createElement("div"); |
| 100 document.body.appendChild(element); |
| 101 element.style.webkitGridColumns = "'first' minmax(55%, 45px)"; |
| 102 element.style.webkitGridRows = "minmax(30px, 40%) 'last'"; |
| 103 testValue(element, "first minmax(55%, 45px)", "minmax(30px, 40%) last"); |
| 104 |
| 105 element = document.createElement("div"); |
| 106 document.body.appendChild(element); |
| 107 element.style.font = "10px Ahem"; |
| 108 element.style.webkitGridColumns = "'first' minmax(22em, -webkit-max-content)
"; |
| 109 element.style.webkitGridRows = "minmax(-webkit-max-content, 5em) 'last'"; |
| 110 testValue(element, "first minmax(220px, -webkit-max-content)", "minmax(-webk
it-max-content, 50px) last"); |
| 111 |
| 112 element = document.createElement("div"); |
| 113 document.body.appendChild(element); |
| 114 element.style.font = "10px Ahem"; |
| 115 element.style.webkitGridColumns = "'first' minmax(22em, -webkit-max-content)
"; |
| 116 element.style.webkitGridRows = "minmax(-webkit-max-content, 5em) 'last'"; |
| 117 testValue(element, "first minmax(220px, -webkit-max-content)", "minmax(-webk
it-max-content, 50px) last"); |
| 118 |
| 119 element = document.createElement("div"); |
| 120 document.body.appendChild(element); |
| 121 element.style.webkitGridColumns = "'first' minmax(-webkit-min-content, -webk
it-max-content)"; |
| 122 element.style.webkitGridRows = "minmax(-webkit-max-content, -webkit-min-cont
ent) 'last'"; |
| 123 testValue(element, "first minmax(-webkit-min-content, -webkit-max-content)",
"minmax(-webkit-max-content, -webkit-min-content) last"); |
| 124 |
| 125 element = document.createElement("div"); |
| 126 document.body.appendChild(element); |
| 127 element.style.webkitGridColumns = "'first' 'nav' minmax(-webkit-min-content,
-webkit-max-content) 'last'"; |
| 128 element.style.webkitGridRows = "'first' 'nav' minmax(-webkit-max-content, -w
ebkit-min-content) 'last'"; |
| 129 testValue(element, "nav first minmax(-webkit-min-content, -webkit-max-conten
t) last", "nav first minmax(-webkit-max-content, -webkit-min-content) last"); |
| 130 |
| 131 element = document.createElement("div"); |
| 132 document.body.appendChild(element); |
| 133 element.style.webkitGridColumns = "'first' 'nav' minmax(-webkit-min-content,
-webkit-max-content) 'nav' auto 'last'"; |
| 134 element.style.webkitGridRows = "'first' 'nav2' minmax(-webkit-max-content, -
webkit-min-content) 'nav2' minmax(10px, 15px) 'last'"; |
| 135 testValue(element, "nav first minmax(-webkit-min-content, -webkit-max-conten
t) nav auto last", "first nav2 minmax(-webkit-max-content, -webkit-min-content)
nav2 minmax(10px, 15px) last"); |
| 136 |
| 137 element = document.createElement("div"); |
| 138 document.body.appendChild(element); |
| 139 element.style.webkitGridColumns = "'foo' 'bar' auto 'foo' auto 'bar'"; |
| 140 element.style.webkitGridRows = "'foo' 'bar' auto 'foo' auto 'bar'"; |
| 141 testValue(element, "foo bar auto foo auto bar", "foo bar auto foo auto bar")
; |
| 142 |
| 143 debug(""); |
| 144 debug("Test getting and setting invalid -webkit-grid-columns and -webkit-gri
d-rows through JS"); |
| 145 element = document.createElement("div"); |
| 146 document.body.appendChild(element); |
| 147 element.style.webkitGridColumns = "'foo'"; |
| 148 element.style.webkitGridRows = "'bar"; |
| 149 testValue(element, "none", "none"); |
| 150 </script> |
| 151 <script src="../js/resources/js-test-post.js"></script> |
| 152 </body> |
| 153 </html> |
OLD | NEW |