<!DOCTYPE html>
<script>
if (window.testRunner)
  testRunner.waitUntilDone();
onload = function() {
  var animated = document.getElementById('animated');
  animated.addEventListener('transitionend', function() {
    if (window.testRunner)
      testRunner.notifyDone();
  });
  animated.style.opacity = 1;
}
</script>
<style>
#background, #foreground {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
}
#background {
  background-color: red;
}
#animated {
  transition: opacity 0.2s;
  opacity: 0.1;
}
#foreground {
  background-color: green;
}
body {
  margin: 0;
}
#description {
  position: absolute;
  top: 300px;
}
</style>
<div id="background"></div>
<div id="animated"><div id="foreground"></div></div>
<div id="description">
Tests paint invalidation on end of opacity transition.<br>
Passes if there is a green square and no red.<br>
</div>