[CSS Shapes][css clip-path] rounded corner calculation for box shapes is wrong

https://bugs.webkit.org/show_bug.cgi?id=127982

Reviewed by Simon Fraser.

Source/WebCore:

Calculate rounded corners for box shapes as defined in the CSS Shapes
spec.

Tests: css3/masking/clip-path-border-radius-border-box-000.html
       css3/masking/clip-path-border-radius-content-box-000.html
       css3/masking/clip-path-border-radius-content-box-001.html
       css3/masking/clip-path-border-radius-padding-box-000.html
       css3/masking/clip-path-border-radius-padding-box-001.html
       fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-000.html
       fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-001.html
       fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-002.html
       fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-000.html
       fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-001.html
       fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-002.html
       fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-003.html
       fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-000.html
       fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-001.html
       fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-002.html
       fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-003.html
       fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-004.html
       fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-000.html
       fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-001.html
       fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-002.html
       fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-003.html

* platform/graphics/RoundedRect.h:
(WebCore::RoundedRect::Radii::transposedRadii): Transpose radii for
    vertical writing modes.
(WebCore::RoundedRect::moveBy): Add method for use with clip path.
(WebCore::RoundedRect::transposedRect): Transpose rect for vertical
    writing modes.
* rendering/RenderBox.h:
(WebCore::RenderBox::marginBoxRect): Return the margin box rect for
    the RenderBox.
* rendering/RenderLayer.cpp:
(WebCore::RenderLayer::setupClipPath): Call the new function for the
    rounded corner calculation.
* rendering/shapes/ShapeInfo.cpp:
(WebCore::ShapeInfo<RenderType>::computedShape): Call the new function
    for the rounded corner calculation.
* rendering/shapes/BoxShape.cpp:
(WebCore::adjustRadiusForMarginBoxShape): Helper function for
    computeRoundedRectForLayoutBoxShape.
(WebCore::computeMarginBoxShapeRadius): Ditto.
(WebCore::computeMarginBoxShapeRadii): Ditto.
(WebCore::computeRoundedRectForBoxShape): Utility function to do the
    rounded corner calculation.
* rendering/shapes/BoxShape.h: Add new function.
* rendering/style/RenderStyle.h:
(WebCore::RenderStyle::getRoundedInnerBorderFor): Add default argument
    values.

LayoutTests:

* css3/masking/clip-path-border-radius-border-box-000-expected.html: Added.
* css3/masking/clip-path-border-radius-border-box-000.html: Added.
* css3/masking/clip-path-border-radius-content-box-000-expected.html: Added.
* css3/masking/clip-path-border-radius-content-box-000.html: Added.
* css3/masking/clip-path-border-radius-content-box-001-expected.html: Added.
* css3/masking/clip-path-border-radius-content-box-001.html: Added.
* css3/masking/clip-path-border-radius-padding-box-000-expected.html: Added.
* css3/masking/clip-path-border-radius-padding-box-000.html: Added.
* css3/masking/clip-path-border-radius-padding-box-001-expected.html: Added.
* css3/masking/clip-path-border-radius-padding-box-001.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-000-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-000.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-001-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-001.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-002-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-002.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-000-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-000.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-001-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-001.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-002-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-002.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-003-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-003.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-000-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-000.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-001-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-001.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-002-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-002.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-003-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-003.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-004-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-004.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-000-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-000.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-001-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-001.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-002-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-002.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-003-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-003.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@166383 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index 35bc447..7a0d675 100644 (file)
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,3 +1,53 @@
+2014-03-27  Bem Jones-Bey  <bjonesbe@adobe.com>
+
+        [CSS Shapes][css clip-path] rounded corner calculation for box shapes is wrong
+        https://bugs.webkit.org/show_bug.cgi?id=127982
+
+        Reviewed by Simon Fraser.
+
+        * css3/masking/clip-path-border-radius-border-box-000-expected.html: Added.
+        * css3/masking/clip-path-border-radius-border-box-000.html: Added.
+        * css3/masking/clip-path-border-radius-content-box-000-expected.html: Added.
+        * css3/masking/clip-path-border-radius-content-box-000.html: Added.
+        * css3/masking/clip-path-border-radius-content-box-001-expected.html: Added.
+        * css3/masking/clip-path-border-radius-content-box-001.html: Added.
+        * css3/masking/clip-path-border-radius-padding-box-000-expected.html: Added.
+        * css3/masking/clip-path-border-radius-padding-box-000.html: Added.
+        * css3/masking/clip-path-border-radius-padding-box-001-expected.html: Added.
+        * css3/masking/clip-path-border-radius-padding-box-001.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-000-expected.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-000.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-001-expected.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-001.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-002-expected.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-002.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-000-expected.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-000.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-001-expected.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-001.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-002-expected.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-002.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-003-expected.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-003.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-000-expected.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-000.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-001-expected.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-001.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-002-expected.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-002.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-003-expected.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-003.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-004-expected.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-004.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-000-expected.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-000.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-001-expected.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-001.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-002-expected.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-002.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-003-expected.html: Added.
+        * fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-003.html: Added.
+
 2014-03-27  Brent Fulgham  <bfulgham@apple.com>
 
         Fix a crash caused by track insertion after load()

diff --git a/LayoutTests/css3/masking/clip-path-border-radius-border-box-000-expected.html b/LayoutTests/css3/masking/clip-path-border-radius-border-box-000-expected.html
new file mode 100644 (file)
index 0000000..c8acb6f
--- /dev/null
+++ b/LayoutTests/css3/masking/clip-path-border-radius-border-box-000-expected.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<style>
+    .clip {
+        width: 100px;
+        height: 100px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 30px;
+        margin: 20px;
+        background-color: blue;
+        -webkit-clip-path: inset(0px round 30px);
+    }
+</style>
+<body>
+    <div class="clip"></div>
+</body>

