| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| 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 #gridTemplateWithNone { |
| 11 grid-template: none; |
| 12 } |
| 13 #gridTemplateSimpleForm { |
| 14 grid-template: 10px / 15px; |
| 15 } |
| 16 #gridTemplateSimpleFormWithNoneColumns { |
| 17 grid-template: none / 15px; |
| 18 } |
| 19 #gridTemplateSimpleFormWithNoneRows { |
| 20 grid-template: 10px / none; |
| 21 } |
| 22 #gridTemplateSimpleFormWithNone { |
| 23 grid-template: none / none; |
| 24 } |
| 25 #gridTemplateComplexForm { |
| 26 grid-template: 10px / "a" 15px; |
| 27 } |
| 28 #gridTemplateComplexFormWithLineNames { |
| 29 grid-template: 10px / (head) "a" 15px (tail); |
| 30 } |
| 31 #gridTemplateComplexFormWithLineNamesMultipleColumns { |
| 32 grid-template: 10px / (head) "a b" 15px (tail) |
| 33 } |
| 34 #gridTemplateComplexFormWithLineNamesMultipleRows { |
| 35 grid-template: 10px / (head1) "a" 15px (tail1) |
| 36 (head2) "b" 20px (tail2); |
| 37 } |
| 38 #gridTemplateComplexFormWithAuto { |
| 39 grid-template: 10px / "a"; |
| 40 } |
| 41 #gridTemplateComplexFormOnlyAreas { |
| 42 grid-template: "a"; |
| 43 } |
| 44 |
| 45 /* Bad values. */ |
| 46 |
| 47 #gridTemplateMultipleSlash { |
| 48 grid-template: 10px / 20px / 30px; |
| 49 } |
| 50 #gridTemplateSimpleFormJustColumns { |
| 51 grid-template: 10px; |
| 52 } |
| 53 #gridTemplateSimpleFormNoRows { |
| 54 grid-template: 10px /; |
| 55 } |
| 56 #gridTemplateSimpleFormNoColumns { |
| 57 grid-template: / 10px; |
| 58 } |
| 59 #gridTemplateSimpleFormNoColumnSize { |
| 60 grid-template: (line) / 10px; |
| 61 } |
| 62 #gridTemplateSimpleFormWithFitContent { |
| 63 grid-template: -webkit-fit-content / 10px; |
| 64 } |
| 65 #gridTemplateSimpleFormWithWrongRepeat { |
| 66 grid-template: repeat(2, 50% (title) a) / 10px; |
| 67 } |
| 68 #gridTemplateSimpleFormWithMisplacedNone1 { |
| 69 grid: 10px / none 20px; |
| 70 } |
| 71 #gridTemplateSimpleFormWithMisplacedNone2 { |
| 72 grid: 10px / 20px none; |
| 73 } |
| 74 #gridTemplateSimpleFormWithMisplacedNone3 { |
| 75 grid: none 10px / 20px; |
| 76 } |
| 77 #gridTemplateSimpleFormWithMisplacedNone4 { |
| 78 grid: 10px none / 20px; |
| 79 } |
| 80 #gridTemplateComplexFormWithRepeat { |
| 81 grid-template: 10px / "a" repeat(2, 50% (title)); |
| 82 } |
| 83 #gridTemplateComplexFormWithWrongRepeat { |
| 84 grid-template: repeat(2, 50% (title) a) / "a"; |
| 85 } |
| 86 #griTemplateComplexFormdWithFitAvailable { |
| 87 grid-template: -webkit-fit-available / "a"; |
| 88 } |
| 89 #gridTemplateComplexFormNoColumnSize { |
| 90 grid-template: (line) / "a"; |
| 91 } |
| 92 #gridTemplateComplexFormMisplacedRowsSize1 { |
| 93 grid-template: 25px / 10px "a"; |
| 94 } |
| 95 #gridTemplateComplexFormMisplacedRowsSize2 { |
| 96 grid-template: 25px / "a" (name) 10px; |
| 97 } |
| 98 |
| 99 </style> |
| 100 <script src="../../resources/js-test.js"></script> |
| 101 </head> |
| 102 <body> |
| 103 <div class="grid" id="gridTemplateWithNone"></div> |
| 104 <div class="grid" id="gridTemplateSimpleForm"></div> |
| 105 <div class="grid" id="gridTemplateSimpleFormWithNoneColumns"></div> |
| 106 <div class="grid" id="gridTemplateSimpleFormWithNoneRows"></div> |
| 107 <div class="grid" id="gridTemplateSimpleFormWithNone"></div> |
| 108 <div class="grid" id="gridTemplateComplexForm"></div> |
| 109 <div class="grid" id="gridTemplateComplexFormWithLineNames"></div> |
| 110 <div class="grid" id="gridTemplateComplexFormWithLineNamesMultipleColumns"></div
> |
| 111 <div class="grid" id="gridTemplateComplexFormWithLineNamesMultipleRows"></div> |
| 112 <div class="grid" id="gridTemplateComplexFormWithAuto"></div> |
| 113 <div class="grid" id="gridTemplateComplexFormOnlyAreas"></div> |
| 114 <div class="grid" id="gridTemplateMultipleSlash"></div> |
| 115 <div class="grid" id="gridTemplateSimpleFormJustColumns"></div> |
| 116 <div class="grid" id="gridTemplateSimpleFormNoRows"></div> |
| 117 <div class="grid" id="gridTemplateSimpleFormNoColumns"></div> |
| 118 <div class="grid" id="gridTemplateSimpleFormNoColumnSize"></div> |
| 119 <div class="grid" id="gridTemplateSimpleFormWithFitContent"></div> |
| 120 <div class="grid" id="gridTemplateSimpleFormWithWrongRepeat"></div> |
| 121 <div class="grid" id="gridTemplateSimpleFormWithMisplacedNone1"></div> |
| 122 <div class="grid" id="gridTemplateSimpleFormWithMisplacedNone2"></div> |
| 123 <div class="grid" id="gridTemplateSimpleFormWithMisplacedNone3"></div> |
| 124 <div class="grid" id="gridTemplateSimpleFormWithMisplacedNone4"></div> |
| 125 <div class="grid" id="gridTemplateComplexFormWithRepeat"></div> |
| 126 <div class="grid" id="gridTemplateComplexFormWithWrongRepeat"></div> |
| 127 <div class="grid" id="griTemplateComplexFormdWithFitAvailable"></div> |
| 128 <div class="grid" id="gridTemplateComplexFormNoColumnSize"></div> |
| 129 <div class="grid" id="gridTemplateComplexFormMisplacedRowsSize1"></div> |
| 130 <div class="grid" id="gridTemplateComplexFormMisplacedRowsSize2"></div> |
| 131 <script src="resources/grid-template-shorthand-parsing-utils.js"></script> |
| 132 <script> |
| 133 description("This test checks that the 'grid-template' shorthand is properly
parsed and the longhand properties correctly assigned."); |
| 134 |
| 135 debug("Test getting grid-template-areas set through CSS."); |
| 136 testGridDefinitionsValues(document.getElementById("gridTemplateWithNone"), "
none", "none", "none"); |
| 137 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleForm"),
"10px", "15px", "none"); |
| 138 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit
hNoneColumns"), "none", "15px", "none"); |
| 139 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit
hNoneRows"), "10px", "none", "none"); |
| 140 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit
hNone"), "none", "none", "none"); |
| 141 testGridDefinitionsValues(document.getElementById("gridTemplateComplexForm")
, "10px", "15px", '"a"'); |
| 142 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWi
thLineNames"), "10px", "(head) 15px (tail)", '"a"'); |
| 143 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWi
thLineNamesMultipleColumns"), "10px", "(head) 15px (tail)", '"a b"'); |
| 144 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWi
thLineNamesMultipleRows"), "10px", "(head1) 15px (tail1 head2) 20px (tail2)", '"
a" "b"'); |
| 145 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWi
thAuto"), "10px", "0px", '"a"'); |
| 146 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormOn
lyAreas"), "none", "0px", '"a"'); |
| 147 |
| 148 debug(""); |
| 149 debug("Test getting wrong values for grid-template shorthand through CSS (th
ey should resolve to the default: 'none')"); |
| 150 testGridDefinitionsValues(document.getElementById("gridTemplateMultipleSlash
"), "none", "none", "none"); |
| 151 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormJus
tColumns"), "none", "none", "none"); |
| 152 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormNoR
ows"), "none", "none", "none"); |
| 153 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormNoC
olumns"), "none", "none", "none"); |
| 154 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormNoC
olumnSize"), "none", "none", "none"); |
| 155 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit
hFitContent"), "none", "none", "none"); |
| 156 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit
hWrongRepeat"), "none", "none", "none"); |
| 157 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit
hMisplacedNone1"), "none", "none", "none"); |
| 158 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit
hMisplacedNone2"), "none", "none", "none"); |
| 159 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit
hMisplacedNone3"), "none", "none", "none"); |
| 160 testGridDefinitionsValues(document.getElementById("gridTemplateSimpleFormWit
hMisplacedNone4"), "none", "none", "none"); |
| 161 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWi
thRepeat"), "none", "none", "none"); |
| 162 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormWi
thWrongRepeat"), "none", "none", "none"); |
| 163 testGridDefinitionsValues(document.getElementById("griTemplateComplexFormdWi
thFitAvailable"), "none", "none", "none"); |
| 164 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormNo
ColumnSize"), "none", "none", "none"); |
| 165 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormMi
splacedRowsSize1"), "none", "none", "none"); |
| 166 testGridDefinitionsValues(document.getElementById("gridTemplateComplexFormMi
splacedRowsSize2"), "none", "none", "none"); |
| 167 |
| 168 debug(""); |
| 169 debug("Test the initial value"); |
| 170 var element = document.createElement("div"); |
| 171 document.body.appendChild(element); |
| 172 testGridDefinitionsValues(element, "none", "none", "none"); |
| 173 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-colu
mns')", "'none'"); |
| 174 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows
')", "'none'"); |
| 175 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-area
s')", "'none'"); |
| 176 |
| 177 debug(""); |
| 178 debug("Test getting and setting grid-template shorthand through JS"); |
| 179 testGridDefinitionsSetJSValues("18px / 66px", "18px", "66px", "none"); |
| 180 testGridDefinitionsSetJSValues("10px / (head) 'a' 15px (tail)", "10px", "(he
ad) 15px (tail)", "\"a\""); |
| 181 testGridDefinitionsSetJSValues("'a'", "none", "0px", "\"a\"", "none", "auto"
); |
| 182 |
| 183 </script> |
| 184 </body> |
| 185 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 149373004:
[CSS Grid Layout] Implementation of the grid-template shorthand. (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@grid-template-working