element-paint-multiple-backgrounds-01c.html 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <!--
  2. Any copyright is dedicated to the Public Domain.
  3. http://creativecommons.org/licenses/publicdomain/
  4. Dynamic repaint with multiple -moz-element background images
  5. -->
  6. <!DOCTYPE html>
  7. <html class="reftest-wait">
  8. <head>
  9. <style>
  10. #box {
  11. height: 100px;
  12. width: 200px;
  13. background: -moz-element(#darkred) top left no-repeat,
  14. -moz-element(#black) top right no-repeat red;
  15. }
  16. div > div {
  17. width: 100px;
  18. height: 100px;
  19. }
  20. </style>
  21. </head>
  22. <body style="margin:0">
  23. <div id="box"></div>
  24. <div style="overflow:hidden; height:0">
  25. <div id="darkred" style="background-color: darkred"></div>
  26. <div id="black" style="background-color: black"></div>
  27. <div id="lime" style="background-color: lime"></div>
  28. <div id="green" style="background-color: green"></div>
  29. </div>
  30. <script>
  31. window.addEventListener("MozReftestInvalidate", function () {
  32. document.getElementById("box").style.backgroundImage = "-moz-element(#lime), -moz-element(#green)";
  33. document.documentElement.className = "";
  34. }, false);
  35. </script>
  36. </body>
  37. </html>