Index: LayoutTests/compositing/background-color/background-color-drawn-over-child.html |
diff --git a/LayoutTests/compositing/background-color/background-color-drawn-over-child.html b/LayoutTests/compositing/background-color/background-color-drawn-over-child.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..82e73c64fee7ef8e6f078302ba041a10392c5f42 |
--- /dev/null |
+++ b/LayoutTests/compositing/background-color/background-color-drawn-over-child.html |
@@ -0,0 +1,49 @@ |
+<!DOCTYPE html> |
+<html> |
+<head> |
+ <title> |
+ The background color of #backgournd_color_container div MUST be drawn below all children. |
+ However, the background color is drawn over the child #issue div. |
+ It's a minimal case of https://www.google.com/maps/views/explore?gl=us |
+ See crbug.com/345613 |
+ </title> |
+ <style type="text/css"> |
+ #backgournd_color_container { |
+ background-color: green; |
+ position: absolute; |
+ overflow: hidden; |
+ z-index: 0; |
+ } |
+ #nested_container { |
+ width: 200px; |
+ height: 200px; |
+ position: relative; |
+ overflow: hidden; |
+ z-index: 0; |
+ } |
+ #issue { |
+ width: 100px; |
+ height: 100px; |
+ background-color: red; |
+ position: absolute; |
+ } |
+ #compositing { |
+ left: 100px; |
+ top: 100px; |
+ width: 100px; |
+ height: 100px; |
+ position: absolute; |
+ background-color: blue; |
+ -webkit-transform: translateZ(0); |
+ } |
+ </style> |
+</head> |
+<body> |
+ <div id="backgournd_color_container"> |
+ <div id="nested_container"> |
+ <div id="issue"></div> |
+ <div id="compositing"></div> |
+ </div> |
+ </div> |
+</body> |
+</html> |