| OLD | NEW | 
|---|
| 1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> | 1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> | 
| 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 .gridAutoFlowColumnDense { | 6 .gridAutoFlowColumnDense { | 
| 7     grid-auto-flow: column dense; | 7     grid-auto-flow: column dense; | 
| 8 } | 8 } | 
| 9 .gridAutoFlowRowDense { | 9 .gridAutoFlowRowDense { | 
| 10     grid-auto-flow: row dense; | 10     grid-auto-flow: row dense; | 
| (...skipping 45 matching lines...) Expand 10 before | Expand all | Expand 10 after  Loading... | 
| 56     grid-auto-flow: dense row stack; | 56     grid-auto-flow: dense row stack; | 
| 57 } | 57 } | 
| 58 .gridAutoFlowStackRowRow { | 58 .gridAutoFlowStackRowRow { | 
| 59     grid-auto-flow: stack row row; | 59     grid-auto-flow: stack row row; | 
| 60 } | 60 } | 
| 61 </style> | 61 </style> | 
| 62 <script src="../../resources/js-test.js"></script> | 62 <script src="../../resources/js-test.js"></script> | 
| 63 </head> | 63 </head> | 
| 64 <body> | 64 <body> | 
| 65 <div class="grid" id="gridInitial"></div> | 65 <div class="grid" id="gridInitial"></div> | 
| 66 <div class="grid gridAutoFlowColumn" id="gridAutoFlowColumn"></div> | 66 <div class="grid gridAutoFlowColumnSparse" id="gridAutoFlowColumnSparse"></div> | 
| 67 <div class="grid gridAutoFlowRow" id="gridAutoFlowRow"></div> | 67 <div class="grid gridAutoFlowRowSparse" id="gridAutoFlowRowSparse"></div> | 
| 68 <div class="grid gridAutoFlowColumnDense" id="gridAutoFlowColumnDense"></div> | 68 <div class="grid gridAutoFlowColumnDense" id="gridAutoFlowColumnDense"></div> | 
| 69 <div class="grid gridAutoFlowRowDense" id="gridAutoFlowRowDense"></div> | 69 <div class="grid gridAutoFlowRowDense" id="gridAutoFlowRowDense"></div> | 
| 70 <div class="grid gridAutoFlowDenseColumn" id="gridAutoFlowDenseColumn"></div> | 70 <div class="grid gridAutoFlowDenseColumn" id="gridAutoFlowDenseColumn"></div> | 
| 71 <div class="grid gridAutoFlowDenseRow" id="gridAutoFlowDenseRow"></div> | 71 <div class="grid gridAutoFlowDenseRow" id="gridAutoFlowDenseRow"></div> | 
| 72 <div class="grid gridAutoFlowStack" id="gridAutoFlowStack"></div> | 72 <div class="grid gridAutoFlowStack" id="gridAutoFlowStack"></div> | 
| 73 <div class="grid gridAutoFlowStackColumn" id="gridAutoFlowStackColumn"></div> | 73 <div class="grid gridAutoFlowStackColumn" id="gridAutoFlowStackColumn"></div> | 
| 74 <div class="grid gridAutoFlowStackRow" id="gridAutoFlowStackRow"></div> | 74 <div class="grid gridAutoFlowStackRow" id="gridAutoFlowStackRow"></div> | 
| 75 <div class="grid gridAutoFlowColumnStack" id="gridAutoFlowColumnStack"></div> | 75 <div class="grid gridAutoFlowColumnStack" id="gridAutoFlowColumnStack"></div> | 
| 76 <div class="grid gridAutoFlowRowStack" id="gridAutoFlowRowStack"></div> | 76 <div class="grid gridAutoFlowRowStack" id="gridAutoFlowRowStack"></div> | 
| 77 <div class="grid gridAutoFlowColumn"> | 77 <div class="grid gridAutoFlowColumnSparse"> | 
| 78     <div class="grid gridAutoFlowInherit" id="gridAutoFlowInherit"></div> | 78     <div class="grid gridAutoFlowInherit" id="gridAutoFlowInherit"></div> | 
| 79 </div> | 79 </div> | 
| 80 <div class="grid gridAutoFlowColumn"> | 80 <div class="grid gridAutoFlowColumnSparse"> | 
| 81     <div><div class="grid gridAutoFlowInherit" id="gridAutoFlowNoInherit"></div>
     <div> | 81     <div><div class="grid gridAutoFlowInherit" id="gridAutoFlowNoInherit"></div>
     <div> | 
| 82 </div> | 82 </div> | 
| 83 <div class="grid gridAutoFlowNone" id="gridAutoFlowNone"></div> | 83 <div class="grid gridAutoFlowNone" id="gridAutoFlowNone"></div> | 
| 84 <div class="grid gridAutoFlowColumns" id="gridAutoFlowColumns"></div> | 84 <div class="grid gridAutoFlowColumns" id="gridAutoFlowColumns"></div> | 
| 85 <div class="grid gridAutoFlowRows" id="gridAutoFlowRows"></div> | 85 <div class="grid gridAutoFlowRows" id="gridAutoFlowRows"></div> | 
| 86 <div class="grid gridAutoFlowDense" id="gridAutoFlowDense"></div> | 86 <div class="grid gridAutoFlowDense" id="gridAutoFlowDense"></div> | 
| 87 <div class="grid gridAutoFlowColumnFoo" id="gridAutoFlowColumnFoo"></div> | 87 <div class="grid gridAutoFlowColumnFoo" id="gridAutoFlowColumnFoo"></div> | 
| 88 <div class="grid gridAutoFlowColumnColumn" id="gridAutoFlowColumnColumn"></div> | 88 <div class="grid gridAutoFlowColumnColumn" id="gridAutoFlowColumnColumn"></div> | 
| 89 <div class="grid gridAutoFlowDenseColumnStack" id="gridAutoFlowDenseColumnStack"
     ></div> | 89 <div class="grid gridAutoFlowDenseColumnStack" id="gridAutoFlowDenseColumnStack"
     ></div> | 
