grid-item-canvas-001-ref.html (2999B)
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: stretching canvas item</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:16px/1 monospace; padding:0; margin:0; } 12 13 .block { 14 float: left; 15 border: 1px solid; 16 line-height: 0; 17 } 18 canvas:nth-child(1n) { background: blue; } 19 canvas:nth-child(2n) { background: grey; } 20 canvas:nth-child(3n) { background: tan; } 21 canvas:nth-child(4n) { background: black; } 22 .sz > canvas { 23 width: 20px; height: 10px; 24 } 25 .sz.t2 > canvas { 26 width: 10px; height: 20px; 27 } 28 .last { 29 display: inline-block; 30 line-height: 0; 31 height: 60px; 32 margin-top: -1px; 33 } 34 .last > canvas { 35 width: 300px; height: 90px; 36 vertical-align: bottom; 37 } 38 canvas { 39 vertical-align:top; 40 } 41 </style> 42 </head> 43 <body> 44 45 <div class="block sz"> 46 <canvas></canvas><canvas style="margin-left:-5px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:15px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:-5px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:15px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:5px"></canvas></div> 47 48 <div class="block sz t2"> 49 <canvas></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:25px"></canvas><canvas style="margin-left:25px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:25px"></canvas><canvas style="margin-left:25px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:5px"></canvas><canvas style="margin-left:5px"></canvas></div> 50 51 <br clear=all> 52 <br clear=all> 53 54 <div class="block" style="height:150px; width:215px; white-space:pre"> 55 <canvas style="width:195px; height:150px; background:black"></canvas><canvas style="width:220px; height:150px; background:tan"></canvas></div> 56 57 58 <div class="block" style="height:300px; width:600px"><canvas style="width:300px;height:150px"></canvas><canvas style="width:300px;height:150px"></canvas><canvas style="width:300px;height:150px"></canvas><canvas style="width:300px;height:150px"></canvas></div> 59 60 <br clear=all> 61 <br clear=all> 62 63 <div class="block" style="height:60px; width:600px; white-space:pre"> 64 <span style="display:inline-block; height:60px; margin-top:-90px"><canvas style="background:tan; vertical-align:bottom"></canvas><canvas style="background:black; vertical-align:bottom"></canvas></span></div> 65 <div style="line-height:0; margin:1px;" style="height:0px; width:600px; white-space:pre"> 66 <span class="last"><canvas></canvas><canvas></canvas></span></div> 67 68 </body> 69 </html>