diff options
Diffstat (limited to 'layout/reftests/css-blending')
134 files changed, 3044 insertions, 0 deletions
diff --git a/layout/reftests/css-blending/as-image/black100x100.png b/layout/reftests/css-blending/as-image/black100x100.png Binary files differnew file mode 100644 index 0000000000..061e686c15 --- /dev/null +++ b/layout/reftests/css-blending/as-image/black100x100.png diff --git a/layout/reftests/css-blending/as-image/blue100x100.png b/layout/reftests/css-blending/as-image/blue100x100.png Binary files differnew file mode 100644 index 0000000000..79f972cd5f --- /dev/null +++ b/layout/reftests/css-blending/as-image/blue100x100.png diff --git a/layout/reftests/css-blending/as-image/brown100x100.png b/layout/reftests/css-blending/as-image/brown100x100.png Binary files differnew file mode 100644 index 0000000000..f1a2d6d849 --- /dev/null +++ b/layout/reftests/css-blending/as-image/brown100x100.png diff --git a/layout/reftests/css-blending/as-image/green100x100.jpg b/layout/reftests/css-blending/as-image/green100x100.jpg Binary files differnew file mode 100644 index 0000000000..5b920f7c06 --- /dev/null +++ b/layout/reftests/css-blending/as-image/green100x100.jpg diff --git a/layout/reftests/css-blending/as-image/green100x100.png b/layout/reftests/css-blending/as-image/green100x100.png Binary files differnew file mode 100644 index 0000000000..0eea75c96a --- /dev/null +++ b/layout/reftests/css-blending/as-image/green100x100.png diff --git a/layout/reftests/css-blending/as-image/green100x100_alpha.png b/layout/reftests/css-blending/as-image/green100x100_alpha.png Binary files differnew file mode 100644 index 0000000000..1402d81f45 --- /dev/null +++ b/layout/reftests/css-blending/as-image/green100x100_alpha.png diff --git a/layout/reftests/css-blending/as-image/green_square.svg b/layout/reftests/css-blending/as-image/green_square.svg new file mode 100644 index 0000000000..7cb1675e38 --- /dev/null +++ b/layout/reftests/css-blending/as-image/green_square.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100"> + <rect width="100%" height="100%" fill="#00FF00"/> +</svg> diff --git a/layout/reftests/css-blending/as-image/red100x100.png b/layout/reftests/css-blending/as-image/red100x100.png Binary files differnew file mode 100644 index 0000000000..adb1bed7f0 --- /dev/null +++ b/layout/reftests/css-blending/as-image/red100x100.png diff --git a/layout/reftests/css-blending/as-image/red_green.gif b/layout/reftests/css-blending/as-image/red_green.gif Binary files differnew file mode 100644 index 0000000000..c86b56d412 --- /dev/null +++ b/layout/reftests/css-blending/as-image/red_green.gif diff --git a/layout/reftests/css-blending/as-image/white_square.svg b/layout/reftests/css-blending/as-image/white_square.svg new file mode 100644 index 0000000000..f9b0367c79 --- /dev/null +++ b/layout/reftests/css-blending/as-image/white_square.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100"> + <rect width="100%" height="100%" fill="#FFFFFF"/> +</svg> diff --git a/layout/reftests/css-blending/background-blend-mode-body-image-ref.html b/layout/reftests/css-blending/background-blend-mode-body-image-ref.html new file mode 100644 index 0000000000..e51dcd4392 --- /dev/null +++ b/layout/reftests/css-blending/background-blend-mode-body-image-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<style> +body { + background-color: green; +} +</style> +<p>This test will check that a background-image set on body does not blend with the browser's white background color.<br/> +The test passes if the page has a green background.</p> diff --git a/layout/reftests/css-blending/background-blend-mode-body-image.html b/layout/reftests/css-blending/background-blend-mode-body-image.html new file mode 100644 index 0000000000..9447e5b2d3 --- /dev/null +++ b/layout/reftests/css-blending/background-blend-mode-body-image.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<style> +body { + background-image: linear-gradient(green, green); + background-color: transparent; + background-blend-mode: screen; +} +</style> +<p>This test will check that a background-image set on body does not blend with the browser's white background color.<br/> +The test passes if the page has a green background.</p> diff --git a/layout/reftests/css-blending/background-blend-mode-body-transparent-image-ref.html b/layout/reftests/css-blending/background-blend-mode-body-transparent-image-ref.html new file mode 100644 index 0000000000..14514171b5 --- /dev/null +++ b/layout/reftests/css-blending/background-blend-mode-body-transparent-image-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<style> +body { + background-image: linear-gradient(transparent, transparent 10%, green 10%, green 90%, transparent 90%, transparent); +} +</style> +<p>This test will check that a transparent background-image set on body does not blend with the browser's white background color.<br/> +The test passes if the page has a green background with white horizontal lines.</p> diff --git a/layout/reftests/css-blending/background-blend-mode-body-transparent-image.html b/layout/reftests/css-blending/background-blend-mode-body-transparent-image.html new file mode 100644 index 0000000000..1947e9eafd --- /dev/null +++ b/layout/reftests/css-blending/background-blend-mode-body-transparent-image.html @@ -0,0 +1,9 @@ +<!DOCTYPE HTML> +<style> +body { + background-image: linear-gradient(transparent, transparent 10%, green 10%, green 90%, transparent 90%, transparent); + background-blend-mode: screen; +} +</style> +<p>This test will check that a transparent background-image set on body does not blend with the browser's white background color.<br/> +The test passes if the page has a green background with white horizontal lines.</p> diff --git a/layout/reftests/css-blending/background-blending-alpha-ref.html b/layout/reftests/css-blending/background-blending-alpha-ref.html new file mode 100644 index 0000000000..6a7055938d --- /dev/null +++ b/layout/reftests/css-blending/background-blending-alpha-ref.html @@ -0,0 +1,62 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<style> +.reftest { + background-color: rgba(0, 255, 0, 0.5); +} + +.child { + width: 100px; + height: 100px; + opacity: 0.5; + background-color: rgb(0, 127, 0); +} + +.topleft { + float:left; + + width: 100px; + height: 100px; + + /*First blend black rect with green in place*/ + /* Cs = (1 - αb) x Cs + αb x B(Cb, Cs)*/ + /* B(Cb, Cs) = | Cb - Cs | = (0, 0, 0) */ + /* 0.5 * (0, 255, 0) + 0.5 * (0, 0, 0) = (0, 127.5, 0)*/ + + /* Now, composite the resulting color with src-over; the alpha is the original alpha for the top layer + while the color is the blending result*/ + /* co = αs x Fa x Cs + αb x Fb x Cb - this is premultiplied */ + /* αo = αs + αb x (1 – αs) */ + /* Source over: Fa = 1; Fb = 1 – αs */ + /*co = 0.5 * 1 * (0, 127.5, 0) + 0.5 * 0.5 * (0, 255, 0) = (0, 63.5, 0) + 0.25 * (0, 255, 0) = (0, 127.5, 0)*/ + /*ao = 0.5 + 0.5 * 0.5 = 0.75*/ + /* Co = co/ao = (0, 127.5, 0) / 0.75*/ + + /* Now alpha composite on white background */ + /*co = 0.75 * 1 * (0, 127.5, 0) / 0.75 + 1 * 0.25 * (255, 255, 255) = (0, 127.5, 0) + (63.75, 63.75, 63.75) = (63.75, 159, 63.75) = (64, 191, 64) */ + + background-color: rgb(64, 191, 64); +} + +.topright { + float:left; + width: 100px; + height: 100px; +} + +.bottom { + width:200px; + height: 100px; + clear:both; +} + +</style> + +<div class="topleft"></div> +<div class="reftest topright"></div> +<div class="reftest bottom"></div> + +</html> diff --git a/layout/reftests/css-blending/background-blending-alpha.html b/layout/reftests/css-blending/background-blending-alpha.html new file mode 100644 index 0000000000..ba17205b8f --- /dev/null +++ b/layout/reftests/css-blending/background-blending-alpha.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<style> +.reftest { + width: 200px; + height: 200px; + background-size: 100px 100px, 200px 200px; + background-repeat: no-repeat; +} + +.blend { + background-image: url(as-image/green100x100_alpha.png); + background-color: rgba(0, 255, 0, 0.5); + background-blend-mode: difference; +} + +</style> +<div class="reftest blend"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-background-attachement-fixed-ref.html b/layout/reftests/css-blending/background-blending-background-attachement-fixed-ref.html new file mode 100644 index 0000000000..fded2192dd --- /dev/null +++ b/layout/reftests/css-blending/background-blending-background-attachement-fixed-ref.html @@ -0,0 +1,19 @@ +<!-- Blend a background image and a background color specifying background-attachment: fixed --> +<!DOCTYPE HTML> +<html> +<head> +<style> +div { + background: #777777; + background-attachment: fixed ; + width: 200px; + height: 200px; + margin: 10px; +} +</style> +</head> + +<body> + <div></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-background-attachement-fixed-scroll-ref.html b/layout/reftests/css-blending/background-blending-background-attachement-fixed-scroll-ref.html new file mode 100644 index 0000000000..2f5d424b7d --- /dev/null +++ b/layout/reftests/css-blending/background-blending-background-attachement-fixed-scroll-ref.html @@ -0,0 +1,23 @@ +<!-- Blend two background images having background-attachment: fixed and scroll respectively --> +<!DOCTYPE HTML> +<html> +<head> +<style> +div { + width: 200px; + height: 200px; + background: url('as-image/black100x100.png'), url('as-image/green100x100.png'); + background-size: 100px 100px, 200px 100px; + background-repeat: no-repeat; +} + +body { + margin: 0px; +} +</style> +</head> + +<body> + <div></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-background-attachement-fixed-scroll.html b/layout/reftests/css-blending/background-blending-background-attachement-fixed-scroll.html new file mode 100644 index 0000000000..91a72aeeab --- /dev/null +++ b/layout/reftests/css-blending/background-blending-background-attachement-fixed-scroll.html @@ -0,0 +1,40 @@ +<!-- Blend two background images having background-attachment: fixed and scroll respectively --> +<!DOCTYPE HTML> +<html> +<head> +<style> +#parent { + width: 200px; + height: 200px; + overflow: hidden; +} + +#child { + background: url('as-image/green100x100.png'), url('as-image/green100x100.png'); + background-attachment: fixed, scroll; + background-size: 100px 100px, 200px 200px; + background-repeat: no-repeat no-repeat; + background-blend-mode: difference; + + height: 400px; +} + +body { + margin: 0px; +} +</style> +<script> + function onLoad() { + var parent = document.getElementById("parent"); + parent.scrollTop = 100; + } +</script> +</head> + +<body onload="onLoad()"> + <div id="parent"> + <div id="child"> + </div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-background-attachement-fixed.html b/layout/reftests/css-blending/background-blending-background-attachement-fixed.html new file mode 100644 index 0000000000..2439d9a238 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-background-attachement-fixed.html @@ -0,0 +1,20 @@ +<!-- Blend a background image and a background color specifying background-attachment: fixed --> +<!DOCTYPE HTML> +<html> +<head> +<style> +div { + background: url('as-image/white_square.svg'), #777777; + background-attachment: fixed ; + width: 200px; + height: 200px; + margin: 10px; + background-blend-mode: multiply; +} +</style> +</head> + +<body> + <div></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-background-clip-content-box-ref.html b/layout/reftests/css-blending/background-blending-background-clip-content-box-ref.html new file mode 100644 index 0000000000..a860deb063 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-background-clip-content-box-ref.html @@ -0,0 +1,19 @@ +<!-- Blend a background image and a background color specifying background-clip: content-box --> +<!DOCTYPE HTML> +<html> +<head> +<style> +div { + background: #777777; + background-clip: content-box; + width: 200px; + height: 200px; + margin: 10px; +} +</style> +</head> + +<body> + <div></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-background-clip-content-box.html b/layout/reftests/css-blending/background-blending-background-clip-content-box.html new file mode 100644 index 0000000000..5793259e19 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-background-clip-content-box.html @@ -0,0 +1,20 @@ +<!-- Blend a background image and a background color specifying background-clip: content-box --> +<!DOCTYPE HTML> +<html> +<head> +<style> +div { + background: url('as-image/white_square.svg'), #777777; + background-clip: content-box; + width: 200px; + height: 200px; + margin: 10px; + background-blend-mode: multiply; +} +</style> +</head> + +<body> + <div></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-background-clip-padding-box-ref.html b/layout/reftests/css-blending/background-blending-background-clip-padding-box-ref.html new file mode 100644 index 0000000000..da516d82d7 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-background-clip-padding-box-ref.html @@ -0,0 +1,21 @@ +<!-- Blend a background image and a background color specifying background-clip: padding-box --> +<!DOCTYPE HTML> +<html> +<head> +<style> +div { + padding: 8.5px; + margin: 0 0 9px; + background: #777777; + background-clip: padding-box; + width: 200px; + height: 200px; + margin: 10px; +} +</style> +</head> + +<body> + <div></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-background-clip-padding-box.html b/layout/reftests/css-blending/background-blending-background-clip-padding-box.html new file mode 100644 index 0000000000..95c20bdd40 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-background-clip-padding-box.html @@ -0,0 +1,22 @@ +<!-- Blend a background image and a background color specifying background-clip: padding-box --> +<!DOCTYPE HTML> +<html> +<head> +<style> +div { + padding: 8.5px; + margin: 0 0 9px; + background: url('as-image/white_square.svg'), #777777; + background-clip: padding-box; + width: 200px; + height: 200px; + margin: 10px; + background-blend-mode: multiply; +} +</style> +</head> + +<body> + <div></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-background-origin-border-box.html b/layout/reftests/css-blending/background-blending-background-origin-border-box.html new file mode 100644 index 0000000000..9c732e2a01 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-background-origin-border-box.html @@ -0,0 +1,20 @@ +<!-- Blend a background image and a background color specifying background-origin: border-box --> +<!DOCTYPE HTML> +<html> +<head> +<style> +div { + background: url('as-image/white_square.svg'), #777777; + background-origin: border-box; + width: 200px; + height: 200px; + margin: 10px; + background-blend-mode: multiply; +} +</style> +</head> + +<body> + <div></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-background-origin-content-box.html b/layout/reftests/css-blending/background-blending-background-origin-content-box.html new file mode 100644 index 0000000000..ccb6fd235c --- /dev/null +++ b/layout/reftests/css-blending/background-blending-background-origin-content-box.html @@ -0,0 +1,21 @@ +<!-- Blend a background image and a background color specifying background-origin: content-box --> +<!DOCTYPE HTML> +<html> +<head> +<style> +div { + background: url('as-image/white_square.svg'), #777777; + background-origin: content-box; + width: 180px; + height: 180px; + margin: 10px; + padding: 10px; + background-blend-mode: multiply +} +</style> +</head> + +<body> + <div></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-background-origin-ref.html b/layout/reftests/css-blending/background-blending-background-origin-ref.html new file mode 100644 index 0000000000..55bdb862ec --- /dev/null +++ b/layout/reftests/css-blending/background-blending-background-origin-ref.html @@ -0,0 +1,19 @@ +<!-- Blend a background image and a background color specifying background-origin --> +<!DOCTYPE HTML> +<html> +<head> +<style> +div { + background: #777777; + background-origin: border-box; + width: 200px; + height: 200px; + margin: 10px; +} +</style> +</head> + +<body> + <div></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-background-position-percentage-ref.html b/layout/reftests/css-blending/background-blending-background-position-percentage-ref.html new file mode 100644 index 0000000000..af22521f94 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-background-position-percentage-ref.html @@ -0,0 +1,19 @@ +<!-- Blend a background image and a background color specifying background-position in percentage, such as 50% 50% --> +<!DOCTYPE HTML> +<html> +<head> +<style> +div { + background-color: #777777; + background-position: 10% 10%; + width: 200px; + height: 200px; + margin: 10px; +} +</style> +</head> + +<body> + <div></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-background-position-percentage.html b/layout/reftests/css-blending/background-blending-background-position-percentage.html new file mode 100644 index 0000000000..2b9de1cb5f --- /dev/null +++ b/layout/reftests/css-blending/background-blending-background-position-percentage.html @@ -0,0 +1,20 @@ +<!-- Blend a background image and a background color specifying background-position in percentage, such as 50% 50% --> +<!DOCTYPE HTML> +<html> +<head> +<style> +div { + background: url('as-image/white_square.svg'), #777777; + background-position: 10% 10%; + width: 200px; + height: 200px; + margin: 10px; + background-blend-mode: multiply; +} +</style> +</head> + +<body> + <div></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-background-repeat-no-repeat-ref.html b/layout/reftests/css-blending/background-blending-background-repeat-no-repeat-ref.html new file mode 100644 index 0000000000..686ce93b93 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-background-repeat-no-repeat-ref.html @@ -0,0 +1,19 @@ +<!-- Blend a background image and a background color specifying background-repeat: no-repeat --> +<!DOCTYPE HTML> +<html> +<head> +<style> +div { + background-color: #777777; + background-repeat: no-repeat; + width: 200px; + height: 200px; + margin: 10px; +} +</style> +</head> + +<body> + <div></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-background-repeat-no-repeat.html b/layout/reftests/css-blending/background-blending-background-repeat-no-repeat.html new file mode 100644 index 0000000000..3b66f50e2a --- /dev/null +++ b/layout/reftests/css-blending/background-blending-background-repeat-no-repeat.html @@ -0,0 +1,21 @@ +<!-- Blend a background image and a background color specifying background-repeat: no-repeat --> +<!DOCTYPE HTML> +<html> +<head> +<style> +div { + background-image: url('as-image/white_square.svg'); + background-color: #777777; + background-repeat: no-repeat; + width: 200px; + height: 200px; + margin: 10px; + background-blend-mode: multiply; +} +</style> +</head> + +<body> + <div></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-background-size-contain.html b/layout/reftests/css-blending/background-blending-background-size-contain.html new file mode 100644 index 0000000000..417f6d984f --- /dev/null +++ b/layout/reftests/css-blending/background-blending-background-size-contain.html @@ -0,0 +1,20 @@ +<!-- Blend a background image and a background color specifying background-size: contain --> +<!DOCTYPE HTML> +<html> +<head> +<style> +div { + background: url('as-image/white_square.svg'), #777777; + background-size: contain; + width: 200px; + height: 200px; + margin: 10px; + background-blend-mode: multiply; +} +</style> +</head> + +<body> + <div></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-background-size-cover.html b/layout/reftests/css-blending/background-blending-background-size-cover.html new file mode 100644 index 0000000000..0a942d901b --- /dev/null +++ b/layout/reftests/css-blending/background-blending-background-size-cover.html @@ -0,0 +1,20 @@ +<!-- Blend a background image and a background color specifying background-size: cover --> +<!DOCTYPE HTML> +<html> +<head> +<style> +div { + background: url('as-image/white_square.svg'), #777777; + background-size: cover; + width: 200px; + height: 200px; + margin: 10px; + background-blend-mode: multiply; +} +</style> +</head> + +<body> + <div></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-background-size-percentage.html b/layout/reftests/css-blending/background-blending-background-size-percentage.html new file mode 100644 index 0000000000..d8aebef845 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-background-size-percentage.html @@ -0,0 +1,20 @@ +<!-- Blend a background image and a background color specifying background-size in percentage --> +<!DOCTYPE HTML> +<html> +<head> +<style> +div { + background: url('as-image/white_square.svg'), #777777; + background-size: 50% 50%; + width: 200px; + height: 200px; + margin: 10px; + background-blend-mode: multiply; +} +</style> +</head> + +<body> + <div></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-background-size-pixels.html b/layout/reftests/css-blending/background-blending-background-size-pixels.html new file mode 100644 index 0000000000..73b5c28a4c --- /dev/null +++ b/layout/reftests/css-blending/background-blending-background-size-pixels.html @@ -0,0 +1,20 @@ +<!-- Blend a background image and a background color specifying background-size in pixels --> +<!DOCTYPE HTML> +<html> +<head> +<style> +div { + background: url('as-image/white_square.svg'), #777777; + background-size: 100px 100px; + width: 200px; + height: 200px; + margin: 10px; + background-blend-mode: multiply; +} +</style> +</head> + +<body> + <div></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-background-size-ref.html b/layout/reftests/css-blending/background-blending-background-size-ref.html new file mode 100644 index 0000000000..fa512a6ce2 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-background-size-ref.html @@ -0,0 +1,18 @@ +<!-- Blend a background image and a background color specifying background-size --> +<!DOCTYPE HTML> +<html> +<head> +<style> +div { + background: #777777; + width: 200px; + height: 200px; + margin: 10px; +} +</style> +</head> + +<body> + <div></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-color-burn-ref.svg b/layout/reftests/css-blending/background-blending-color-burn-ref.svg new file mode 100644 index 0000000000..48191f349e --- /dev/null +++ b/layout/reftests/css-blending/background-blending-color-burn-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"> +<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="0" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="0" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="0" width="40" height="40" fill="rgba(127,0,0,1)"></rect> +<rect x="0" y="40" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="40" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="40" width="40" height="40" fill="rgba(0,127,0,1)"></rect> +<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="0" y="120" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="120" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="120" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="120" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +</svg>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-color-burn.html b/layout/reftests/css-blending/background-blending-color-burn.html new file mode 100644 index 0000000000..b6307608dc --- /dev/null +++ b/layout/reftests/css-blending/background-blending-color-burn.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + +<link rel="stylesheet" href="blend-modes.css" type="text/css" /> + +<style> +.blend { + background-blend-mode: color-burn; +} +</style> + +<div class="reftest blend"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-color-dodge-ref.svg b/layout/reftests/css-blending/background-blending-color-dodge-ref.svg new file mode 100644 index 0000000000..724a4e184b --- /dev/null +++ b/layout/reftests/css-blending/background-blending-color-dodge-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"> +<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="0" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="0" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="0" width="40" height="40" fill="rgba(255,127,0,1)"></rect> +<rect x="0" y="40" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="40" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="40" width="40" height="40" fill="rgba(127,255,0,1)"></rect> +<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="80" width="40" height="40" fill="rgba(127,127,0,1)"></rect> +<rect x="0" y="120" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="120" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="120" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="120" width="40" height="40" fill="rgba(253,253,0,1)"></rect> +</svg>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-color-dodge.html b/layout/reftests/css-blending/background-blending-color-dodge.html new file mode 100644 index 0000000000..51efd478f0 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-color-dodge.html @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<link rel="stylesheet" href="blend-modes.css" type="text/css" /> + +<style> +.blend { + background-blend-mode: color-dodge; +} +</style> +<div class="reftest blend"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-color-ref.svg b/layout/reftests/css-blending/background-blending-color-ref.svg new file mode 100644 index 0000000000..2936015617 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-color-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"> +<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="0" width="40" height="40" fill="rgba(255,105,105,1)"></rect> +<rect x="80" y="0" width="40" height="40" fill="rgba(93,0,0,1)"></rect> +<rect x="120" y="0" width="40" height="40" fill="rgba(255,52,52,1)"></rect> +<rect x="0" y="40" width="40" height="40" fill="rgba(0,131,0,1)"></rect> +<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="40" width="40" height="40" fill="rgba(0,48,0,1)"></rect> +<rect x="120" y="40" width="40" height="40" fill="rgba(0,192,0,1)"></rect> +<rect x="0" y="80" width="40" height="40" fill="rgba(55,55,255,1)"></rect> +<rect x="40" y="80" width="40" height="40" fill="rgba(137,137,255,1)"></rect> +<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="80" width="40" height="40" fill="rgba(95,95,255,1)"></rect> +<rect x="0" y="120" width="40" height="40" fill="rgba(86,86,0,1)"></rect> +<rect x="40" y="120" width="40" height="40" fill="rgba(164,164,37,1)"></rect> +<rect x="80" y="120" width="40" height="40" fill="rgba(31,31,0,1)"></rect> +<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect> +</svg>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-color.html b/layout/reftests/css-blending/background-blending-color.html new file mode 100644 index 0000000000..6e00e094f1 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-color.html @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<link rel="stylesheet" href="blend-modes.css" type="text/css" /> + +<style> +.blend { + background-blend-mode: color; +} +</style> +<div class="reftest blend"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-darken-ref.svg b/layout/reftests/css-blending/background-blending-darken-ref.svg new file mode 100644 index 0000000000..d4d16a54be --- /dev/null +++ b/layout/reftests/css-blending/background-blending-darken-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"> +<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="0" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="80" y="0" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="120" y="0" width="40" height="40" fill="rgba(127,0,0,1)"></rect> +<rect x="0" y="40" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="40" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="120" y="40" width="40" height="40" fill="rgba(0,127,0,1)"></rect> +<rect x="0" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="40" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="0" y="120" width="40" height="40" fill="rgba(127,0,0,1)"></rect> +<rect x="40" y="120" width="40" height="40" fill="rgba(0,127,0,1)"></rect> +<rect x="80" y="120" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect> +</svg>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-darken.html b/layout/reftests/css-blending/background-blending-darken.html new file mode 100644 index 0000000000..a4286d1672 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-darken.html @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<link rel="stylesheet" href="blend-modes.css" type="text/css" /> + +<style> +.blend { + background-blend-mode: darken; +} +</style> +<div class="reftest blend"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-difference-ref.svg b/layout/reftests/css-blending/background-blending-difference-ref.svg new file mode 100644 index 0000000000..c04c51e0ab --- /dev/null +++ b/layout/reftests/css-blending/background-blending-difference-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"> +<rect x="0" y="0" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="40" y="0" width="40" height="40" fill="rgba(255,255,0,1)"></rect> +<rect x="80" y="0" width="40" height="40" fill="rgba(255,0,255,1)"></rect> +<rect x="120" y="0" width="40" height="40" fill="rgba(128,127,0,1)"></rect> +<rect x="0" y="40" width="40" height="40" fill="rgba(255,255,0,1)"></rect> +<rect x="40" y="40" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="80" y="40" width="40" height="40" fill="rgba(0,255,255,1)"></rect> +<rect x="120" y="40" width="40" height="40" fill="rgba(127,128,0,1)"></rect> +<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,255,1)"></rect> +<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,255,1)"></rect> +<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="120" y="80" width="40" height="40" fill="rgba(127,127,255,1)"></rect> +<rect x="0" y="120" width="40" height="40" fill="rgba(128,127,0,1)"></rect> +<rect x="40" y="120" width="40" height="40" fill="rgba(127,128,0,1)"></rect> +<rect x="80" y="120" width="40" height="40" fill="rgba(127,127,255,1)"></rect> +<rect x="120" y="120" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +</svg>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-difference.html b/layout/reftests/css-blending/background-blending-difference.html new file mode 100644 index 0000000000..647d5d8cbe --- /dev/null +++ b/layout/reftests/css-blending/background-blending-difference.html @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<link rel="stylesheet" href="blend-modes.css" type="text/css" /> + +<style> +.blend { + background-blend-mode: difference; +} +</style> +<div class="reftest blend"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-exclusion-ref.svg b/layout/reftests/css-blending/background-blending-exclusion-ref.svg new file mode 100644 index 0000000000..b4edd89076 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-exclusion-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"> +<rect x="0" y="0" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="40" y="0" width="40" height="40" fill="rgba(255,255,0,1)"></rect> +<rect x="80" y="0" width="40" height="40" fill="rgba(255,0,255,1)"></rect> +<rect x="120" y="0" width="40" height="40" fill="rgba(128,127,0,1)"></rect> +<rect x="0" y="40" width="40" height="40" fill="rgba(255,255,0,1)"></rect> +<rect x="40" y="40" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="80" y="40" width="40" height="40" fill="rgba(0,255,255,1)"></rect> +<rect x="120" y="40" width="40" height="40" fill="rgba(127,128,0,1)"></rect> +<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,255,1)"></rect> +<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,255,1)"></rect> +<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="120" y="80" width="40" height="40" fill="rgba(127,127,255,1)"></rect> +<rect x="0" y="120" width="40" height="40" fill="rgba(128,127,0,1)"></rect> +<rect x="40" y="120" width="40" height="40" fill="rgba(127,128,0,1)"></rect> +<rect x="80" y="120" width="40" height="40" fill="rgba(127,127,255,1)"></rect> +<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect> +</svg>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-exclusion.html b/layout/reftests/css-blending/background-blending-exclusion.html new file mode 100644 index 0000000000..f1a9f81e1a --- /dev/null +++ b/layout/reftests/css-blending/background-blending-exclusion.html @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<link rel="stylesheet" href="blend-modes.css" type="text/css" /> + +<style> +.blend { + background-blend-mode: exclusion; +} +</style> +<div class="reftest blend"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-gradient-color-ref.html b/layout/reftests/css-blending/background-blending-gradient-color-ref.html new file mode 100644 index 0000000000..09dd590607 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-gradient-color-ref.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<style> +.reftest { + width: 200px; + height: 200px; + background-size: 100px 100px, 200px 200px; + background-repeat: no-repeat; +} + +.blend { + background-image: linear-gradient(rgb(0,255,255), rgb(255,255,0)); + background-color: rgb(0,255,0); +} +</style> +<div class="reftest blend"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-gradient-color.html b/layout/reftests/css-blending/background-blending-gradient-color.html new file mode 100644 index 0000000000..b5df02bca9 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-gradient-color.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<style> +.reftest { + width: 200px; + height: 200px; + background-size: 100px 100px, 200px 200px; + background-repeat: no-repeat; +} + +.blend { + background-image: linear-gradient(rgb(0,0,255), rgb(255,0,0)); + background-color: rgb(0,255,0); + background-blend-mode: difference; +} + +</style> +<div class="reftest blend"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-gradient-gradient-ref.html b/layout/reftests/css-blending/background-blending-gradient-gradient-ref.html new file mode 100644 index 0000000000..6dd4b18397 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-gradient-gradient-ref.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<style> +.reftest { + width: 200px; + height: 200px; + background-size: 100px 100px, 200px 200px; + background-repeat: no-repeat; +} + +.blend { + background-image: url(as-image/black100x100.png), + linear-gradient(rgb(0,0,255), rgb(255,0,0), rgb(0, 0, 255)); +} +</style> +<div class="reftest blend"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-gradient-gradient.html b/layout/reftests/css-blending/background-blending-gradient-gradient.html new file mode 100644 index 0000000000..f8d9dc6d76 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-gradient-gradient.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<style> +.reftest { + width: 200px; + height: 200px; + background-size: 100px 100px, 200px 200px; + background-repeat: no-repeat; +} + +.blend { + background-image: linear-gradient(rgb(0,0,255), rgb(255,0,0)), + linear-gradient(rgb(0,0,255), rgb(255,0,0), rgb(0,0,255)); + background-blend-mode: difference; +} + +</style> +<div class="reftest blend"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-gradient-image-ref.html b/layout/reftests/css-blending/background-blending-gradient-image-ref.html new file mode 100644 index 0000000000..09dd590607 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-gradient-image-ref.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<style> +.reftest { + width: 200px; + height: 200px; + background-size: 100px 100px, 200px 200px; + background-repeat: no-repeat; +} + +.blend { + background-image: linear-gradient(rgb(0,255,255), rgb(255,255,0)); + background-color: rgb(0,255,0); +} +</style> +<div class="reftest blend"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-gradient-image.html b/layout/reftests/css-blending/background-blending-gradient-image.html new file mode 100644 index 0000000000..0ffe44d829 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-gradient-image.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<style> +.reftest { + width: 200px; + height: 200px; + background-size: 100px 100px, 200px 200px; + background-repeat: no-repeat; +} + +.blend { + background-image: linear-gradient(rgb(0,0,255), rgb(255,0,0)), url(as-image/green_square.svg); + background-blend-mode: difference; +} + +</style> +<div class="reftest blend"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-hard-light-ref.svg b/layout/reftests/css-blending/background-blending-hard-light-ref.svg new file mode 100644 index 0000000000..21afb50c38 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-hard-light-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"> +<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="80" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="120" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="0" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="120" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="0" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="40" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="0" y="120" width="40" height="40" fill="rgba(254,0,0,1)"></rect> +<rect x="40" y="120" width="40" height="40" fill="rgba(0,254,0,1)"></rect> +<rect x="80" y="120" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect> +</svg>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-hard-light.html b/layout/reftests/css-blending/background-blending-hard-light.html new file mode 100644 index 0000000000..61ac1533ba --- /dev/null +++ b/layout/reftests/css-blending/background-blending-hard-light.html @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<link rel="stylesheet" href="blend-modes.css" type="text/css" /> + +<style> +.blend { + background-blend-mode: hard-light; +} +</style> +<div class="reftest blend"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-hue-ref.svg b/layout/reftests/css-blending/background-blending-hue-ref.svg new file mode 100644 index 0000000000..907064b543 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-hue-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"> +<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="0" width="40" height="40" fill="rgba(255,105,105,1)"></rect> +<rect x="80" y="0" width="40" height="40" fill="rgba(93,0,0,1)"></rect> +<rect x="120" y="0" width="40" height="40" fill="rgba(202,75,75,1)"></rect> +<rect x="0" y="40" width="40" height="40" fill="rgba(0,131,0,1)"></rect> +<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="40" width="40" height="40" fill="rgba(0,48,0,1)"></rect> +<rect x="120" y="40" width="40" height="40" fill="rgba(38,165,38,1)"></rect> +<rect x="0" y="80" width="40" height="40" fill="rgba(55,55,255,1)"></rect> +<rect x="40" y="80" width="40" height="40" fill="rgba(137,137,255,1)"></rect> +<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="80" width="40" height="40" fill="rgba(99,99,226,1)"></rect> +<rect x="0" y="120" width="40" height="40" fill="rgba(87,87,0,1)"></rect> +<rect x="40" y="120" width="40" height="40" fill="rgba(169,169,0,1)"></rect> +<rect x="80" y="120" width="40" height="40" fill="rgba(31,31,0,1)"></rect> +<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect> +</svg>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-hue.html b/layout/reftests/css-blending/background-blending-hue.html new file mode 100644 index 0000000000..8ae44e5d2a --- /dev/null +++ b/layout/reftests/css-blending/background-blending-hue.html @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<link rel="stylesheet" href="blend-modes.css" type="text/css" /> + +<style> +.blend { + background-blend-mode: hue; +} +</style> +<div class="reftest blend"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-image-color-959674-ref.html b/layout/reftests/css-blending/background-blending-image-color-959674-ref.html new file mode 100644 index 0000000000..319e455d21 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-image-color-959674-ref.html @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<style> +.reftest { + width: 200px; + height: 200px; + background-color: rgb(0,0,0); +} + +</style> +<div class="reftest"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-image-color-959674.html b/layout/reftests/css-blending/background-blending-image-color-959674.html new file mode 100644 index 0000000000..21876a6478 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-image-color-959674.html @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<html> +<style> +.reftest { + width: 200px; + height: 200px; + background-size: 100px 100px, 200px 200px; + background-repeat: repeat; /* set this explicitly for the test clarity */ +} + +.blend { + background-color: rgb(0,255,0); + background-blend-mode: difference; +} + +.jpg { + background-image: url(as-image/green100x100.jpg); +} + +</style> +<div class="reftest blend jpg"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-image-color-gif-ref.html b/layout/reftests/css-blending/background-blending-image-color-gif-ref.html new file mode 100644 index 0000000000..ed0cad8ea8 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-image-color-gif-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE HTML> +<html> +<style> +div { + width: 100px; + height: 100px; + background-color: rgb(0,255,0); +} + +</style> +<body> +<div></div> +</body> +</html> diff --git a/layout/reftests/css-blending/background-blending-image-color-gif.html b/layout/reftests/css-blending/background-blending-image-color-gif.html new file mode 100644 index 0000000000..c68d617322 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-image-color-gif.html @@ -0,0 +1,29 @@ +<!DOCTYPE HTML> +<html> +<style> +.reftest { + width: 100px; + height: 100px; + background-size: 100px 100px, 100px 100px; + background-repeat: no-repeat; +} + +.blend { + background-color: rgb(255,255,0); + background-blend-mode: difference; +} + +.gif { + background-image: url('as-image/red_green.gif'); +} + +</style> + +<body> + <div class="reftest blend gif"></div> +</body> +</html> + + + + diff --git a/layout/reftests/css-blending/background-blending-image-color-jpg.html b/layout/reftests/css-blending/background-blending-image-color-jpg.html new file mode 100644 index 0000000000..2832caeb53 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-image-color-jpg.html @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<style> +.reftest { + width: 200px; + height: 200px; + background-size: 100px 100px, 200px 200px; + background-repeat: no-repeat; +} + +.blend { + background-color: rgb(0,255,0); + background-blend-mode: difference; +} + +.jpg { + background-image: url(as-image/green100x100.jpg); +} + +</style> +<div class="reftest blend jpg"></div> +</html> + diff --git a/layout/reftests/css-blending/background-blending-image-color-png.html b/layout/reftests/css-blending/background-blending-image-color-png.html new file mode 100644 index 0000000000..6ded901a31 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-image-color-png.html @@ -0,0 +1,25 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<style> +.reftest { + width: 200px; + height: 200px; + background-size: 100px 100px, 200px 200px; + background-repeat: no-repeat; +} + +.blend { + background-color: rgb(0,255,0); + background-blend-mode: difference; +} + +.png { + background-image: url(as-image/green100x100.png); +} + +</style> +<div class="reftest blend png"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-image-color-ref.html b/layout/reftests/css-blending/background-blending-image-color-ref.html new file mode 100644 index 0000000000..d9ebe355ea --- /dev/null +++ b/layout/reftests/css-blending/background-blending-image-color-ref.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<style> +.reftest { + width: 200px; + height: 200px; + background-size: 100px 100px, 200px 200px; + background-repeat: no-repeat; +} + +.blend { + background-image: url(as-image/black100x100.png); + background-color: rgb(0,255,0); +} + +</style> +<div class="reftest blend"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-image-color-svg-as-data-uri.html b/layout/reftests/css-blending/background-blending-image-color-svg-as-data-uri.html new file mode 100644 index 0000000000..6f2ac24a34 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-image-color-svg-as-data-uri.html @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE HTML> +<html> +<style> +.reftest { + width: 200px; + height: 200px; + background-size: 100px 100px, 200px 200px; + background-repeat: no-repeat; +} + +.blend { + background-color: rgb(0,255,0); + background-blend-mode: difference; +} + +.svg { + background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20version%3D%271.1%27%20viewBox%3D%270%200%20100%20100%27%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20fill%3D%27%2300FF00%27%2F%3E%3C%2Fsvg%3E"); +} + +</style> +<div class="reftest blend svg"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-image-color-svg.html b/layout/reftests/css-blending/background-blending-image-color-svg.html new file mode 100644 index 0000000000..8a3f05d463 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-image-color-svg.html @@ -0,0 +1,25 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<style> +.reftest { + width: 200px; + height: 200px; + background-size: 100px 100px, 200px 200px; + background-repeat: no-repeat; +} + +.blend { + background-color: rgb(0,255,0); + background-blend-mode: difference; +} + +.svg { + background-image: url(as-image/green_square.svg); +} + +</style> +<div class="reftest blend svg"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-image-color-transform3d.html b/layout/reftests/css-blending/background-blending-image-color-transform3d.html new file mode 100644 index 0000000000..9980418d5c --- /dev/null +++ b/layout/reftests/css-blending/background-blending-image-color-transform3d.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE HTML> +<html> +<style> +.reftest { + width: 400px; + height: 200px; + background-size: 200px 100px, 400px 200px; + background-repeat: no-repeat; + transform-origin: 0 0; + transform: rotateY(60deg); +} + +.blend { + background-color: rgb(0,255,0); + background-blend-mode: difference; +} + +.png { + background-image: url(as-image/green100x100.png); +} + +</style> +<div class="reftest blend png"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-image-gradient.html b/layout/reftests/css-blending/background-blending-image-gradient.html new file mode 100644 index 0000000000..6b9e48d461 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-image-gradient.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<style> +.reftest { + width: 200px; + height: 200px; + background-size: 200px 200px, 100px 100px; + background-repeat: no-repeat; +} + +.blend { + background-image: url(as-image/green_square.svg), linear-gradient(rgb(0,0,255), rgb(255,0,0)); + background-blend-mode: difference; +} + +</style> +<div class="reftest blend"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-image-image-ref.html b/layout/reftests/css-blending/background-blending-image-image-ref.html new file mode 100644 index 0000000000..b123024a78 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-image-image-ref.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<style> +.reftest { + width: 200px; + height: 200px; + background-size: 100px 100px, 200px 200px; + background-repeat: no-repeat; +} + +.blend { + background-image: url(as-image/black100x100.png); + background-color: rgb(0, 255, 0); +} +</style> +<div class="reftest blend"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-image-image.html b/layout/reftests/css-blending/background-blending-image-image.html new file mode 100644 index 0000000000..846f7cd10b --- /dev/null +++ b/layout/reftests/css-blending/background-blending-image-image.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<style> +.reftest { + width: 200px; + height: 200px; + background-size: 100px 100px, 200px 200px; + background-repeat: no-repeat; +} + +.blend { + background-image: url(as-image/green100x100.png), + url(as-image/green_square.svg); + background-blend-mode: difference; +} + +</style> +<div class="reftest blend"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-isolation-parent-child-color.html b/layout/reftests/css-blending/background-blending-isolation-parent-child-color.html new file mode 100644 index 0000000000..0a8ca887f7 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-isolation-parent-child-color.html @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE HTML> +<html> +<style> +.reftest { + width: 100px; + height: 100px; +} + +.parent { + background-color: rgb(255, 255, 0); + background-blend-mode: screen; +} + +.child { + background-color: rgb(0, 255, 0); + background-blend-mode: difference; +} + +</style> +<body> + <div class="reftest parent"> + <div class="reftest child"></div> + </div> +</body> +</html> diff --git a/layout/reftests/css-blending/background-blending-isolation-parent-child-image.html b/layout/reftests/css-blending/background-blending-isolation-parent-child-image.html new file mode 100644 index 0000000000..00629b1f13 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-isolation-parent-child-image.html @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE HTML> +<html> +<style> +.reftest { + width: 100px; + height: 100px; +} + +.parent { + background-color: rgb(255, 255, 0); + background-blend-mode: screen; +} + +.child { + background-image: url(as-image/green100x100.png); + background-blend-mode: difference; +} + +</style> +<body> + <div class="reftest parent"> + <div class="reftest child"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-isolation-parent-child-ref.html b/layout/reftests/css-blending/background-blending-isolation-parent-child-ref.html new file mode 100644 index 0000000000..d1becbc8c8 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-isolation-parent-child-ref.html @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE HTML> +<html> +<style> +.reftest { + width: 100px; + height: 100px; +} + +.color { + background-color: rgb(0, 255, 0); +} + +</style> +<div class="reftest color"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-isolation-ref.html b/layout/reftests/css-blending/background-blending-isolation-ref.html new file mode 100644 index 0000000000..8b1a50d534 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-isolation-ref.html @@ -0,0 +1,27 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<style> +.reftest { + width: 100px; + height: 100px; +} + +.image { + background-image: url(as-image/green100x100.png); +} + +.color { + background-color: rgb(0, 255, 0); +} + +body { + background-color: rgb(0, 0, 255); +} + +</style> +<div class="reftest image"></div> +<div class="reftest color"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-isolation.html b/layout/reftests/css-blending/background-blending-isolation.html new file mode 100644 index 0000000000..80ead0163b --- /dev/null +++ b/layout/reftests/css-blending/background-blending-isolation.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<style> +.reftest { + width: 100px; + height: 100px; +} + +.image { + background-image: url(as-image/green100x100.png); + background-blend-mode: difference; +} + +.color { + background-color: rgb(0, 255, 0); + background-blend-mode: difference; +} + +body { + background-color: rgb(0, 0, 255); +} + +</style> +<body> + <div class="reftest image"></div> + <div class="reftest color"></div> +</body> +</html> diff --git a/layout/reftests/css-blending/background-blending-lighten-ref.svg b/layout/reftests/css-blending/background-blending-lighten-ref.svg new file mode 100644 index 0000000000..4ec1bf08a0 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-lighten-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"> +<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="0" width="40" height="40" fill="rgba(255,255,0,1)"></rect> +<rect x="80" y="0" width="40" height="40" fill="rgba(255,0,255,1)"></rect> +<rect x="120" y="0" width="40" height="40" fill="rgba(255,127,0,1)"></rect> +<rect x="0" y="40" width="40" height="40" fill="rgba(255,255,0,1)"></rect> +<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="40" width="40" height="40" fill="rgba(0,255,255,1)"></rect> +<rect x="120" y="40" width="40" height="40" fill="rgba(127,255,0,1)"></rect> +<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,255,1)"></rect> +<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,255,1)"></rect> +<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="80" width="40" height="40" fill="rgba(127,127,255,1)"></rect> +<rect x="0" y="120" width="40" height="40" fill="rgba(255,127,0,1)"></rect> +<rect x="40" y="120" width="40" height="40" fill="rgba(127,255,0,1)"></rect> +<rect x="80" y="120" width="40" height="40" fill="rgba(127,127,255,1)"></rect> +<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect> +</svg>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-lighten.html b/layout/reftests/css-blending/background-blending-lighten.html new file mode 100644 index 0000000000..cd69c4c609 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-lighten.html @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<link rel="stylesheet" href="blend-modes.css" type="text/css" /> + +<style> +.blend { + background-blend-mode: lighten; +} +</style> +<div class="reftest blend"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-list-repeat-ref.html b/layout/reftests/css-blending/background-blending-list-repeat-ref.html new file mode 100644 index 0000000000..e87329c0c4 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-list-repeat-ref.html @@ -0,0 +1,33 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<style> +.reftest { + width: 100px; + height: 100px; + float:left; +} + +.first { + background-color: rgb(0, 0, 0); +} +.second { + background-color: rgb(0, 255, 0); +} + +.third { + background-color: rgb(0, 0, 0); +} + +.fourth { + background-color: rgb(0, 255, 0); +} + +</style> +<div class="reftest first"></div> +<div class="reftest second"></div> +<div class="reftest third"></div> +<div class="reftest fourth"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-list-repeat.html b/layout/reftests/css-blending/background-blending-list-repeat.html new file mode 100644 index 0000000000..53eb0f040e --- /dev/null +++ b/layout/reftests/css-blending/background-blending-list-repeat.html @@ -0,0 +1,24 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<style> +.reftest { + width: 400px; + height: 100px; + background-size: 100px 100px, 200px 100px, 300px 100px; + background-repeat: no-repeat; +} + +.blend { + background-color: rgb(0, 255, 0); + background-blend-mode: multiply, screen; + background-image: url(as-image/red100x100.png), + url(as-image/green100x100.png), + url(as-image/red100x100.png); +} + +</style> +<div class="reftest blend"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-luminosity-ref.svg b/layout/reftests/css-blending/background-blending-luminosity-ref.svg new file mode 100644 index 0000000000..8dc3c2247f --- /dev/null +++ b/layout/reftests/css-blending/background-blending-luminosity-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"> +<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="0" width="40" height="40" fill="rgba(0,131,0,1)"></rect> +<rect x="80" y="0" width="40" height="40" fill="rgba(55,55,255,1)"></rect> +<rect x="120" y="0" width="40" height="40" fill="rgba(86,86,0,1)"></rect> +<rect x="0" y="40" width="40" height="40" fill="rgba(255,105,105,1)"></rect> +<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="40" width="40" height="40" fill="rgba(137,137,255,1)"></rect> +<rect x="120" y="40" width="40" height="40" fill="rgba(164,164,37,1)"></rect> +<rect x="0" y="80" width="40" height="40" fill="rgba(93,0,0,1)"></rect> +<rect x="40" y="80" width="40" height="40" fill="rgba(0,48,0,1)"></rect> +<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="80" width="40" height="40" fill="rgba(31,31,0,1)"></rect> +<rect x="0" y="120" width="40" height="40" fill="rgba(255,52,52,1)"></rect> +<rect x="40" y="120" width="40" height="40" fill="rgba(0,192,0,1)"></rect> +<rect x="80" y="120" width="40" height="40" fill="rgba(95,95,255,1)"></rect> +<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect> +</svg>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-luminosity.html b/layout/reftests/css-blending/background-blending-luminosity.html new file mode 100644 index 0000000000..4c530c9132 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-luminosity.html @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<link rel="stylesheet" href="blend-modes.css" type="text/css" /> + +<style> +.blend { + background-blend-mode: luminosity; +} +</style> +<div class="reftest blend"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-moz-element-ref.html b/layout/reftests/css-blending/background-blending-moz-element-ref.html new file mode 100644 index 0000000000..70298325c4 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-moz-element-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> +<style> + +.c { + height: 10px; + background: rgba(0,255,0,.5); +} + +</style> +</head> +<body> +<div class="c"></div> +<div class="c"></div> +</body> +</html> + diff --git a/layout/reftests/css-blending/background-blending-moz-element.html b/layout/reftests/css-blending/background-blending-moz-element.html new file mode 100644 index 0000000000..11272a70f6 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-moz-element.html @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> +<style> + +div { + height: 10px; +} + +#b { + background: rgba(0,255,0,.5); +} +#c { + background: -moz-element(#b); + background-blend-mode: difference; +} + +</style> +</head> +<body> +<div id="b"></div> +<div id="c"></div> +</body> +</html> + diff --git a/layout/reftests/css-blending/background-blending-multiple-images-ref.html b/layout/reftests/css-blending/background-blending-multiple-images-ref.html new file mode 100644 index 0000000000..e15793e7ba --- /dev/null +++ b/layout/reftests/css-blending/background-blending-multiple-images-ref.html @@ -0,0 +1,33 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<style> +.reftest { + width: 100px; + height: 100px; + float:left; +} + +.first { + background-color: rgb(255, 0, 255); +} +.second { + background-color: rgb(0, 0, 255); +} + +.third { + background-color: rgb(0, 255, 255); +} + +.fourth { + background-color: rgb(0, 255, 0); +} + +</style> +<div class="reftest first"></div> +<div class="reftest second"></div> +<div class="reftest third"></div> +<div class="reftest fourth"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-multiple-images.html b/layout/reftests/css-blending/background-blending-multiple-images.html new file mode 100644 index 0000000000..274ab18c09 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-multiple-images.html @@ -0,0 +1,24 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<style> +.reftest { + width: 400px; + height: 100px; + background-size: 100px 100px, 200px 100px, 300px 100px; + background-repeat: no-repeat; +} + +.blend { + background-color: rgb(0, 255, 0); + background-blend-mode: difference, exclusion, screen; + background-image: url(as-image/red100x100.png), + url(as-image/green100x100.png), + url(as-image/blue100x100.png); +} + +</style> +<div class="reftest blend"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-multiply-ref.svg b/layout/reftests/css-blending/background-blending-multiply-ref.svg new file mode 100644 index 0000000000..0addf25093 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-multiply-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"> +<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="0" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="80" y="0" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="120" y="0" width="40" height="40" fill="rgba(127,0,0,1)"></rect> +<rect x="0" y="40" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="40" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="120" y="40" width="40" height="40" fill="rgba(0,127,0,1)"></rect> +<rect x="0" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="40" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="0" y="120" width="40" height="40" fill="rgba(127,0,0,1)"></rect> +<rect x="40" y="120" width="40" height="40" fill="rgba(0,127,0,1)"></rect> +<rect x="80" y="120" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="120" y="120" width="40" height="40" fill="rgba(63,63,0,1)"></rect> +</svg>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-multiply.html b/layout/reftests/css-blending/background-blending-multiply.html new file mode 100644 index 0000000000..2174ed5b44 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-multiply.html @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<link rel="stylesheet" href="blend-modes.css" type="text/css" /> + +<style> +.blend { + background-blend-mode: multiply; +} +</style> +<div class="reftest blend"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-normal-ref.svg b/layout/reftests/css-blending/background-blending-normal-ref.svg new file mode 100644 index 0000000000..8b86b74487 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-normal-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"> +<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="80" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="120" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="0" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="120" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="0" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="40" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="0" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect> +<rect x="40" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect> +<rect x="80" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect> +<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect> +</svg>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-normal.html b/layout/reftests/css-blending/background-blending-normal.html new file mode 100644 index 0000000000..f860846c7b --- /dev/null +++ b/layout/reftests/css-blending/background-blending-normal.html @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<link rel="stylesheet" href="blend-modes.css" type="text/css" /> + +<style> +.blend { + background-blend-mode: normal; +} +</style> +<div class="reftest blend"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-overlay-ref.svg b/layout/reftests/css-blending/background-blending-overlay-ref.svg new file mode 100644 index 0000000000..320697f710 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-overlay-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"> +<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="0" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="0" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="0" width="40" height="40" fill="rgba(254,0,0,1)"></rect> +<rect x="0" y="40" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="40" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="40" width="40" height="40" fill="rgba(0,254,0,1)"></rect> +<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="0" y="120" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="120" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="120" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="120" width="40" height="40" fill="rgba(126,126,0,1)"></rect> +</svg>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-overlay.html b/layout/reftests/css-blending/background-blending-overlay.html new file mode 100644 index 0000000000..a5be65fa98 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-overlay.html @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<link rel="stylesheet" href="blend-modes.css" type="text/css" /> + +<style> +.blend { + background-blend-mode: overlay; +} +</style> +<div class="reftest blend"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-saturation-ref.svg b/layout/reftests/css-blending/background-blending-saturation-ref.svg new file mode 100644 index 0000000000..a8fb06a5a8 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-saturation-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"> +<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="0" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="0" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="0" width="40" height="40" fill="rgba(127,127,0,1)"></rect> +<rect x="0" y="40" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="40" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="40" width="40" height="40" fill="rgba(127,127,0,1)"></rect> +<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="80" width="40" height="40" fill="rgba(127,127,0,1)"></rect> +<rect x="0" y="120" width="40" height="40" fill="rgba(166,39,39,1)"></rect> +<rect x="40" y="120" width="40" height="40" fill="rgba(76,203,76,1)"></rect> +<rect x="80" y="120" width="40" height="40" fill="rgba(14,14,141,1)"></rect> +<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect> +</svg>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-saturation.html b/layout/reftests/css-blending/background-blending-saturation.html new file mode 100644 index 0000000000..ed5173346a --- /dev/null +++ b/layout/reftests/css-blending/background-blending-saturation.html @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<link rel="stylesheet" href="blend-modes.css" type="text/css" /> + +<style> +.blend { + background-blend-mode: saturation; +} +</style> +<div class="reftest blend"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-screen-ref.svg b/layout/reftests/css-blending/background-blending-screen-ref.svg new file mode 100644 index 0000000000..d99af71dc9 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-screen-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"> +<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="0" width="40" height="40" fill="rgba(255,255,0,1)"></rect> +<rect x="80" y="0" width="40" height="40" fill="rgba(255,0,255,1)"></rect> +<rect x="120" y="0" width="40" height="40" fill="rgba(255,127,0,1)"></rect> +<rect x="0" y="40" width="40" height="40" fill="rgba(255,255,0,1)"></rect> +<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="40" width="40" height="40" fill="rgba(0,255,255,1)"></rect> +<rect x="120" y="40" width="40" height="40" fill="rgba(127,255,0,1)"></rect> +<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,255,1)"></rect> +<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,255,1)"></rect> +<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="80" width="40" height="40" fill="rgba(127,127,255,1)"></rect> +<rect x="0" y="120" width="40" height="40" fill="rgba(255,127,0,1)"></rect> +<rect x="40" y="120" width="40" height="40" fill="rgba(127,255,0,1)"></rect> +<rect x="80" y="120" width="40" height="40" fill="rgba(127,127,255,1)"></rect> +<rect x="120" y="120" width="40" height="40" fill="rgba(190,190,0,1)"></rect> +</svg>
\ No newline at end of file diff --git a/layout/reftests/css-blending/background-blending-screen.html b/layout/reftests/css-blending/background-blending-screen.html new file mode 100644 index 0000000000..5f5fe0f56b --- /dev/null +++ b/layout/reftests/css-blending/background-blending-screen.html @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<link rel="stylesheet" href="blend-modes.css" type="text/css" /> + +<style> +.blend { + background-blend-mode: screen; +} +</style> +<div class="reftest blend"></div> +</html> diff --git a/layout/reftests/css-blending/background-blending-soft-light-ref.svg b/layout/reftests/css-blending/background-blending-soft-light-ref.svg new file mode 100644 index 0000000000..485314e389 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-soft-light-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"> + <rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> + <rect x="40" y="0" width="40" height="40" fill="rgba(0,255,0,1)"></rect> + <rect x="80" y="0" width="40" height="40" fill="rgba(0,0,255,1)"></rect> + <rect x="120" y="0" width="40" height="40" fill="rgba(190,63,0,1)"></rect> + <rect x="0" y="40" width="40" height="40" fill="rgba(255,0,0,1)"></rect> + <rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> + <rect x="80" y="40" width="40" height="40" fill="rgba(0,0,255,1)"></rect> + <rect x="120" y="40" width="40" height="40" fill="rgba(64,190,0,1)"></rect> + <rect x="0" y="80" width="40" height="40" fill="rgba(255,0,0,1)"></rect> + <rect x="40" y="80" width="40" height="40" fill="rgba(0,255,0,1)"></rect> + <rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> + <rect x="120" y="80" width="40" height="40" fill="rgba(63,63,0,1)"></rect> + <rect x="0" y="120" width="40" height="40" fill="rgba(255,0,0,1)"></rect> + <rect x="40" y="120" width="40" height="40" fill="rgba(0,255,0,1)"></rect> + <rect x="80" y="120" width="40" height="40" fill="rgba(0,0,255,1)"></rect> + <rect x="120" y="120" width="40" height="40" fill="rgba(126,126,0,1)"></rect> +</svg> diff --git a/layout/reftests/css-blending/background-blending-soft-light.html b/layout/reftests/css-blending/background-blending-soft-light.html new file mode 100644 index 0000000000..13cf76fce4 --- /dev/null +++ b/layout/reftests/css-blending/background-blending-soft-light.html @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<link rel="stylesheet" href="blend-modes.css" type="text/css" /> + +<style> +.blend { + background-blend-mode: soft-light; +} +</style> +<div class="reftest blend"></div> +</html> diff --git a/layout/reftests/css-blending/blend-canvas-ref.html b/layout/reftests/css-blending/blend-canvas-ref.html new file mode 100644 index 0000000000..fd74b7a282 --- /dev/null +++ b/layout/reftests/css-blending/blend-canvas-ref.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<script type="text/javascript"> +window.onload = function() { + var c = document.getElementById("b"); + var ctx = c.getContext("2d"); + ctx.fillStyle = "rgb(0,0,0)"; + ctx.fillRect(0,0,100,100); +} +</script> +<style> +#a { + width: 200px; + height: 200px; + background-color: rgb(0,255,0); +} +#b { + width: 100px; + height: 100px; +} +</style> +<div id="a"> + <canvas width="100" height="100" id="b"/> +</div> +</html> diff --git a/layout/reftests/css-blending/blend-canvas.html b/layout/reftests/css-blending/blend-canvas.html new file mode 100644 index 0000000000..4989e35dba --- /dev/null +++ b/layout/reftests/css-blending/blend-canvas.html @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<script type="text/javascript"> +window.onload = function() { + var c = document.getElementById("b"); + var ctx = c.getContext("2d"); + ctx.fillStyle = "rgb(0,255,0)"; + ctx.fillRect(0,0,100,100); +} +</script> +<style> +#a { + width: 200px; + height: 200px; + background-color: rgb(0,255,0); +} +#b { + width: 100px; + height: 100px; + mix-blend-mode:difference; +} +</style> +<div id="a"> + <canvas width="100" height="100" id="b"/> +</div> +</html> diff --git a/layout/reftests/css-blending/blend-constant-background-color-ref.html b/layout/reftests/css-blending/blend-constant-background-color-ref.html new file mode 100644 index 0000000000..4fbe7d3dec --- /dev/null +++ b/layout/reftests/css-blending/blend-constant-background-color-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<style> +#a { + width: 200px; + height: 200px; + background-color: rgb(0,255,0); +} +#b { + width: 100px; + height: 100px; + background-color: rgb(0,0,0); +} +</style> +<div id="a"> +<div id="b"> +</div> +</div> +</html> diff --git a/layout/reftests/css-blending/blend-constant-background-color.html b/layout/reftests/css-blending/blend-constant-background-color.html new file mode 100644 index 0000000000..e9e3e1c6aa --- /dev/null +++ b/layout/reftests/css-blending/blend-constant-background-color.html @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<style> +#a { + width: 200px; + height: 200px; + background-color: rgb(0,255,0); +} +#b { + width: 100px; + height: 100px; + background-color: rgb(0,255,0); + mix-blend-mode:difference; +} +</style> +<div id="a"> +<div id="b"> +</div> +</div> +</html> diff --git a/layout/reftests/css-blending/blend-difference-stacking-ref.html b/layout/reftests/css-blending/blend-difference-stacking-ref.html new file mode 100644 index 0000000000..34dd86e82d --- /dev/null +++ b/layout/reftests/css-blending/blend-difference-stacking-ref.html @@ -0,0 +1,30 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<style> +#a { + background-color: rgb(0,255,0); + width: 200px; + height: 210px; +} +#b { + position: absolute; + top:80px; + filter:url(#f); +} +</style> + <svg height="0"> + <filter id="f"> + <feColorMatrix values="1 1 1 0 0 + 1 1 1 0 0 + 1 1 1 0 0 + 0 0 0 1 0"/> + + </filter> + </svg> +<div id="a"> +<div id="b">.</div> +</div> +</html> diff --git a/layout/reftests/css-blending/blend-difference-stacking.html b/layout/reftests/css-blending/blend-difference-stacking.html new file mode 100644 index 0000000000..3c1e55de3e --- /dev/null +++ b/layout/reftests/css-blending/blend-difference-stacking.html @@ -0,0 +1,30 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<style> +.a { + background-color: rgb(0,255,0); +} +#b { + width: 200px; + height: 210px; +} +.c { + width: 100px; + height: 100px; + mix-blend-mode: difference; +} +#d { + z-index: 1; + position: absolute; + top:80px; +} +</style> +<div id="b" class="a"> + <div id="d">. + <div class="a c"></div> + </div> +</div> +</html> diff --git a/layout/reftests/css-blending/blend-gradient-background-color-ref.html b/layout/reftests/css-blending/blend-gradient-background-color-ref.html new file mode 100644 index 0000000000..53b2f65468 --- /dev/null +++ b/layout/reftests/css-blending/blend-gradient-background-color-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<style> +#a { + width: 200px; + height: 200px; + background-color: rgb(0,255,0); +} +#b { + width: 100px; + height: 100px; + background: linear-gradient(rgb(0,255,255), rgb(255,255,0)); +} +</style> +<div id="a"> +<div id="b"> +</div> +</div> +</html> diff --git a/layout/reftests/css-blending/blend-gradient-background-color.html b/layout/reftests/css-blending/blend-gradient-background-color.html new file mode 100644 index 0000000000..10a938cc79 --- /dev/null +++ b/layout/reftests/css-blending/blend-gradient-background-color.html @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<style> +#a { + width: 200px; + height: 200px; + background-color: rgb(0,255,0); +} +#b { + width: 100px; + height: 100px; + background: linear-gradient(rgb(0,0,255), rgb(255,0,0)); + mix-blend-mode:difference; +} +</style> +<div id="a"> +<div id="b"> +</div> +</div> +</html> diff --git a/layout/reftests/css-blending/blend-image-ref.html b/layout/reftests/css-blending/blend-image-ref.html new file mode 100644 index 0000000000..b8a85f2360 --- /dev/null +++ b/layout/reftests/css-blending/blend-image-ref.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<style> +#a { + width: 200px; + height: 200px; + background-color: rgb(0,255,0); +} +#b { + width: 100px; + height: 100px; +} +</style> +<div id="a"> +<img src="as-image/black100x100.png" id="b"/> +</div> +</html>
\ No newline at end of file diff --git a/layout/reftests/css-blending/blend-image.html b/layout/reftests/css-blending/blend-image.html new file mode 100644 index 0000000000..ac0b2c1670 --- /dev/null +++ b/layout/reftests/css-blending/blend-image.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<style> +#a { + width: 200px; + height: 200px; + background-color: rgb(0,255,0); +} +#b { + width: 100px; + height: 100px; + mix-blend-mode:difference; +} +</style> +<div id="a"> +<img src="as-image/green100x100.png" id="b"/> +</div> +</html> diff --git a/layout/reftests/css-blending/blend-isolation-ref.html b/layout/reftests/css-blending/blend-isolation-ref.html new file mode 100644 index 0000000000..e4d76e534d --- /dev/null +++ b/layout/reftests/css-blending/blend-isolation-ref.html @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<style> +#a { + background-color: rgb(0,255,0); + width: 200px; + height: 210px; +} +</style> +<div id="a"> +</div> +</html> diff --git a/layout/reftests/css-blending/blend-isolation.html b/layout/reftests/css-blending/blend-isolation.html new file mode 100644 index 0000000000..802d7fd97d --- /dev/null +++ b/layout/reftests/css-blending/blend-isolation.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<style> +.a { + background-color: rgb(0,255,0); +} +#b { + width: 200px; + height: 210px; +} +.c { + width: 100px; + height: 100px; + mix-blend-mode: difference; +} +#d { + isolation: isolate; +} +</style> +<div id="b" class="a"> + <div id="d"> + <div class="a c"></div> + </div> +</div> +</html> diff --git a/layout/reftests/css-blending/blend-modes.css b/layout/reftests/css-blending/blend-modes.css new file mode 100644 index 0000000000..9a827c7bd0 --- /dev/null +++ b/layout/reftests/css-blending/blend-modes.css @@ -0,0 +1,26 @@ +body { + margin: 0; +} + +.reftest { + width: 160px; + height: 160px; + background-size: + 160px 40px, 160px 40px, 160px 40px, 160px 40px, + 40px 160px, 40px 160px, 40px 160px, 40px 160px; + + background-position: + 0px 0px, 0px 40px, 0px 80px, 0px 120px, + 0px 0px, 40px 0px, 80px 0, 120px 0; + + + background-repeat: no-repeat; + background-image: url(as-image/red100x100.png), + url(as-image/green100x100.png), + url(as-image/blue100x100.png), + url(as-image/brown100x100.png), + url(as-image/red100x100.png), + url(as-image/green100x100.png), + url(as-image/blue100x100.png), + url(as-image/brown100x100.png); +}
\ No newline at end of file diff --git a/layout/reftests/css-blending/bug1281593-ref.html b/layout/reftests/css-blending/bug1281593-ref.html new file mode 100644 index 0000000000..2f3933c03f --- /dev/null +++ b/layout/reftests/css-blending/bug1281593-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> + +<html> + <head> + <title>Transform and Blend Mode</title> + <style> + body { + background: cornflowerblue; + } + .box-blend-mode { + width: 64px; + height: 64px; + margin-bottom: 1em; + background-color: hsla(0,0%,0%,.25); + mix-blend-mode: multiply; + } + .box-blend-mode-inner { + width: 48px; + height: 48px; + background-image: url("../backgrounds/transparent-32x32.png"); + background-position: center center; + background-repeat: no-repeat; + mix-blend-mode: multiply; + } + + .box-blend-mode-inner.transformed { + transform: rotate(45deg); + } + + </style> + </head> + <body> + <div class="box-blend-mode"> + <div class="box-blend-mode-inner"></div> + </div> + <div class="box-blend-mode"> + <div class="box-blend-mode-inner"></div> + </div> + </body> +</html> diff --git a/layout/reftests/css-blending/bug1281593.html b/layout/reftests/css-blending/bug1281593.html new file mode 100644 index 0000000000..ecd589675f --- /dev/null +++ b/layout/reftests/css-blending/bug1281593.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> + +<html> + <head> + <title>Transform and Blend Mode</title> + <style> + body { + background: cornflowerblue; + } + .box-blend-mode { + width: 64px; + height: 64px; + margin-bottom: 1em; + background-color: hsla(0,0%,0%,.25); + mix-blend-mode: multiply; + } + .box-blend-mode-inner { + width: 48px; + height: 48px; + background-image: url("../backgrounds/transparent-32x32.png"); + background-position: center center; + background-repeat: no-repeat; + mix-blend-mode: multiply; + } + + .box-blend-mode-inner.transformed { + transform: rotate(45deg); + } + + </style> + </head> + <body> + <div class="box-blend-mode"> + <div class="box-blend-mode-inner"></div> + </div> + <div class="box-blend-mode"> + <div class="box-blend-mode-inner transformed"></div> + </div> + </body> +</html> diff --git a/layout/reftests/css-blending/clipped-mixblendmode-containing-unclipped-stuff-ref.html b/layout/reftests/css-blending/clipped-mixblendmode-containing-unclipped-stuff-ref.html new file mode 100644 index 0000000000..71b215e1bc --- /dev/null +++ b/layout/reftests/css-blending/clipped-mixblendmode-containing-unclipped-stuff-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Blend mode items shouldn't clip unclipped children to their own clip</title> + +<style> + +body { + margin: 0; + background: white; /* this shouldn't be necessary, bug ??????? */ +} + +.content { + box-sizing: border-box; + border: 10px solid yellow; + width: 100px; + height: 100px; +} + +.clip { + box-sizing: border-box; + width: 300px; + height: 200px; + border: 10px solid black; + background-color: white; + overflow: hidden; +} + +.absolutelyPositioned { + position: absolute; + top: 20px; + left: 250px; +} + +.inner { + margin-left: auto; + border-color: magenta; +} + +.blendedOverlay { + position: absolute; + top: 20px; + left: 290px; + width: 10px; + border-left: 0; + border-right: 0; + border-color: blue; +} + +</style> + +<div class="clip"> + <div class="absolutelyPositioned content"></div> + <div class="inner content"></div> +</div> + +<div class="blendedOverlay content"></div> diff --git a/layout/reftests/css-blending/clipped-mixblendmode-containing-unclipped-stuff.html b/layout/reftests/css-blending/clipped-mixblendmode-containing-unclipped-stuff.html new file mode 100644 index 0000000000..f82b50b617 --- /dev/null +++ b/layout/reftests/css-blending/clipped-mixblendmode-containing-unclipped-stuff.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Blend mode items shouldn't clip unclipped children to their own clip</title> + +<style> + +body { + margin: 0; + background: white; /* this shouldn't be necessary, bug ??????? */ +} + +.content { + box-sizing: border-box; + border: 10px solid blue; + width: 100px; + height: 100px; +} + +.clip { + box-sizing: border-box; + width: 300px; + height: 200px; + border: 10px solid black; + background-color: white; + overflow: hidden; +} + +.mixBlendMode { + mix-blend-mode: exclusion; +} + +.absolutelyPositioned { + position: absolute; + top: 20px; + left: 250px; +} + +.inner { + margin-left: auto; + border-color: lime; +} + +</style> + +<div class="clip"> + <div class="mixBlendMode"> + <div class="absolutelyPositioned content"></div> + <div class="inner content"></div> + </div> +</div> diff --git a/layout/reftests/css-blending/clipped-opacity-containing-unclipped-mixblendmode-ref.html b/layout/reftests/css-blending/clipped-opacity-containing-unclipped-mixblendmode-ref.html new file mode 100644 index 0000000000..307483ac6b --- /dev/null +++ b/layout/reftests/css-blending/clipped-opacity-containing-unclipped-mixblendmode-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Blend mode containers shouldn't clip unclipped children to their own clip</title> + +<style> + +body { + margin: 0; +} + +.content { + box-sizing: border-box; + border: 10px solid black; + width: 100px; + height: 100px; +} + +.clip { + box-sizing: border-box; + width: 300px; + height: 200px; + border: 10px solid black; + overflow: hidden; +} + +.opacity { + opacity: 0.5; +} + +.absolutelyPositioned { + position: absolute; + top: 20px; + left: 250px; +} + +.mixBlendMode { + border-color: blue; + margin-left: auto; +} + +</style> + +<div class="clip"> + <div class="opacity"> + <div class="absolutelyPositioned content"></div> + <div class="mixBlendMode content"></div> + </div> +</div> diff --git a/layout/reftests/css-blending/clipped-opacity-containing-unclipped-mixblendmode.html b/layout/reftests/css-blending/clipped-opacity-containing-unclipped-mixblendmode.html new file mode 100644 index 0000000000..444116feeb --- /dev/null +++ b/layout/reftests/css-blending/clipped-opacity-containing-unclipped-mixblendmode.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>Blend mode containers shouldn't clip unclipped children to their own clip</title> + +<style> + +body { + margin: 0; +} + +.content { + box-sizing: border-box; + border: 10px solid black; + width: 100px; + height: 100px; +} + +.clip { + box-sizing: border-box; + width: 300px; + height: 200px; + border: 10px solid black; + overflow: hidden; +} + +.opacity { + opacity: 0.5; +} + +.absolutelyPositioned { + position: absolute; + top: 20px; + left: 250px; +} + +.mixBlendMode { + mix-blend-mode: multiply; + border-color: blue; + margin-left: auto; +} + +</style> + +<div class="clip"> + <div class="opacity"> + <div class="absolutelyPositioned content"></div> + <div class="mixBlendMode content"></div> + </div> +</div> diff --git a/layout/reftests/css-blending/mix-blend-mode-952051-ref.html b/layout/reftests/css-blending/mix-blend-mode-952051-ref.html new file mode 100644 index 0000000000..3a3e4328f5 --- /dev/null +++ b/layout/reftests/css-blending/mix-blend-mode-952051-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE HTML> +<head> + <style> + .parent { + width: 200px; + height: 200px; + overflow: hidden; + border-radius: 0px 0px 20px 0px; + + position: absolute; + z-index: 0; + background-color: #00ff00; + } + + .child { + width: 300px; + height: 300px; + margin-left: 100px; + background-color: #ffff00; + } + + body { + margin: 0; + } + + </style> +</head> +<body> + <div class="parent"> + <div class="child"></div> + </div> +</body> diff --git a/layout/reftests/css-blending/mix-blend-mode-952051.html b/layout/reftests/css-blending/mix-blend-mode-952051.html new file mode 100644 index 0000000000..4895a6f721 --- /dev/null +++ b/layout/reftests/css-blending/mix-blend-mode-952051.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<head> + <style> + .parent { + width: 200px; + height: 200px; + overflow: hidden; + border-radius: 0px 0px 20px 0px; + position: absolute; + z-index: 0; + background-color: #00ff00; + } + + .child { + width: 300px; + height: 300px; + margin-left: 100px; + background-color: #ff0000; + mix-blend-mode: difference; + } + + body { + margin: 0; + } + + </style> + <!-- Rounded rect clipping seems to not yield the same results when clipping + the parent and child elements individually. The reference rendering will show + some of the parent green color around the child's clipped corner. + The reftests, on the other hand, shows some gray pixels around the same area. + This may somehow be related to antialiasing. --> +</head> +<body> + <div class="parent"> + <div class="child"></div> + </div> +</body> diff --git a/layout/reftests/css-blending/mix-blend-mode-and-filter-ref.html b/layout/reftests/css-blending/mix-blend-mode-and-filter-ref.html new file mode 100644 index 0000000000..ef56627380 --- /dev/null +++ b/layout/reftests/css-blending/mix-blend-mode-and-filter-ref.html @@ -0,0 +1,41 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE HTML> +<html> +<head> + <style> + .parent { + position: relative; + width: 100px; + height: 100px; + } + + .child { + filter: blur(3px); + background: #0f0; + width: 100px; + height: 100px; + } + + .black-rect { + position: absolute; + top: 50px; + width: 100px; + height: 50px; + background: #000; + } + </style> +</head> +<body> + <!-- + You should see a blurred green square, with its bottom half mostly + covered by a black rectangle. + --> + <div class="parent"> + <div class="child"></div> + <div class="black-rect"></div> + </div> +</body> +</html> diff --git a/layout/reftests/css-blending/mix-blend-mode-and-filter-ref.svg b/layout/reftests/css-blending/mix-blend-mode-and-filter-ref.svg new file mode 100644 index 0000000000..f9aa828666 --- /dev/null +++ b/layout/reftests/css-blending/mix-blend-mode-and-filter-ref.svg @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <filter id="blur"> + <feGaussianBlur stdDeviation="3"/> + </filter> + </defs> + <rect x="0" y="0" width="100" height="50" fill="#fff"/> + <rect x="0" y="0" width="100" height="100" fill="#0f0" filter="url(#blur)"/> + <rect x="0" y="50" width="100" height="50" fill="#000"/> +</svg> diff --git a/layout/reftests/css-blending/mix-blend-mode-and-filter.html b/layout/reftests/css-blending/mix-blend-mode-and-filter.html new file mode 100644 index 0000000000..80f2dd46e9 --- /dev/null +++ b/layout/reftests/css-blending/mix-blend-mode-and-filter.html @@ -0,0 +1,37 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE HTML> +<html> +<head> + <style> + .parent { + /* + With the darken blend mode, green will overwrite white parts of this + background, while black parts of this background will show through. + */ + background: linear-gradient(#fff 0%, #fff 50%, #000 50%, #000 100%); + width: 100px; + height: 100px; + } + + .child { + filter: blur(3px); + mix-blend-mode: darken; + background: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <!-- + You should see a blurred green square, with its bottom half mostly + covered by a black rectangle. + --> + <div class="parent"> + <div class="child"></div> + </div> +</body> +</html> diff --git a/layout/reftests/css-blending/mix-blend-mode-and-filter.svg b/layout/reftests/css-blending/mix-blend-mode-and-filter.svg new file mode 100644 index 0000000000..49c1f5fea7 --- /dev/null +++ b/layout/reftests/css-blending/mix-blend-mode-and-filter.svg @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <filter id="blur"> + <feGaussianBlur stdDeviation="3"/> + </filter> + </defs> + <!-- Background consists of a white rect and a black rect. --> + <rect x="0" y="0" width="100" height="50" fill="#fff"/> + <rect x="0" y="50" width="100" height="50" fill="#000"/> + <!-- + Foreground consists of a blurred green square, blended with the background + using the darken blend mode. Green should overwrite the white rect, while + the black rect should show through. + --> + <rect x="0" y="0" width="100" height="100" fill="#0f0" filter="url(#blur)" + style="mix-blend-mode: darken;"/> +</svg> diff --git a/layout/reftests/css-blending/mix-blend-mode-child-of-blended-has-opacity-ref.html b/layout/reftests/css-blending/mix-blend-mode-child-of-blended-has-opacity-ref.html new file mode 100644 index 0000000000..89f580bbb7 --- /dev/null +++ b/layout/reftests/css-blending/mix-blend-mode-child-of-blended-has-opacity-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com">
+ <style>
+ .parent {
+ opacity: 0.9;
+ background: yellow;/*rgb(255,255,0);*/
+ margin: 30px;
+ width: 120px;
+ height: 120px;
+ display: inline-block;
+ }
+ .blended {
+ width: 100px;
+ height: 100px;
+ background: aqua;/*rgb(0,255,255);*/
+ display: inline-block;
+ margin-top: 10px;
+ margin-left: 10px;
+ }
+ .childBlended {
+ background: lime;/*rgb(0,255,0);*/
+ width: 80px;
+ height: 80px;
+ margin-top: 10px;
+ margin-left: 10px;
+ opacity: 0.99;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="parent">
+ <div class="blended">
+ <div class="childBlended"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/css-blending/mix-blend-mode-child-of-blended-has-opacity.html b/layout/reftests/css-blending/mix-blend-mode-child-of-blended-has-opacity.html new file mode 100644 index 0000000000..8ed9be7f25 --- /dev/null +++ b/layout/reftests/css-blending/mix-blend-mode-child-of-blended-has-opacity.html @@ -0,0 +1,45 @@ +<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Test: blending between an element and the child with opacity</title>
+ <link rel="author" title="Mirela Budăeș" href="mailto:mbudaes@adobe.com">
+ <link rel="help" href="http://dev.w3.org/fxtf/compositing-1/#mix-blend-mode">
+ <meta name="flags" content="">
+ <meta name="assert" content="Test checks that an element with mix-blend-mode and his child with opacity blends as a group(no blending between the element with mix-blend-mode and the child element)">
+ <link rel="match" href="reference/mix-blend-mode-child-of-blended-has-opacity-ref.html">
+ <style>
+ .parent {
+ opacity: 0.9;
+ background: yellow;/*rgb(255,255,0);*/
+ margin: 30px;
+ width: 120px;
+ height: 120px;
+ display: inline-block;
+ }
+ .blended {
+ width: 100px;
+ height: 100px;
+ background: fuchsia; /* rgb(255, 0, 255);*/
+ display: inline-block;
+ mix-blend-mode: difference;
+ margin-top: 10px;
+ margin-left: 10px;
+ }
+ .childBlended {
+ background: red;/*rgb(255,0,0);*/
+ width: 80px;
+ height: 80px;
+ margin-top: 10px;
+ margin-left: 10px;
+ opacity: 0.99;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="parent">
+ <div class="blended">
+ <div class="childBlended"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/css-blending/mix-blend-mode-culling-1207041-ref.html b/layout/reftests/css-blending/mix-blend-mode-culling-1207041-ref.html new file mode 100644 index 0000000000..f098be2b94 --- /dev/null +++ b/layout/reftests/css-blending/mix-blend-mode-culling-1207041-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<head> + <style> + .parent { + width: 200px; + height: 200px; + isolation: isolate; + background: orange; + } + .child { + width: 200px; + height: 200px; + background: #ffd200; + } + </style> +</head> +<body> + <div class="parent"> + <div class="child"> + </div> + </div> +</body> diff --git a/layout/reftests/css-blending/mix-blend-mode-culling-1207041.html b/layout/reftests/css-blending/mix-blend-mode-culling-1207041.html new file mode 100644 index 0000000000..bcb4afc06f --- /dev/null +++ b/layout/reftests/css-blending/mix-blend-mode-culling-1207041.html @@ -0,0 +1,23 @@ +<!DOCTYPE HTML> +<head> + <style> + .parent { + width: 200px; + height: 200px; + isolation: isolate; + background: orange; + } + .child { + width: 200px; + height: 200px; + mix-blend-mode: screen; + background: green; + } + </style> +</head> +<body> + <div class="parent"> + <div class="child"> + </div> + </div> +</body> diff --git a/layout/reftests/css-blending/mix-blend-mode-dest-alpha-1135271-ref.html b/layout/reftests/css-blending/mix-blend-mode-dest-alpha-1135271-ref.html new file mode 100644 index 0000000000..e8ff8a6109 --- /dev/null +++ b/layout/reftests/css-blending/mix-blend-mode-dest-alpha-1135271-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<head> + <style> + .parent { + width: 200px; + height: 200px; + isolation: isolate; + } + .child { + width: 200px; + height: 200px; + background: green; + } + </style> +</head> +<body> + <div class="parent"> + <div class="child"> + </div> + </div> +</body> diff --git a/layout/reftests/css-blending/mix-blend-mode-dest-alpha-1135271.html b/layout/reftests/css-blending/mix-blend-mode-dest-alpha-1135271.html new file mode 100644 index 0000000000..f36dfe53fb --- /dev/null +++ b/layout/reftests/css-blending/mix-blend-mode-dest-alpha-1135271.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<head> + <style> + .parent { + width: 200px; + height: 200px; + isolation: isolate; + } + .child { + width: 200px; + height: 200px; + mix-blend-mode: multiply; + background: green; + } + </style> +</head> +<body> + <div class="parent"> + <div class="child"> + </div> + </div> +</body> diff --git a/layout/reftests/css-blending/mix-blend-mode-nested-976533-ref.html b/layout/reftests/css-blending/mix-blend-mode-nested-976533-ref.html new file mode 100644 index 0000000000..8680fd6633 --- /dev/null +++ b/layout/reftests/css-blending/mix-blend-mode-nested-976533-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE HTML> +<head> + <style> + .parent { + width: 200px; + height: 200px; + position: absolute; + z-index: 1; + background-color: #00ff00; + } + + .intermediate { + width: 100px; + height: 100px; + margin-left:50px; + background-color: #ffffff; + } + + .child { + width: 100px; + height: 100px; + margin-left:50px; + background-color: #00ffff; + } + + .grandchild { + width: 50px; + height: 100px; + margin-left: 50px; + background-color: #0000ff; + } + + body { + margin:0px; + } + + </style> +</head> +<body> + <div class="parent"> + <div class="intermediate"> + <div class="child"> + <div class="grandchild"></div> + </div> + </div> + </div> +</body> diff --git a/layout/reftests/css-blending/mix-blend-mode-nested-976533.html b/layout/reftests/css-blending/mix-blend-mode-nested-976533.html new file mode 100644 index 0000000000..8f97cd84cb --- /dev/null +++ b/layout/reftests/css-blending/mix-blend-mode-nested-976533.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML> +<head> + <style> + .parent { + width: 200px; + height: 200px; + position: absolute; + z-index: 1; + background-color: #00ff00; + } + + .intermediate { + width: 100px; + height: 100px; + margin-left:50px; + background-color: #ff00ff; + mix-blend-mode: difference; + } + + .child { + width: 100px; + height: 100px; + margin-left:50px; + background-color: #00ffff; + mix-blend-mode: multiply; + } + + body { + margin:0px; + } + </style> + <!-- Blending should happen as follows: + First, the child element should blend with the intermediate element, with + the multiply operator. Is should not blend with the parent directly. + Then, group formed by the blended child and the intermediate element should + blend with the parent as a single layer. + --> +</head> +<body> + <div class="parent"> + <div class="intermediate"> + <div class="child"></div> + </div> + </div> +</body> diff --git a/layout/reftests/css-blending/mix-blend-mode-soft-light-ref.html b/layout/reftests/css-blending/mix-blend-mode-soft-light-ref.html new file mode 100644 index 0000000000..c21fadac22 --- /dev/null +++ b/layout/reftests/css-blending/mix-blend-mode-soft-light-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<head> + <style> + .parent { + width: 200px; + height: 200px; + isolation: isolate; + } + .child { + width: 200px; + height: 200px; + background: #7775b6; + } + </style> +</head> +<body> + <div class="parent"> + <div class="child"> + </div> + </div> +</body> diff --git a/layout/reftests/css-blending/mix-blend-mode-soft-light.html b/layout/reftests/css-blending/mix-blend-mode-soft-light.html new file mode 100644 index 0000000000..bcfd809a4a --- /dev/null +++ b/layout/reftests/css-blending/mix-blend-mode-soft-light.html @@ -0,0 +1,25 @@ +<!DOCTYPE HTML> +<head> + <style> + .parent { + width: 200px; + height: 200px; + isolation: isolate; + background: #5856a2; + } + .child { + width: 200px; + height: 200px; + mix-blend-mode: soft-light; + opacity: 0.5; + background: white; + will-change: opacity; + } + </style> +</head> +<body> + <div class="parent"> + <div class="child"> + </div> + </div> +</body> diff --git a/layout/reftests/css-blending/reftest.list b/layout/reftests/css-blending/reftest.list new file mode 100644 index 0000000000..d763945bfa --- /dev/null +++ b/layout/reftests/css-blending/reftest.list @@ -0,0 +1,100 @@ +== blend-canvas.html blend-canvas-ref.html +== blend-constant-background-color.html blend-constant-background-color-ref.html +== blend-gradient-background-color.html blend-gradient-background-color-ref.html +== blend-image.html blend-image-ref.html +fuzzy-if(geckoview&&webrender&&device,3-3,5-5) == blend-difference-stacking.html blend-difference-stacking-ref.html + +fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-1,0-10000) fuzzy-if(skiaContent,0-1,0-30000) == background-blending-alpha.html background-blending-alpha-ref.html +== background-blending-gradient-color.html background-blending-gradient-color-ref.html +fuzzy-if(azureSkiaGL,0-3,0-7597) fuzzy-if(cocoaWidget,0-3,0-7597) fuzzy-if(d2d,0-1,0-3800) fuzzy-if(d3d11,0-1,0-4200) fuzzy-if(skiaContent,0-2,0-9450) fuzzy-if(webrender&&!geckoview,1-1,2400-6200) == background-blending-gradient-gradient.html background-blending-gradient-gradient-ref.html +fuzzy-if(azureSkiaGL,0-2,0-7174) == background-blending-gradient-image.html background-blending-gradient-color-ref.html +fuzzy-if(azureSkia||d2d||gtkWidget,0-1,0-10000) == background-blending-image-color-jpg.html background-blending-image-color-ref.html +== background-blending-image-color-png.html background-blending-image-color-ref.html +== background-blending-image-color-svg.html background-blending-image-color-ref.html +fuzzy-if(azureSkiaGL,0-2,0-7174) == background-blending-image-gradient.html background-blending-gradient-color-ref.html +== background-blending-image-image.html background-blending-image-color-ref.html +== background-blending-isolation.html background-blending-isolation-ref.html +== background-blending-list-repeat.html background-blending-list-repeat-ref.html +== background-blending-multiple-images.html background-blending-multiple-images-ref.html + +== background-blending-color-burn.html background-blending-color-burn-ref.svg +== background-blending-color-dodge.html background-blending-color-dodge-ref.svg +# need to investigate why these tests are fuzzy - first suspect is a possible color space conversion on some platforms; same for mix-blend-mode tests +fuzzy-if(azureSkia||gtkWidget,0-2,0-9600) fuzzy-if(d2d,0-1,0-8000) fuzzy-if(swgl,1-1,9600-9600) == background-blending-color.html background-blending-color-ref.svg +== background-blending-darken.html background-blending-darken-ref.svg +== background-blending-difference.html background-blending-difference-ref.svg +fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu)||skiaContent,0-1,0-1600) == background-blending-exclusion.html background-blending-exclusion-ref.svg +fuzzy-if(cocoaWidget||d2d,0-1,0-1600) == background-blending-hard-light.html background-blending-hard-light-ref.svg +fuzzy-if(d2d,0-1,0-9600) fuzzy-if(azureSkia||gtkWidget,0-1,0-11200) fuzzy-if(webrender&&!geckoview,1-1,9600-11240) == background-blending-hue.html background-blending-hue-ref.svg +== background-blending-lighten.html background-blending-lighten-ref.svg +fuzzy-if(d2d,0-1,0-8000) fuzzy-if(azureSkia||gtkWidget,0-2,0-9600) fuzzy-if(swgl,1-1,9600-9600) == background-blending-luminosity.html background-blending-luminosity-ref.svg +fuzzy-if(skiaContent,0-1,0-1600) == background-blending-multiply.html background-blending-multiply-ref.svg +== background-blending-normal.html background-blending-normal-ref.svg +fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu)||azureSkia||gtkWidget,0-1,0-1600) == background-blending-overlay.html background-blending-overlay-ref.svg +fuzzy-if(d2d,0-1,0-3200) fuzzy-if(azureSkia||gtkWidget,0-2,0-12800) == background-blending-saturation.html background-blending-saturation-ref.svg +fuzzy-if(d2d||azureSkia||gtkWidget,0-1,0-1600) == background-blending-screen.html background-blending-screen-ref.svg +fuzzy-if(d2d||azureSkia||gtkWidget,0-10,0-4800) == background-blending-soft-light.html background-blending-soft-light-ref.svg + +fuzzy-if(azureSkia||d2d||gtkWidget,0-1,0-40000) == background-blending-image-color-959674.html background-blending-image-color-959674-ref.html + +#fuzzy due to inconsistencies in rounded rect cliping between parent and child; may be related to antialiasing. Between platforms, the max difference is the same, and the number of different pixels is either 36 or 37. (Win, Mac and Lin) +fuzzy(0-65,0-53) fuzzy-if(geckoview&&webrender&&device,63-64,163-328) == mix-blend-mode-952051.html mix-blend-mode-952051-ref.html + +fuzzy-if(d3d11,0-49,0-200) == mix-blend-mode-and-filter.html mix-blend-mode-and-filter-ref.html +fuzzy-if(d3d11,0-1,0-6) == mix-blend-mode-and-filter.svg mix-blend-mode-and-filter-ref.svg + +fuzzy(0-2,0-14400) fuzzy-if(geckoview&&webrender&&device,3-3,700-700) == mix-blend-mode-child-of-blended-has-opacity.html mix-blend-mode-child-of-blended-has-opacity-ref.html + +== mix-blend-mode-nested-976533.html mix-blend-mode-nested-976533-ref.html +== mix-blend-mode-culling-1207041.html mix-blend-mode-culling-1207041-ref.html +== mix-blend-mode-dest-alpha-1135271.html mix-blend-mode-dest-alpha-1135271-ref.html +fuzzy-if(Android,0-3,0-850) == clipped-mixblendmode-containing-unclipped-stuff.html clipped-mixblendmode-containing-unclipped-stuff-ref.html +fuzzy(0-1,0-6800) == clipped-opacity-containing-unclipped-mixblendmode.html clipped-opacity-containing-unclipped-mixblendmode-ref.html + +# Test plan 5.3.1 Blending between the background layers and the background color for an element with background-blend-mode +# Test 9 +== background-blending-image-color-svg-as-data-uri.html background-blending-image-color-ref.html +# Test 10 +test-pref(image.animation_mode,"none") == background-blending-image-color-gif.html background-blending-image-color-gif-ref.html +== background-blending-image-color-transform3d.html background-blending-image-color-ref.html + +# Test plan 5.3.2 Background layers do not blend with content outside the background (or behind the element) - tests 2 and 3 +== background-blending-isolation-parent-child-color.html background-blending-isolation-parent-child-ref.html +== background-blending-isolation-parent-child-image.html background-blending-isolation-parent-child-ref.html + +# Test plan 5.3.6 background-blend-mode for an element with background-position +== background-blending-background-position-percentage.html background-blending-background-position-percentage-ref.html + +# Test plan 5.3.7 background-blend-mode for an element with background-size +== background-blending-background-size-contain.html background-blending-background-size-ref.html +== background-blending-background-size-cover.html background-blending-background-size-ref.html +== background-blending-background-size-percentage.html background-blending-background-size-ref.html +== background-blending-background-size-pixels.html background-blending-background-size-ref.html + +# Test plan 5.3.8 background-blend-mode for an element with background-repeat +# Tests 2 and 3 are not added because space and round are not currently supported +== background-blending-background-repeat-no-repeat.html background-blending-background-repeat-no-repeat-ref.html + +# Test plan 5.3.9 background-blend-mode for an element with background-clip +== background-blending-background-clip-content-box.html background-blending-background-clip-content-box-ref.html +== background-blending-background-clip-padding-box.html background-blending-background-clip-padding-box-ref.html + +# Test plan 5.3.10 background-blend-mode for an element with background-origin +== background-blending-background-origin-border-box.html background-blending-background-origin-ref.html +== background-blending-background-origin-content-box.html background-blending-background-origin-ref.html + +# Test plan 5.3.11 background-blend-mode for an element with background-attachement +== background-blending-background-attachement-fixed.html background-blending-background-attachement-fixed-ref.html +== background-blending-background-attachement-fixed-scroll.html background-blending-background-attachement-fixed-scroll-ref.html + +fuzzy-if(webrender,0-1,0-49719) == background-blend-mode-body-image.html background-blend-mode-body-image-ref.html +fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-1,0-16408) fuzzy-if(Android,0-4,0-768) fuzzy-if(gtkWidget,0-1,0-132) fuzzy-if(skiaContent,0-1,0-800) fuzzy-if(d2d,0-1,0-33208) fuzzy-if(webrender,0-1,0-78472) == background-blend-mode-body-transparent-image.html background-blend-mode-body-transparent-image-ref.html + +== background-blending-moz-element.html background-blending-moz-element-ref.html + +fuzzy(0-1,0-40000) == mix-blend-mode-soft-light.html mix-blend-mode-soft-light-ref.html + +# Test plan 4.4.2 element with isolation:isolate creates an isolated group for blended children +== blend-isolation.html blend-isolation-ref.html + +fuzzy-if(skiaContent,0-1,0-8192) == bug1281593.html bug1281593-ref.html |
