test_grid_lines.html (3326B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 6 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" /> 7 <style> 8 body { 9 margin: 40px; 10 } 11 .wrapper { 12 display: grid; 13 width: 400px; 14 grid-gap: 10px; 15 grid-template-columns: 50px [first first] repeat(3, [divider] 100px) [last last last last]; 16 grid-template-rows: [top1 top2] repeat(1, [top2 top2] 50px) [bot]; 17 background-color: #f00; 18 } 19 .box { 20 background-color: #444; 21 color: #fff; 22 } 23 </style> 24 25 <script> 26 "use strict"; 27 28 SimpleTest.waitForExplicitFinish(); 29 30 function runTests() { 31 var wrapper = document.getElementById("wrapper"); 32 var grid = wrapper.getGridFragments()[0]; 33 34 // test property existence 35 isnot(typeof(grid.cols.lines), "undefined", "Grid.cols.lines property exists."); 36 37 if (typeof(grid.cols.lines) != "undefined") { 38 // test column line count 39 is(grid.cols.lines.length, 5, 40 "Grid.cols.lines property has length that matches grid-template-columns." 41 ); 42 43 if (grid.cols.lines.length == 5) { 44 // test column line position 45 is(grid.cols.lines[1].start, 50, "Grid column line 2 position is as expected."); 46 47 // test column line width 48 is(grid.cols.lines[1].breadth, 10, "Grid column line 2 width is as expected."); 49 50 // test column line numbers, positive and negative 51 is(grid.cols.lines[3].number, 4, "Grid column line 4 positive number is as expected."); 52 is(grid.cols.lines[3].negativeNumber, -2, "Grid column line 4 negative number is as expected."); 53 54 // test column line names 55 is(grid.cols.lines[0].names.length, 0, "Grid column line 1 has no names."); 56 57 is(grid.cols.lines[1].names.length, 2, "Grid column line 2 has 2 names."); 58 is(grid.cols.lines[1].names + "", "first,divider", "Grid column line 2 has the names 'first,divider'."); 59 60 is(grid.cols.lines[4].names.length, 1, "Grid column line 5 has 1 name."); 61 is(grid.cols.lines[4].names + "", "last", "Grid column line 5 has the name 'last'."); 62 } 63 } 64 65 // test property existence 66 isnot(typeof(grid.rows.lines), "undefined", "Grid.rows.lines property exists."); 67 68 if (typeof(grid.rows.lines) != "undefined") { 69 // test column line count 70 is(grid.rows.lines.length, 3, 71 "Grid.rows.lines property has length that matches grid-template-rows." 72 ); 73 74 if (grid.rows.lines.length == 3) { 75 // test row line names 76 is(grid.rows.lines[0].names.length, 2, "Grid row line 1 has 2 names."); 77 is(grid.rows.lines[0].names + "", "top1,top2", "Grid row line 1 has the names 'top1,top2'."); 78 79 is(grid.rows.lines[1].names.length, 1, "Grid row line 2 has 1 name."); 80 is(grid.rows.lines[1].names + "", "bot", "Grid row line 2 has the name 'bot'."); 81 82 is(grid.rows.lines[2].names.length, 0, "Grid row line 3 has no names."); 83 } 84 } 85 86 SimpleTest.finish(); 87 } 88 </script> 89 </head> 90 <body onLoad="runTests();"> 91 92 <div id="wrapper" class="wrapper"> 93 <div id="boxA" class="box a">A</div> 94 <div id="boxB" class="box b">B</div> 95 <div id="boxC" class="box c">C</div> 96 <div class="box d">D</div> 97 <div class="box e">E</div> 98 <div class="box f">F</div> 99 <div class="box g">G</div> 100 <div class="box h">H</div> 101 </div> 102 103 </body> 104 </html>