Chromium Code Reviews Chromium Code Reviews
Issue 2821733002:
Fix clipping of squashed sibling layers with border radius masks (Closed)
| Index: third_party/WebKit/LayoutTests/compositing/composited-flex-siblings-with-border-radius.html |
| diff --git a/third_party/WebKit/LayoutTests/compositing/composited-flex-siblings-with-border-radius.html b/third_party/WebKit/LayoutTests/compositing/composited-flex-siblings-with-border-radius.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..29c5ba644b41af7f4140438162b04e741c1c892e |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/compositing/composited-flex-siblings-with-border-radius.html |
| @@ -0,0 +1,39 @@ |
| +<!DOCTYPE html> |
| +<html> |
| +<head> |
| +<style> |
| + .outer { |
| + overflow:hidden; |
| + border-radius: 10px; |
| + line-height: 40px; |
| + display:flex; |
| + } |
| + button { |
| + border-radius: 5px; |
| + overflow:hidden; |
| + will-change: transform; |
| + background-color: lightblue; |
| + width: 100px; |
| + height: 40px; |
| + border: 0; |
| + } |
| + .seperator { |
| + background-color: green; |
| + width: 100px; |
| + height: 40px; |
| + border: 0; |
| + z-index: 1; |
| + } |
| + |
| +</style> |
| +</head> |
| +<body> |
| + <div class="outer"> |
| + <div class="seperator">A</div> |
|
chrishtr
2017/04/14 21:43:40
nit: separator
|
| + <button type="button"></button> |
| + <div class="seperator">B</div> |
| + <button type="button"></button> |
| + <div class="seperator">C</div> |
| + </div> |
| +</body> |
| +</html> |
