Index: LayoutTests/css3/compositing/mix-blend-mode-isolated-group-3.html |
diff --git a/LayoutTests/css3/compositing/mix-blend-mode-isolated-group-3.html b/LayoutTests/css3/compositing/mix-blend-mode-isolated-group-3.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..aced767c5d02ef4a9437f161228cdb3f2521ca36 |
--- /dev/null |
+++ b/LayoutTests/css3/compositing/mix-blend-mode-isolated-group-3.html |
@@ -0,0 +1,112 @@ |
+<!DOCTYPE HTML> |
+<html> |
+<head> |
+<style> |
+ |
+ body { |
+ background: blue; |
+ } |
+ |
+ div { |
+ margin: 20px; |
+ width: 60px; |
+ height: 60px; |
+ } |
+ |
+ .parent { |
+ position: relative; |
+ z-index: -1; |
+ float: left; |
+ background: violet; |
+ } |
+ |
+ .child { |
+ background: url('resources/ducky.png') no-repeat 0 0 /100% 100%, green; |
+ } |
+ |
+</style> |
+<!-- Test to ensure that blending is performed only with the contents of the element's nearest ancestor stacking context. |
+ Test this with a parent element that has zIndex set. Also, tests whether a child element blends if the parent has a blend mode set.--> |
+<body> |
+ <div class="parent"> |
+ <div class="child" style="mix-blend-mode: normal;"> |
+ <div style="background-color: orange; z-index: 1; position: absolute"></div> |
+ </div> |
+ </div> |
+ <div class="parent"> |
+ <div class="child" style="mix-blend-mode: multiply;"> |
+ <div style="background-color: orange; z-index: 1; position: absolute"></div> |
+ </div> |
+ </div> |
+ <div class="parent"> |
+ <div class="child" style="mix-blend-mode: screen;"> |
+ <div style="background-color: orange; z-index: 1; position: absolute"></div> |
+ </div> |
+ </div> |
+ <div class="parent"> |
+ <div class="child" style="mix-blend-mode: overlay;"> |
+ <div style="background-color: orange; z-index: 1; position: absolute"></div> |
+ </div> |
+ </div> |
+ <div class="parent"> |
+ <div class="child" style="mix-blend-mode: darken;"> |
+ <div style="background-color: orange; z-index: 1; position: absolute"></div> |
+ </div> |
+ </div> |
+ <div class="parent"> |
+ <div class="child" style="mix-blend-mode: lighten;"> |
+ <div style="background-color: orange; z-index: 1; position: absolute"></div> |
+ </div> |
+ </div> |
+ <div class="parent"> |
+ <div class="child" style="mix-blend-mode: color-dodge;"> |
+ <div style="background-color: orange; z-index: 1; position: absolute"></div> |
+ </div> |
+ </div> |
+ <div class="parent"> |
+ <div class="child" style="mix-blend-mode: color-burn;"> |
+ <div style="background-color: orange; z-index: 1; position: absolute"></div> |
+ </div> |
+ </div> |
+ <div class="parent"> |
+ <div class="child" style="mix-blend-mode: hard-light;"> |
+ <div style="background-color: orange; z-index: 1; position: absolute"></div> |
+ </div> |
+ </div> |
+ <div class="parent"> |
+ <div class="child" style="mix-blend-mode: soft-light;"> |
+ <div style="background-color: orange; z-index: 1; position: absolute"></div> |
+ </div> |
+ </div> |
+ <div class="parent"> |
+ <div class="child" style="mix-blend-mode: difference;"> |
+ <div style="background-color: orange; z-index: 1; position: absolute"></div> |
+ </div> |
+ </div> |
+ <div class="parent"> |
+ <div class="child" style="mix-blend-mode: exclusion;"> |
+ <div style="background-color: orange; z-index: 1; position: absolute"></div> |
+ </div> |
+ </div> |
+ <div class="parent"> |
+ <div class="child" style="mix-blend-mode: hue;"> |
+ <div style="background-color: orange; z-index: 1; position: absolute"></div> |
+ </div> |
+ </div> |
+ <div class="parent"> |
+ <div class="child" style="mix-blend-mode: saturation;"> |
+ <div style="background-color: orange; z-index: 1; position: absolute"></div> |
+ </div> |
+ </div> |
+ <div class="parent"> |
+ <div class="child" style="mix-blend-mode: color;"> |
+ <div style="background-color: orange; z-index: 1; position: absolute"></div> |
+ </div> |
+ </div> |
+ <div class="parent"> |
+ <div class="child" style="mix-blend-mode: luminosity;"> |
+ <div style="background-color: orange; z-index: 1; position: absolute"></div> |
+ </div> |
+ </div> |
+</body> |
+</html> |