background-and-shadow.html | Explore in Territory

<!DOCTYPE html>
<style>
div {
  margin-bottom: 20px;
  width: 100px;
  height: 100px;
}
.background-and-shadow {
  background-color: blue;
  /* The image is 1x1 lime */
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVQI12Ng+M8AAAICAQCqKp4nAAAAAElFTkSuQmCC');
  box-shadow: 0 10px black;
}
</style>
Tests background color/image and shadow painting with static and dynamic style.
Passes if there are two green squares with black shadows.
<div class="background-and-shadow"></div>
<div id="target"></div>
<script>
function test() {
  // Apply background and shadow styles to target after the image has
  // been loaded and decoded, to test the dynamic behavior.
  target.className = 'background-and-shadow';
  if (window.testRunner)
    testRunner.notifyDone();
}

if (window.testRunner) {
  testRunner.waitUntilDone();
  testRunner.updateAllLifecyclePhasesAndCompositeThen(test);
} else {
  setTimeout(test, 500);
}
</script>

chromium/third_party/blink/web_tests/paint/background/background-and-shadow.html