display-grid-flex-columnset.html 1.4 KB

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