percentage-transform-paint-offset.html

<!DOCTYPE html>
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<script>
onload = function() {
  runAfterLayoutAndPaint(function() {
    document.getElementById('container-outer').style.width = '600px';
  }, true);
};
</script>
<style>
#container-outer {
  background-color: red;
  height: 300px;
  transform: translateX(400%);
  width: 400px;
}
#container-inner {
  background-color: green;
  height: 300px;
  left: -400%;
  position: absolute;
  width: 100%;
}
#content {
  background-color: blue;
  height: 300px;
  width: 300px;
}
</style>
Tests paint invalidation on resize of container with percentage-transform (causing change of paint offset, but no change of paint invalidation offset). Passes if there is a blue square and a green square side-by-side.
<div style="overflow: hidden; width: 700px; height: 500px"><!-- to avoid scrollbar -->
  <div id="container-outer">
    <div id="container-inner">
      <div id="content"></div>
    </div>
  </div>
</div>

chromium/third_party/blink/web_tests/paint/invalidation/transform/percentage-transform-paint-offset.html