Index: LayoutTests/css3/compositing/mix-blend-mode-isolation-2-stacking-contexts.html |
diff --git a/LayoutTests/css3/compositing/mix-blend-mode-isolation-2-stacking-contexts.html b/LayoutTests/css3/compositing/mix-blend-mode-isolation-2-stacking-contexts.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..0586f9c9c6536d8650cb6d99c647f97f83dd27e9 |
--- /dev/null |
+++ b/LayoutTests/css3/compositing/mix-blend-mode-isolation-2-stacking-contexts.html |
@@ -0,0 +1,42 @@ |
+<html> |
+<head> |
+<script> |
+ if (window.testRunner) { |
+ testRunner.dumpAsText(); |
+ window.addEventListener('load', function () { |
+ document.getElementById('layers').textContent = window.internals.layerTreeAsText(document); |
+ document.getElementById('test').style.display = 'none'; |
+ }, false); |
+ } |
+</script> |
+<style> |
+.stacking-context { |
+ position: absolute; |
+ z-index: -1; |
+} |
+.accelerated { |
+ -webkit-transform: rotateX(0deg); |
+} |
+.blended { |
+ mix-blend-mode: multiply; |
+} |
+</style> |
+</head> |
+<body> |
+ <div id="test"> |
+ <!--This test makes sure that isolation property is set only to |
+ the first ascendant layer being a stacking context --> |
+ <div class="stacking-context" style="background-color:red"> |
+ <div class="stacking-context" style="background-color: green"> |
+ <img class="accelerated blended" src="resources/reference.png"> |
+ </div> |
+ </div> |
+ <div class="accelerated stacking-context" style="background-color:red"> |
+ <div class="stacking-context" style="background-color: green"> |
+ <img class="accelerated blended" src="resources/reference.png"> |
+ </div> |
+ </div> |
+ </div> |
+ <pre id="layers">Layer tree goes here when testing.</pre> |
+</body> |
+</html> |