diff options
Diffstat (limited to 'dom/grid/test/chrome/test_grid_repeat_auto_fill.html')
| -rw-r--r-- | dom/grid/test/chrome/test_grid_repeat_auto_fill.html | 648 |
1 files changed, 648 insertions, 0 deletions
diff --git a/dom/grid/test/chrome/test_grid_repeat_auto_fill.html b/dom/grid/test/chrome/test_grid_repeat_auto_fill.html new file mode 100644 index 0000000000..4a558c434a --- /dev/null +++ b/dom/grid/test/chrome/test_grid_repeat_auto_fill.html @@ -0,0 +1,648 @@ +<!doctype html> +<html> +<head> +<meta charset="utf-8"> +<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> +<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" /> +<style> +body { + margin: 40px; +} +.wrapper { + display: grid; + width: 600px; + grid-gap: 0px; + grid-auto-column: 50px; + background-color: #f00; +} +.grid1 { + grid-template-columns: 50px 0px repeat(auto-fill, 100px); +} +.grid2 { + grid-template-columns: 50px 0px [real-before] repeat(auto-fill, [before] 100px [after]) [real-after] 0px [final]; +} +.grid3 { + grid-template-columns: repeat(3, 66px) [real-before] repeat(auto-fill, [before] 100px [after]) [real-after]; +} +.grid4 { + grid-template-columns: repeat(2, 100px) repeat(auto-fill, 50px); +} +.grid5 { + grid-template-columns: [real-before] repeat(auto-fill, [before] 100px [after]) [real-after]; +} +.grid6 { + grid-template-columns: [first] 0px [real-before] repeat(auto-fill, [before] 100px [after]) [real-after]; +} +.grid7 { + grid-template-columns: [real-before before] repeat(auto-fill, [before] 100px [after]) [after real-after] 0px [final]; +} +.grid8 { + grid-template-columns: [real-before] repeat(auto-fill, [before] 1000px [after]) [real-after]; +} +.grid9 { + grid-template-columns: [real-before] repeat(auto-fill, 100px [after]) [real-after]; +} +.grid10 { + grid-template-columns: [real-before] repeat(auto-fill, [before] 100px) [real-after]; +} +.grid11 { + grid-template-columns: 10px [real-before] repeat(auto-fill, [before] 1000px [after]) [real-after]; +} +.grid12 { + grid-template-columns: 10px [real-before] repeat(auto-fill, [before] 1000px [after]) [real-after] 10px; +} +.grid13 { + grid-template-columns: 10px [real-before] repeat(auto-fill, [before] 1000px [after]) 10px; +} +.grid14 { + grid-template-columns: [real-before] repeat(auto-fill, [before] 1000px [after]) 10px; +} +.grid15 { + grid-template-columns: repeat(auto-fill, [before] 1000px [after]) 10px; +} +.grid16 { + grid-template-columns: repeat(auto-fill, [before] 1000px [after]) [real-after] 10px; +} +.grid17 { + grid-template-columns: repeat(auto-fill, [before] 1000px [after]) [real-after] 10px [final]; +} +.grid18 { + grid-template-columns: repeat(auto-fill, [before] 1000px [after]) 10px [final]; +} +.grid19 { + grid-template-columns: repeat(auto-fill, [before] 1000px); +} +.grid20 { + grid-column: 4 / -1; + grid-template-columns: subgrid repeat(auto-fill, [x]); +} +.grid21 { + grid-column: 4 / -1; + grid-template-columns: subgrid [a] repeat(auto-fill, [x]) [b]; +} + +.box { + background-color: #444; + color: #fff; +} +.a { + grid-column: auto; +} +.b { + grid-column: 4; +} +.c { + grid-column: 6; +} +.d { + grid-column: 7; +} +.e { + grid-column: 5; +} +.f { + grid-column: -9; +} + +</style> + +<script> +"use strict"; + +SimpleTest.waitForExplicitFinish(); + +function testLines(elementName, grid, expectedValues) { + is(grid.cols.lines.length, expectedValues.length, elementName + " has expected number of lines."); + + for (let i = 0; i < grid.cols.lines.length; i++) { + // 'number' is optional. + if (typeof(expectedValues[i].number) != "undefined") { + is(grid.cols.lines[i].number, expectedValues[i].number, elementName + " line " + (i + 1) + " has expected number."); + } else { + // If 'number' is omitted, assume that first line is line 1 and increase from there. + is(grid.cols.lines[i].number, (i + 1), elementName + " line " + (i + 1) + " has expected number."); + } + + // 'negativeNumber' is optional. + if (typeof(expectedValues[i].negativeNumber) != "undefined") { + // Check for the supplied number. + is(grid.cols.lines[i].negativeNumber, expectedValues[i].negativeNumber, elementName + " line " + (i + 1) + " has expected negativeNumber."); + } + + // 'start' is optional. + if (typeof(expectedValues[i].start) != "undefined") { + is(grid.cols.lines[i].start, expectedValues[i].start, elementName + " line " + (i + 1) + " has expected start."); + } + + // 'breadth' is optional. + if (typeof(expectedValues[i].breadth) != "undefined") { + is(grid.cols.lines[i].breadth, 0, elementName + " line " + (i + 1) + " has zero breadth."); + } + + // 'names' is optional. + if (typeof(expectedValues[i].names) != "undefined") { + is(grid.cols.lines[i].names + "", expectedValues[i].names, elementName + " line " + (i + 1) + " has expected names."); + } + + // 'todo_names' is optional. + if (typeof(expectedValues[i].todo_names) != "undefined") { + todo_is(grid.cols.lines[i].names + "", expectedValues[i].todo_names, elementName + " line " + (i + 1) + " has expected names."); + } + } +} + +function runTests() { + let wrapper; + let grid; + let expectedValues; + + wrapper = document.getElementById("wrapper1"); + grid = wrapper.getGridFragments()[0]; + + // test auto-fill count + is(grid.cols.tracks.length, 7, "Grid column track array reports removed auto-fill columns."); + + // test resolved value of grid-template-columns + let templateColumnsText = getComputedStyle(wrapper).gridTemplateColumns; + is(templateColumnsText, "50px 0px 100px 100px 100px 100px 100px", + "Resolved value of grid-template-columns is as expected."); + + // test starts, breadths, and states + expectedValues = [ + { "start": 0, + "breadth": 50, + "state": "static" }, + { "start": 50, + "breadth": 0, + "state": "static" }, + { "start": 50, + "breadth": 100, + "state": "repeat" }, + { "start": 150, + "breadth": 100, + "state": "repeat" }, + { "start": 250, + "breadth": 100, + "state": "repeat" }, + { "start": 350, + "breadth": 100, + "state": "repeat" }, + { "start": 450, + "breadth": 100, + "state": "repeat" }, + ]; + for (let i = 0; i < grid.cols.tracks.length; i++) { + is(grid.cols.tracks[i].start, expectedValues[i].start, "Column " + (i + 1) + " has expected start."); + is(grid.cols.tracks[i].breadth, expectedValues[i].breadth, "Column " + (i + 1) + " has expected breadth."); + is(grid.cols.tracks[i].state, expectedValues[i].state, "Column " + (i + 1) + " has expected state."); + } + + + wrapper = document.getElementById("wrapper2"); + grid = wrapper.getGridFragments()[0]; + + // test auto-fill count + is(grid.cols.lines.length, 9, "Grid column line array reports removed auto-fill columns."); + + // test resolved value of grid-template-columns + templateColumnsText = getComputedStyle(wrapper).gridTemplateColumns; + is(templateColumnsText, "50px 0px [real-before before] 100px [after before] 100px [after before] 100px [after before] 100px [after before] 100px [after real-after] 0px [final]", + "Resolved value of grid-template-columns is as expected."); + + // test starts and names + expectedValues = [ + { "start": 0, + "names": "" }, + { "start": 50, + "names": "" }, + { "start": 50, + "names": "real-before,before" }, + { "start": 150, + "names": "after,before" }, + { "start": 250, + "names": "after,before" }, + { "start": 350, + "names": "after,before" }, + { "start": 450, + "names": "after,before" }, + { "start": 550, + "names": "after,real-after" }, + { "start": 550, + "names": "final" }, + ]; + testLines("wrapper2", grid, expectedValues); + + + wrapper = document.getElementById("wrapper3"); + grid = wrapper.getGridFragments()[0]; + + // test resolved value of grid-template-columns + templateColumnsText = getComputedStyle(wrapper).gridTemplateColumns; + is(templateColumnsText, "66px 66px 66px [real-before before] 100px [after before] 100px [after before] 100px [after before] 100px [after real-after]", + "Resolved value of grid-template-columns is as expected."); + + + wrapper = document.getElementById("wrapper4"); + grid = wrapper.getGridFragments()[0]; + + // test auto-fill count of tracks + is(grid.cols.tracks.length, 10, "Grid column track array respects auto-fill columns."); + + if (grid.cols.tracks.length == 10) { + // test for static and repeat + is(grid.cols.tracks[1].state, "static", "Grid column track 2 is marked as static."); + is(grid.cols.tracks[2].state, "repeat", "Grid column track 3 is marked as repeat."); + } + + + wrapper = document.getElementById("wrapper5"); + grid = wrapper.getGridFragments()[0]; + + // test resolved value of grid-template-columns + templateColumnsText = getComputedStyle(wrapper).gridTemplateColumns; + is(templateColumnsText, "[real-before before] 100px [after before] 100px [after before] 100px [after before] 100px [after before] 100px [after before] 100px [after real-after]", "Resolved value of grid-template-columns is as expected."); + + + wrapper = document.getElementById("wrapper6"); + grid = wrapper.getGridFragments()[0]; + + // test starts and names + expectedValues = [ + { "start": 0, + "names": "first" }, + { "start": 0, + "names": "real-before,before" }, + { "start": 100, + "names": "after,before" }, + { "start": 200, + "names": "after,before" }, + { "start": 300, + "names": "after,before" }, + { "start": 400, + "names": "after,before" }, + { "start": 500, + "names": "after,before" }, + { "start": 600, + "names": "after,real-after" }, + ]; + testLines("wrapper6", grid, expectedValues); + + + wrapper = document.getElementById("wrapper7"); + grid = wrapper.getGridFragments()[0]; + + // test starts and names + expectedValues = [ + { "start": 0, + "names": "real-before,before" }, + { "start": 100, + "names": "after,before" }, + { "start": 200, + "names": "after,before" }, + { "start": 300, + "names": "after,before" }, + { "start": 400, + "names": "after,before" }, + { "start": 500, + "names": "after,before" }, + { "start": 600, + "names": "after,real-after" }, + { "start": 600, + "names": "final" }, + ]; + testLines("wrapper7", grid, expectedValues); + + + wrapper = document.getElementById("wrapper8"); + grid = wrapper.getGridFragments()[0]; + + // test starts and names + expectedValues = [ + { "start": 0, + "names": "real-before,before" }, + { "start": 1000, + "names": "after,real-after" }, + ]; + testLines("wrapper8", grid, expectedValues); + + + wrapper = document.getElementById("wrapper8b"); + grid = wrapper.getGridFragments()[0]; + + // test starts and names + expectedValues = [ + { "number": 0 }, + { "number": 0 }, + { "number": 0 }, + { "number": 0 }, + { "number": 0 }, + { "number": 0 }, + { "number": 0 }, + { "number": 1, + "names": "real-before,before" }, + { "number": 2, + "names": "after,real-after" }, + ]; + testLines("wrapper8b", grid, expectedValues); + + + wrapper = document.getElementById("wrapper9"); + grid = wrapper.getGridFragments()[0]; + + // test starts and names + expectedValues = [ + { "start": 0, + "names": "real-before" }, + { "start": 100, + "names": "after" }, + { "start": 200, + "names": "after" }, + { "start": 300, + "names": "after" }, + { "start": 400, + "names": "after" }, + { "start": 500, + "names": "after" }, + { "start": 600, + "names": "after,real-after" }, + ]; + testLines("wrapper9", grid, expectedValues); + + + wrapper = document.getElementById("wrapper10"); + grid = wrapper.getGridFragments()[0]; + + // test starts and names + expectedValues = [ + { "start": 0, + "names": "real-before,before" }, + { "start": 100, + "names": "before" }, + { "start": 200, + "names": "before" }, + { "start": 300, + "names": "before" }, + { "start": 400, + "names": "before" }, + { "start": 500, + "names": "before" }, + { "start": 600, + "names": "real-after" }, + ]; + testLines("wrapper10", grid, expectedValues); + + wrapper = document.getElementById("wrapper11"); + grid = wrapper.getGridFragments()[0]; + + // test starts and names + expectedValues = [ + { "start": 0, + "names": "" }, + { "start": 10, + "names": "real-before,before" }, + { "start": 1010, + "names": "after,real-after" }, + ]; + testLines("wrapper11", grid, expectedValues); + + wrapper = document.getElementById("wrapper12"); + grid = wrapper.getGridFragments()[0]; + + // test starts and names + expectedValues = [ + { "start": 0, + "names": "" }, + { "start": 10, + "names": "real-before,before" }, + { "start": 1010, + "names": "after,real-after" }, + { "start": 1020, + "names": "" }, + ]; + testLines("wrapper12", grid, expectedValues); + + wrapper = document.getElementById("wrapper13"); + grid = wrapper.getGridFragments()[0]; + + // test starts and names + expectedValues = [ + { "start": 0, + "names": "" }, + { "start": 10, + "names": "real-before,before" }, + { "start": 1010, + "names": "after" }, + { "start": 1020, + "names": "" }, + ]; + testLines("wrapper13", grid, expectedValues); + + wrapper = document.getElementById("wrapper14"); + grid = wrapper.getGridFragments()[0]; + + // test starts and names + expectedValues = [ + { "start": 0, + "names": "real-before,before" }, + { "start": 1000, + "names": "after" }, + { "start": 1010, + "names": "" }, + ]; + testLines("wrapper14", grid, expectedValues); + + wrapper = document.getElementById("wrapper15"); + grid = wrapper.getGridFragments()[0]; + + // test starts and names + expectedValues = [ + { "start": 0, + "names": "before" }, + { "start": 1000, + "names": "after" }, + { "start": 1010, + "names": "" }, + ]; + testLines("wrapper15", grid, expectedValues); + + wrapper = document.getElementById("wrapper16"); + grid = wrapper.getGridFragments()[0]; + + // test starts and names + expectedValues = [ + { "start": 0, + "names": "before" }, + { "start": 1000, + "names": "after,real-after" }, + { "start": 1010, + "names": "" }, + ]; + testLines("wrapper16", grid, expectedValues); + + wrapper = document.getElementById("wrapper17"); + grid = wrapper.getGridFragments()[0]; + + // test starts and names + expectedValues = [ + { "start": 0, + "names": "before" }, + { "start": 1000, + "names": "after,real-after" }, + { "start": 1010, + "names": "final" }, + ]; + testLines("wrapper17", grid, expectedValues); + + wrapper = document.getElementById("wrapper18"); + grid = wrapper.getGridFragments()[0]; + + // test starts and names + expectedValues = [ + { "start": 0, + "names": "before" }, + { "start": 1000, + "names": "after" }, + { "start": 1010, + "names": "final" }, + ]; + testLines("wrapper18", grid, expectedValues); + + wrapper = document.getElementById("wrapper19"); + grid = wrapper.getGridFragments()[0]; + + // test starts and names + expectedValues = [ + { "start": 0, + "names": "before" }, + { "start": 1000, + "names": "" }, + ]; + testLines("wrapper19", grid, expectedValues); + + wrapper = document.getElementById("wrapper20"); + grid = wrapper.getGridFragments()[0]; + + // test starts and names + expectedValues = [ + { "names": "x" }, + { "names": "x" }, + { "names": "x" }, + { "names": "x" }, + ]; + testLines("wrapper20", grid, expectedValues); + + wrapper = document.getElementById("wrapper21"); + grid = wrapper.getGridFragments()[0]; + + // test starts and names + expectedValues = [ + { "names": "a" }, + { "names": "x" }, + { "names": "x" }, + { "names": "b" }, + ]; + testLines("wrapper21", grid, expectedValues); + + SimpleTest.finish(); +} +</script> +</head> +<body onLoad="runTests();"> + + <div id="wrapper1" class="wrapper grid1"> + <div id="boxB" class="box b">B</div> + </div> + + <br/> + <div id="wrapper2" class="wrapper grid2"> + <div id="boxB" class="box b">B</div> + <div id="boxC" class="box c">C</div> + </div> + + <br/> + <div id="wrapper3" class="wrapper grid3"> + <div id="boxB" class="box b">B</div> + <div id="boxC" class="box c">C</div> + <div id="boxD" class="box d">D</div> + </div> + + <br/> + <div id="wrapper4" class="wrapper grid4"> + <div id="boxA" class="box a">A</div> + </div> + + <br/> + <div id="wrapper5" class="wrapper grid5"> + </div> + + <br/> + <div id="wrapper6" class="wrapper grid6"> + <div id="boxB" class="box b">B</div> + </div> + + <br/> + <div id="wrapper7" class="wrapper grid7"> + <div id="boxB" class="box b">B</div> + </div> + + <br/> + <div id="wrapper8" class="wrapper grid8"> + </div> + + <br/> + <div id="wrapper8b" class="wrapper grid8"> + <div id="boxF" class="box f">F</div> + </div> + + <br/> + <div id="wrapper9" class="wrapper grid9"> + <div id="boxB" class="box b">B</div> + <div id="boxE" class="box e">E</div> + <div id="wrapper20" class="wrapper grid20"><x style="grid-column:x">x</x></div> + </div> + + <br/> + <div id="wrapper10" class="wrapper grid10"> + <div id="boxB" class="box b">B</div> + <div id="boxE" class="box e">E</div> + <div id="wrapper21" class="wrapper grid21"><x style="grid-column:y">y</x></div> + </div> + + <br/> + <div id="wrapper11" class="wrapper grid11"> + </div> + + <br/> + <div id="wrapper12" class="wrapper grid12"> + </div> + + <br/> + <div id="wrapper13" class="wrapper grid13"> + </div> + + <br/> + <div id="wrapper14" class="wrapper grid14"> + </div> + + <br/> + <div id="wrapper15" class="wrapper grid15"> + </div> + + <br/> + <div id="wrapper16" class="wrapper grid16"> + </div> + + <br/> + <div id="wrapper17" class="wrapper grid17"> + </div> + + <br/> + <div id="wrapper18" class="wrapper grid18"> + </div> + + <br/> + <div id="wrapper19" class="wrapper grid19"> + </div> + +</body> +</html> |