display-grid-flex-columnset-ref.html (1672B)
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, .block-columnset { 23 -ms-columns: 2; 24 -webkit-columns: 2; 25 columns: 2; 26 } 27 28 .block-columnset, .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><wrap class="grid">x<span>y</span>z</wrap></button> 44 <button><wrap class="iflex">x<span>y</span>z</wrap></button> 45 <button><wrap class="b columnset">x<br><span>y</span>z</wrap></button> 46 47 <button class="rel"><wrap class="grid">x<span>y</span>z<a></a></wrap></button> 48 <button class="rel"><wrap class="iflex">x<span>y</span>z<a></a></wrap></button> 49 <button class="rel"><wrap class="b columnset">x<br><span>y</span>z<a></a></wrap></button> 50 51 <button class="b"><wrap class="grid">x<span>y</span>z</wrap></button> 52 <button class="b"><wrap class="flex">x<span>y</span>z</wrap></button> 53 <button class="b"><wrap class="b columnset">x<br><span>y</span>z</wrap></button> 54 55 <button class="rel b"><wrap class="grid">x<span>y</span>z<a></a></wrap></button> 56 <button class="rel b"><wrap class="flex">x<span>y</span>z<a></a></wrap></button> 57 <button class="rel b"><wrap class="b columnset">x<br><span>y</span>z<a></a></wrap></button> 58 59 </body> 60 </html>