| 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 #gridWithNone { | 6 #gridWithNone { |
| 7 grid: none; | 7 grid: none; |
| 8 } | 8 } |
| 9 .gridWithTemplate { | 9 .gridWithTemplate { |
| 10 grid: 10px / 15px; | 10 grid: 10px / 15px; |
| 11 } | 11 } |
| 12 .gridWithInherit { | 12 .gridWithInherit { |
| 13 grid: inherit; | 13 grid: inherit; |
| 14 } | 14 } |
| 15 #gridWithAutoFlowAndRows { | 15 #gridWithAutoFlowAndRows { |
| 16 grid: column 10px; | 16 grid: column 10px; |
| 17 } | 17 } |
| 18 #gridWithAutoFlowNone { | 18 #gridWithAutoFlowNone { |
| 19 grid: none 10px; | 19 grid: none 10px; |
| 20 } | 20 } |
| 21 #gridWithAutoFlowColumnDense { | 21 #gridWithAutoFlowColumnDense { |
| 22 grid: column dense 10px; | 22 grid: column dense 10px; |
| 23 } | 23 } |
| 24 #gridWithAutoFlowDenseRow { | 24 #gridWithAutoFlowDenseRow { |
| 25 grid: dense row 10px; | 25 grid: dense row 10px; |
| 26 } | 26 } |
| 27 #gridWithAutoFlowAndRowsAndColumns { | 27 #gridWithAutoFlowAndRowsAndColumns { |
| 28 grid: column 10px / 20px; | 28 grid: column 10px / 20px; |
| 29 } | 29 } |
| 30 #gridWithAutoFlowAndMultipleAutoTracks { |
| 31 grid: row 20px 10px / 100px 10%; |
| 32 } |
| 30 | 33 |
| 31 /* Bad values. */ | 34 /* Bad values. */ |
| 32 | 35 |
| 33 #gridWithExplicitAndImplicit { | 36 #gridWithExplicitAndImplicit { |
| 34 grid: 10px / 20px column; | 37 grid: 10px / 20px column; |
| 35 } | 38 } |
| 36 #gridWithMisplacedNone1 { | 39 #gridWithMisplacedNone1 { |
| 37 grid: column 10px / none 20px; | 40 grid: column 10px / none 20px; |
| 38 } | 41 } |
| 39 #gridWithMisplacedNone2 { | 42 #gridWithMisplacedNone2 { |
| (...skipping 12 matching lines...) Expand all Loading... |
| 52 <div class="grid gridWithInherit" id="gridInherit"></div> | 55 <div class="grid gridWithInherit" id="gridInherit"></div> |
| 53 </div> | 56 </div> |
| 54 <div class="grid" class="gridWithTemplate"> | 57 <div class="grid" class="gridWithTemplate"> |
| 55 <div><div class="grid gridWithInherit" id="gridNoInherit"></div></div> | 58 <div><div class="grid gridWithInherit" id="gridNoInherit"></div></div> |
| 56 </div--> | 59 </div--> |
| 57 <div class="grid" id="gridWithAutoFlowAndRows"></div> | 60 <div class="grid" id="gridWithAutoFlowAndRows"></div> |
| 58 <div class="grid" id="gridWithAutoFlowNone"></div> | 61 <div class="grid" id="gridWithAutoFlowNone"></div> |
| 59 <div class="grid" id="gridWithAutoFlowColumnDense"></div> | 62 <div class="grid" id="gridWithAutoFlowColumnDense"></div> |
| 60 <div class="grid" id="gridWithAutoFlowDenseRow"></div> | 63 <div class="grid" id="gridWithAutoFlowDenseRow"></div> |
| 61 <div class="grid" id="gridWithAutoFlowAndRowsAndColumns"></div> | 64 <div class="grid" id="gridWithAutoFlowAndRowsAndColumns"></div> |
| 65 <div class="grid" id="gridWithAutoFlowAndMultipleAutoTracks"></div> |
| 62 <div class="grid" id="gridWithExplicitAndImplicit"></div> | 66 <div class="grid" id="gridWithExplicitAndImplicit"></div> |
| 63 <div class="grid" id="gridWithMisplacedNone1"></div> | 67 <div class="grid" id="gridWithMisplacedNone1"></div> |
| 64 <div class="grid" id="gridWithMisplacedNone2"></div> | 68 <div class="grid" id="gridWithMisplacedNone2"></div> |
| 65 <div class="grid" id="gridWithMisplacedDense"></div> | 69 <div class="grid" id="gridWithMisplacedDense"></div> |
| 66 <script src="resources/grid-shorthand-parsing-utils.js"></script> | 70 <script src="resources/grid-shorthand-parsing-utils.js"></script> |
| 67 <script> | 71 <script> |
| 68 description("This test checks that the 'grid' shorthand is properly parsed a
nd the longhand properties correctly assigned."); | 72 description("This test checks that the 'grid' shorthand is properly parsed a
nd the longhand properties correctly assigned."); |
| 69 | 73 |
| 70 debug("Test getting the longhand values when shorthand is set through CSS.")
; | 74 debug("Test getting the longhand values when shorthand is set through CSS.")
; |
| 71 testGridDefinitionsValues(document.getElementById("gridWithNone"), "none", "
none", "none", "row", "auto", "auto"); | 75 testGridDefinitionsValues(document.getElementById("gridWithNone"), "none", "
none", "none", "row", "auto", "auto"); |
| 72 testGridDefinitionsValues(document.getElementById("gridWithTemplate"), "15px
", "10px", "none", "row", "auto", "auto"); | 76 testGridDefinitionsValues(document.getElementById("gridWithTemplate"), "15px
", "10px", "none", "row", "auto", "auto"); |
| 73 testGridDefinitionsValues(document.getElementById("gridInherit"), "15px", "1
0px", "none", "row", "auto", "auto"); | 77 testGridDefinitionsValues(document.getElementById("gridInherit"), "15px", "1
0px", "none", "row", "auto", "auto"); |
| 74 testGridDefinitionsValues(document.getElementById("gridNoInherit"), "none",
"none", "none", "row", "auto", "auto"); | 78 testGridDefinitionsValues(document.getElementById("gridNoInherit"), "none",
"none", "none", "row", "auto", "auto"); |
| 75 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndRows")
, "none", "none", "none", "column", "10px", "10px"); | 79 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndRows")
, "none", "none", "none", "column", "10px", "10px"); |
| 76 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowNone"), "
none", "none", "none", "row", "auto", "auto"); | 80 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowNone"), "
none", "none", "none", "row", "auto", "auto"); |
| 77 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowColumnDen
se"), "none", "none", "none", "column dense", "10px", "10px"); | 81 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowColumnDen
se"), "none", "none", "none", "column dense", "10px", "10px"); |
| 78 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowDenseRow"
), "none", "none", "none", "row dense", "10px", "10px"); | 82 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowDenseRow"
), "none", "none", "none", "row dense", "10px", "10px"); |
| 79 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndRowsAn
dColumns"), "none", "none", "none", "column", "20px", "10px"); | 83 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndRowsAn
dColumns"), "none", "none", "none", "column", "20px", "10px"); |
| 84 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndMultip
leAutoTracks"), "none", "none", "none", "row", "100px 10%", "20px 10px"); |
| 80 | 85 |
| 81 debug(""); | 86 debug(""); |
| 82 debug("Test getting wrong values for 'grid' shorthand through CSS (they shou
ld resolve to the default: 'none')"); | 87 debug("Test getting wrong values for 'grid' shorthand through CSS (they shou
ld resolve to the default: 'none')"); |
| 83 testGridDefinitionsValues(document.getElementById("gridWithExplicitAndImplic
it"), "none", "none", "none", "row", "auto", "auto"); | 88 testGridDefinitionsValues(document.getElementById("gridWithExplicitAndImplic
it"), "none", "none", "none", "row", "auto", "auto"); |
| 84 testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone1"),
"none", "none", "none", "row", "auto", "auto"); | 89 testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone1"),
"none", "none", "none", "row", "auto", "auto"); |
| 85 testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone2"),
"none", "none", "none", "row", "auto", "auto"); | 90 testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone2"),
"none", "none", "none", "row", "auto", "auto"); |
| 86 testGridDefinitionsValues(document.getElementById("gridWithMisplacedDense"),
"none", "none", "none", "row", "auto", "auto"); | 91 testGridDefinitionsValues(document.getElementById("gridWithMisplacedDense"),
"none", "none", "none", "row", "auto", "auto"); |
| 87 | 92 |
| 88 debug(""); | 93 debug(""); |
| 89 debug("Test getting and setting 'grid' shorthand through JS"); | 94 debug("Test getting and setting 'grid' shorthand through JS"); |
| (...skipping 26 matching lines...) Expand all Loading... |
| 116 var anotherElement = document.createElement("div"); | 121 var anotherElement = document.createElement("div"); |
| 117 document.body.appendChild(anotherElement); | 122 document.body.appendChild(anotherElement); |
| 118 shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue
('grid-column-gap')", "0px"); | 123 shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue
('grid-column-gap')", "0px"); |
| 119 shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue
('grid-row-gap')", "0px"); | 124 shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue
('grid-row-gap')", "0px"); |
| 120 anotherElement.style.grid = "inherit"; | 125 anotherElement.style.grid = "inherit"; |
| 121 shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue
('grid-column-gap')", "20px"); | 126 shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue
('grid-column-gap')", "20px"); |
| 122 shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue
('grid-row-gap')", "100px"); | 127 shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue
('grid-row-gap')", "100px"); |
| 123 </script> | 128 </script> |
| 124 </body> | 129 </body> |
| 125 </html> | 130 </html> |
| OLD | NEW |