[clip-path] Implement support for margin-box as reference box and box shape
authorkrit@webkit.org <krit@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 17 Jul 2018 16:52:04 +0000 (16:52 +0000)
committerkrit@webkit.org <krit@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 17 Jul 2018 16:52:04 +0000 (16:52 +0000)
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: https://svn.webkit.org/repository/webkit/trunk@233886 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/css3/masking/clip-path-circle-margin-box-expected.html [new file with mode: 0644]
LayoutTests/css3/masking/clip-path-margin-box-expected.html [new file with mode: 0644]
LayoutTests/css3/masking/clip-path-margin-box.html [new file with mode: 0644]
LayoutTests/platform/mac/css3/masking/clip-path-circle-margin-box-expected.png [deleted file]
LayoutTests/platform/mac/css3/masking/clip-path-circle-margin-box-expected.txt [deleted file]
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderBox.h
Source/WebCore/rendering/RenderBoxModelObject.h
Source/WebCore/rendering/RenderLayer.cpp

index e0d1240..7a5435b 100644 (file)
@@ -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 (file)
index 0000000..a4ba1ff
--- /dev/null
@@ -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 (file)
index 0000000..1aa29f3
--- /dev/null
@@ -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 (file)
index 0000000..a1bbcc3
--- /dev/null
@@ -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 (file)
index 8afd0df..0000000
Binary files a/LayoutTests/platform/mac/css3/masking/clip-path-circle-margin-box-expected.png and /dev/null 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 (file)
index 6d22a97..0000000
+++ /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]
index 31d84d7..e70a707 100644 (file)
@@ -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
index 92e37dd..3823db8 100644 (file)
@@ -144,9 +144,11 @@ public:
 
     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()); }
index df67fe7..ec3b1cb 100644 (file)
@@ -296,10 +296,11 @@ public:
 
     ContinuationChainNode* continuationChainNode() const;
 
+protected:
+    LayoutUnit computedCSSPadding(const Length&) const;
+
 private:
     ContinuationChainNode& ensureContinuationChainNode();
-
-    LayoutUnit computedCSSPadding(const Length&) const;
     
     virtual LayoutRect frameRectForStickyPositioning() const = 0;
 
index 224f302..6a0f14d 100644 (file)
@@ -4102,9 +4102,10 @@ static inline LayoutRect computeReferenceBox(const RenderObject& renderer, const
         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: