grid-justify-content-002-ref.html (1789B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>CSS Grid Test: Testing track distribution rounding errors</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151214"> 10 <style type="text/css"> 11 html,body { 12 color:black; background-color:white; font-size:16px; padding:0; margin:0; 13 } 14 15 .grid { 16 display: grid; 17 grid-template-rows: 7px; 18 border: 1px solid blue; 19 background: black; 20 } 21 22 x { background: lime; height:7px; } 23 24 </style> 25 </head> 26 <body> 27 28 <script> 29 var justify = [ "" ]; 30 var cols = [ "151", "1" ]; 31 var widths = [ "151", "152", "153", "154", "155", "156", "157", "158", "159", 32 "160", "161", "301", "302", "303", "304", "305", "306", "307", 33 "308", "309", "310", "311" ]; 34 for (var c = 0; c < cols.length; ++c) { 35 var chunk = document.createElement('div'); 36 chunk.setAttribute("style", "float:left; margin:1px;"); 37 for (var j = 0; j < justify.length; ++j) { 38 for (var w = 0; w < widths.length; ++w) { 39 var grid = document.createElement('div'); 40 grid.style.width = widths[w]+"px"; 41 if (widths[w] > 300) { 42 grid.style.gridTemplateColumns = "2px " + (widths[w]-4) + "px 2px"; 43 } else { 44 grid.style.gridTemplateColumns = "1px " + (widths[w]-2) + "px 1px"; 45 } 46 grid.className = "grid " + justify[j]; 47 if (cols[c] > 1) { 48 var x = document.createElement('x'); 49 x.style.gridColumn = "2 / 3"; 50 x.setAttribute('col', cols[c]) 51 grid.appendChild(x); 52 } 53 chunk.appendChild(grid); 54 } 55 } 56 document.body.appendChild(chunk); 57 } 58 document.body.style.display = ""; 59 </script> 60 61 </body> 62 </html>