| <!DOCTYPE html> |
| <!-- |
| This test passes if it does not crash. |
| |
| This test creates a scenario where we have a non-ancestor clip parent. |inner-hidden| |
| forces a stacking context because of its opacity:0.5 style. |inner-hidden| itself is |
| clipped by a sibling in the composited layer tree (|outer-hidden|) and therefore creates |
| an "ancestor clipping layer". The result is that |content| appears below this ancestor |
| clipping layer in the composited layer tree, but its clip parent, |outer-hidden|, is |
| a sibling of this ancestor clipping layer. The real solution to this issue is to |
| composite in terms of what we paint, but in the interim, we must ensure that we do |
| not crash in this case. |
| |
| This might be clearer if we look at a fragment of the composited layer tree we generate |
| in this case. |
| |
| 23 LayoutView #document |
| 24 LayoutBlockFlow (relative positioned) reasons(Is a scrollable overflow element) |
| 28 Scrolling Layer reasons(Secondary layer, used to position the scolling contents while scrolling) |
| 29 Scrolling Contents Layer reasons(Secondary layer, to house contents that can be scrolled) |
| 30 Scrolling Block Selection Layer reasons(Secondary layer, to house block selection gaps for composited scrolling with no scrolling contents) |
| 34 Overflow Controls Host Layer reasons(Secondary layer, the overflow controls host layer) |
| 31 Horizontal Scrollbar Layer reasons(Secondary layer, the horizontal scrollbar layer) |
| 32 Vertical Scrollbar Layer reasons(Secondary layer, the vertical scrollbar layer) |
| 33 Scroll Corner Layer reasons(Secondary layer, the scroll corner layer) |
| 25 ==>LayoutBlockFlow (positioned) reasons(Scroll parent is not an ancestor, |
| Might overlap other composited content, |
| Cannot be squashed because this layer has a different clipping container than the squashing layer) |
| 36 Ancestor Clipping Layer reasons(Secondary layer, applies a clip due to a sibling in the compositing tree) |
| 26 LayoutBlockFlow DIV id='inner-hidden' reasons(Scroll parent is not an ancestor, |
| Might overlap other composited content, |
| Parent with composited negative z-index content, |
| Has opacity that needs to be applied by compositor because of composited descendants, |
| Has a clip that needs to be known by compositor because of composited descendants) |
| 37 Child Containment Layer reasons(Secondary layer, to clip descendants of the owning layer) |
| 27 LayoutBlockFlow (positioned) DIV id='content' reasons(Has clipping ancestor) |
| clip-parent:25 |
| 35 LayoutBlockFlow DIV id='inner-hidden' (foreground) Layer reasons( |
| Secondary layer, |
| to contain any normal flow and positive z-index contents on top of a negative z-index layer) |
| |
| The problem is that layer 27 is not a descendant of layer 25. |
| --> |
| <div id="scroller" style="overflow:scroll; position:relative; height:200px;"> |
| <div id="outer-hidden" style="position:absolute; overflow:hidden; width:300px; height:300px;"> |
| <div id="inner-hidden" style="opacity:0.5; width:100px; height: 100px; overflow:hidden"> |
| <div id="content" style="z-index:-1; position:absolute">hello</div> |
| </div> |
| </div> |
| </div> |
