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