layout/reftests/css-grid/grid-abspos-items-015-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 Reference: abs pos static position (ancestor of grid container as abs.pos. CB)</title>
   9   <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1151243">
  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   position: relative;
  18   display: grid;
  19   padding: 1px 3px 5px 7px;
  20   grid-template: 25px 33px 7px / 30px 51px 5px;
  21   margin-right: 4px;
  22   height: 100px;
  23   width: 92px;
  24 }
  25 .wrap {
  26   position: relative;
  27   float: left;
  28   padding: 3px 5px 7px 9px;
  29   border-style: solid;
  30   border-width: 1px 3px 5px 7px;
  31   border-block-start-color: blue;
  32   border-inline-start-color: lime;
  33   writing-mode: vertical-lr; direction:rtl;
  34   z-index:1;
  35 }
  36
  37 abs1,abs3,abs4 {
  38   grid-area: 2 / 2 / 3 / 3;
  39   position: absolute;
  40 }
  41 abs1 { width:20px; height:97px; top:-12px; left:-30px; background:lime; }
  42 abs3 { top: -20px; left:-35px; right:-18px; background:cyan; }
  43 abs4 { width:20px; top:-6px; bottom:-53px; background:silver; }
  44 abs1::before { content:"1";}
  45 abs3::before { content:"3";}
  46 abs4::before { content:"4";}
  47
  48 .hl { writing-mode: horizontal-tb; direction:ltr; }
  49 .hr { writing-mode: horizontal-tb; direction:rtl; }
  50 .vl { writing-mode: vertical-lr; }
  51 .vr { writing-mode: vertical-rl; }
  52 .vlr { writing-mode: vertical-lr; direction:rtl; }
  53 .vrl { writing-mode: vertical-rl; direction:ltr; }
  54
  55 .hr abs3 { left:-16px; right:-37px;  }
  56 .vl abs3, .vr abs3, .vrl abs3, .vlr abs3 { left:-30px; top:-14px; right:-41px; }
  57 .vr abs3, .vrl abs3 { left:-39px; right:-32px; }
  58 .vrl abs3 { top:-25px; }
  59
  60 .hr abs1 { left: 61px; }
  61 .vl abs1, .vr abs1, .vrl abs1, .vlr abs1 { top:-6px; left:-25px; }
  62 .vr abs1, .vrl abs1 { left:38px; }
  63 .vrl abs1 { top:-17px; }
  64
  65 .hl abs4 { left:51px; }
  66 .hr abs4 { left:-20px; }
  67 .vl abs4, .vr abs4, .vrl abs4, .vlr abs4 { top:0px; bottom:-41px; left:-25px; }
  68 .vr abs4, .vrl abs4 { left:38px; }
  69 .vrl abs4 { top:-11px; bottom:-30px; }
  70
  71 </style>
  72 </head>
  73 <body>
  74
  75 <script>
  76 document.body.style.display="none";
  77 var wm = [ "hl", "hr", "vl", "vr", "vlr", "vrl" ];
  78 for (var i = 0; i < wm.length; ++i) {
  79   for (var j = 0; j < wm.length; ++j) {
  80     var div = document.createElement("div");
  81     div.className = "grid " + wm[i];
  82
  83     div.appendChild(span = document.createElement("span"));
  84     span.appendChild(document.createTextNode("A"));
  85     div.appendChild(document.createElement("abs1"));
  86     div.appendChild(span = document.createElement("span"));
  87     span.appendChild(document.createTextNode("BC"));
  88
  89     div.appendChild(document.createElement("abs3"));
  90     div.appendChild(document.createElement("abs4"));
  91     var wrap = document.createElement("div");
  92     wrap.className = "wrap ";
  93     wrap.appendChild(div);
  94     document.body.appendChild(wrap)
  95   }
  96   document.body.appendChild(document.createElement("separator"));
  97 }
  98 document.body.style.display="";
  99 </script>
 100
 101
 102 </body>
 103 </html>