diff options
Diffstat (limited to 'layout/reftests/image-rect')
30 files changed, 1190 insertions, 0 deletions
diff --git a/layout/reftests/image-rect/background-common-usage-floating-point.html b/layout/reftests/image-rect/background-common-usage-floating-point.html new file mode 100644 index 0000000000..56015953e6 --- /dev/null +++ b/layout/reftests/image-rect/background-common-usage-floating-point.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + test1 and test2 test -moz-image-rect() where the image rect is specified by + mixed pixel values and percentage values. + + -moz-image-rect() can also take a floating point value for each side, and + each floating point value (after percent to pixel conversion) is rounded to + the nearest integer. test3 and test4 test if the rounding operation is + working as expected. +--> +<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 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 32, 100%, 0%); + } + #test2 { + background-image: -moz-image-rect(url(transparent-16x16-in-blue-32x32.png), 0%, 32, 50%, 0); + } + #test3 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0.3, 16.2, 15.5, 0.4); + } + #test4 { + background-color: yellow; + background-image: -moz-image-rect(url(transparent-16x16-in-blue-32x32.png), 51.2%, 100.4%, 99.2%, 48.9%); + } + </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> + </body> +</html> diff --git a/layout/reftests/image-rect/background-common-usage-percent.html b/layout/reftests/image-rect/background-common-usage-percent.html new file mode 100644 index 0000000000..55cabfe35a --- /dev/null +++ b/layout/reftests/image-rect/background-common-usage-percent.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Tests some common usages of -moz-image-rect() with image rect specified by + percentage values. +--> +<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 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0%, 100%, 100%, 0%); + } + #test2 { + background-image: -moz-image-rect(url(transparent-16x16-in-blue-32x32.png), 0%, 100%, 50%, 0%); + } + #test3 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0%, 50%, 50%, 0%); + } + #test4 { + background-color: yellow; + background-image: -moz-image-rect(url(transparent-16x16-in-blue-32x32.png), 50%, 100%, 100%, 50%); + } + </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> + </body> +</html> diff --git a/layout/reftests/image-rect/background-common-usage-pixel.html b/layout/reftests/image-rect/background-common-usage-pixel.html new file mode 100644 index 0000000000..d7978803a5 --- /dev/null +++ b/layout/reftests/image-rect/background-common-usage-pixel.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Tests some common usages of -moz-image-rect() with image rect specified by + pixel values. +--> +<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 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 32, 32, 0); + } + #test2 { + background-image: -moz-image-rect(url(transparent-16x16-in-blue-32x32.png), 0, 32, 16, 0); + } + #test3 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 16, 16, 0); + } + #test4 { + background-color: yellow; + background-image: -moz-image-rect(url(transparent-16x16-in-blue-32x32.png), 16, 32, 32, 16); + } + </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> + </body> +</html> diff --git a/layout/reftests/image-rect/background-common-usage-ref.html b/layout/reftests/image-rect/background-common-usage-ref.html new file mode 100644 index 0000000000..eaed0d21f7 --- /dev/null +++ b/layout/reftests/image-rect/background-common-usage-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<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 { + background-repeat: no-repeat; + } + #test1 { + width: 32px; + height: 32px; + background-position: 0px 0px; + background-image: url('green-16x16-in-blue-32x32.png'); + } + #test2 { + width: 32px; + height: 16px; + background-position: 0px 0px; + background-image: url('transparent-16x16-in-blue-32x32.png'); + } + #test3 { + width: 16px; + height: 16px; + background-position: 0px 0px; + background-image: url('green-16x16-in-blue-32x32.png'); + } + #test4 { + width: 32px; + height: 32px; + background-color: yellow; + background-position: -16px -16px; + background-image: url('transparent-16x16-in-blue-32x32.png'); + } + </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> + </body> +</html> diff --git a/layout/reftests/image-rect/background-draw-nothing-empty-rect.html b/layout/reftests/image-rect/background-draw-nothing-empty-rect.html new file mode 100644 index 0000000000..0e7c5d763e --- /dev/null +++ b/layout/reftests/image-rect/background-draw-nothing-empty-rect.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Makes sure that no image is drawn when an empty region of the source image + is specified by -moz-image-rect(). +--> +<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; + } + /* Zero width and height */ + #test1 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 0, 0, 0); + } + /* Negative height */ + #test2 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 32, 32, 0, 0); + } + /* Image rect outside the source image */ + #test3 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 100, 200, 200, 100); + } + /* Negative height */ + #test4 { + /* It is only after the source image size is available that it can be + determined if this image is empty or not. */ + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 16, 32, 50%, 16); + } + </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> + </body> +</html> diff --git a/layout/reftests/image-rect/background-draw-nothing-invalid-syntax.html b/layout/reftests/image-rect/background-draw-nothing-invalid-syntax.html new file mode 100644 index 0000000000..c658a0fa19 --- /dev/null +++ b/layout/reftests/image-rect/background-draw-nothing-invalid-syntax.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Tests if the CSS parser can detect wrong syntax of -moz-image-rect() and + gracefully fail. +--> +<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 { + /* only non-negative values accepted */ + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), -1, 16, 16, 0); + } + #test2 { + /* only bare numbers and percent values accepted */ + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0px, 16, 16, 0); + } + #test3 { + /* must have a complete set of <top>, <right>, <bottom>, <left> */ + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 16, 16); + } + #test4 { + /* must be comma separated */ + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png) 0, 16, 16, 0); + } + </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> + </body> +</html> diff --git a/layout/reftests/image-rect/background-draw-nothing-malformed-images.html b/layout/reftests/image-rect/background-draw-nothing-malformed-images.html new file mode 100644 index 0000000000..f3d75d7509 --- /dev/null +++ b/layout/reftests/image-rect/background-draw-nothing-malformed-images.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Tests if some unusual source images do not cause a crash. +--> +<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 { + background-image: -moz-image-rect(url(missing.png), 0, 16, 16, 0); + } + #test2 { + background-image: -moz-image-rect(url(#), 0, 16, 16, 0); + } + #test3 { + background-image: -moz-image-rect(url(../backgrounds/malformed.png), 0, 16, 16, 0); + } + #test4 { + background-image: -moz-image-rect(url(../backgrounds/transparent-32x32.png), 0, 16, 16, 0); + } + </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> + </body> +</html> diff --git a/layout/reftests/image-rect/background-draw-nothing-ref.html b/layout/reftests/image-rect/background-draw-nothing-ref.html new file mode 100644 index 0000000000..a370d087a8 --- /dev/null +++ b/layout/reftests/image-rect/background-draw-nothing-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<html> + <head> + <title>Testcases: -moz-image-rect() [bug 113577]</title> + <style> + div.wrapper { + width: 32px; + height: 32px; + margin: 10px; + background-color: red; + } + </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> + </body> +</html> diff --git a/layout/reftests/image-rect/background-monster-rect-ref.html b/layout/reftests/image-rect/background-monster-rect-ref.html new file mode 100644 index 0000000000..2b2203a53a --- /dev/null +++ b/layout/reftests/image-rect/background-monster-rect-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<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: url(green-16x16-in-blue-32x32.png) no-repeat; + } + </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> + </body> +</html> diff --git a/layout/reftests/image-rect/background-monster-rect.html b/layout/reftests/image-rect/background-monster-rect.html new file mode 100644 index 0000000000..2f326ec7af --- /dev/null +++ b/layout/reftests/image-rect/background-monster-rect.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Checks if huge values that overflow when converted to PRInt32 and small + non-zero values do not cause a crash or an unexpected behavior. +--> +<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; + } + /* Huge values that exceed PR_INT32_MAX are clamped to PR_INT32_MAX, so + all the tests below should display the entire 32x32 image. */ + #test1 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 10000000000, 32, 0); + } + #test2 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0%, 10000000000%, 100%, 0%); + } + /* Small values (smaller than machine epsilon) are rounded to zero, so + all the tests below should display the entire 32x32 image. */ + #test3 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0.00000000001, 32, 32, 0); + } + #test4 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0.00000000001%, 100%, 100%, 0%); + } + </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> + </body> +</html> diff --git a/layout/reftests/image-rect/background-over-size-rect-ref.html b/layout/reftests/image-rect/background-over-size-rect-ref.html new file mode 100644 index 0000000000..b59c7cdfc8 --- /dev/null +++ b/layout/reftests/image-rect/background-over-size-rect-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<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: 16px; + height: 16px; + background: -16px -16px url('green-16x16-in-blue-32x32.png') no-repeat; + } + </style> + </head> + <body> + <div class="wrapper"><div id="test1"></div></div> + <div class="wrapper"><div id="test2"></div></div> + </body> +</html> diff --git a/layout/reftests/image-rect/background-over-size-rect.html b/layout/reftests/image-rect/background-over-size-rect.html new file mode 100644 index 0000000000..ea166e89fd --- /dev/null +++ b/layout/reftests/image-rect/background-over-size-rect.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Tests image rects that run off the source image bounds. +--> +<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; + } + /* The final crop rect is computed by intersecting an image rect and the + source image bounds, so the following tests should display the bottom + right 16x16 corner of the image. */ + #test1 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 16, 50, 50, 16); + } + #test2 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 50.000001%, 1000000%, 1000000%, 50.000001%); + } + </style> + </head> + <body> + <div class="wrapper"><div id="test1"></div></div> + <div class="wrapper"><div id="test2"></div></div> + </body> +</html> diff --git a/layout/reftests/image-rect/background-test-parser-ref.html b/layout/reftests/image-rect/background-test-parser-ref.html new file mode 100644 index 0000000000..2f1dfb3af9 --- /dev/null +++ b/layout/reftests/image-rect/background-test-parser-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<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 { + } + #test1, #test2, #test3 { + width: 16px; + height: 16px; + background: url('green-16x16-in-blue-32x32.png') no-repeat; + } + #test4 { + width: 32px; + height: 32px; + background-color: yellow; + } + #test5, #test6 { + } + </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> diff --git a/layout/reftests/image-rect/background-test-parser.html b/layout/reftests/image-rect/background-test-parser.html new file mode 100644 index 0000000000..5ada0f8c5d --- /dev/null +++ b/layout/reftests/image-rect/background-test-parser.html @@ -0,0 +1,64 @@ +<!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> diff --git a/layout/reftests/image-rect/background-with-other-properties-ref.html b/layout/reftests/image-rect/background-with-other-properties-ref.html new file mode 100644 index 0000000000..cc5a17952a --- /dev/null +++ b/layout/reftests/image-rect/background-with-other-properties-ref.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<html> + <head> + <title>Testcases: -moz-image-rect() [bug 113577]</title> + <style> + div.wrapper { + width: 32px; + height: 32px; + margin: 10px; + background-color: red; + } + #test1 { + width: 32px; + height: 32px; + background-color: #00ff00; + } + #test2 { + width: 16px; + height: 16px; + background-color: #00ff00; + } + #test3 { + width: 32px; + height: 16px; + background-image: url('green-16x16-in-blue-32x32.png'); + } + #test4 { + width: 16px; + height: 16px; + background-color: #00ff00; + } + #test5 { + width: 32px; + height: 32px; + background-color: #00ff00; + } + </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> + </body> +</html> diff --git a/layout/reftests/image-rect/background-with-other-properties.html b/layout/reftests/image-rect/background-with-other-properties.html new file mode 100644 index 0000000000..976f891ce3 --- /dev/null +++ b/layout/reftests/image-rect/background-with-other-properties.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Tests if -moz-image-rect() works collaboratively with other background + properties as expected. +--> +<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; + } + /* tests with background-repeat */ + #test1 { + background: repeat -moz-image-rect(url(green-16x16-in-blue-32x32.png), 8, 24, 24, 8); + } + /* tests with background-position */ + #test2 { + background: no-repeat -8px -8px -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 24, 24, 0); + } + /* tests with background layers */ + #test3 { + background: no-repeat 0px 0px -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 16, 16, 0), + no-repeat 16px 0px -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 32, 16, 16); + } + /* for comparison with test5 */ + #test4 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 8, 24, 24, 8); + background-repeat: no-repeat; + } + /* tests with background-size */ + #test5 { + background-size: 100% 100%; + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 8, 24, 24, 8); + background-repeat: no-repeat; + } + </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> + </body> +</html> diff --git a/layout/reftests/image-rect/background-zoom-1-ref.html b/layout/reftests/image-rect/background-zoom-1-ref.html new file mode 100644 index 0000000000..fbaada9ce7 --- /dev/null +++ b/layout/reftests/image-rect/background-zoom-1-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Checks if the full zoom (x1.3) on -moz-image-rect() produces the same + result as the same full zoom on the CSS sprites produced by hacking + background-position. + + This file is identical to background-common-usage-pixel.html except the + zoom factor. +--> +<html reftest-zoom="1.304348"> + <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 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 32, 32, 0); + } + </style> + </head> + <body> + <div class="wrapper"><div id="test1"></div></div> + </body> +</html> diff --git a/layout/reftests/image-rect/background-zoom-1.html b/layout/reftests/image-rect/background-zoom-1.html new file mode 100644 index 0000000000..fbaada9ce7 --- /dev/null +++ b/layout/reftests/image-rect/background-zoom-1.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Checks if the full zoom (x1.3) on -moz-image-rect() produces the same + result as the same full zoom on the CSS sprites produced by hacking + background-position. + + This file is identical to background-common-usage-pixel.html except the + zoom factor. +--> +<html reftest-zoom="1.304348"> + <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 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 32, 32, 0); + } + </style> + </head> + <body> + <div class="wrapper"><div id="test1"></div></div> + </body> +</html> diff --git a/layout/reftests/image-rect/background-zoom-2-ref.html b/layout/reftests/image-rect/background-zoom-2-ref.html new file mode 100644 index 0000000000..617ae22599 --- /dev/null +++ b/layout/reftests/image-rect/background-zoom-2-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Checks if the full zoom (x1.3) on -moz-image-rect() produces the same + result as the same full zoom on the CSS sprites produced by hacking + background-position. + + This file is identical to background-common-usage-pixel.html except the + zoom factor. +--> +<html reftest-zoom="1.304348"> + <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; + } + #test2 { + background-image: -moz-image-rect(url(transparent-16x16-in-blue-32x32.png), 0, 32, 16, 0); + } + </style> + </head> + <body> + <div class="wrapper"><div id="test2"></div></div> + </body> +</html> diff --git a/layout/reftests/image-rect/background-zoom-2.html b/layout/reftests/image-rect/background-zoom-2.html new file mode 100644 index 0000000000..617ae22599 --- /dev/null +++ b/layout/reftests/image-rect/background-zoom-2.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Checks if the full zoom (x1.3) on -moz-image-rect() produces the same + result as the same full zoom on the CSS sprites produced by hacking + background-position. + + This file is identical to background-common-usage-pixel.html except the + zoom factor. +--> +<html reftest-zoom="1.304348"> + <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; + } + #test2 { + background-image: -moz-image-rect(url(transparent-16x16-in-blue-32x32.png), 0, 32, 16, 0); + } + </style> + </head> + <body> + <div class="wrapper"><div id="test2"></div></div> + </body> +</html> diff --git a/layout/reftests/image-rect/background-zoom-3-ref.html b/layout/reftests/image-rect/background-zoom-3-ref.html new file mode 100644 index 0000000000..45b909252f --- /dev/null +++ b/layout/reftests/image-rect/background-zoom-3-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Checks if the full zoom (x1.3) on -moz-image-rect() produces the same + result as the same full zoom on the CSS sprites produced by hacking + background-position. + + This file is identical to background-common-usage-pixel.html except the + zoom factor. +--> +<html reftest-zoom="1.304348"> + <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; + } + #test3 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 16, 16, 0); + } + </style> + </head> + <body> + <div class="wrapper"><div id="test3"></div></div> + </body> +</html> diff --git a/layout/reftests/image-rect/background-zoom-3.html b/layout/reftests/image-rect/background-zoom-3.html new file mode 100644 index 0000000000..45b909252f --- /dev/null +++ b/layout/reftests/image-rect/background-zoom-3.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Checks if the full zoom (x1.3) on -moz-image-rect() produces the same + result as the same full zoom on the CSS sprites produced by hacking + background-position. + + This file is identical to background-common-usage-pixel.html except the + zoom factor. +--> +<html reftest-zoom="1.304348"> + <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; + } + #test3 { + background-image: -moz-image-rect(url(green-16x16-in-blue-32x32.png), 0, 16, 16, 0); + } + </style> + </head> + <body> + <div class="wrapper"><div id="test3"></div></div> + </body> +</html> diff --git a/layout/reftests/image-rect/background-zoom-4-ref.html b/layout/reftests/image-rect/background-zoom-4-ref.html new file mode 100644 index 0000000000..77c83482e0 --- /dev/null +++ b/layout/reftests/image-rect/background-zoom-4-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Checks if the full zoom (x1.3) on -moz-image-rect() produces the same + result as the same full zoom on the CSS sprites produced by hacking + background-position. + + This file is identical to background-common-usage-pixel.html except the + zoom factor. +--> +<html reftest-zoom="1.304348"> + <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; + } + #test4 { + background-color: yellow; + background-image: -moz-image-rect(url(transparent-16x16-in-blue-32x32.png), 16, 32, 32, 16); + } + </style> + </head> + <body> + <div class="wrapper"><div id="test4"></div></div> + </body> +</html> diff --git a/layout/reftests/image-rect/background-zoom-4.html b/layout/reftests/image-rect/background-zoom-4.html new file mode 100644 index 0000000000..77c83482e0 --- /dev/null +++ b/layout/reftests/image-rect/background-zoom-4.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Checks if the full zoom (x1.3) on -moz-image-rect() produces the same + result as the same full zoom on the CSS sprites produced by hacking + background-position. + + This file is identical to background-common-usage-pixel.html except the + zoom factor. +--> +<html reftest-zoom="1.304348"> + <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; + } + #test4 { + background-color: yellow; + background-image: -moz-image-rect(url(transparent-16x16-in-blue-32x32.png), 16, 32, 32, 16); + } + </style> + </head> + <body> + <div class="wrapper"><div id="test4"></div></div> + </body> +</html> diff --git a/layout/reftests/image-rect/dom-api-computed-style.html b/layout/reftests/image-rect/dom-api-computed-style.html new file mode 100644 index 0000000000..f5efc91b07 --- /dev/null +++ b/layout/reftests/image-rect/dom-api-computed-style.html @@ -0,0 +1,66 @@ +<!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> diff --git a/layout/reftests/image-rect/dom-api-ref.html b/layout/reftests/image-rect/dom-api-ref.html new file mode 100644 index 0000000000..9195e1ddfd --- /dev/null +++ b/layout/reftests/image-rect/dom-api-ref.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<html> + <head> + <title>Testcases: -moz-image-rect() [bug 113577]</title> + <style> + div.wrapper { + width: 32px; + height: 32px; + margin: 10px; + background-color: red; + } + #test1 { + width: 16px; + height: 16px; + background-image: url('green-16x16-in-blue-32x32.png'); + } + #test2 { + width: 16px; + height: 16px; + background-image: url('green-16x16-in-blue-32x32.png'); + } + #test3 { + } + #test4 { + width: 32px; + height: 32px; + background-image: url('green-16x16-in-blue-32x32.png'); + } + </style> + </head> + <body> + <div class="wrapper"><div id="test1"></div></div> + SUCCESS + <div class="wrapper"><div id="test2"></div></div> + SUCCESS + <div class="wrapper"><div id="test3"></div></div> + SUCCESS + <div class="wrapper"><div id="test4"></div></div> + SUCCESS + </body> +</html> diff --git a/layout/reftests/image-rect/dom-api.html b/layout/reftests/image-rect/dom-api.html new file mode 100644 index 0000000000..a20cb594d0 --- /dev/null +++ b/layout/reftests/image-rect/dom-api.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + + Tests if the DOM interface of -moz-image-rect() works 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> + // 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(\"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(\"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 = ""; + // Checks if I didn't break the default url() notation. + var test4 = "url( green-16x16-in-blue-32x32.png )"; + var testRef4 = "url(\"green-16x16-in-blue-32x32.png\")"; + + function equalDOMIO(domInput, domOutputRef, targetId) { + var targetObj = document.getElementById(targetId); + targetObj.style.backgroundImage = domInput; + var domOutput = targetObj.style.backgroundImage; + document.write(domOutput == domOutputRef ? "SUCCESS" : ("FAIL: " + domOutput)); + } + </script> + </head> + <body> + <div class="wrapper"><div id="test1"></div></div> + <script> + equalDOMIO(test1, testRef1, "test1"); + </script> + <div class="wrapper"><div id="test2"></div></div> + <script> + equalDOMIO(test2, testRef2, "test2"); + </script> + <div class="wrapper"><div id="test3"></div></div> + <script> + equalDOMIO(test3, testRef3, "test3"); + </script> + <div class="wrapper"><div id="test4"></div></div> + <script> + equalDOMIO(test4, testRef4, "test4"); + </script> + </body> +</html> diff --git a/layout/reftests/image-rect/green-16x16-in-blue-32x32.png b/layout/reftests/image-rect/green-16x16-in-blue-32x32.png Binary files differnew file mode 100644 index 0000000000..038b4fa728 --- /dev/null +++ b/layout/reftests/image-rect/green-16x16-in-blue-32x32.png diff --git a/layout/reftests/image-rect/reftest.list b/layout/reftests/image-rect/reftest.list new file mode 100644 index 0000000000..2bbd6c07ba --- /dev/null +++ b/layout/reftests/image-rect/reftest.list @@ -0,0 +1,16 @@ +== background-common-usage-floating-point.html background-common-usage-ref.html +== background-common-usage-percent.html background-common-usage-ref.html +== background-common-usage-pixel.html background-common-usage-ref.html +== background-draw-nothing-empty-rect.html background-draw-nothing-ref.html +== background-draw-nothing-invalid-syntax.html background-draw-nothing-ref.html +== background-draw-nothing-malformed-images.html background-draw-nothing-ref.html +== background-monster-rect.html background-monster-rect-ref.html +== background-over-size-rect.html background-over-size-rect-ref.html +== background-test-parser.html background-test-parser-ref.html +fuzzy-if(Android,0-113,0-124) == background-with-other-properties.html background-with-other-properties-ref.html +fuzzy-if(Android,0-16,0-22) fuzzy-if(webrender,0-16,0-44) == background-zoom-1.html background-zoom-1-ref.html # Bug 1128229 +== background-zoom-2.html background-zoom-2-ref.html +== background-zoom-3.html background-zoom-3-ref.html +== background-zoom-4.html background-zoom-4-ref.html +== dom-api-computed-style.html dom-api-ref.html +== dom-api.html dom-api-ref.html diff --git a/layout/reftests/image-rect/transparent-16x16-in-blue-32x32.png b/layout/reftests/image-rect/transparent-16x16-in-blue-32x32.png Binary files differnew file mode 100644 index 0000000000..5baab0c1f9 --- /dev/null +++ b/layout/reftests/image-rect/transparent-16x16-in-blue-32x32.png |