diff --git a/LayoutTests/css3/masking/clip-path-border-radius-border-box-000.html b/LayoutTests/css3/masking/clip-path-border-radius-border-box-000.html
new file mode 100644 (file)
index 0000000..d0904b7
--- /dev/null
+++ b/LayoutTests/css3/masking/clip-path-border-radius-border-box-000.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<style>
+    .clip {
+        width: 100px;
+        height: 100px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 30px;
+        margin: 20px;
+        background-color: blue;
+        -webkit-clip-path: border-box;
+    }
+</style>
+<body>
+    <div class="clip"></div>
+</body>

diff --git a/LayoutTests/css3/masking/clip-path-border-radius-content-box-000-expected.html b/LayoutTests/css3/masking/clip-path-border-radius-content-box-000-expected.html
new file mode 100644 (file)
index 0000000..37812ae
--- /dev/null
+++ b/LayoutTests/css3/masking/clip-path-border-radius-content-box-000-expected.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<style>
+    .clip {
+        width: 100px;
+        height: 100px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 30px;
+        margin: 20px;
+        background-color: blue;
+        -webkit-clip-path: inset(40px);
+    }
+</style>
+<body>
+    <div class="clip"></div>
+</body>

diff --git a/LayoutTests/css3/masking/clip-path-border-radius-content-box-000.html b/LayoutTests/css3/masking/clip-path-border-radius-content-box-000.html
new file mode 100644 (file)
index 0000000..16a57fd
--- /dev/null
+++ b/LayoutTests/css3/masking/clip-path-border-radius-content-box-000.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<style>
+    .clip {
+        width: 100px;
+        height: 100px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 30px;
+        margin: 20px;
+        background-color: blue;
+        -webkit-clip-path: content-box;
+    }
+</style>
+<body>
+    <div class="clip"></div>
+</body>

diff --git a/LayoutTests/css3/masking/clip-path-border-radius-content-box-001-expected.html b/LayoutTests/css3/masking/clip-path-border-radius-content-box-001-expected.html
new file mode 100644 (file)
index 0000000..680dd29
--- /dev/null
+++ b/LayoutTests/css3/masking/clip-path-border-radius-content-box-001-expected.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<style>
+    .clip {
+        width: 100px;
+        height: 100px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 70px;
+        margin: 20px;
+        background-color: blue;
+        -webkit-clip-path: inset(40px round 30px);
+    }
+</style>
+<body>
+    <div class="clip"></div>
+</body>

diff --git a/LayoutTests/css3/masking/clip-path-border-radius-content-box-001.html b/LayoutTests/css3/masking/clip-path-border-radius-content-box-001.html
new file mode 100644 (file)
index 0000000..34ef985
--- /dev/null
+++ b/LayoutTests/css3/masking/clip-path-border-radius-content-box-001.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<style>
+    .clip {
+        width: 100px;
+        height: 100px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 70px;
+        margin: 20px;
+        background-color: blue;
+        -webkit-clip-path: content-box;
+    }
+</style>
+<body>
+    <div class="clip"></div>
+</body>

diff --git a/LayoutTests/css3/masking/clip-path-border-radius-padding-box-000-expected.html b/LayoutTests/css3/masking/clip-path-border-radius-padding-box-000-expected.html
new file mode 100644 (file)
index 0000000..f4d6819
--- /dev/null
+++ b/LayoutTests/css3/masking/clip-path-border-radius-padding-box-000-expected.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<style>
+    .clip {
+        width: 100px;
+        height: 100px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 20px;
+        margin: 20px;
+        background-color: blue;
+        -webkit-clip-path: inset(20px);
+    }
+</style>
+<body>
+    <div class="clip"></div>
+</body>

diff --git a/LayoutTests/css3/masking/clip-path-border-radius-padding-box-000.html b/LayoutTests/css3/masking/clip-path-border-radius-padding-box-000.html
new file mode 100644 (file)
index 0000000..863fd77
--- /dev/null
+++ b/LayoutTests/css3/masking/clip-path-border-radius-padding-box-000.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<style>
+    .clip {
+        width: 100px;
+        height: 100px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 20px;
+        margin: 20px;
+        background-color: blue;
+        -webkit-clip-path: padding-box;
+    }
+</style>
+<body>
+    <div class="clip"></div>
+</body>

diff --git a/LayoutTests/css3/masking/clip-path-border-radius-padding-box-001-expected.html b/LayoutTests/css3/masking/clip-path-border-radius-padding-box-001-expected.html
new file mode 100644 (file)
index 0000000..bc94f05
--- /dev/null
+++ b/LayoutTests/css3/masking/clip-path-border-radius-padding-box-001-expected.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<style>
+    .clip {
+        width: 100px;
+        height: 100px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 50px;
+        margin: 20px;
+        background-color: blue;
+        -webkit-clip-path: inset(20px round 30px);
+    }
+</style>
+<body>
+    <div class="clip"></div>
+</body>

diff --git a/LayoutTests/css3/masking/clip-path-border-radius-padding-box-001.html b/LayoutTests/css3/masking/clip-path-border-radius-padding-box-001.html
new file mode 100644 (file)
index 0000000..37f9030
--- /dev/null
+++ b/LayoutTests/css3/masking/clip-path-border-radius-padding-box-001.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<style>
+    .clip {
+        width: 100px;
+        height: 100px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 50px;
+        margin: 20px;
+        background-color: blue;
+        -webkit-clip-path: padding-box;
+    }
+</style>
+<body>
+    <div class="clip"></div>
+</body>

diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-000-expected.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-000-expected.html
new file mode 100644 (file)
index 0000000..8e6020b
--- /dev/null
+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-000-expected.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<style>
+    .container {
+        width: 300px;
+        font: 10px/1 Ahem;
+    }
+    .float {
+        float: left;
+        width: 100px;
+        height: 100px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 30px;
+        margin: 20px;
+        background-color: blue;
+        background-clip: border-box;
+        -webkit-shape-outside: inset(20px round 30px);
+    }
+</style>
+<body>
+    <p>The black squares should follow the right side of the blue shape. They should not overlap the shape.</p>
+    <div class="container">
+        <div class="float"></div>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+    </div>
+</body>

diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-000.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-000.html
new file mode 100644 (file)
index 0000000..9ba8bce
--- /dev/null
+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-000.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<style>
+    .container {
+        width: 300px;
+        font: 10px/1 Ahem;
+    }
+    .float {
+        float: left;
+        width: 100px;
+        height: 100px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 30px;
+        margin: 20px;
+        background-color: blue;
+        background-clip: border-box;
+        -webkit-shape-outside: border-box;
+    }
+</style>
+<body>
+    <p>The black squares should follow the right side of the blue shape. They should not overlap the shape.</p>
+    <div class="container">
+        <div class="float"></div>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+    </div>
+</body>

diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-001-expected.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-001-expected.html
new file mode 100644 (file)
index 0000000..1f8255f
--- /dev/null
+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-001-expected.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<style>
+    .container {
+        width: 300px;
+        font: 10px/1 Ahem;
+    }
+    .float {
+        float: left;
+        width: 100px;
+        height: 100px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 30px 20px 40px 10px / 10px 40px 20px 30px;
+        margin: 20px;
+        background-color: blue;
+        background-clip: border-box;
+        -webkit-shape-outside: inset(20px round 30px 20px 40px 10px / 10px 40px 20px 30px);
+    }
+</style>
+<body>
+    <p>The black squares should follow the right side of the blue shape. They should not overlap the shape.</p>
+    <div class="container">
+        <div class="float"></div>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+    </div>
+</body>

diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-001.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-001.html
new file mode 100644 (file)
index 0000000..cfe429a
--- /dev/null
+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-001.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<style>
+    .container {
+        width: 300px;
+        font: 10px/1 Ahem;
+    }
+    .float {
+        float: left;
+        width: 100px;
+        height: 100px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 30px 20px 40px 10px / 10px 40px 20px 30px;
+        margin: 20px;
+        background-color: blue;
+        background-clip: border-box;
+        -webkit-shape-outside: border-box;
+    }
+</style>
+<body>
+    <p>The black squares should follow the right side of the blue shape. They should not overlap the shape.</p>
+    <div class="container">
+        <div class="float"></div>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+    </div>
+</body>

diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-002-expected.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-002-expected.html
new file mode 100644 (file)
index 0000000..4fe2b95
--- /dev/null
+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-002-expected.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<style>
+    .container {
+        width: 300px;
+        font: 10px/1 Ahem;
+        -webkit-writing-mode: vertical-lr;
+    }
+    .float {
+        float: left;
+        width: 100px;
+        height: 200px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 30px 20px 40px 10px / 10px 40px 20px 30px;
+        margin: 20px;
+        background-color: blue;
+        background-clip: border-box;
+        -webkit-shape-outside: inset(20px round 30px 20px 40px 10px / 10px 40px 20px 30px);
+    }
+</style>
+<body>
+    <p>The black squares should follow the bottom side of the blue shape. They should not overlap the shape.</p>
+    <div class="container">
+        <div class="float"></div>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+    </div>
+</body>

diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-002.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-002.html
new file mode 100644 (file)
index 0000000..f8c56a9
--- /dev/null
+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-002.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<style>
+    .container {
+        width: 300px;
+        font: 10px/1 Ahem;
+        -webkit-writing-mode: vertical-lr;
+    }
+    .float {
+        float: left;
+        width: 100px;
+        height: 200px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 30px 20px 40px 10px / 10px 40px 20px 30px;
+        margin: 20px;
+        background-color: blue;
+        background-clip: border-box;
+        -webkit-shape-outside: border-box;
+    }
+</style>
+<body>
+    <p>The black squares should follow the bottom side of the blue shape. They should not overlap the shape.</p>
+    <div class="container">
+        <div class="float"></div>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+    </div>
+</body>

diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-000-expected.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-000-expected.html
new file mode 100644 (file)
index 0000000..c29ec03
--- /dev/null
+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-000-expected.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<style>
+    .container {
+        width: 300px;
+        font: 10px/1 Ahem;
+    }
+    .float {
+        float: left;
+        width: 100px;
+        height: 100px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 30px;
+        margin: 20px;
+        background-color: blue;
+        background-clip: content-box;
+        -webkit-shape-outside: inset(60px);
+    }
+</style>
+<body>
+    <p>The black squares should follow the right side of the blue shape. They should not overlap the shape.</p>
+    <div class="container">
+        <div class="float"></div>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+    </div>
+</body>

diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-000.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-000.html
new file mode 100644 (file)
index 0000000..831cc13
--- /dev/null
+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-000.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<style>
+    .container {
+        width: 300px;
+        font: 10px/1 Ahem;
+    }
+    .float {
+        float: left;
+        width: 100px;
+        height: 100px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 30px;
+        margin: 20px;
+        background-color: blue;
+        background-clip: content-box;
+        -webkit-shape-outside: content-box;
+    }
+</style>
+<body>
+    <p>The black squares should follow the right side of the blue shape. They should not overlap the shape.</p>
+    <div class="container">
+        <div class="float"></div>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+    </div>
+</body>

diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-001-expected.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-001-expected.html
new file mode 100644 (file)
index 0000000..1aaf184
--- /dev/null
+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-001-expected.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<style>
+    .container {
+        width: 300px;
+        font: 10px/1 Ahem;
+    }
+    .float {
+        float: left;
+        width: 100px;
+        height: 100px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 70px;
+        margin: 20px;
+        background-color: blue;
+        background-clip: content-box;
+        -webkit-shape-outside: inset(60px round 30px);
+    }
+</style>
+<body>
+    <p>The black squares should follow the right side of the blue shape. They should not overlap the shape.</p>
+    <div class="container">
+        <div class="float"></div>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+    </div>
+</body>

diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-001.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-001.html
new file mode 100644 (file)
index 0000000..7e592a3
--- /dev/null
+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-001.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<style>
+    .container {
+        width: 300px;
+        font: 10px/1 Ahem;
+    }
+    .float {
+        float: left;
+        width: 100px;
+        height: 100px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 70px;
+        margin: 20px;
+        background-color: blue;
+        background-clip: content-box;
+        -webkit-shape-outside: content-box;
+    }
+</style>
+<body>
+    <p>The black squares should follow the right side of the blue shape. They should not overlap the shape.</p>
+    <div class="container">
+        <div class="float"></div>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+    </div>
+</body>

diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-002-expected.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-002-expected.html
new file mode 100644 (file)
index 0000000..c14be8c
--- /dev/null
+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-002-expected.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<style>
+    .container {
+        width: 300px;
+        font: 10px/1 Ahem;
+    }
+    .float {
+        float: left;
+        width: 100px;
+        height: 100px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 70px 60px 80px 50px / 50px 80px 60px 70px;
+        margin: 20px;
+        background-color: blue;
+        background-clip: content-box;
+        -webkit-shape-outside: inset(60px round 30px 20px 40px 10px / 10px 40px 20px 30px);
+    }
+</style>
+<body>
+    <p>The black squares should follow the right side of the blue shape. They should not overlap the shape.</p>
+    <div class="container">
+        <div class="float"></div>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+    </div>
+</body>

diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-002.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-002.html
new file mode 100644 (file)
index 0000000..ee1934b
--- /dev/null
+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-002.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<style>
+    .container {
+        width: 300px;
+        font: 10px/1 Ahem;
+    }
+    .float {
+        float: left;
+        width: 100px;
+        height: 100px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 70px 60px 80px 50px / 50px 80px 60px 70px;
+        margin: 20px;
+        background-color: blue;
+        background-clip: content-box;
+        -webkit-shape-outside: content-box;
+    }
+</style>
+<body>
+    <p>The black squares should follow the right side of the blue shape. They should not overlap the shape.</p>
+    <div class="container">
+        <div class="float"></div>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+    </div>
+</body>

diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-003-expected.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-003-expected.html
new file mode 100644 (file)
index 0000000..c2be645
--- /dev/null
+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-003-expected.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<style>
+    .container {
+        width: 300px;
+        font: 10px/1 Ahem;
+        -webkit-writing-mode: vertical-lr;
+    }
+    .float {
+        float: left;
+        width: 100px;
+        height: 200px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 70px 60px 80px 50px / 50px 80px 60px 70px;
+        margin: 20px;
+        background-color: blue;
+        background-clip: content-box;
+        -webkit-shape-outside: inset(60px round 30px 20px 40px 10px / 10px 40px 20px 30px);
+    }
+</style>
+<body>
+    <p>The black squares should follow the bottom side of the blue shape. They should not overlap the shape.</p>
+    <div class="container">
+        <div class="float"></div>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+    </div>
+</body>

diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-003.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-003.html
new file mode 100644 (file)
index 0000000..b9615f7
--- /dev/null
+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-003.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<style>
+    .container {
+        width: 300px;
+        font: 10px/1 Ahem;
+        -webkit-writing-mode: vertical-lr;
+    }
+    .float {
+        float: left;
+        width: 100px;
+        height: 200px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 70px 60px 80px 50px / 50px 80px 60px 70px;
+        margin: 20px;
+        background-color: blue;
+        background-clip: content-box;
+        -webkit-shape-outside: content-box;
+    }
+</style>
+<body>
+    <p>The black squares should follow the bottom side of the blue shape. They should not overlap the shape.</p>
+    <div class="container">
+        <div class="float"></div>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+    </div>
+</body>

diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-000-expected.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-000-expected.html
new file mode 100644 (file)
index 0000000..fddbec3
--- /dev/null
+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-000-expected.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<style>
+    .container {
+        width: 300px;
+        font: 10px/1 Ahem;
+    }
+    .float {
+        float: left;
+        width: 100px;
+        height: 100px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 10px;
+        margin: 20px;
+        background-color: blue;
+        -webkit-shape-outside: inset(0px round 27.5px);
+    }
+</style>
+<body>
+    <div class="container">
+        <div class="float"></div>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+    </div>
+</body>

diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-000.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-000.html
new file mode 100644 (file)
index 0000000..a8595de
--- /dev/null
+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-000.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<style>
+    .container {
+        width: 300px;
+        font: 10px/1 Ahem;
+    }
+    .float {
+        float: left;
+        width: 100px;
+        height: 100px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 10px;
+        margin: 20px;
+        background-color: blue;
+        -webkit-shape-outside: margin-box;
+    }
+</style>
+<body>
+    <div class="container">
+        <div class="float"></div>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+    </div>
+</body>

diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-001-expected.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-001-expected.html
new file mode 100644 (file)
index 0000000..04d3405
--- /dev/null
+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-001-expected.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<style>
+    .container {
+        width: 300px;
+        font: 10px/1 Ahem;
+    }
+    .float {
+        float: left;
+        width: 100px;
+        height: 100px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 40px;
+        margin: 20px;
+        background-color: blue;
+        -webkit-shape-outside: inset(0px round 60px);
+    }
+</style>
+<body>
+    <div class="container">
+        <div class="float"></div>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+    </div>
+</body>

diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-001.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-001.html
new file mode 100644 (file)
index 0000000..100974d
--- /dev/null
+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-001.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<style>
+    .container {
+        width: 300px;
+        font: 10px/1 Ahem;
+    }
+    .float {
+        float: left;
+        width: 100px;
+        height: 100px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 40px;
+        margin: 20px;
+        background-color: blue;
+        -webkit-shape-outside: margin-box;
+    }
+</style>
+<body>
+    <div class="container">
+        <div class="float"></div>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+    </div>
+</body>

diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-002-expected.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-002-expected.html
new file mode 100644 (file)
index 0000000..593d51e
--- /dev/null
+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-002-expected.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<style>
+    .container {
+        width: 300px;
+        font: 10px/1 Ahem;
+    }
+    .float {
+        float: left;
+        width: 100px;
+        height: 100px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 40px;
+        margin: 0px;
+        background-color: blue;
+        -webkit-shape-outside: inset(0px round 40px);
+    }
+</style>
+<body>
+    <div class="container">
+        <div class="float"></div>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+    </div>
+</body>

diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-002.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-002.html
new file mode 100644 (file)
index 0000000..7a582df
--- /dev/null
+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-002.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<style>
+    .container {
+        width: 300px;
+        font: 10px/1 Ahem;
+    }
+    .float {
+        float: left;
+        width: 100px;
+        height: 100px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 40px;
+        margin: 0px;
+        background-color: blue;
+        -webkit-shape-outside: margin-box;
+    }
+</style>
+<body>
+    <div class="container">
+        <div class="float"></div>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+    </div>
+</body>

diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-003-expected.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-003-expected.html
new file mode 100644 (file)
index 0000000..a2fa6a6
--- /dev/null
+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-003-expected.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<style>
+    .container {
+        width: 300px;
+        font: 10px/1 Ahem;
+    }
+    .float {
+        float: left;
+        width: 100px;
+        height: 100px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 40px 20px 50px 30px / 30px 50px 20px 40px;
+        margin: 20px;
+        background-color: blue;
+        -webkit-shape-outside: inset(0px round 60px 40px 70px 50px / 50px 70px 40px 60px);
+    }
+</style>
+<body>
+    <div class="container">
+        <div class="float"></div>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+    </div>
+</body>

diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-003.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-003.html
new file mode 100644 (file)
index 0000000..72c992b
--- /dev/null
+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-003.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<style>
+    .container {
+        width: 300px;
+        font: 10px/1 Ahem;
+    }
+    .float {
+        float: left;
+        width: 100px;
+        height: 100px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 40px 20px 50px 30px / 30px 50px 20px 40px;
+        margin: 20px;
+        background-color: blue;
+        -webkit-shape-outside: margin-box;
+    }
+</style>
+<body>
+    <div class="container">
+        <div class="float"></div>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+    </div>
+</body>

diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-004-expected.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-004-expected.html
new file mode 100644 (file)
index 0000000..6474317
--- /dev/null
+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-004-expected.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<style>
+    .container {
+        width: 300px;
+        font: 10px/1 Ahem;
+        -webkit-writing-mode: vertical-lr;
+    }
+    .float {
+        float: left;
+        width: 100px;
+        height: 200px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 40px 20px 50px 30px / 30px 50px 20px 40px;
+        margin: 20px;
+        background-color: blue;
+        -webkit-shape-outside: inset(0px round 60px 40px 70px 50px / 50px 70px 40px 60px);
+    }
+</style>
+<body>
+    <div class="container">
+        <div class="float"></div>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+    </div>
+</body>

diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-004.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-004.html
new file mode 100644 (file)
index 0000000..f0decee
--- /dev/null
+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-004.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<style>
+    .container {
+        width: 300px;
+        font: 10px/1 Ahem;
+        -webkit-writing-mode: vertical-lr;
+    }
+    .float {
+        float: left;
+        width: 100px;
+        height: 200px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 40px 20px 50px 30px / 30px 50px 20px 40px;
+        margin: 20px;
+        background-color: blue;
+        -webkit-shape-outside: margin-box;
+    }
+</style>
+<body>
+    <div class="container">
+        <div class="float"></div>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+    </div>
+</body>

diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-000-expected.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-000-expected.html
new file mode 100644 (file)
index 0000000..ddb4db1
--- /dev/null
+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-000-expected.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<style>
+    .container {
+        width: 300px;
+        font: 10px/1 Ahem;
+    }
+    .float {
+        float: left;
+        width: 100px;
+        height: 100px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 20px;
+        margin: 20px;
+        background-color: blue;
+        background-clip: padding-box;
+        -webkit-shape-outside: inset(40px);
+    }
+</style>
+<body>
+    <p>The black squares should follow the right side of the blue shape. They should not overlap the shape.</p>
+    <div class="container">
+        <div class="float"></div>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+    </div>
+</body>

diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-000.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-000.html
new file mode 100644 (file)
index 0000000..b839622
--- /dev/null
+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-000.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<style>
+    .container {
+        width: 300px;
+        font: 10px/1 Ahem;
+    }
+    .float {
+        float: left;
+        width: 100px;
+        height: 100px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 20px;
+        margin: 20px;
+        background-color: blue;
+        background-clip: padding-box;
+        -webkit-shape-outside: padding-box;
+    }
+</style>
+<body>
+    <p>The black squares should follow the right side of the blue shape. They should not overlap the shape.</p>
+    <div class="container">
+        <div class="float"></div>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+    </div>
+</body>

diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-001-expected.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-001-expected.html
new file mode 100644 (file)
index 0000000..a3f0389
--- /dev/null
+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-001-expected.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<style>
+    .container {
+        width: 300px;
+        font: 10px/1 Ahem;
+    }
+    .float {
+        float: left;
+        width: 100px;
+        height: 100px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 50px;
+        margin: 20px;
+        background-color: blue;
+        background-clip: padding-box;
+        -webkit-shape-outside: inset(40px round 30px);
+    }
+</style>
+<body>
+    <p>The black squares should follow the right side of the blue shape. They should not overlap the shape.</p>
+    <div class="container">
+        <div class="float"></div>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+    </div>
+</body>

diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-001.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-001.html
new file mode 100644 (file)
index 0000000..0342994
--- /dev/null
+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-001.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<style>
+    .container {
+        width: 300px;
+        font: 10px/1 Ahem;
+    }
+    .float {
+        float: left;
+        width: 100px;
+        height: 100px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 50px;
+        margin: 20px;
+        background-color: blue;
+        background-clip: padding-box;
+        -webkit-shape-outside: padding-box;
+    }
+</style>
+<body>
+    <p>The black squares should follow the right side of the blue shape. They should not overlap the shape.</p>
+    <div class="container">
+        <div class="float"></div>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+    </div>
+</body>

diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-002-expected.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-002-expected.html
new file mode 100644 (file)
index 0000000..c6eaa78
--- /dev/null
+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-002-expected.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<style>
+    .container {
+        width: 300px;
+        font: 10px/1 Ahem;
+    }
+    .float {
+        float: left;
+        width: 100px;
+        height: 100px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 50px 70px 60px 40px / 40px 60px 70px 50px;
+        margin: 20px;
+        background-color: blue;
+        background-clip: padding-box;
+        -webkit-shape-outside: inset(40px round 30px 50px 40px 20px / 20px 40px 50px 20px);
+    }
+</style>
+<body>
+    <p>The black squares should follow the right side of the blue shape. They should not overlap the shape.</p>
+    <div class="container">
+        <div class="float"></div>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+    </div>
+</body>

diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-002.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-002.html
new file mode 100644 (file)
index 0000000..222d47a
--- /dev/null
+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-002.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<style>
+    .container {
+        width: 300px;
+        font: 10px/1 Ahem;
+    }
+    .float {
+        float: left;
+        width: 100px;
+        height: 100px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 50px 70px 60px 40px / 40px 60px 70px 50px;
+        margin: 20px;
+        background-color: blue;
+        background-clip: padding-box;
+        -webkit-shape-outside: padding-box;
+    }
+</style>
+<body>
+    <p>The black squares should follow the right side of the blue shape. They should not overlap the shape.</p>
+    <div class="container">
+        <div class="float"></div>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+    </div>
+</body>

diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-003-expected.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-003-expected.html
new file mode 100644 (file)
index 0000000..dd9a172
--- /dev/null
+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-003-expected.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<style>
+    .container {
+        width: 300px;
+        font: 10px/1 Ahem;
+        -webkit-writing-mode: vertical-lr;
+    }
+    .float {
+        float: left;
+        width: 100px;
+        height: 200px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 50px 70px 60px 40px / 40px 60px 70px 50px;
+        margin: 20px;
+        background-color: blue;
+        background-clip: padding-box;
+        -webkit-shape-outside: inset(40px round 30px 50px 40px 20px / 20px 40px 50px 20px);
+    }
+</style>
+<body>
+    <p>The black squares should follow the bottom side of the blue shape. They should not overlap the shape.</p>
+    <div class="container">
+        <div class="float"></div>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+    </div>
+</body>

diff --git a/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-003.html b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-003.html
new file mode 100644 (file)
index 0000000..b0d20c1
--- /dev/null
+++ b/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-003.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<style>
+    .container {
+        width: 300px;
+        font: 10px/1 Ahem;
+        -webkit-writing-mode: vertical-lr;
+    }
+    .float {
+        float: left;
+        width: 100px;
+        height: 200px;
+        padding: 20px;
+        border: 20px solid rgba(0, 0, 0, 0);
+        border-radius: 50px 70px 60px 40px / 40px 60px 70px 50px;
+        margin: 20px;
+        background-color: blue;
+        background-clip: padding-box;
+        -webkit-shape-outside: padding-box;
+    }
+</style>
+<body>
+    <p>The black squares should follow the bottom side of the blue shape. They should not overlap the shape.</p>
+    <div class="container">
+        <div class="float"></div>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+        X<br>
+    </div>
+</body>

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index 0904988..1923daf 100644 (file)
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,62 @@
+2014-03-27  Bem Jones-Bey  <bjonesbe@adobe.com>
+
+        [CSS Shapes][css clip-path] rounded corner calculation for box shapes is wrong
+        https://bugs.webkit.org/show_bug.cgi?id=127982
+
+        Reviewed by Simon Fraser.
+
+        Calculate rounded corners for box shapes as defined in the CSS Shapes
+        spec.
+
+        Tests: css3/masking/clip-path-border-radius-border-box-000.html
+               css3/masking/clip-path-border-radius-content-box-000.html
+               css3/masking/clip-path-border-radius-content-box-001.html
+               css3/masking/clip-path-border-radius-padding-box-000.html
+               css3/masking/clip-path-border-radius-padding-box-001.html
+               fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-000.html
+               fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-001.html
+               fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-border-box-002.html
+               fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-000.html
+               fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-001.html
+               fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-002.html
+               fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-content-box-003.html
+               fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-000.html
+               fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-001.html
+               fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-002.html
+               fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-003.html
+               fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-margin-box-004.html
+               fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-000.html
+               fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-001.html
+               fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-002.html
+               fast/shapes/shape-outside-floats/shape-outside-floats-border-radius-padding-box-003.html
+
+        * platform/graphics/RoundedRect.h:
+        (WebCore::RoundedRect::Radii::transposedRadii): Transpose radii for
+            vertical writing modes.
+        (WebCore::RoundedRect::moveBy): Add method for use with clip path.
+        (WebCore::RoundedRect::transposedRect): Transpose rect for vertical
+            writing modes.
+        * rendering/RenderBox.h:
+        (WebCore::RenderBox::marginBoxRect): Return the margin box rect for
+            the RenderBox.
+        * rendering/RenderLayer.cpp:
+        (WebCore::RenderLayer::setupClipPath): Call the new function for the
+            rounded corner calculation.
+        * rendering/shapes/ShapeInfo.cpp:
+        (WebCore::ShapeInfo<RenderType>::computedShape): Call the new function
+            for the rounded corner calculation.
+        * rendering/shapes/BoxShape.cpp:
+        (WebCore::adjustRadiusForMarginBoxShape): Helper function for
+            computeRoundedRectForLayoutBoxShape.
+        (WebCore::computeMarginBoxShapeRadius): Ditto.
+        (WebCore::computeMarginBoxShapeRadii): Ditto.
+        (WebCore::computeRoundedRectForBoxShape): Utility function to do the
+            rounded corner calculation.
+        * rendering/shapes/BoxShape.h: Add new function.
+        * rendering/style/RenderStyle.h:
+        (WebCore::RenderStyle::getRoundedInnerBorderFor): Add default argument
+            values.
+
 2014-03-27  Commit Queue  <commit-queue@webkit.org>
 
         Unreviewed, rolling out r166364.

