test_grid_tracks.html (2405B)
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: 100px 1fr 1fr 100px; 16 background-color: #f00; 17 } 18 .box { 19 background-color: #444; 20 color: #fff; 21 } 22 </style> 23 24 <script> 25 "use strict"; 26 27 SimpleTest.waitForExplicitFinish(); 28 29 function runTests() { 30 var wrapper = document.getElementById("wrapper"); 31 var grid = wrapper.getGridFragments()[0]; 32 var boxA = document.getElementById("boxA"); 33 var boxB = document.getElementById("boxB"); 34 35 // test property existence 36 isnot(typeof(grid.cols.tracks), "undefined", "Grid.cols.tracks property exists."); 37 isnot(typeof(grid.rows.tracks), "undefined", "Grid.rows.tracks property exists."); 38 39 if ((typeof(grid.cols.tracks) != "undefined") && 40 (typeof(grid.rows.tracks) != "undefined")) { 41 // test column and row track counts 42 is(grid.cols.tracks.length, 4, 43 "Grid.cols.tracks property has length that matches grid-template-columns." 44 ); 45 is(grid.rows.tracks.length, 2, 46 "Grid.rows.tracks property has length that matches content." 47 ); 48 49 if ((grid.cols.tracks.length == 4) && 50 (grid.rows.tracks.length == 2)) { 51 // test column track position 52 is(grid.cols.tracks[1].start, 110, "Grid column track 2 position is as expected."); 53 54 // test column track width 55 is(grid.cols.tracks[0].breadth, boxA.offsetWidth, 56 "Grid column track width (fixed size) matches item width." 57 ); 58 is(grid.cols.tracks[1].breadth, boxB.offsetWidth, 59 "Grid column track width (flexible size) matches item width." 60 ); 61 is(grid.cols.tracks[1].breadth, grid.cols.tracks[2].breadth, 62 "Grid column track widths with equal proportion flexible size actually are same size." 63 ); 64 } 65 } 66 67 SimpleTest.finish(); 68 } 69 </script> 70 </head> 71 <body onLoad="runTests();"> 72 73 <div id="wrapper" class="wrapper"> 74 <div id="boxA" class="box a">A</div> 75 <div id="boxB" class="box b">B</div> 76 <div class="box c">C</div> 77 <div class="box d">D</div> 78 <div class="box e">E</div> 79 <div class="box f">F</div> 80 <div class="box g">G</div> 81 <div class="box h">H</div> 82 </div> 83 84 </body> 85 </html>