Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(169)

Unified Diff: third_party/WebKit/Source/core/layout/compositing/CompositedLayerMappingTest.cpp

Issue 2923683002: Fix nested border radius with composited child. (Closed)
Patch Set: Split tests, check layer sizes, document Created 3 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
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..243f6b0b5ba4f4198caf4fdc21c99e69b316939b 100644
--- a/third_party/WebKit/Source/core/layout/compositing/CompositedLayerMappingTest.cpp
+++ b/third_party/WebKit/Source/core/layout/compositing/CompositedLayerMappingTest.cpp
@@ -1392,6 +1392,199 @@ TEST_P(CompositedLayerMappingTest, AncestorClipMaskRequiredByBorderRadius) {
EXPECT_TRUE(child_mapping->AncestorClippingMaskLayer());
}
+TEST_P(CompositedLayerMappingTest,
+ AncestorClipMaskNotRequiredByNestedBorderRadius) {
+ // 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());
+}
+
+TEST_P(CompositedLayerMappingTest,
+ AncestorClipMaskRequiredByParentBorderRadius) {
+ // 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(
+ "<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();
+
+ 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);
+ ASSERT_TRUE(child_mapping->AncestorClippingLayer());
+ EXPECT_TRUE(child_mapping->AncestorClippingLayer()->MaskLayer());
+ ASSERT_TRUE(child_mapping->AncestorClippingMaskLayer());
+ const FloatSize layer_size =
+ child_mapping->AncestorClippingMaskLayer()->Size();
+ EXPECT_EQ(120, layer_size.Width());
+ EXPECT_EQ(120, layer_size.Height());
+}
+
+TEST_P(CompositedLayerMappingTest,
+ AncestorClipMaskNotRequiredByParentBorderRadius) {
+ // 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();
+
+ 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());
+}
+
+TEST_P(CompositedLayerMappingTest,
+ AncestorClipMaskRequiredByGrandparentBorderRadius1) {
+ // 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();
+
+ 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);
+ ASSERT_TRUE(child_mapping->AncestorClippingLayer());
+ EXPECT_TRUE(child_mapping->AncestorClippingLayer()->MaskLayer());
+ ASSERT_TRUE(child_mapping->AncestorClippingMaskLayer());
+ const FloatSize layer_size =
+ child_mapping->AncestorClippingMaskLayer()->Size();
+ EXPECT_EQ(120, layer_size.Width());
+ EXPECT_EQ(120, layer_size.Height());
+}
+
+TEST_P(CompositedLayerMappingTest,
+ AncestorClipMaskRequiredByGrandparentBorderRadius2) {
+ // 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();
+
+ 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);
+ ASSERT_TRUE(child_mapping->AncestorClippingLayer());
+ EXPECT_TRUE(child_mapping->AncestorClippingLayer()->MaskLayer());
+ ASSERT_TRUE(child_mapping->AncestorClippingMaskLayer());
+ const FloatSize layer_size =
+ child_mapping->AncestorClippingMaskLayer()->Size();
+ EXPECT_EQ(160, layer_size.Width());
+ EXPECT_EQ(160, layer_size.Height());
+}
+
TEST_P(CompositedLayerMappingTest,
AncestorClipMaskNotRequiredByBorderRadiusInside) {
// Verify that we do not create the mask layer when the child is contained

Powered by Google App Engine
This is Rietveld 408576698