diff --git a/Source/WebCore/platform/graphics/RoundedRect.h b/Source/WebCore/platform/graphics/RoundedRect.h
index 3e62d38..ac14802 100644 (file)
--- a/Source/WebCore/platform/graphics/RoundedRect.h
+++ b/Source/WebCore/platform/graphics/RoundedRect.h
@@ -69,6 +69,8 @@ public:
         void shrink(const LayoutUnit& topWidth, const LayoutUnit& bottomWidth, const LayoutUnit& leftWidth, const LayoutUnit& rightWidth) { expand(-topWidth, -bottomWidth, -leftWidth, -rightWidth); }
         void shrink(const LayoutUnit& size) { shrink(size, size, size, size); }
 
+        Radii transposedRadii() const { return Radii(m_topLeft.transposedSize(), m_topRight.transposedSize(), m_bottomLeft.transposedSize(), m_bottomRight.transposedSize()); }
+
     private:
         LayoutSize m_topLeft;
         LayoutSize m_topRight;
@@ -89,6 +91,7 @@ public:
     void setRadii(const Radii& radii) { m_radii = radii; }
 
     void move(const LayoutSize& size) { m_rect.move(size); }
+    void moveBy(const LayoutPoint& offset) { m_rect.moveBy(offset); }
     void inflate(const LayoutUnit& size) { m_rect.inflate(size);  }
     void inflateWithRadii(const LayoutUnit& size);
     void expandRadii(const LayoutUnit& size) { m_radii.expand(size); }
@@ -106,6 +109,8 @@ public:
 
     FloatRoundedRect pixelSnappedRoundedRectForPainting(float deviceScaleFactor) const;
 
+    RoundedRect transposedRect() const { return RoundedRect(m_rect.transposedRect(), m_radii.transposedRadii()); }
+
 private:
     LayoutRect m_rect;
     Radii m_radii;

diff --git a/Source/WebCore/rendering/RenderBox.h b/Source/WebCore/rendering/RenderBox.h
index 8ca335b..f920c5c 100644 (file)
--- a/Source/WebCore/rendering/RenderBox.h
+++ b/Source/WebCore/rendering/RenderBox.h
@@ -152,6 +152,12 @@ public:
     IntRect pixelSnappedFrameRect() const { return pixelSnappedIntRect(m_frameRect); }
     void setFrameRect(const LayoutRect& rect) { m_frameRect = rect; }
 
+    LayoutRect marginBoxRect() const
+    {
+        LayoutRect box = borderBoxRect();
+        box.expand(m_marginBox);
+        return box;
+    }
     LayoutRect borderBoxRect() const { return LayoutRect(LayoutPoint(), size()); }
     LayoutRect paddingBoxRect() const { return LayoutRect(borderLeft(), borderTop(), contentWidth() + paddingLeft() + paddingRight(), contentHeight() + paddingTop() + paddingBottom()); }
     IntRect pixelSnappedBorderBoxRect() const { return IntRect(IntPoint(), m_frameRect.pixelSnappedSize()); }

diff --git a/Source/WebCore/rendering/RenderLayer.cpp b/Source/WebCore/rendering/RenderLayer.cpp
index c65d13c..004bcbe 100644 (file)
--- a/Source/WebCore/rendering/RenderLayer.cpp
+++ b/Source/WebCore/rendering/RenderLayer.cpp
@@ -45,6 +45,7 @@
 #include "RenderLayer.h"
 
 #include "AnimationController.h"
+#include "BoxShape.h"
 #include "ColumnInfo.h"
 #include "CSSPropertyNames.h"
 #include "Chrome.h"
