grid-item-canvas-001.html (2580B)
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: stretching canvas item</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1176775"> 10 <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-stretch"> 11 <link rel="match" href="grid-item-canvas-001-ref.html"> 12 <style type="text/css"> 13 body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } 14 15 .grid { 16 display: grid; 17 float: left; 18 grid: auto-flow auto / 10px 30px 10px 30px 10px 30px 10px 30px auto auto auto auto; 19 grid-gap: 5px; 20 border:1px solid; 21 } 22 canvas:nth-child(1n) { background: blue; } 23 canvas:nth-child(2n) { background: grey; } 24 canvas:nth-child(3n) { background: tan; } 25 canvas:nth-child(4n) { background: black; } 26 .sz > canvas { 27 width:20px; height:10px; 28 } 29 .sz.t2 > canvas { 30 width:10px; height:20px; 31 } 32 33 .jend { justify-self: end; } 34 .aend { align-self: end; } 35 .end { justify-self: end; align-self: end; } 36 </style> 37 </head> 38 <body> 39 40 <div class="grid sz"> 41 <canvas></canvas> 42 <canvas></canvas> 43 <canvas class="jend"></canvas> 44 <canvas class="jend"></canvas> 45 <canvas class="aend"></canvas> 46 <canvas class="aend"></canvas> 47 <canvas class="end"></canvas> 48 <canvas class="end"></canvas> 49 <canvas></canvas> 50 <canvas class="jend"></canvas> 51 <canvas class="aend"></canvas> 52 <canvas class="end"></canvas> 53 </div> 54 55 <div class="grid sz t2"> 56 <canvas></canvas> 57 <canvas></canvas> 58 <canvas class="jend"></canvas> 59 <canvas class="jend"></canvas> 60 <canvas class="aend"></canvas> 61 <canvas class="aend"></canvas> 62 <canvas class="end"></canvas> 63 <canvas class="end"></canvas> 64 <canvas></canvas> 65 <canvas class="jend"></canvas> 66 <canvas class="aend"></canvas> 67 <canvas class="end"></canvas> 68 </div> 69 70 <br clear=all> 71 <br clear=all> 72 73 <div class="grid"> 74 <canvas></canvas> 75 <canvas></canvas> 76 <canvas class="jend"></canvas> 77 <canvas class="jend"></canvas> 78 <canvas class="aend"></canvas> 79 <canvas class="aend"></canvas> 80 <canvas class="end"></canvas> 81 <canvas class="end"></canvas> 82 </div> 83 84 <div class="grid" style="grid: auto/auto auto; grid-gap: 0;"> 85 <canvas></canvas> 86 <canvas class="jend"></canvas> 87 <canvas class="aend"></canvas> 88 <canvas class="end"></canvas> 89 </div> 90 91 <br clear=all> 92 <br clear=all> 93 94 <div class="grid" style="grid: minmax(auto,30px) 30px/auto auto; grid-gap: 0"> 95 <canvas></canvas> 96 <canvas class="jend"></canvas> 97 <canvas class="aend"></canvas> 98 <canvas class="end"></canvas> 99 </div> 100 101 </body> 102 </html>