| 90 <div class="grid gridAutoFlowDenseRowStack" id="gridAutoFlowDenseRowStack"></div
     > | 90 <div class="grid gridAutoFlowDenseRowStack" id="gridAutoFlowDenseRowStack"></div
     > | 
| 91 <div class="grid gridAutoFlowStackRowRow" id="gridAutoFlowStackRowRow"></div> | 91 <div class="grid gridAutoFlowStackRowRow" id="gridAutoFlowStackRowRow"></div> | 
| 92 <script> | 92 <script> | 
| 93     description('Test that setting and getting grid-auto-flow works as expected'
     ); | 93     description('Test that setting and getting grid-auto-flow works as expected'
     ); | 
| 94 | 94 | 
| 95     debug("Test getting auto-flow set through CSS"); | 95     debug("Test getting auto-flow set through CSS"); | 
| 96     var gridAutoFlowColumn = document.getElementById("gridAutoFlowColumn"); | 96     var gridAutoFlowColumnSparse = document.getElementById("gridAutoFlowColumnSp
     arse"); | 
| 97     shouldBe("window.getComputedStyle(gridAutoFlowColumn, '').getPropertyValue('
     grid-auto-flow')", "'column'"); | 97     shouldBe("window.getComputedStyle(gridAutoFlowColumnSparse, '').getPropertyV
     alue('grid-auto-flow')", "'column'"); | 
| 98 | 98 | 
| 99     var gridAutoFlowRow = document.getElementById("gridAutoFlowRow"); | 99     var gridAutoFlowRowSparse = document.getElementById("gridAutoFlowRowSparse")
     ; | 
| 100     shouldBe("window.getComputedStyle(gridAutoFlowRow, '').getPropertyValue('gri
     d-auto-flow')", "'row'"); | 100     shouldBe("window.getComputedStyle(gridAutoFlowRowSparse, '').getPropertyValu
     e('grid-auto-flow')", "'row'"); | 
| 101 | 101 | 
| 102     var gridAutoFlowColumnDense = document.getElementById("gridAutoFlowColumnDen
     se"); | 102     var gridAutoFlowColumnDense = document.getElementById("gridAutoFlowColumnDen
     se"); | 
| 103     shouldBe("window.getComputedStyle(gridAutoFlowColumnDense, '').getPropertyVa
     lue('grid-auto-flow')", "'column dense'"); | 103     shouldBe("window.getComputedStyle(gridAutoFlowColumnDense, '').getPropertyVa
     lue('grid-auto-flow')", "'column dense'"); | 
| 104 | 104 | 
| 105     var gridAutoFlowRowDense = document.getElementById("gridAutoFlowRowDense"); | 105     var gridAutoFlowRowDense = document.getElementById("gridAutoFlowRowDense"); | 
| 106     shouldBe("window.getComputedStyle(gridAutoFlowRowDense, '').getPropertyValue
     ('grid-auto-flow')", "'row dense'"); | 106     shouldBe("window.getComputedStyle(gridAutoFlowRowDense, '').getPropertyValue
     ('grid-auto-flow')", "'row dense'"); | 
| 107 | 107 | 
| 108     var gridAutoFlowDenseColumn = document.getElementById("gridAutoFlowDenseColu
     mn"); | 108     var gridAutoFlowDenseColumn = document.getElementById("gridAutoFlowDenseColu
     mn"); | 
| 109     shouldBe("window.getComputedStyle(gridAutoFlowDenseColumn, '').getPropertyVa
     lue('grid-auto-flow')", "'column dense'"); | 109     shouldBe("window.getComputedStyle(gridAutoFlowDenseColumn, '').getPropertyVa
     lue('grid-auto-flow')", "'column dense'"); | 
| 110 | 110 | 
| (...skipping 115 matching lines...) Expand 10 before | Expand all | Expand 10 after  Loading... | 
| 226 | 226 | 
| 227     debug(""); | 227     debug(""); | 
| 228     debug("Test setting grid-auto-flow to 'initial' through JS"); | 228     debug("Test setting grid-auto-flow to 'initial' through JS"); | 
| 229     // Reusing the value so that we can check that it is set back to its initial
      value. | 229     // Reusing the value so that we can check that it is set back to its initial
      value. | 
| 230     element.style.gridAutoFlow = "initial"; | 230     element.style.gridAutoFlow = "initial"; | 
| 231     shouldBe("element.style.gridAutoFlow", "'initial'"); | 231     shouldBe("element.style.gridAutoFlow", "'initial'"); | 
| 232     shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f
     low')", "'row'"); | 232     shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f
     low')", "'row'"); | 
| 233 </script> | 233 </script> | 
| 234 </body> | 234 </body> | 
| 235 </html> | 235 </html> | 
| OLD | NEW | 
|---|