layout/reftests/css-grid/grid-item-overflow-stretch-006.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><head>
   7   <meta charset="utf-8">
   8   <title>CSS Grid Test: stretching overflow visible items</title>
   9   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1348857">
  10   <link rel="match" href="grid-item-overflow-stretch-006-ref.html">
  11   <style type="text/css">
  12 body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; }
  13
  14 .grid {
  15   display: inline-grid;
  16   width: 100px;
  17   height: 50px;
  18   grid: 7px minmax(20px, auto) 3px / 7px minmax(20px, auto) 3px;
  19   grid-gap: 5px;
  20   border: 1px solid;
  21 }
  22
  23 .grid > * {
  24   grid-area: 2/2;
  25   border: 1px solid;
  26 }
  27
  28 .m  { margin: 1px 3px 5px 7px; }
  29 .ma { margin: auto; }
  30
  31 x { display:block; width:110px; height:5px; background:grey; }
  32 .h .grid x { width:5px; height:110px; }
  33
  34 br { clear:both; }
  35   </style>
  36 </head>
  37 <body>
  38
  39 <div class="grid"><span class=""><x></x></span></div>
  40 <div class="grid"><span class="m"><x></x></span></div>
  41 <div class="grid"><span class="ma"><x></x></span></div>
  42
  43 <br>
  44
  45 <div class="h">
  46
  47 <div class="grid"><span class=""><x></x></span></div>
  48 <div class="grid"><span class="m"><x></x></span></div>
  49 <div class="grid"><span class="ma"><x></x></span></div>
  50
  51 <br>
  52
  53 </div>
  54
  55 </body>
  56 </html>