108 lines
3.9 KiB
HTML
108 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<script>jsTestIsAsync = true;</script>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
<head>
|
|
<title>This tests that we issue repaints on vertical content properly.</title>
|
|
<style>
|
|
div {
|
|
position: absolute;
|
|
font-family: ahem;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.container {
|
|
top: 10px;
|
|
left: 10px;
|
|
width: 80px;
|
|
height: 80px;
|
|
background-color: green;
|
|
-webkit-writing-mode: vertical-rl;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div style="position: absolute; left: 0px; top: 0px;">
|
|
<div style="-webkit-writing-mode: vertical-lr; width: 120px; height: 120px; background-color: red; top: 5px; left: 5px;">
|
|
<div style="-webkit-writing-mode: horizontal-tb; width: 100px; height: 100px; background-color: blue; top: 10px; left: 10px;">
|
|
<div class=container>foobar</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="position: absolute; left: 0px; top: 130px;">
|
|
<div style="-webkit-writing-mode: vertical-lr; width: 120px; height: 120px; background-color: red; top: 5px; left: 5px;">
|
|
<div style="width: 100px; height: 100px; background-color: blue; top: 10px; left: 10px;">
|
|
<div class=container>foobar</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="position: absolute; left: 0px; top: 260px;">
|
|
<div style="width: 120px; height: 120px; background-color: red; top: 5px; left: 5px;">
|
|
<div style="width: 100px; height: 100px; background-color: blue; top: 10px; left: 10px;">
|
|
<div class=container>foobar</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="position: absolute; left: 130px; top: 0px;">
|
|
<div style="-webkit-writing-mode: horizontal-tb; width: 120px; height: 120px; background-color: red; top: 5px; left: 5px;">
|
|
<div style="-webkit-writing-mode: horizontal-tb; width: 100px; height: 100px; background-color: blue; top: 10px; left: 10px;">
|
|
<div class=container>foobar</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="position: absolute; left: 130px; top: 130px;">
|
|
<div style="-webkit-writing-mode: vertical-rl; width: 120px; height: 120px; background-color: red; top: 5px; left: 5px;">
|
|
<div style="-webkit-writing-mode: vertical-rl; width: 100px; height: 100px; background-color: blue; top: 10px; left: 10px;">
|
|
<div class=container>foobar</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="position: absolute; left: 130px; top: 130px;">
|
|
<div style="-webkit-writing-mode: vertical-rl; width: 120px; height: 120px; background-color: red; top: 5px; left: 5px;">
|
|
<div style="width: 100px; height: 100px; background-color: blue; top: 10px; left: 10px;">
|
|
<div class=container>foobar</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="position: absolute; left: 130px; top: 260px;">
|
|
<div style="position: relative; -webkit-writing-mode: vertical-rl; width: 120px; height: 120px; background-color: red; top: 5px; left: 5px;">
|
|
<div style="width: 100px; height: 100px; background-color: blue; top: 10px; left: 10px;">
|
|
<div class=container>foobar</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
setTimeout(function() {
|
|
if (window.internals)
|
|
internals.startTrackingRepaints();
|
|
|
|
var elements = document.getElementsByClassName("container");
|
|
for (var i = 0; i < elements.length; ++i)
|
|
elements[i].innerText = "moobar";
|
|
|
|
document.body.offsetWidth;
|
|
|
|
if (window.internals) {
|
|
debug(internals.repaintRectsAsText());
|
|
shouldNotBe("internals.repaintRectsAsText().indexOf('25 25')", "-1");
|
|
shouldNotBe("internals.repaintRectsAsText().indexOf('25 155')", "-1");
|
|
shouldNotBe("internals.repaintRectsAsText().indexOf('25 285')", "-1");
|
|
shouldNotBe("internals.repaintRectsAsText().indexOf('155 25')", "-1");
|
|
shouldNotBe("internals.repaintRectsAsText().indexOf('155 155')", "-1");
|
|
shouldNotBe("internals.repaintRectsAsText().indexOf('155 285')", "-1");
|
|
internals.stopTrackingRepaints();
|
|
}
|
|
finishJSTest();
|
|
}, 0);
|
|
</script>
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</body>
|
|
</html>
|