<!DOCTYPE html> <!-- Any copyright is dedicated to the Public Domain. http://creativecommons.org/licenses/publicdomain/ Tests if getComputedStyle() works on -moz-image-rect() and formats the output correctly. --> <html> <head> <title>Testcases: -moz-image-rect() [bug 113577]</title> <style> div.wrapper { width: 32px; height: 32px; margin: 10px; background-color: red; } div.wrapper div { width: 32px; height: 32px; background: no-repeat; } </style> <script> var curdir = location.href.replace(/[^/]+$/, ""); // Tests a common usage var test1 = "-moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 16, 16, 0)"; var testRef1 = "-moz-image-rect(url(\"" + curdir + "green-16x16-in-blue-32x32.png\"), 0, 16, 16, 0)"; // Tests an irregular but valid usage var test2 = "-moz-image-rect( 'green-16x16-in-blue-32x32.png' , 0.0% , 50.5% , 49.5% , 0.0% )"; var testRef2 = "-moz-image-rect(url(\"" + curdir + "green-16x16-in-blue-32x32.png\"), 0%, 50.5%, 49.5%, 0%)"; // Tests a wrong syntax (negative value) var test3 = "-moz-image-rect(url(green-16x16-in-blue-32x32.png), 0%, -50%, 50%, 0%)"; var testRef3 = "none"; // Checks if I didn't break the default url() notation. var test4 = "url( green-16x16-in-blue-32x32.png )"; var testRef4 = "url(\"" + curdir + "green-16x16-in-blue-32x32.png\")"; function equalComputedDOMIO(domInput, domOutputRef, targetId) { var targetObj = document.getElementById(targetId); targetObj.style.backgroundImage = domInput; var domOutput = getComputedStyle(targetObj, null).getPropertyValue("background-image"); document.write(domOutput == domOutputRef ? "SUCCESS" : ("FAIL: " + domOutput)); } </script> </head> <body> <div class="wrapper"><div id="test1"></div></div> <script> equalComputedDOMIO(test1, testRef1, "test1"); </script> <div class="wrapper"><div id="test2"></div></div> <script> equalComputedDOMIO(test2, testRef2, "test2"); </script> <div class="wrapper"><div id="test3"></div></div> <script> equalComputedDOMIO(test3, testRef3, "test3"); </script> <div class="wrapper"><div id="test4"></div></div> <script> equalComputedDOMIO(test4, testRef4, "test4"); </script> </body> </html>