@@ -3903,10 +3904,8 @@ bool RenderLayer::setupClipPath(GraphicsContext* context, const LayerPaintingInf
     if (style.clipPath()->type() == ClipPathOperation::Box) {
         BoxClipPathOperation& clippingPath = toBoxClipPathOperation(*(style.clipPath()));
 
-        LayoutRect referenceBox = computeReferenceBox(renderer(), clippingPath, offsetFromRoot, rootRelativeBounds);
-        // FIXME This does not properly compute the rounded corners as specified in all conditions.
-        // https://bugs.webkit.org/show_bug.cgi?id=127982
-        const RoundedRect& shapeRect = renderer().style().getRoundedBorderFor(referenceBox, &(renderer().view()));
+        RoundedRect shapeRect = computeRoundedRectForBoxShape(clippingPath.referenceBox(), toRenderBox(renderer()));
+        shapeRect.moveBy(offsetFromRoot);
 
         context->save();
         context->clipPath(clippingPath.pathForReferenceRect(shapeRect), RULE_NONZERO);

diff --git a/Source/WebCore/rendering/shapes/BoxShape.cpp b/Source/WebCore/rendering/shapes/BoxShape.cpp
index cb48b8a..08abe25 100644 (file)
--- a/Source/WebCore/rendering/shapes/BoxShape.cpp
+++ b/Source/WebCore/rendering/shapes/BoxShape.cpp
@@ -30,10 +30,70 @@
 #include "config.h"
 #include "BoxShape.h"
 
+#include "RenderBox.h"
 #include <wtf/MathExtras.h>
 
 namespace WebCore {
 
+static inline LayoutUnit adjustRadiusForMarginBoxShape(LayoutUnit radius, LayoutUnit margin)
+{
+    // This algorithm is defined in the CSS Shapes specifcation
+    if (!margin)
+        return radius;
+
+    LayoutUnit ratio = radius / margin;
+    if (ratio < 1)
+        return radius + (margin * (1 + pow(ratio - 1, 3)));
+
+    return radius + margin;
+}
+
+static inline LayoutSize computeMarginBoxShapeRadius(const LayoutSize& radius, const LayoutSize& adjacentMargins)
+{
+    return LayoutSize(adjustRadiusForMarginBoxShape(radius.width(), adjacentMargins.width()),
+        adjustRadiusForMarginBoxShape(radius.height(), adjacentMargins.height()));
+}
+
+static inline RoundedRect::Radii computeMarginBoxShapeRadii(const RoundedRect::Radii& radii, const RenderBox& renderer)
+{
+    return RoundedRect::Radii(computeMarginBoxShapeRadius(radii.topLeft(), LayoutSize(renderer.marginLeft(), renderer.marginTop())),
+        computeMarginBoxShapeRadius(radii.topRight(), LayoutSize(renderer.marginRight(), renderer.marginTop())),
+        computeMarginBoxShapeRadius(radii.bottomLeft(), LayoutSize(renderer.marginLeft(), renderer.marginBottom())),
+        computeMarginBoxShapeRadius(radii.bottomRight(), LayoutSize(renderer.marginRight(), renderer.marginBottom())));
+}
+
+RoundedRect computeRoundedRectForBoxShape(CSSBoxType box, const RenderBox& renderer)
+{
+    const RenderStyle& style = renderer.style();
+    switch (box) {
+    case MarginBox: {
+        if (!style.hasBorderRadius())
+            return RoundedRect(renderer.marginBoxRect(), RoundedRect::Radii());
+
+        LayoutRect marginBox = renderer.marginBoxRect();
+        RoundedRect::Radii radii = computeMarginBoxShapeRadii(style.getRoundedBorderFor(renderer.borderBoxRect(), &(renderer.view())).radii(), renderer);
+        radii.scale(calcBorderRadiiConstraintScaleFor(marginBox, radii));
+        return RoundedRect(marginBox, radii);
+    }
+    case PaddingBox:
+        return style.getRoundedInnerBorderFor(renderer.borderBoxRect());
+    case ContentBox:
+        return style.getRoundedInnerBorderFor(renderer.borderBoxRect(),
+            renderer.paddingTop() + renderer.borderTop(), renderer.paddingBottom() + renderer.borderBottom(),
+            renderer.paddingLeft() + renderer.borderLeft(), renderer.paddingRight() + renderer.borderRight());
+    // fill, stroke, view-box compute to border-box for HTML elements.
+    case BorderBox:
+    case Fill:
+    case Stroke:
+    case ViewBox:
+    case BoxMissing:
+        return style.getRoundedBorderFor(renderer.borderBoxRect(), &(renderer.view()));
+    }
+
+    ASSERT_NOT_REACHED();
+    return style.getRoundedBorderFor(renderer.borderBoxRect(), &(renderer.view()));
+}
+
 LayoutRect BoxShape::shapeMarginLogicalBoundingBox() const
 {
     FloatRect marginBounds(m_bounds.rect());

diff --git a/Source/WebCore/rendering/shapes/BoxShape.h b/Source/WebCore/rendering/shapes/BoxShape.h
index a1580af..ff32c95 100644 (file)
--- a/Source/WebCore/rendering/shapes/BoxShape.h
+++ b/Source/WebCore/rendering/shapes/BoxShape.h
@@ -35,6 +35,8 @@
 
 namespace WebCore {
 
+RoundedRect computeRoundedRectForBoxShape(CSSBoxType, const RenderBox&);
+
 class BoxShape : public Shape {
 public:
     BoxShape(const FloatRoundedRect& bounds)

diff --git a/Source/WebCore/rendering/shapes/ShapeInfo.cpp b/Source/WebCore/rendering/shapes/ShapeInfo.cpp
index 4c4e194..19ddda3 100644 (file)
--- a/Source/WebCore/rendering/shapes/ShapeInfo.cpp
+++ b/Source/WebCore/rendering/shapes/ShapeInfo.cpp
@@ -32,6 +32,7 @@
 
 #if ENABLE(CSS_SHAPES)
 
+#include "BoxShape.h"
 #include "LengthFunctions.h"
 #include "RenderBlock.h"
 #include "RenderBox.h"
@@ -141,9 +142,9 @@ const Shape& ShapeInfo<RenderType>::computedShape() const
         break;
     }
     case ShapeValue::Box: {
-        // FIXME This does not properly compute the rounded corners as specified in all conditions.
-        // https://bugs.webkit.org/show_bug.cgi?id=127982
-        const RoundedRect& shapeRect = m_renderer.style().getRoundedBorderFor(LayoutRect(LayoutPoint(), m_referenceBoxLogicalSize), &(m_renderer.view()));
+        RoundedRect shapeRect = computeRoundedRectForBoxShape(referenceBox(), m_renderer);
+        if (!this->styleForWritingMode().isHorizontalWritingMode())
+            shapeRect = shapeRect.transposedRect();
         m_shape = Shape::createBoxShape(shapeRect, writingMode, margin);
         break;
     }

diff --git a/Source/WebCore/rendering/style/RenderStyle.h b/Source/WebCore/rendering/style/RenderStyle.h
index aaa5c40..f447237 100644 (file)
--- a/Source/WebCore/rendering/style/RenderStyle.h
+++ b/Source/WebCore/rendering/style/RenderStyle.h
@@ -1095,7 +1095,7 @@ public:
     RoundedRect getRoundedInnerBorderFor(const LayoutRect& borderRect, bool includeLogicalLeftEdge = true, bool includeLogicalRightEdge = true) const;
 
     RoundedRect getRoundedInnerBorderFor(const LayoutRect& borderRect, LayoutUnit topWidth, LayoutUnit bottomWidth,
-        LayoutUnit leftWidth, LayoutUnit rightWidth, bool includeLogicalLeftEdge, bool includeLogicalRightEdge) const;
+        LayoutUnit leftWidth, LayoutUnit rightWidth, bool includeLogicalLeftEdge = true, bool includeLogicalRightEdge = true) const;
 
     void setBorderLeftWidth(float v) { SET_VAR(surround, border.m_left.m_width, v); }
     void setBorderLeftStyle(EBorderStyle v) { SET_VAR(surround, border.m_left.m_style, v); }