clip-between-changed-transforms.html

<!DOCTYPE html>
<div id="outer" style="width: 0; height: 0; transform: rotate(5deg) translateX(100px)">
  <div id="clip" style="width: 200px; height: 200px; overflow: hidden">
    <div id="inner" style="width: 400px; height: 400px; background: blue; transform: translateX(-100px)">
    </div>
  </div>
</div>
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<script>
runAfterLayoutAndPaint(function() {
  // Change both outer and inner transforms, but keep the combined transform
  // unchanged. We should invalidate because the effective clip changes
  // between the transforms.
  outer.style.transform = "rotate(5deg) translateX(200px)";
  inner.style.transform = "translateX(-200px)";
}, true);
</script>

chromium/third_party/blink/web_tests/paint/invalidation/clip/clip-between-changed-transforms.html