grid-item-stretch-001-ref.html (3139B)
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: align-items:stretch / justify-items:stretch </title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151213"> 10 <style type="text/css"> 11 html,body { 12 color:black; background-color:white; font-size:16px; padding:0; margin:0; 13 } 14 separator { clear:both; display:block; height:6px; } 15 16 .grid { 17 display: grid; 18 position: relative; 19 float: left; 20 border: 1px solid; 21 border-block-start: 2px solid blue; 22 grid-template: 1px 25px 5px / 3px 21px 1px; 23 padding: 1px 1px 3px 2px; 24 margin-right: 2px; 25 width: 40px; 26 height: 40px; 27 align-items: start; 28 justify-items: start; 29 } 30 31 span { 32 position: absolute; 33 top:0;left:0;bottom:0;right:0; 34 grid-area: 2 / 2 / 3 / 3; /* the center area */ 35 display: block; 36 width: 17px; 37 height: 13px; 38 background: lightgrey; 39 /* good for manual debugging but causes anti-aliasing diff: */ 40 /* border-block-start: 2px solid blue; */ 41 /* border-inline-start: 2px solid lime; */ 42 border-block-start: 2px solid black; 43 border-inline-start: 2px solid black; 44 margin: 1px 1px 2px 2px; 45 } 46 47 abs1,abs2,abs3,abs4 { 48 position: absolute; 49 top:0;left:0;bottom:0;right:0; 50 width:2px; height:2px; 51 background: black; 52 } 53 abs1 { top:auto; left:auto; } 54 abs2 { top:auto; right:auto; } 55 abs3 { bottom:auto; left:auto; } 56 abs4 { bottom:auto; right:auto; } 57 58 .hl { writing-mode: horizontal-tb; direction:ltr; } 59 .hr { writing-mode: horizontal-tb; direction:rtl; } 60 .vl { writing-mode: vertical-lr; } 61 .vr { writing-mode: vertical-rl; } 62 .vlr { writing-mode: vertical-lr; direction:rtl; } 63 .vrl { writing-mode: vertical-rl; direction:ltr; } 64 65 .stretch1 { } 66 .stretch2 { height:auto; } 67 .stretch3 { height:auto; max-height:13px; } 68 .stretch4 { width:auto; } 69 .stretch5 { width:auto; max-width:17px; } 70 .stretch6 { width:auto; height:auto; max-width:17px; max-height:13px; } 71 .stretch7 { width:auto; height:auto; } 72 73 </style> 74 </head> 75 <body> 76 <pre> 77 There should be no red areas. 78 All grey areas should have a black dot in each corner. 79 </pre> 80 81 82 <script> 83 var gridwm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; 84 var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ]; 85 var test = [ "stretch1", "stretch2", "stretch3", "stretch4", "stretch5", 86 "stretch6", "stretch7" ]; 87 for (var i = 0; i < gridwm.length; ++i) { 88 for (var j = 0; j < wm.length; ++j) { 89 for (var k = 0; k < test.length; ++k) { 90 var div = document.createElement("div"); 91 div.className = "grid " + gridwm[i]; 92 var span = document.createElement("span"); 93 span.className = wm[j] + " " + test[k]; 94 div.appendChild(span); 95 span.appendChild(document.createElement("abs1")); 96 span.appendChild(document.createElement("abs2")); 97 span.appendChild(document.createElement("abs3")); 98 span.appendChild(document.createElement("abs4")); 99 100 document.body.appendChild(div) 101 } 102 if (j % 2 == 1) document.body.appendChild(document.createElement("separator")); 103 } 104 } 105 </script> 106 107 108 </body> 109 </html>