Fix nested border radius with composited child.

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

Index: third_party/WebKit/Source/core/layout/compositing/CompositedLayerMappingTest.cpp
diff --git a/third_party/WebKit/Source/core/layout/compositing/CompositedLayerMappingTest.cpp b/third_party/WebKit/Source/core/layout/compositing/CompositedLayerMappingTest.cpp
index 2e1364f638a1237f4235c569fb50b73e143ebb22..69337761908d94945400ec89aefee6b806ce02d9 100644
--- a/third_party/WebKit/Source/core/layout/compositing/CompositedLayerMappingTest.cpp
+++ b/third_party/WebKit/Source/core/layout/compositing/CompositedLayerMappingTest.cpp
@@ -1392,6 +1392,167 @@ TEST_P(CompositedLayerMappingTest, AncestorClipMaskRequiredByBorderRadius) {
   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