layout/reftests/forms/button/button-display-grid-fullsize-1.html

   1 <!DOCTYPE html>
   2 <!--
   3      Any copyright is dedicated to the Public Domain.
   4      http://creativecommons.org/publicdomain/zero/1.0
   5 -->
   6 <html>
   7 <head>
   8   <title>CSS Test: Testing for full height grid container in a button.</title>
   9   <meta charset="utf-8">
  10   <style>
  11     button {
  12       vertical-align: top;
  13       padding: 0;
  14       border: solid 1px black;
  15       background: lightblue;
  16       width: 200px;
  17       height: 200px;
  18     }
  19
  20     .grid {
  21       display: inline-grid;
  22       grid-template-columns: auto auto auto;
  23       grid-template-rows: auto;
  24       justify-content: space-between;
  25       align-items: stretch;
  26     }
  27
  28     .grid > * {
  29       margin: 1px;
  30       background: teal;
  31       min-height: 10px;
  32       min-width: 10px;
  33     }
  34
  35     .vertical {
  36       grid-template-columns: 1fr;
  37       grid-template-rows: 1fr 1fr 1fr;
  38     }
  39   </style>
  40 </head>
  41 <body>
  42   <!-- 3 columns/1 row -->
  43   <button class="grid">
  44     <div></div>
  45     <div></div>
  46     <div></div>
  47   </button>
  48   <!-- 1 column/3 rows, using "fr" units to fill container -->
  49   <button class="grid vertical">
  50     <div></div>
  51     <div></div>
  52     <div></div>
  53   </button>
  54 </body>
  55 </html>
  56