grid-row-gap-003.html (3094B)
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: 'grid-row-gap' sideways-lr</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1227099"> 10 <link rel="help" href="http://dev.w3.org/csswg/css-grid/#gutters"> 11 <link rel="match" href="grid-row-gap-003-ref.html"> 12 <style type="text/css"> 13 html,body { 14 color:black; background-color:white; font-size:16px; padding:0; margin:0; 15 } 16 17 .grid { 18 display: grid; 19 grid-auto-flow: column; 20 grid-auto-rows: minmax(1px,auto); 21 grid-template-columns: 0px 7px; 22 border: 2px solid black; 23 float: left; 24 writing-mode: sideways-lr; 25 margin-right:16px 26 } 27 28 .grid :last-child { background:grey; } 29 .grid :nth-child(2) { background:pink; } 30 31 x { background: lime; height:7px; } 32 33 </style> 34 </head> 35 <body> 36 37 <script> 38 document.body.style.display = "none"; 39 var align = [ 40 "stretch", 41 // FIXME: When https://github.com/w3c/csswg-drafts/issues/1002 is implemented. 42 // "stretch end", 43 // "stretch center", 44 // "stretch safe end", 45 // "stretch unsafe end", 46 "safe start", 47 "safe end", 48 "safe center", 49 "unsafe start", 50 "unsafe end", 51 "unsafe center", 52 "space-between", 53 // FIXME: https://github.com/w3c/csswg-drafts/issues/1002 54 // "space-between end", 55 // "space-between start", 56 // "space-between safe end", 57 "space-around", 58 // FIXME: https://github.com/w3c/csswg-drafts/issues/1002 59 // "space-around center", 60 // "space-around right", 61 // "space-around safe right", 62 // "space-around left", 63 "space-evenly", 64 // "space-evenly end", 65 ]; 66 var rows = [ "0", "1", "2", "3", "8", "9" ]; 67 var heights = [ "auto", "0", "1", "5", "6" ]; 68 var gaps = [ "1", "2" ]; 69 for (var j = 0; j < align.length; ++j) { 70 // document.body.appendChild(document.createTextNode(align[j])); // for debugging 71 var chunk = document.createElement('div'); 72 chunk.setAttribute("style", "border:1px solid; padding:2px 10px; overflow:hidden; float:left;"); 73 for (var c = 0; c < rows.length; ++c) { 74 for (var w = 0; w < heights.length; ++w) { 75 // set this to true if you want to see all tests 76 var run_test = heights[w] == "auto" || heights[w] < rows[c] || rows[c] == 0 || rows[c] == 1; 77 if (run_test) { 78 for (var g = 0; g < gaps.length; ++g) { 79 var grid = document.createElement('div'); 80 if (heights[w] != "auto") 81 grid.style.width = heights[w]+"px"; 82 grid.style.gridRowGap = gaps[g]+"px"; 83 grid.className = "grid"; 84 grid.style.alignContent = align[j]; 85 var span = document.createElement('span'); 86 span.style.gridRow = "1 / span " + rows[c]; 87 grid.appendChild(span); 88 for (var x = 0; x < rows[c]; ++x) { 89 grid.appendChild(document.createElement('x')); 90 } 91 chunk.appendChild(grid); 92 } 93 } 94 } 95 } 96 document.body.appendChild(chunk); 97 } 98 document.body.style.display = ""; 99 </script> 100 101 </body> 102 </html>