| <!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> |
