<!DOCTYPE html> <!-- Any copyright is dedicated to the Public Domain. http://creativecommons.org/licenses/publicdomain/ Checks if the CSS parser can parse variations of -moz-image-rect() syntax correctly or fail gracefully. --> <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; } #test1 { /* tests shorthand notation */ background: transparent scroll no-repeat 0px 0px -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 16, 16, 0); } #test2 { /* URL can be a quoted string */ background-image: -moz-image-rect('green-16x16-in-blue-32x32.png',0,16,16,0); } #test3 { /* URL can be a quoted string */ background-image: -moz-image-rect( "green-16x16-in-blue-32x32.png" , 0 , 16 , 16 , 0 ); } #test4 { /* Non-quoted URL is not allowed. When the parser encounters a syntax error, it skips until the closing parenthesis, so background-color should be painted with yellow since -moz-image-rect(...) is ignored. */ background-image: -moz-image-rect(green-16x16-in-blue-32x32.png, 0, 16, 16, 0); background-color: yellow; } #test5 { /* Non-quoted URL is not allowed. When the parser encounters a syntax error, it skips until the closing parenthesis, so background-color should be ignored since there is no matching closing parenthesis. */ background-image: -moz-image-rect(green-16x16-in-blue-32x32.png, 0, 16, 16, 0; background-color: yellow; } #test6 { /* this is ignored due to the missing closing parenthesis in #test5 */ background-color: yellow; } </style> </head> <body> <div class="wrapper"><div id="test1"></div></div> <div class="wrapper"><div id="test2"></div></div> <div class="wrapper"><div id="test3"></div></div> <div class="wrapper"><div id="test4"></div></div> <div class="wrapper"><div id="test5"></div></div> <div class="wrapper"><div id="test6"></div></div> </body> </html>