Commit fa49c82a authored by bjonesbe@adobe.com's avatar bjonesbe@adobe.com

[css shapes] Layout support for new circle shape syntax

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

Reviewed by Dirk Schulze.

Source/WebCore:

Implement support for doing layout with the new circle shape syntax,
inclduing basic animation support.

Tests: fast/shapes/shape-outside-floats/shape-outside-floats-circle-000.html
       fast/shapes/shape-outside-floats/shape-outside-floats-circle-001.html
       fast/shapes/shape-outside-floats/shape-outside-floats-circle-002.html
       fast/shapes/shape-outside-floats/shape-outside-floats-circle-003.html
       fast/shapes/shape-outside-floats/shape-outside-floats-circle-004.html
       fast/shapes/shape-outside-floats/shape-outside-floats-circle-005.html

* css/BasicShapeFunctions.cpp:
(WebCore::floatValueForCenterCoordinate): Used by both the CSS Shapes
    layout code and the clip path code.
* css/BasicShapeFunctions.h:
* css/CSSBasicShapes.cpp:
(WebCore::buildCircleString): Update to use appendLiteral, and remove
    call to reserveCapacity - if we find that it's actually slow when
    doing performance tests, we can hopefully do something smarter and
    less ugly than that.
* css/CSSParser.cpp:
(WebCore::CSSParser::parseShapeRadius): Fix a logic error that caused
    the radius keywords not to work properly.
* rendering/shapes/Shape.cpp:
(WebCore::Shape::createShape): Convert new circle to a layout shape.
* rendering/style/BasicShapes.cpp:
(WebCore::BasicShape::canBlend): Ignore circles with values that
    cannot be interpolated.
(WebCore::BasicShapeCircle::floatValueForRadiusInBox): Convert circle
    radius keywords to a float value.
(WebCore::BasicShapeCircle::path):
(WebCore::BasicShapeCircle::blend):
* rendering/style/BasicShapes.h:
(WebCore::BasicShapeCenterCoordinate::canBlend):
(WebCore::BasicShapeRadius::canBlend):

LayoutTests:

Add a few tests for the new circle syntax. The old tests in
LayoutTests/csswg will be removed when the old syntax is removed.

Also update existing shape-inside, animation, and clip-path tests to
test the new syntax.

