[clip-path] Implement support for margin-box as reference box and box shape
https://bugs.webkit.org/show_bug.cgi?id=127984
Reviewed by Simon Fraser.
Compute the margin-box rectangle as needed for clip-path based on the actual
computed values for the margin-top, *-left, *-bottom, *-right properties.
Source/WebCore:
Test: css3/masking/clip-path-margin-box.html
* rendering/RenderBox.h:
(WebCore::RenderBox::marginBoxRect const):
* rendering/RenderBoxModelObject.h:
* rendering/RenderLayer.cpp:
(WebCore::computeReferenceBox):
LayoutTests:
* css3/masking/clip-path-circle-margin-box-expected.html: Added.
* css3/masking/clip-path-margin-box-expected.html: Added.
* css3/masking/clip-path-margin-box.html: Added.
* platform/mac/css3/masking/clip-path-circle-margin-box-expected.png: Removed.
* platform/mac/css3/masking/clip-path-circle-margin-box-expected.txt: Removed.
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@233886 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index e0d1240..7a5435b 100644
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,3 +1,19 @@
+2018-07-17 Dirk Schulze <krit@webkit.org>
+
+ [clip-path] Implement support for margin-box as reference box and box shape
+ https://bugs.webkit.org/show_bug.cgi?id=127984
+
+ Reviewed by Simon Fraser.
+
+ Compute the margin-box rectangle as needed for clip-path based on the actual
+ computed values for the margin-top, *-left, *-bottom, *-right properties.
+
+ * css3/masking/clip-path-circle-margin-box-expected.html: Added.
+ * css3/masking/clip-path-margin-box-expected.html: Added.
+ * css3/masking/clip-path-margin-box.html: Added.
+ * platform/mac/css3/masking/clip-path-circle-margin-box-expected.png: Removed.
+ * platform/mac/css3/masking/clip-path-circle-margin-box-expected.txt: Removed.
+
2018-07-17 Javier Fernandez <jfernandez@igalia.com>
Delete content of a single cell table should not delete the whole table
diff --git a/LayoutTests/css3/masking/clip-path-circle-margin-box-expected.html b/LayoutTests/css3/masking/clip-path-circle-margin-box-expected.html
new file mode 100644
index 0000000..a4ba1ff
--- /dev/null
+++ b/LayoutTests/css3/masking/clip-path-circle-margin-box-expected.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<style>
+#content {
+ width: 200px;
+ height: 200px;
+ margin: 0;
+ padding: 0;
+ background-color: green;
+}
+#clip {
+ width: 200px;
+ height: 200px;
+ margin: 10px;
+ padding: 10px;
+ border: 10px solid blue;
+ -webkit-clip-path: circle(130px at 120px 120px);
+ background-color: yellow;
+}
+</style>
+</head>
+<body>
+<div id="clip">
+ <div id="content"></div>
+</div>
+</body>
+</html>
diff --git a/LayoutTests/css3/masking/clip-path-margin-box-expected.html b/LayoutTests/css3/masking/clip-path-margin-box-expected.html
new file mode 100644
index 0000000..1aa29f3
--- /dev/null
+++ b/LayoutTests/css3/masking/clip-path-margin-box-expected.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<style>
+#content {
+ width: 230px;
+ height: 230px;
+ margin: 0;
+ padding: 0;
+ background-color: green;
+}
+#clip {
+ width: 200px;
+ height: 200px;
+ margin: 10px;
+ padding: 10px;
+ border: 10px solid blue;
+ background-color: yellow;
+}
+</style>
+</head>
+<body>
+<div id="clip">
+ <div id="content"></div>
+</div>
+</body>
+</html>
diff --git a/LayoutTests/css3/masking/clip-path-margin-box.html b/LayoutTests/css3/masking/clip-path-margin-box.html
new file mode 100644
index 0000000..a1bbcc3
--- /dev/null
+++ b/LayoutTests/css3/masking/clip-path-margin-box.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<style>
+#content {
+ width: 300px;
+ height: 300px;
+ margin: 0;
+ padding: 0;
+ background-color: green;
+}
+#clip {
+ width: 200px;
+ height: 200px;
+ margin: 10px;
+ padding: 10px;
+ border: 10px solid blue;
+ -webkit-clip-path: margin-box;
+ background-color: yellow;
+}
+</style>
+</head>
+<body>
+<div id="clip">
+ <div id="content"></div>
+</div>
+</body>
+</html>
diff --git a/LayoutTests/platform/mac/css3/masking/clip-path-circle-margin-box-expected.png b/LayoutTests/platform/mac/css3/masking/clip-path-circle-margin-box-expected.png
deleted file mode 100644
index 8afd0df..0000000
--- a/LayoutTests/platform/mac/css3/masking/clip-path-circle-margin-box-expected.png
+++ /dev/null
Binary files differ
diff --git a/LayoutTests/platform/mac/css3/masking/clip-path-circle-margin-box-expected.txt b/LayoutTests/platform/mac/css3/masking/clip-path-circle-margin-box-expected.txt
deleted file mode 100644
index 6d22a97..0000000
--- a/LayoutTests/platform/mac/css3/masking/clip-path-circle-margin-box-expected.txt
+++ /dev/null
@@ -1,8 +0,0 @@
-layer at (0,0) size 800x600
- RenderView at (0,0) size 800x600
-layer at (0,0) size 800x260
- RenderBlock {HTML} at (0,0) size 800x260
- RenderBody {BODY} at (8,10) size 784x240
-layer at (18,10) size 240x240
- RenderBlock {DIV} at (10,0) size 240x240 [bgcolor=#FFFF00] [border: (10px solid #0000FF)]
- RenderBlock {DIV} at (20,20) size 200x200 [bgcolor=#008000]
diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index 31d84d7..e70a707 100644
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,21 @@
+2018-07-17 Dirk Schulze <krit@webkit.org>
+
+ [clip-path] Implement support for margin-box as reference box and box shape
+ https://bugs.webkit.org/show_bug.cgi?id=127984
+
+ Reviewed by Simon Fraser.
+
+ Compute the margin-box rectangle as needed for clip-path based on the actual
+ computed values for the margin-top, *-left, *-bottom, *-right properties.
+
+ Test: css3/masking/clip-path-margin-box.html
+
+ * rendering/RenderBox.h:
+ (WebCore::RenderBox::marginBoxRect const):
+ * rendering/RenderBoxModelObject.h:
+ * rendering/RenderLayer.cpp:
+ (WebCore::computeReferenceBox):
+
2018-07-17 Javier Fernandez <jfernandez@igalia.com>
Delete content of a single cell table should not delete the whole table
diff --git a/Source/WebCore/rendering/RenderBox.h b/Source/WebCore/rendering/RenderBox.h
index 92e37dd..3823db8 100644
--- a/Source/WebCore/rendering/RenderBox.h
+++ b/Source/WebCore/rendering/RenderBox.h
@@ -144,9 +144,11 @@
LayoutRect marginBoxRect() const
{
- LayoutRect box = borderBoxRect();
- box.expand(m_marginBox);
- return box;
+ auto marginLeft = computedCSSPadding(style().marginLeft());
+ auto marginRight = computedCSSPadding(style().marginRight());
+ auto marginTop = computedCSSPadding(style().marginTop());
+ auto marginBottom = computedCSSPadding(style().marginBottom());
+ return LayoutRect(-marginLeft, -marginTop, size().width() + marginLeft + marginRight, size().height() + marginTop + marginBottom);
}
LayoutRect borderBoxRect() const { return LayoutRect(LayoutPoint(), size()); }
LayoutRect paddingBoxRect() const { return LayoutRect(borderLeft(), borderTop(), contentWidth() + paddingLeft() + paddingRight(), contentHeight() + paddingTop() + paddingBottom()); }
diff --git a/Source/WebCore/rendering/RenderBoxModelObject.h b/Source/WebCore/rendering/RenderBoxModelObject.h
index df67fe7..ec3b1cb 100644
--- a/Source/WebCore/rendering/RenderBoxModelObject.h
+++ b/Source/WebCore/rendering/RenderBoxModelObject.h
@@ -296,10 +296,11 @@
ContinuationChainNode* continuationChainNode() const;
+protected:
+ LayoutUnit computedCSSPadding(const Length&) const;
+
private:
ContinuationChainNode& ensureContinuationChainNode();
-
- LayoutUnit computedCSSPadding(const Length&) const;
virtual LayoutRect frameRectForStickyPositioning() const = 0;
diff --git a/Source/WebCore/rendering/RenderLayer.cpp b/Source/WebCore/rendering/RenderLayer.cpp
index 224f302..6a0f14d 100644
--- a/Source/WebCore/rendering/RenderLayer.cpp
+++ b/Source/WebCore/rendering/RenderLayer.cpp
@@ -4102,9 +4102,10 @@
referenceBox = box.paddingBoxRect();
referenceBox.move(offsetFromRoot);
break;
- // FIXME: Support margin-box. Use bounding client rect for now.
- // https://bugs.webkit.org/show_bug.cgi?id=127984
case CSSBoxType::MarginBox:
+ referenceBox = box.marginBoxRect();
+ referenceBox.move(offsetFromRoot);
+ break;
// stroke-box, view-box compute to border-box for HTML elements.
case CSSBoxType::StrokeBox:
case CSSBoxType::ViewBox:
