layout/reftests/css-grid/grid-abspos-items-009-ref.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   <style type="text/css">
  11 html,body {
  12     color:black; background-color:white; font-size:16px; padding:0; margin:0;
  13 }
  14 separator { clear:both; display:block; height:6px; }
  15
  16 .grid {
  17   display: block;
  18   float: left;
  19   position: relative;
  20   border-style: solid;
  21   border-width: 1px 3px 5px 7px;
  22   padding: 1px;
  23   border-block-start-color: blue;
  24   border-inline-start-color: lime;
  25   inline-size: 55px;
  26   block-size: 43px;
  27   margin-right: 4px;
  28   block-size: 57px;
  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>