* animations/resources/animation-test-helpers.js:
(parseBasicShape):
* LayoutTests/animations/resources/animation-test-helpers.js:
* LayoutTests/css3/masking/clip-path-animation-expected.txt:
* LayoutTests/css3/masking/clip-path-animation.html:
* LayoutTests/css3/masking/clip-path-circle-filter.html:
* LayoutTests/css3/masking/clip-path-circle-overflow-hidden.html:
* LayoutTests/css3/masking/clip-path-circle-overflow.html:
* LayoutTests/css3/masking/clip-path-circle-relative-overflow.html:
* LayoutTests/css3/masking/clip-path-circle.html:
* LayoutTests/css3/masking/clip-path-restore.html:
* LayoutTests/fast/shapes/parsing/parsing-shape-inside-expected.txt:
* LayoutTests/fast/shapes/parsing/parsing-shape-outside-expected.txt:
* LayoutTests/fast/shapes/parsing/parsing-test-utils.js:
* LayoutTests/fast/shapes/shape-inside/shape-inside-animation-expected.txt:
* LayoutTests/fast/shapes/shape-inside/shape-inside-animation.html:
* LayoutTests/fast/shapes/shape-inside/shape-inside-calc-crash-expected.txt:
* LayoutTests/fast/shapes/shape-inside/shape-inside-calc-crash.html:
* LayoutTests/fast/shapes/shape-inside/shape-inside-circle-padding.html:
* LayoutTests/fast/shapes/shape-inside/shape-inside-circle.html:
* LayoutTests/fast/shapes/shape-inside/shape-inside-dynamic-nested.html:
* LayoutTests/fast/shapes/shape-inside/shape-inside-empty-expected.html:
* LayoutTests/fast/shapes/shape-inside/shape-inside-empty.html:
* fast/shapes/shape-outside-floats/shape-outside-animation-expected.txt:
* fast/shapes/shape-outside-floats/shape-outside-animation.html:
* fast/shapes/shape-outside-floats/shape-outside-floats-circle-000-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-circle-000.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-circle-001-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-circle-001.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-circle-002-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-circle-002.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-circle-003-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-circle-003.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-circle-004-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-circle-004.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-circle-005-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-circle-005.html: Added.


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@159979 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 0c7bd82a
2013-12-02 Bem Jones-Bey <bjonesbe@adobe.com>
[css shapes] Layout support for new circle shape syntax
https://bugs.webkit.org/show_bug.cgi?id=124619
Reviewed by Dirk Schulze.
Add a few tests for the new circle syntax. The old tests in
LayoutTests/csswg will be removed when the old syntax is removed.
Also update existing shape-inside, animation, and clip-path tests to
test the new syntax.
* animations/resources/animation-test-helpers.js:
(parseBasicShape):
* LayoutTests/animations/resources/animation-test-helpers.js:
* LayoutTests/css3/masking/clip-path-animation-expected.txt:
* LayoutTests/css3/masking/clip-path-animation.html:
* LayoutTests/css3/masking/clip-path-circle-filter.html:
* LayoutTests/css3/masking/clip-path-circle-overflow-hidden.html:
* LayoutTests/css3/masking/clip-path-circle-overflow.html:
* LayoutTests/css3/masking/clip-path-circle-relative-overflow.html:
* LayoutTests/css3/masking/clip-path-circle.html:
* LayoutTests/css3/masking/clip-path-restore.html:
* LayoutTests/fast/shapes/parsing/parsing-shape-inside-expected.txt:
* LayoutTests/fast/shapes/parsing/parsing-shape-outside-expected.txt:
* LayoutTests/fast/shapes/parsing/parsing-test-utils.js:
* LayoutTests/fast/shapes/shape-inside/shape-inside-animation-expected.txt:
* LayoutTests/fast/shapes/shape-inside/shape-inside-animation.html:
* LayoutTests/fast/shapes/shape-inside/shape-inside-calc-crash-expected.txt:
* LayoutTests/fast/shapes/shape-inside/shape-inside-calc-crash.html:
* LayoutTests/fast/shapes/shape-inside/shape-inside-circle-padding.html:
* LayoutTests/fast/shapes/shape-inside/shape-inside-circle.html:
* LayoutTests/fast/shapes/shape-inside/shape-inside-dynamic-nested.html:
* LayoutTests/fast/shapes/shape-inside/shape-inside-empty-expected.html:
* LayoutTests/fast/shapes/shape-inside/shape-inside-empty.html:
* fast/shapes/shape-outside-floats/shape-outside-animation-expected.txt:
* fast/shapes/shape-outside-floats/shape-outside-animation.html:
* fast/shapes/shape-outside-floats/shape-outside-floats-circle-000-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-circle-000.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-circle-001-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-circle-001.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-circle-002-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-circle-002.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-circle-003-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-circle-003.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-circle-004-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-circle-004.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-circle-005-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-floats-circle-005.html: Added.
2013-12-02 Alexey Proskuryakov <ap@apple.com>
WebCrypto HMAC doesn't check key algorithm's hash
......
......@@ -216,7 +216,7 @@ function parseBasicShape(s)
matches = s.match("rectangle\\((.*)\\s*,\\s*(.*)\\s*,\\s*(.*)\\,\\s*(.*)\\)");
break;
case "circle":
matches = s.match("circle\\((.*)\\s*,\\s*(.*)\\s*,\\s*(.*)\\)");
matches = s.match("circle\\((.*)\\s+at\\s+(.*)\\s+(.*)\\)");
break;
case "ellipse":
matches = s.match("ellipse\\((.*)\\s*,\\s*(.*)\\s*,\\s*(.*)\\,\\s*(.*)\\)");
......
PASS - "webkitClipPath" property for "rectangle-box" element at 1s saw something close to: rectangle(10%, 10%, 80%, 80%, 0px, 0px)
PASS - "webkitClipPath" property for "circle-box" element at 1s saw something close to: circle(35%, 35%, 35%)
PASS - "webkitClipPath" property for "circle-box" element at 1s saw something close to: circle(35% at 35% 35%)
PASS - "webkitClipPath" property for "ellipse-box" element at 1s saw something close to: ellipse(35%, 35%, 35%, 30%)
PASS - "webkitClipPath" property for "polygon-box" element at 1s saw something close to: polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%)
PASS - "webkitClipPath" property for "none-box" element at 1s saw something close to: polygon(nonzero, 20% 20%, 80% 20%, 80% 80%, 20% 80%)
......
......@@ -37,8 +37,8 @@
}
@-webkit-keyframes circle-anim {
from { -webkit-clip-path: circle(50%, 50%, 50%); }
to { -webkit-clip-path: circle(20%, 20%, 20%); }
from { -webkit-clip-path: circle(50% at 50% 50%); }
to { -webkit-clip-path: circle(20% at 20% 20%); }
}
@-webkit-keyframes ellipse-anim {
......@@ -63,7 +63,7 @@
const expectedValues = [
// [animation-name, time, element-id, property, expected-value, tolerance]
["rectangle-anim", 1, "rectangle-box", "webkitClipPath", "rectangle(10%, 10%, 80%, 80%, 0px, 0px)", 0.05],
["circle-anim", 1, "circle-box", "webkitClipPath", "circle(35%, 35%, 35%)", 0.05],
["circle-anim", 1, "circle-box", "webkitClipPath", "circle(35% at 35% 35%)", 0.05],
["ellipse-anim", 1, "ellipse-box", "webkitClipPath", "ellipse(35%, 35%, 35%, 30%)", 0.05],
["polygon-anim", 1, "polygon-box", "webkitClipPath", "polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%)", 0.05],
["none-anim", 1, "none-box", "webkitClipPath", "polygon(nonzero, 20% 20%, 80% 20%, 80% 80%, 20% 80%)", 0],
......
......@@ -7,11 +7,11 @@ div {
height: 200px;
background-color: green;
-webkit-filter: blur(5px);
-webkit-clip-path: circle(100px, 100px, 90px);
-webkit-clip-path: circle(90px at 100px 100px);
}
</style>
</head>
<body>
<div>
</body>
</html>
\ No newline at end of file
</html>
......@@ -6,7 +6,7 @@
width: 200px;
height: 200px;
overflow: hidden;
-webkit-clip-path: circle(100px, 100px, 100px);
-webkit-clip-path: circle(100px at 100px 100px);
}
.child {
height: 400px;
......@@ -22,4 +22,4 @@
<div class="child"></div>
</div>
</body>
</html>
\ No newline at end of file
</html>
......@@ -7,11 +7,11 @@ div {
height: 200px;
background-color: green;
border: 20px solid black;
-webkit-clip-path: circle(130px, 130px, 130px);
-webkit-clip-path: circle(130px at 130px 130px);
}
</style>
</head>
<body>
<div><div>
</body>
</html>
\ No newline at end of file
</html>
......@@ -7,11 +7,11 @@ div {
height: 200px;
background-color: green;
border: 20px solid black;
-webkit-clip-path: circle(50%, 50%, 50%);
-webkit-clip-path: circle(50% at 50% 50%);
}
</style>
</head>
<body>
<div><div>
</body>
</html>
\ No newline at end of file
</html>
......@@ -6,11 +6,11 @@ div {
width: 200px;
height: 200px;
background-color: green;
-webkit-clip-path: circle(100px, 100px, 100px);
-webkit-clip-path: circle(100px at 100px 100px);
}
</style>
</head>
<body>
<div>
</body>
</html>
\ No newline at end of file
</html>
......@@ -9,7 +9,7 @@ body {
width: 200px;
height: 200px;
background-color: green;
-webkit-clip-path: circle(100px, 100px, 100px);
-webkit-clip-path: circle(100px at 100px 100px);
}
.red-marker {
/* We position a red dot behind, so that it is obvious when the test is failing. */
......@@ -29,4 +29,4 @@ body {
<div class="circle-clip-path"></div>
<div class="circle-clip-path"></div>
</body>
</html>
\ No newline at end of file
</html>
......@@ -27,6 +27,10 @@ PASS getCSSText("-webkit-shape-inside", "circle(10px, 20px, 30px)") is "circle(1
PASS getComputedStyleValue("-webkit-shape-inside", "circle(10px, 20px, 30px)") is "circle(10px, 20px, 30px)"
PASS getCSSText("-webkit-shape-inside", "circle()") is "circle()"
PASS getComputedStyleValue("-webkit-shape-inside", "circle()") is "circle(closest-side at 50% 50%)"
PASS getCSSText("-webkit-shape-inside", "circle(farthest-side)") is "circle(farthest-side)"
PASS getComputedStyleValue("-webkit-shape-inside", "circle(farthest-side)") is "circle(farthest-side at 50% 50%)"
PASS getCSSText("-webkit-shape-inside", "circle(closest-side)") is "circle(closest-side)"
PASS getComputedStyleValue("-webkit-shape-inside", "circle(closest-side)") is "circle(closest-side at 50% 50%)"
PASS getCSSText("-webkit-shape-inside", "circle(10px)") is "circle(10px)"
PASS getComputedStyleValue("-webkit-shape-inside", "circle(10px)") is "circle(10px at 50% 50%)"
PASS getCSSText("-webkit-shape-inside", "circle(10px at 10px)") is "circle(10px at 10px 50%)"
......
......@@ -27,6 +27,10 @@ PASS getCSSText("-webkit-shape-outside", "circle(10px, 20px, 30px)") is "circle(
PASS getComputedStyleValue("-webkit-shape-outside", "circle(10px, 20px, 30px)") is "circle(10px, 20px, 30px)"
PASS getCSSText("-webkit-shape-outside", "circle()") is "circle()"
PASS getComputedStyleValue("-webkit-shape-outside", "circle()") is "circle(closest-side at 50% 50%)"
PASS getCSSText("-webkit-shape-outside", "circle(farthest-side)") is "circle(farthest-side)"
PASS getComputedStyleValue("-webkit-shape-outside", "circle(farthest-side)") is "circle(farthest-side at 50% 50%)"
PASS getCSSText("-webkit-shape-outside", "circle(closest-side)") is "circle(closest-side)"
PASS getComputedStyleValue("-webkit-shape-outside", "circle(closest-side)") is "circle(closest-side at 50% 50%)"
PASS getCSSText("-webkit-shape-outside", "circle(10px)") is "circle(10px)"
PASS getComputedStyleValue("-webkit-shape-outside", "circle(10px)") is "circle(10px at 50% 50%)"
PASS getCSSText("-webkit-shape-outside", "circle(10px at 10px)") is "circle(10px at 10px 50%)"
......
......@@ -21,6 +21,8 @@ var validShapeValues = [
"circle(10px, 20px, 30px)", // FIXME: Remove this test once we do not support the deprecated CSS Shapes syntax anymore.
["circle()", "circle()", "circle(closest-side at 50% 50%)"],
["circle(farthest-side)", "circle(farthest-side)", "circle(farthest-side at 50% 50%)"],
["circle(closest-side)", "circle(closest-side)", "circle(closest-side at 50% 50%)"],
["circle(10px)", "circle(10px)", "circle(10px at 50% 50%)"],
["circle(10px at 10px)", "circle(10px at 10px 50%)"],
"circle(10px at 10px 10px)",
......
Moving Text Moving Text Moving Text Moving Text
PASS - "webkitShapeInside" property for "rectangle-box" element at 1s saw something close to: rectangle(10%, 10%, 80%, 80%, 0px, 0px)
PASS - "webkitShapeInside" property for "circle-box" element at 1s saw something close to: circle(35%, 35%, 35%)
PASS - "webkitShapeInside" property for "circle-box" element at 1s saw something close to: circle(35% at 35% 35%)
PASS - "webkitShapeInside" property for "ellipse-box" element at 1s saw something close to: ellipse(35%, 35%, 35%, 30%)
PASS - "webkitShapeInside" property for "polygon-box" element at 1s saw something close to: polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%)
......@@ -33,8 +33,8 @@
}
@-webkit-keyframes circle-anim {
from { -webkit-shape-inside: circle(50%, 50%, 50%); }
to { -webkit-shape-inside: circle(20%, 20%, 20%); }
from { -webkit-shape-inside: circle(50% at 50% 50%); }
to { -webkit-shape-inside: circle(20% at 20% 20%); }
}
@-webkit-keyframes ellipse-anim {
......@@ -53,7 +53,7 @@
const expectedValues = [
// [animation-name, time, element-id, property, expected-value, tolerance]
["rectangle-anim", 1, "rectangle-box", "webkitShapeInside", "rectangle(10%, 10%, 80%, 80%, 0px, 0px)", 0.05],
["circle-anim", 1, "circle-box", "webkitShapeInside", "circle(35%, 35%, 35%)", 0.05],
["circle-anim", 1, "circle-box", "webkitShapeInside", "circle(35% at 35% 35%)", 0.05],
["ellipse-anim", 1, "ellipse-box", "webkitShapeInside", "ellipse(35%, 35%, 35%, 30%)", 0.05],
["polygon-anim", 1, "polygon-box", "webkitShapeInside", "polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%)", 0.05],
];
......
PASS window.getComputedStyle(document.getElementById('shape-inside'))['-webkit-shape-inside'] is 'circle(30%, 50%, 50%)'
PASS window.getComputedStyle(document.getElementById('shape-inside'))['-webkit-shape-inside'] is 'circle(50% at 30% 50%)'
This test should not crash
Hello
......@@ -7,12 +7,12 @@ This is a regression test for https://bugs.webkit.org/show_bug.cgi?id=121020
<script src="../../../resources/js-test-pre.js"></script>
<script>
window.onload = function() {
shouldBe("window.getComputedStyle(document.getElementById('shape-inside'))['-webkit-shape-inside']", "'circle(30%, 50%, 50%)'");
shouldBe("window.getComputedStyle(document.getElementById('shape-inside'))['-webkit-shape-inside']", "'circle(50% at 30% 50%)'");
};
</script>
<style>
#shape-inside {
-webkit-shape-inside: circle(calc(50% - 20%), 50%, 50%);
-webkit-shape-inside: circle(50% at calc(50% - 20%) 50%);
}
</style>
<body>
......
......@@ -9,7 +9,7 @@
position: relative;
width: 400px;
height: 400px;
-webkit-shape-inside: circle(200px, 200px, 150px);
-webkit-shape-inside: circle(150px at 200px 200px);
-webkit-shape-padding: 50px;
font: 141.42px/1 Ahem, sans-serif;
......
......@@ -9,7 +9,7 @@
position: relative;
width: 400px;
height: 400px;
-webkit-shape-inside: circle(200px, 200px, 100px);
-webkit-shape-inside: circle(100px at 200px 200px);
font: 141.42px/1 Ahem, sans-serif;
color: green;
......
......@@ -55,13 +55,13 @@
-webkit-shape-inside: rectangle(10px, 10px, 180px, 180px);
}
.inside-alt {
-webkit-shape-inside: circle(50%, 50%, 50%);
-webkit-shape-inside: circle(50% at 50% 50%);
}
.outside {
-webkit-shape-outside: rectangle(10px, 10px, 180px, 180px);
}
.outside-alt {
-webkit-shape-inside: circle(50%, 50%, 50%);
-webkit-shape-inside: circle(50% at 50% 50%);
}
</style>
</head>
......@@ -89,4 +89,4 @@
<p>Removing shape-outside with a prior entry</p>
<div id='remove-outside-shape' class='container shape outside'><div>xxxxxxxxxx</div></div>
</body>
</html>
\ No newline at end of file
</html>
......@@ -21,7 +21,7 @@
<p>This text should be pushed down below the green rectangle. (There is a rectangle(0px, 0px, 1em, 0px) shape-inside CSS property on the green rectangle.)</p>
</div>
<div>
<p>This text should be pushed down below the green rectangle. (There is a circle(0px, 0px, 0px) shape-inside CSS property on the green rectangle.)</p>
<p>This text should be pushed down below the green rectangle. (There is a circle(0px at 0px 0px) shape-inside CSS property on the green rectangle.)</p>
</div>
<div>
<p>This text should be pushed down below the green rectangle. (There is an ellipse(0px, 0px, 0px, 1em) shape-inside CSS property on the green rectangle.)</p>
......
......@@ -19,7 +19,7 @@
}
#shape-inside-circle-radius0 {
-webkit-shape-inside: circle(0px, 0px, 0px);
-webkit-shape-inside: circle(0px at 0px 0px);
}
#shape-inside-ellipse-radiusX0 {
......@@ -48,7 +48,7 @@
This text should be pushed down below the green rectangle. (There is a rectangle(0px, 0px, 1em, 0px) shape-inside CSS property on the green rectangle.)
</p>
<p id="shape-inside-circle-radius0">
This text should be pushed down below the green rectangle. (There is a circle(0px, 0px, 0px) shape-inside CSS property on the green rectangle.)
This text should be pushed down below the green rectangle. (There is a circle(0px at 0px 0px) shape-inside CSS property on the green rectangle.)
</p>
<p id="shape-inside-ellipse-radiusX0">
This text should be pushed down below the green rectangle. (There is an ellipse(0px, 0px, 0px, 1em) shape-inside CSS property on the green rectangle.)
......
......@@ -3,7 +3,7 @@ Moving Text
Moving Text
Moving Text
PASS - "webkitShapeOutside" property for "rectangle-box" element at 1s saw something close to: rectangle(10%, 10%, 80%, 80%, 0px, 0px)
PASS - "webkitShapeOutside" property for "circle-box" element at 1s saw something close to: circle(35%, 35%, 35%)
PASS - "webkitShapeOutside" property for "circle-box" element at 1s saw something close to: circle(35% at 35% 35%)
PASS - "webkitShapeOutside" property for "ellipse-box" element at 1s saw something close to: ellipse(35%, 35%, 35%, 30%)
PASS - "webkitShapeOutside" property for "polygon-box" element at 1s saw something close to: polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%)
......@@ -37,8 +37,8 @@
}
@-webkit-keyframes circle-anim {
from { -webkit-shape-outside: circle(50%, 50%, 50%); }
to { -webkit-shape-outside: circle(20%, 20%, 20%); }
from { -webkit-shape-outside: circle(50% at 50% 50%); }
to { -webkit-shape-outside: circle(20% at 20% 20%); }
}
@-webkit-keyframes ellipse-anim {
......@@ -57,7 +57,7 @@
const expectedValues = [
// [animation-name, time, element-id, property, expected-value, tolerance]
["rectangle-anim", 1, "rectangle-box", "webkitShapeOutside", "rectangle(10%, 10%, 80%, 80%, 0px, 0px)", 0.05],
["circle-anim", 1, "circle-box", "webkitShapeOutside", "circle(35%, 35%, 35%)", 0.05],
["circle-anim", 1, "circle-box", "webkitShapeOutside", "circle(35% at 35% 35%)", 0.05],
["ellipse-anim", 1, "ellipse-box", "webkitShapeOutside", "ellipse(35%, 35%, 35%, 30%)", 0.05],
["polygon-anim", 1, "polygon-box", "webkitShapeOutside", "polygon(nonzero, 10% 10%, 90% 10%, 90% 90%, 10% 90%)", 0.05],
];
......
<!DOCTYPE html>
<style>
.container {
position: relative;
font: 20px/1 Ahem, sans-serif;
width: 500px;
height: 200px;
border: 1px solid black;
}
.circle {
z-index: -1;
width: 160px;
height: 160px;
border-radius: 80px;
background-color: blue;
overflow: hidden;
}
#left-circle-outline {
position: absolute;
top: 20px;
left: 0px;
}
#right-circle-outline {
position: absolute;
top: 20px;
right: 0px;
}
.left-circle-float-line {
float: left;
clear: left;
height: 20px;
}
.right-circle-float-line {
float: right;
clear: right;
height: 20px;
}
</style>
<body>
<p>The black squares should trace the right side of the circle's blue outline.</p>
<div class="container">
X<br/>
<div id="left-circle-outline" class="circle"></div>
<!-- generated left-rounded-rect-float-line divs will be inserted here -->
X<br/>
X<br/>
X<br/>
X<br/>
X<br/>
X<br/>
X<br/>
X<br/>
X
</div>
<p>The black squares should trace the left side of the circle's blue outline.</p>
<div class="container" style="text-align: right">
X<br/>
<div id="right-circle-outline" class="circle"></div>
<!-- generated right-rounded-rect-float-line divs will be inserted here -->
X<br/>
X<br/>
X<br/>
X<br/>
X<br/>
X<br/>
X<br/>
X<br/>
X
</div>
<script src="../resources/rounded-rectangle.js"></script>
<script src="../resources/subpixel-utils.js"></script>
<script>
genLeftRightRoundedRectFloatShapeOutsideRefTest({
roundedRect: {x: 0, y: 20, width: 160, height: 160, rx: 80, ry: 80},
containerWidth: 500,
containerHeight: 200,
lineHeight: 20,
floatElementClassSuffix: "circle-float-line",
insertElementIdSuffix: "circle-outline"
});
</script>
</body>
<!DOCTYPE html>
<title>Circle shape-outside on floats</title>
<style>
.container {
font: 20px/1 Ahem, sans-serif;
width: 500px;
height: 200px;
border: 1px solid black;
}
.circle {
width: 160px;
height: 160px;
background-color: blue;
overflow: hidden;
border-radius: 80px;
-webkit-shape-outside: circle(80px at 80px 80px);
}
</style>
<body>
<p>The black squares should trace the right side of the circle's blue outline.</p>
<div class="container">
X<br/>
<div style="float: left" class="circle"></div>
X<br/>
X<br/>
X<br/>
X<br/>
X<br/>
X<br/>
X<br/>
X<br/>
X
</div>
<p>The black squares should trace the left side of the circle's blue outline.</p>
<div class="container" style="text-align: right">
X<br/>
<div style="float: right" class="circle"></div>
X<br/>
X<br/>
X<br/>
X<br/>
X<br/>
X<br/>
X<br/>
X<br/>
X
</div>
</body>
<!DOCTYPE html>
<style>
.container {
font: 40px/1 Ahem, sans-serif;
line-height: 40px;
width: 110px;
height: 40px;
overflow: hidden;
white-space: nowrap;
color: green;
}
.circle {
width: 138px;
height: 40px;
background-color: green;
}
</style>
<body>
<p>You should see a green rectangle. You shouldn't see any red.</p>
<div class="container">
<div style="float: left" class="circle"></div>
X
</div>
<div class="container" style="text-align: right">
<div style="float: right" class="circle"></div>
X
</div>
</body>
<!DOCTYPE html>
<title>Circle shape-outside on floats with percentage radius</title>
<style>
.container {
font: 40px/1 Ahem, sans-serif;
line-height: 40px;
width: 110px;
height: 40px;
overflow: hidden;
white-space: nowrap;
background-color: red;
color: green;
}
.circle {
width: 80px;
height: 40px;
background-color: green;
-webkit-shape-outside: circle(50% at 50% 50%) content-box;
}
</style>
<body>
<p>You should see a green rectangle. You shouldn't see any red.</p>
<div class="container">
<div style="float: left; margin-right: 40px;" class="circle"></div>
X
</div>
<div class="container" style="text-align: right">
<div style="float: right; margin-left: 40px;" class="circle"></div>
X
</div>
</body>
<!DOCTYPE html>
<style>
.container {
font: 40px/1 Ahem, sans-serif;
line-height: 40px;
width: 110px;
height: 40px;
overflow: hidden;
white-space: nowrap;
color: green;
}
.circle {