<!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>
