Fix nested border radius with composited child.

third_party/WebKit/Source/core/layout/compositing/CompositedLayerMappingTest.cpp

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 #include "core/layout/compositing/CompositedLayerMapping.h"
 
 #include "core/frame/LocalFrameView.h"
 #include "core/layout/LayoutBoxModelObject.h"
 #include "core/layout/LayoutTestHelper.h"
 #include "core/layout/api/LayoutViewItem.h"
@@ skipping 1375 matching lines @@
   ASSERT_TRUE(child_paint_layer);
   CompositedLayerMapping* child_mapping =
       child_paint_layer->GetCompositedLayerMapping();
   ASSERT_TRUE(child_mapping);
   EXPECT_TRUE(child_mapping->AncestorClippingLayer());
   EXPECT_TRUE(child_mapping->AncestorClippingLayer()->MaskLayer());
   EXPECT_TRUE(child_mapping->AncestorClippingMaskLayer());
 }
 
 TEST_P(CompositedLayerMappingTest,
+       AncestorClipMaskRequirementsForNestedBorderRadius) {
+  // This case has the child within all ancestors and does not require a
+  // mask.
+  SetBodyInnerHTML(
+      "<style>"
+      "  #grandparent {"
+      "    width: 200px; height: 200px; overflow: hidden; border-radius: 25px;"
+      "  }"
+      "  #parent { position: relative; left: 40px; top: 40px; width: 120px;"
+      "           height: 120px; border-radius: 10px; overflow: hidden;"
+      "  }"
+      "  #child { position: relative; left: 10px; top: 10px; width: 100px;"
+      "           height: 100px; background-color: green;"
+      "           will-change: transform;"
+      "  }"
+      "</style>"
+      "<div id='grandparent'>"
+      "  <div id='parent'>"
+      "    <div id='child'></div>"
+      "</div>");
+  GetDocument().View()->UpdateAllLifecyclePhases();
+
+  Element* child = GetDocument().getElementById("child");
+  ASSERT_TRUE(child);
+  PaintLayer* child_paint_layer =
+      ToLayoutBoxModelObject(child->GetLayoutObject())->Layer();
+  ASSERT_TRUE(child_paint_layer);
+  CompositedLayerMapping* child_mapping =
+      child_paint_layer->GetCompositedLayerMapping();
+  ASSERT_TRUE(child_mapping);
+  EXPECT_TRUE(child_mapping->AncestorClippingLayer());
+  EXPECT_FALSE(child_mapping->AncestorClippingLayer()->MaskLayer());
+  EXPECT_FALSE(child_mapping->AncestorClippingMaskLayer());
+
+  // This case has the child within the grandparent but not the parent, and does
+  // require a mask so that the parent will clip the corners.
+  SetBodyInnerHTML(

[chrishtr, 2017/06/12 19:58:47]

Make each of these its own testcase.

[Stephen Chennney, 2017/06/12 20:41:54]

Done.

+      "<style>"
+      "  #grandparent {"
+      "    width: 200px; height: 200px; overflow: hidden; border-radius: 25px;"
+      "  }"
+      "  #parent { position: relative; left: 40px; top: 40px; width: 120px;"
+      "           height: 120px; border-radius: 10px; overflow: hidden;"
+      "  }"
+      "  #child { position: relative; left: 1px; top: 1px; width: 118px;"
+      "           height: 118px; background-color: green;"
+      "           will-change: transform;"
+      "  }"
+      "</style>"
+      "<div id='grandparent'>"
+      "  <div id='parent'>"
+      "    <div id='child'></div>"
+      "</div>");
+  GetDocument().View()->UpdateAllLifecyclePhases();
+
+  child = GetDocument().getElementById("child");
+  ASSERT_TRUE(child);
+  child_paint_layer = ToLayoutBoxModelObject(child->GetLayoutObject())->Layer();
+  ASSERT_TRUE(child_paint_layer);
+  child_mapping = child_paint_layer->GetCompositedLayerMapping();
+  ASSERT_TRUE(child_mapping);
+  EXPECT_TRUE(child_mapping->AncestorClippingLayer());
+  EXPECT_TRUE(child_mapping->AncestorClippingLayer()->MaskLayer());
+  EXPECT_TRUE(child_mapping->AncestorClippingMaskLayer());

[chrishtr, 2017/06/12 19:58:46]

Add an expectation for the size of the mask layer.

[Stephen Chennney, 2017/06/12 20:41:53]

Done.

+
+  // This case has the child within the grandparent but not the parent, and does
+  // not require a mask because the parent does not have border radius
+  SetBodyInnerHTML(
+      "<style>"
+      "  #grandparent {"
+      "    width: 200px; height: 200px; overflow: hidden; border-radius: 25px;"
+      "  }"
+      "  #parent { position: relative; left: 40px; top: 40px; width: 120px;"
+      "           height: 120px; overflow: hidden;"
+      "  }"
+      "  #child { position: relative; left: -10px; top: -10px; width: 140px;"
+      "           height: 140px; background-color: green;"
+      "           will-change: transform;"
+      "  }"
+      "</style>"
+      "<div id='grandparent'>"
+      "  <div id='parent'>"
+      "    <div id='child'></div>"
+      "</div>");
+  GetDocument().View()->UpdateAllLifecyclePhases();
+
+  child = GetDocument().getElementById("child");
+  ASSERT_TRUE(child);
+  child_paint_layer = ToLayoutBoxModelObject(child->GetLayoutObject())->Layer();
+  ASSERT_TRUE(child_paint_layer);
+  child_mapping = child_paint_layer->GetCompositedLayerMapping();
+  ASSERT_TRUE(child_mapping);
+  EXPECT_TRUE(child_mapping->AncestorClippingLayer());
+  EXPECT_FALSE(child_mapping->AncestorClippingLayer()->MaskLayer());
+  EXPECT_FALSE(child_mapping->AncestorClippingMaskLayer());
+
+  // This case has the child clipped by the grandparent border radius but not
+  // the parent, and requires a mask to clip to the grandparent. Although in
+  // an optimized world we would not need this because the parent clips out
+  // the child before it is clipped by the grandparent.
+  SetBodyInnerHTML(
+      "<style>"
+      "  #grandparent {"
+      "    width: 200px; height: 200px; overflow: hidden; border-radius: 25px;"
+      "  }"
+      "  #parent { position: relative; left: 40px; top: 40px; width: 120px;"
+      "           height: 120px; overflow: hidden;"
+      "  }"
+      "  #child { position: relative; left: -10px; top: -10px; width: 180px;"
+      "           height: 180px; background-color: green;"
+      "           will-change: transform;"
+      "  }"
+      "</style>"
+      "<div id='grandparent'>"
+      "  <div id='parent'>"
+      "    <div id='child'></div>"
+      "</div>");
+  GetDocument().View()->UpdateAllLifecyclePhases();
+
+  child = GetDocument().getElementById("child");
+  ASSERT_TRUE(child);
+  child_paint_layer = ToLayoutBoxModelObject(child->GetLayoutObject())->Layer();
+  ASSERT_TRUE(child_paint_layer);
+  child_mapping = child_paint_layer->GetCompositedLayerMapping();
+  ASSERT_TRUE(child_mapping);
+  EXPECT_TRUE(child_mapping->AncestorClippingLayer());
+  EXPECT_TRUE(child_mapping->AncestorClippingLayer()->MaskLayer());
+  EXPECT_TRUE(child_mapping->AncestorClippingMaskLayer());

[chrishtr, 2017/06/12 19:58:46]

ditto

[Stephen Chennney, 2017/06/12 20:41:54]

Done.

+
+  // Similar to the previous case, but here we really do need the mask.
+  SetBodyInnerHTML(
+      "<style>"
+      "  #grandparent {"
+      "    width: 200px; height: 200px; overflow: hidden; border-radius: 25px;"
+      "  }"
+      "  #parent { position: relative; left: 40px; top: 40px; width: 180px;"
+      "           height: 180px; overflow: hidden;"
+      "  }"
+      "  #child { position: relative; left: -10px; top: -10px; width: 180px;"
+      "           height: 180px; background-color: green;"
+      "           will-change: transform;"
+      "  }"
+      "</style>"
+      "<div id='grandparent'>"
+      "  <div id='parent'>"
+      "    <div id='child'></div>"
+      "</div>");
+  GetDocument().View()->UpdateAllLifecyclePhases();
+
+  child = GetDocument().getElementById("child");
+  ASSERT_TRUE(child);
+  child_paint_layer = ToLayoutBoxModelObject(child->GetLayoutObject())->Layer();
+  ASSERT_TRUE(child_paint_layer);
+  child_mapping = child_paint_layer->GetCompositedLayerMapping();
+  ASSERT_TRUE(child_mapping);
+  EXPECT_TRUE(child_mapping->AncestorClippingLayer());
+  EXPECT_TRUE(child_mapping->AncestorClippingLayer()->MaskLayer());
+  EXPECT_TRUE(child_mapping->AncestorClippingMaskLayer());
+}
+
+TEST_P(CompositedLayerMappingTest,
        AncestorClipMaskNotRequiredByBorderRadiusInside) {
   // Verify that we do not create the mask layer when the child is contained
   // within the rounded rect clip.
   SetBodyInnerHTML(
       "<style>"
       "  #ancestor {"
       "    width: 100px; height: 100px; overflow: hidden; border-radius: 5px;"
       "  }"
       "  #child { position: relative; left: 10px; top: 10px; width: 80px;"
       "           height: 80px; background-color: green;"
@@ skipping 149 matching lines @@
 
   // Now that sticky2 and sticky3 overlap sticky1 they will be promoted, but
   // they should not be squashed into the same layer because they scroll with
   // respect to each other.
   EXPECT_EQ(kPaintsIntoOwnBacking, sticky1->GetCompositingState());
   EXPECT_EQ(kPaintsIntoOwnBacking, sticky2->GetCompositingState());
   EXPECT_EQ(kPaintsIntoOwnBacking, sticky3->GetCompositingState());
 }
 
 }  // namespace blink