layout/reftests/forms/button/display-grid-flex-columnset-ref.html

   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>