reflection-invalidation-positioned-child.html

<!DOCTYPE html>
<style>
body {
  margin: 0;
}
#box {
  width: 100px;
  height: 100px;
  background-color: green;
  -webkit-box-reflect: below;
}
#box-check {
  margin-top: 20px;
  width: 100px;
  height: 100px;
  background-color: red;
}
#positioned {
  position: absolute;
  top: 10px;
  left: 400px;
  width: 50px;
  height: 50px;
  background-color: blue;
}
#positioned-check {
  position: absolute;
  top: 160px;
  left: 400px;
  width: 50px;
  height: 50px;
  background-color: red;
  z-index: -1;
}
</style>
<!--
Tests paint invalidation of positioned object when its ancestor changes reflection.
Passes if there is no red.
-->
<div id="box">
  <div id="positioned"></div>
</div>
<div id="box-check">
  <div id="positioned-check"></div>
</div>
<script src="../resources/text-based-repaint.js"></script>
<script>
function repaintTest() {
  box.style.webkitBoxReflect = 'below 20px';
}
runRepaintAndPixelTest();
</script>

chromium/third_party/blink/web_tests/paint/invalidation/reflection/reflection-invalidation-positioned-child.html