layout/reftests/css-grid/grid-abspos-items-008.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: abs pos areas</title>
   9   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1204585">
  10   <link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
  11   <link rel="match" href="grid-abspos-items-008-ref.html">
  12   <style type="text/css">
  13 html,body {
  14     color:black; background-color:white; font-size:16px; padding:0; margin:0;
  15 }
  16 separator { clear:both; display:block; height:6px; }
  17
  18 .grid {
  19   display: grid;
  20   float: left;
  21   position: relative;
  22   border-style: solid;
  23   border-width: 1px 3px 5px 7px;
  24   padding: 11px 13px 15px 17px;
  25   border-block-start-color: blue;
  26   border-inline-start-color: lime;
  27   grid-template: 13px 23px 7px / 11px 31px 13px;
  28   margin-right: 4px;
  29 }
  30
  31 abs1 {
  32   position: absolute;
  33   top:0;left:0;bottom:0;right:0;
  34   background: grey;
  35 }
  36
  37 .hl { writing-mode: horizontal-tb; direction:ltr; }
  38 .hr { writing-mode: horizontal-tb; direction:rtl; }
  39 .vl { writing-mode: vertical-lr; }
  40 .vr { writing-mode: vertical-rl; }
  41 .vlr { writing-mode: vertical-lr; direction:rtl; }
  42 .vrl { writing-mode: vertical-rl; direction:ltr; }
  43
  44 </style>
  45 </head>
  46 <body>
  47
  48 <script>
  49 var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
  50 for (var i = 0; i < wm.length; ++i) {
  51   for (var j = 0; j < wm.length; ++j) {
  52     var div = document.createElement("div");
  53     div.className = "grid " + wm[i];
  54     div.appendChild(document.createElement("abs1"));
  55     document.body.appendChild(div)
  56   }
  57   document.body.appendChild(document.createElement("separator"));
  58 }
  59 </script>
  60
  61
  62 </body>
  63 </html>