<!-- Any copyright is dedicated to the Public Domain. http://creativecommons.org/licenses/publicdomain/ Dynamic repaint with multiple -moz-element background images --> <!DOCTYPE html> <html class="reftest-wait"> <head> <style> #box { height: 100px; width: 200px; background: -moz-element(#darkred) top left no-repeat, -moz-element(#black) top right no-repeat red; } div > div { width: 100px; height: 100px; } </style> </head> <body style="margin:0"> <div id="box"></div> <div style="overflow:hidden; height:0"> <div id="darkred" style="background-color: darkred"></div> <div id="black" style="background-color: black"></div> <div id="lime" style="background-color: lime"></div> <div id="green" style="background-color: green"></div> </div> <script> window.addEventListener("MozReftestInvalidate", function () { document.getElementById("box").style.backgroundImage = "-moz-element(#lime), -moz-element(#green)"; document.documentElement.className = ""; }); </script> </body> </html>