display-grid-flex-columnset.html (1394B)
1 <!DOCTYPE HTML> 2 <html><head> 3 <meta charset="utf-8"> 4 <title>Testcase for bug 984869</title> 5 <style type="text/css"> 6 7 html,body { 8 color:black; background-color:white; font-size:16px; padding:0; margin:0; 9 } 10 11 .grid, .igrid { 12 display: grid; 13 grid: 20px / 20px 20px; 14 } 15 .igrid { display:inline-grid; } 16 17 .flex, .iflex { 18 display: flex; 19 } 20 .iflex { display:inline-flex; } 21 22 .columnset { 23 -ms-columns: 2; 24 -webkit-columns: 2; 25 columns: 2; 26 } 27 28 .b { display: block; } 29 30 a { 31 position: absolute; 32 right:0; bottom:0; 33 width:5px; height:5px; 34 background: lime; 35 } 36 .rel { position:relative; } 37 38 button { vertical-align: bottom; } 39 </style> 40 </head> 41 <body> 42 43 <button class="igrid">x<span>y</span>z</button> 44 <button class="iflex">x<span>y</span>z</button> 45 <button class="columnset">x<br><span>y</span>z</button> 46 47 <button class="rel igrid">x<span>y</span>z<a></a></button> 48 <button class="rel iflex">x<span>y</span>z<a></a></button> 49 <button class="rel columnset">x<br><span>y</span>z<a></a></button> 50 51 <button class="grid">x<span>y</span>z</button> 52 <button class="flex">x<span>y</span>z</button> 53 <button class="b columnset">x<br><span>y</span>z</button> 54 55 <button class="rel grid">x<span>y</span>z<a></a></button> 56 <button class="rel flex">x<span>y</span>z<a></a></button> 57 <button class="rel b columnset">x<br><span>y</span>z<a></a></button> 58 59 </body> 60 </html>