layout/reftests/css-grid/grid-abspos-items-012.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: margin:auto on grid abs.pos. child</title>
   9   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107783">
  10   <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos">
  11   <link rel="match" href="grid-abspos-items-012-ref.html">
  12   <style type="text/css">
  13
  14 div {
  15   display: grid;
  16   position: relative;
  17   grid-template-columns: 100px;
  18   grid-template-rows: 100px;
  19   width: 100px;
  20   height: 100px;
  21   border: 1px solid;
  22 }
  23
  24 span {
  25   display: block;
  26   position: absolute;
  27   background: lime;
  28   width: 20px;
  29   height: 20px;
  30   margin: 5px 7px 11px 13px;
  31   top:0; left:0; right:0; bottom:0;
  32 }
  33
  34   </style>
  35 </head>
  36 <body>
  37
  38 <div><span style="margin-left:auto"></span></div>
  39 <div><span style="margin-right:auto"></span></div>
  40 <div><span style="margin-left:auto; margin-right:auto"></span></div>
  41 <div><span style="margin-top:auto"></span></div>
  42 <div><span style="margin-bottom:auto"></span></div>
  43 <div><span style="margin-top:auto; margin-bottom:auto"></span></div>
  44 <div><span style="margin:auto"></span></div>
  45
  46 </body>
  47 </html>