Index: LayoutTests/css3/compositing/mix-blend-mode-with-opacity-change-js.html |
diff --git a/LayoutTests/css3/compositing/mix-blend-mode-with-opacity-change-js.html b/LayoutTests/css3/compositing/mix-blend-mode-with-opacity-change-js.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..90e8c6e745758821450b488eefeb1b7121bd18fc |
--- /dev/null |
+++ b/LayoutTests/css3/compositing/mix-blend-mode-with-opacity-change-js.html |
@@ -0,0 +1,40 @@ |
+<!DOCTYPE HTML> |
+<html> |
+<head> |
+<style> |
+ .container { |
+ width: 100px; |
+ height: 100px; |
+ background-color: green; |
+ } |
+ .parent { |
+ width: 90px; |
+ height: 90px; |
+ isolation: isolate; |
+ border: 5px solid red; |
+ } |
+ #child { |
+ width: 100px; |
+ height: 100px; |
+ background-color: blue; |
+ margin: -5px; |
+ opacity: 0.99; |
+ } |
+</style> |
+<script> |
+ function applyBlendMode() { |
+ document.getElementById("child").style["mix-blend-mode"] = "multiply"; |
+ } |
+</script> |
+</head> |
+<body onload="applyBlendMode()"> |
+ <p>Test that mix-blend-mode multiply set from javascript on an element<br /> |
+ having opacity uses the backdrop limited to its stacking context.</p> |
+ <p>This test passes if you can see a blue square with black border.</p> |
+ <div class="container"> |
+ <div class="parent"> |
+ <div id="child"></div> |
+ </div> |
+ </div> |
+</body> |
+</html> |