grid-row-gap-002-ref.html (3766B)
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>Reference: 'grid-row-gap'</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1227099"> 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-auto-flow: column; 18 grid-auto-rows: minmax(1px,auto); 19 grid-template-columns: 0px 7px; 20 border: 2px solid black; 21 float: left; 22 } 23 24 .grid :last-child { background:grey; } 25 .grid :nth-child(2) { background:pink; } 26 .grid .gap { background:transparent; } 27 28 x { background: lime; width:7px; } 29 </style> 30 </head> 31 <body> 32 33 <script> 34 document.body.style.display = "none"; 35 var align = [ 36 "start", 37 // "end", 38 // "center", 39 // "start", 40 // "end", 41 "start", 42 "start", 43 "start", 44 "start", 45 "end", 46 "center", 47 "safe start", 48 // "end", 49 // "start", 50 // "safe end", 51 "safe center", 52 // "center", 53 // "start", 54 // "safe end", 55 // "start", 56 "safe center", 57 // "end", 58 ]; 59 var rows = [ "0", "1", "2", "3", "8", "9" ]; 60 var heights = [ "auto", "0", "1", "5", "6" ]; 61 var gaps = [ "1", "2" ]; 62 for (var j = 0; j < align.length; ++j) { 63 // document.body.appendChild(document.createTextNode(align[j])); // for debugging 64 var chunk = document.createElement('div'); 65 chunk.setAttribute("style", "border:1px solid; padding:2px 10px; overflow:hidden"); 66 for (var c = 0; c < rows.length; ++c) { 67 for (var w = 0; w < heights.length; ++w) { 68 // set this to true if you want to see all tests 69 var run_test = heights[w] == "auto" || heights[w] < rows[c] || rows[c] == 0 || rows[c] == 1; 70 if (run_test) { 71 for (var g = 0; g < gaps.length; ++g) { 72 var grid = document.createElement('div'); 73 grid.style.height = heights[w]+"px"; 74 grid.className = "grid"; 75 grid.style.alignContent = align[j]; 76 var span = document.createElement('span'); 77 grid.appendChild(span); 78 var numRows = parseInt(rows[c]); 79 var gapRows = numRows==0 ? 0 : (numRows-1); 80 numRows += gapRows*parseInt(gaps[g]); 81 span.style.gridRow = "1 / span " + numRows; 82 for (var x = 0; x < numRows; ++x) { 83 var item = document.createElement('x'); 84 if (x % (1+(parseInt(gaps[g]))) != 0) 85 item.className = "gap"; 86 grid.appendChild(item); 87 } 88 // if (j < 5) { // The stretch tests. 89 if (j < 1) { // The stretch test. 90 if (c == 1) 91 grid.style.background = 'pink' 92 } 93 // if (j == 6 && rows[c] == 1) { // The 'safe end' tests. 94 if (j == 2 && rows[c] == 1) { // The 'safe end' tests. 95 if (heights[w] != 0) grid.style.alignContent = 'end'; 96 } 97 // if (j == 7 && rows[c] == 1) { // The 'safe center' tests. 98 if (j == 3 && rows[c] == 1) { // The 'safe center' tests. 99 if (heights[w] != 0) grid.style.alignContent = 'center'; 100 } 101 // if (j > 15) { // The space-around and space-evenly tests. 102 if (j > 7) { // The space-around and space-evenly tests. 103 if (rows[c] == 1) { 104 if (heights[w] == 0) { 105 if (grid.style.alignContent != 'end') { 106 grid.style.alignContent = 'start'; 107 } 108 } else { 109 grid.style.alignContent = 'center'; 110 } 111 } 112 } 113 chunk.appendChild(grid); 114 } 115 } 116 } 117 } 118 document.body.appendChild(chunk); 119 } 120 document.body.style.display = ""; 121 </script> 122 123 </body> 124 </html>