Bug 952051 - Add reftests. r=roc
authorHoria Iosif Olaru <olaru@adobe.com>
Thu, 27 Feb 2014 11:56:48 -0500
changeset 171335 67402b120e86c58ca0206e3e2cefe4a5f25cc6d8
parent 171334 9bdb998af6c17d749c80056e879915c2eeaaabf1
child 171336 b4826a1c1a276bd6b1c4a9397a621a11fecd3a72
push id270
push userpvanderbeken@mozilla.com
push dateThu, 06 Mar 2014 09:24:21 +0000
reviewersroc
bugs952051, 947121
milestone30.0a1
Bug 952051 - Add reftests. r=roc * Add a reftest for checking that blending takes place between a blended child element that is clipped by a rounded rect and its parent element (which has overflow hidden, and rounded corners). * Add a reftest to check the behavior described in bug 947121 no longer reproduces.
layout/reftests/css-blending/mix-blend-mode-952051-ref.html
layout/reftests/css-blending/mix-blend-mode-952051.html
layout/reftests/css-blending/mix-blend-mode-child-of-blended-has-opacity-ref.html
layout/reftests/css-blending/mix-blend-mode-child-of-blended-has-opacity.html
layout/reftests/css-blending/reftest.list
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
new file mode 100644
--- /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>
--- a/layout/reftests/css-blending/reftest.list
+++ b/layout/reftests/css-blending/reftest.list
@@ -32,16 +32,21 @@ pref(layout.css.background-blend-mode.en
 pref(layout.css.background-blend-mode.enabled,true) == background-blending-normal.html background-blending-normal-ref.svg
 fuzzy-if(azureSkia||gtk2Widget,1,1600) pref(layout.css.background-blend-mode.enabled,true) == background-blending-overlay.html background-blending-overlay-ref.svg
 fuzzy-if(d2d,1,1600) fuzzy-if(azureSkia||gtk2Widget,2,12800) fuzzy-if(OSX==10.6,1,1600) pref(layout.css.background-blend-mode.enabled,true) == background-blending-saturation.html background-blending-saturation-ref.svg
 fuzzy-if(d2d||azureSkia||gtk2Widget,1,1600) pref(layout.css.background-blend-mode.enabled,true) == background-blending-screen.html background-blending-screen-ref.svg
 fuzzy-if(azureQuartz,1,1600) fuzzy-if(d2d||azureSkia||gtk2Widget,10,4800) pref(layout.css.background-blend-mode.enabled,true) == background-blending-soft-light.html background-blending-soft-light-ref.svg
 
 fuzzy-if(azureQuartz,2,40000) fuzzy-if(azureSkia||d2d||gtk2Widget,1,40000) pref(layout.css.background-blend-mode.enabled,true) == 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(64,37) pref(layout.css.mix-blend-mode.enabled,true) == mix-blend-mode-952051.html mix-blend-mode-952051-ref.html
+
+pref(layout.css.mix-blend-mode.enabled,true) == mix-blend-mode-child-of-blended-has-opacity.html mix-blend-mode-child-of-blended-has-opacity-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
 pref(layout.css.background-blend-mode.enabled,true) == background-blending-image-color-svg-as-data-uri.html background-blending-image-color-ref.html
 # Test 10
 pref(layout.css.background-blend-mode.enabled,true) == background-blending-image-color-gif.html background-blending-image-color-gif-ref.html
 pref(layout.css.background-blend-mode.enabled,true) == 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