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: