Chromium Code Reviews Chromium Code Reviews
Issue 178013003:
Drop background color optimization for composited layers (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| 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..88a1a9dac385726fb5812e87cc56c85370f193ca |
| --- /dev/null |
| +++ b/LayoutTests/compositing/background-color/background-color-drawn-over-child.html |
| @@ -0,0 +1,49 @@ |
| +<!DOCTYPE html> |
| +<html> |
| +<head> |
| + <title> |
| + background color of #backgournd_color_container div MUST is drawn below all children. |
|
enne (OOO)
2014/02/27 00:44:56
typo
|
| + However, the background color is drawn over the child #issue div. |
| + 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; /* to draw something. It can be replaced to img tag or something. */ |
|
enne (OOO)
2014/02/27 00:44:56
No need for this comment or the other one.
|
| + position: absolute; |
| + } |
| + #compositing { |
| + left: 100px; |
| + top: 100px; |
| + width: 100px; |
| + height: 100px; |
| + position: absolute; |
| + background-color: blue; /* to draw something. It can be replaced to img tag or something. */ |
| + -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> |
