blob: 0c3440a438e1146e9a100cecfd9b0093bae0c1d1 [file] [log] [blame]
<style>
img { width: 30px; height: 30px; background-color: red; }
.cover { position: absolute; background-color: green; opacity: 0.7; }
</style>
<div style="height: 500px;
background-color: lightyellow;
-webkit-writing-mode: horizontal-bt;
font: 40px ahem;
color: red;
-webkit-font-smoothing: none;
">
<br>
<br>
<img id="t-0">
<ruby id="t-1">1<span id="t-2">2</span><rt id="t-3">3</rt></ruby>
<span>
<div id="t-4" style="display: inline-block">4<div id="t-5">5</div></div>
</span>
<span id="t-5">
<img id="t-6">
</span>
<span id="t-7">
7 <span id="t-8">8</span>
</span>
</div>
<script>
for (var i = 0; i < 9; ++i) {
var element = document.getElementById("t-" + i);
var clientRect = element.getClientRects()[0];
var cover = document.createElement("div");
cover.className = "cover";
cover.style.width = clientRect.width + "px";
cover.style.height = clientRect.height + "px";
cover.style.top = clientRect.top + "px";
cover.style.left = clientRect.left + "px";
document.body.appendChild(cover);
}
</script>