grid-auto-min-sizing-definite-001-ref.html (3445B)
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: Testing 'auto' min-sizing with definite min-width/height</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775"> 10 <style type="text/css"> 11 body,html { color:black; background:white; font-size:12px; padding:0; margin:0; } 12 br { clear:both; } 13 14 .grid { 15 display: grid; 16 border: 1px dashed silver; 17 grid-template-columns: minmax(0,min-content); 18 grid-template-rows: minmax(0,min-content) minmax(0,min-content); 19 float: left; 20 margin-bottom:20px; 21 align-items: start; 22 justify-items: start; 23 } 24 .v { 25 writing-mode: vertical-lr; 26 -webkit-writing-mode: vertical-lr; 27 } 28 .h { 29 writing-mode: horizontal-tb; 30 -webkit-writing-mode: horizontal-tb; 31 } 32 .bb { 33 box-sizing: border-box; 34 } 35 36 span { 37 display: block; 38 background: lime; 39 margin: 7px 13px 50% 20%; 40 padding:1px 3px 10% 30%; 41 } 42 43 span.v { 44 height: 30px; 45 width: 10px; 46 border-left: 1px solid; 47 border-top: 3px solid; 48 } 49 50 span.h { 51 width: 30px; 52 height: 10px; 53 border-left: 3px solid; 54 border-top: 1px solid; 55 } 56 57 b40 { 58 display: block; 59 width: 40px; 60 height: 40px; 61 border: 1px solid pink; 62 z-index: 1; position:relative; 63 } 64 65 .h.r { 66 height: 42px; 67 width: 42px; 68 /* 49px is the percentage basis, i.e. the column size */ 69 margin-left: calc(0.2 * 49px); 70 padding: 1px 3px calc(0.1 * 49px) calc(0.3 * 49px); 71 } 72 .v.r { 73 height: 42px; 74 width: 42px; 75 /* This margin-left is 20% of 54px-wide grid area */ 76 /* 27px is the percentage basis, i.e. the column size */ 77 margin-left: calc(0.2 * 27px); 78 padding: 1px 3px calc(0.1 * 27px) calc(0.3 * 27px); 79 } 80 81 .r { position:relative; } 82 83 .t4 { width: 49px; 84 height: calc(10px /* item min-height */ + 85 7px /* item margin-top */ + 86 1px /* item padding-top */ + 87 1px /* item border-top */ + 88 calc(0.5 * 49px) /* item margin-bottom */ + 89 calc(0.1 * 49px) /* item padding-bottom */); 90 } 91 .t6 { width:46px; } 92 .t8 { width: 27px; 93 height: calc(30px /* item min-height */ + 94 7px /* item margin-top */ + 95 3px /* item padding-top */ + 96 1px /* item border-top */ + 97 calc(0.5 * 27px) /* item margin-bottom */ + 98 calc(0.1 * 27px) /* item padding-bottom */); 99 } 100 101 102 xx { 103 display: block; 104 background: lime; 105 padding: 32px 32px calc(0.2 * 32px) calc(0.4 * 32px); 106 margin: 0 0 calc(0.4 * 32px) calc(0.2 * 32px); 107 } 108 .t9, .t10 { 109 position: relative; 110 z-index: 1; 111 grid: calc(32px + calc(0.4 * 32px) + calc(0.2 * 32px)) 0 / 32px; 112 } 113 </style> 114 </head> 115 <body> 116 117 118 <div class="grid"><span class="h"><x></x></span></div> 119 <div class="grid"><span class="h bb"><x></x></span></div> 120 <div class="grid"><span class="h"><x></x></span><span class="h"><x></x></span></div> 121 <div class="grid t4"><span class="h r"><b40></b40></span></div> 122 <br> 123 <div class="grid"><span class="v"><x></x></span></div> 124 <div class="grid"><span class="v bb"><x></x></span></div> 125 <div class="grid"><span class="v"><x></x></span><span class="v"><x></x></span></div> 126 <div class="grid t8"><span class="v r"><b40></b40></span></div> 127 128 <div class="grid t9"><xx class="v"></xx></div> 129 <div class="grid v t10"><xx class="h"></xx></div> 130 131 </body> 132 </html>