third_party/WebKit/LayoutTests/fast/writing-mode/flipped-blocks-inline-map-local-to-container.html

   1 <style>
   2     img { width: 30px; height: 30px; background-color: red; }
   3     .cover { position: absolute; background-color: green; opacity: 0.7; }
   4 </style>
   5 <div style="height: 500px;
   6     background-color: lightyellow;
   7     -webkit-writing-mode: horizontal-bt;
   8     font: 40px Ahem;
   9     color: red;
  10     -webkit-font-smoothing: none;
  11 ">
  12     <br>
  13     <br>
  14     <img id="t-0">
  15     <ruby id="t-1">1<span id="t-2">2</span><rt id="t-3">3</rt></ruby>
  16     <span>
  17         <div id="t-4" style="display: inline-block">4<div id="t-5">5</div></div>
  18     </span>
  19     <span id="t-5">
  20         <img id="t-6">
  21     </span>
  22     <span id="t-7">
  23         7 <span id="t-8">8</span>
  24     </span>
  25 </div>
  26 <script>
  27     for (var i = 0; i < 9; ++i) {
  28         var element = document.getElementById("t-" + i);
  29         var clientRect = element.getClientRects()[0];
  30         var cover = document.createElement("div");
  31         cover.className = "cover";
  32         cover.style.width = clientRect.width + "px";
  33         cover.style.height = clientRect.height + "px";
  34         cover.style.top = clientRect.top + "px";
  35         cover.style.left = clientRect.left + "px";
  36         document.body.appendChild(cover);
  37     }
  38 </script>