third_party/WebKit/LayoutTests/compositing/overflow/handle-non-ancestor-clip-parent.html

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