Diff
Modified: trunk/LayoutTests/ChangeLog (145981 => 145982)
--- trunk/LayoutTests/ChangeLog 2013-03-16 04:37:48 UTC (rev 145981)
+++ trunk/LayoutTests/ChangeLog 2013-03-16 04:40:04 UTC (rev 145982)
@@ -1,3 +1,26 @@
+2013-03-15 Bem Jones-Bey <[email protected]>
+
+ [CSS Exclusions] shape-outside on floats for circle and ellipse shapes
+ https://bugs.webkit.org/show_bug.cgi?id=98673
+
+ Reviewed by Dirk Schulze.
+
+ Tests for circles and ellipses on floats.
+
+ * fast/exclusions/resources/rounded-rectangle.js:
+ (defined): Helper function to test and see if a js value is defined.
+ (convertToRoundedRect): Convert a circle or ellipse dimensions to a rounded rect.
+ (generateShapeOutsideOnFloat): Add ability to generate circles and
+ ellipses, since they are just special cases of rounded rectangles.
+ (generateSimulatedShapeOutsideOnFloat): Add ability to simulate
+ circles and ellipses, by treating them as rounded rectangles. Also
+ fix minor style issue with an if statement.
+ (xOutset): Remove unneeded condition in if statement.
+ * fast/exclusions/shape-outside-floats/shape-outside-floats-simple-circle-expected.html: Added.
+ * fast/exclusions/shape-outside-floats/shape-outside-floats-simple-circle.html: Added.
+ * fast/exclusions/shape-outside-floats/shape-outside-floats-simple-ellipse-expected.html: Added.
+ * fast/exclusions/shape-outside-floats/shape-outside-floats-simple-ellipse.html: Added.
+
2013-03-15 Simon Fraser <[email protected]>
Rebaseline after r145977.
Modified: trunk/LayoutTests/fast/exclusions/resources/rounded-rectangle.js (145981 => 145982)
--- trunk/LayoutTests/fast/exclusions/resources/rounded-rectangle.js 2013-03-16 04:37:48 UTC (rev 145981)
+++ trunk/LayoutTests/fast/exclusions/resources/rounded-rectangle.js 2013-03-16 04:40:04 UTC (rev 145982)
@@ -1,6 +1,29 @@
if (window.internals)
window.internals.settings.setCSSExclusionsEnabled(true);
+function defined(value) { return typeof value !== "undefined"; }
+
+function convertToRoundedRect(dimensions) {
+ if (defined(dimensions.shapeCenterX) && defined(dimensions.shapeCenterY)) {
+ if (defined(dimensions.shapeRadius)) {
+ // Convert a circle.
+ dimensions.shapeX = dimensions.shapeCenterX - dimensions.shapeRadius;
+ dimensions.shapeY = dimensions.shapeCenterY - dimensions.shapeRadius;
+ dimensions.shapeWidth = dimensions.shapeRadius * 2;
+ dimensions.shapeHeight = dimensions.shapeRadius * 2;
+ dimensions.shapeRadiusX = dimensions.shapeRadius;
+ dimensions.shapeRadiusY = dimensions.shapeRadius;
+ } else {
+ // Convert an ellipse.
+ dimensions.shapeX = dimensions.shapeCenterX - dimensions.shapeRadiusX;
+ dimensions.shapeY = dimensions.shapeCenterY - dimensions.shapeRadiusY;
+ dimensions.shapeWidth = dimensions.shapeRadiusX * 2;
+ dimensions.shapeHeight = dimensions.shapeRadiusY * 2;
+ }
+ }
+ // Otherwise, we have a rounded rect, so no conversion is needed.
+}
+
function xFromEllipseCenter(yFromEllipseCenter, radiusX, radiusY) {
return radiusX * Math.sqrt(1 - Math.pow(yFromEllipseCenter / radiusY, 2));
}
@@ -20,7 +43,7 @@
function xOutset(dimensions, lineTop, lineBottom) {
var left = 0;
- if (lineTop < dimensions.shapeHeight && lineBottom > dimensions.shapeHeight)
+ if (lineBottom > dimensions.shapeHeight)
lineBottom = dimensions.shapeHeight;
if (lineTop < dimensions.shapeHeight && (lineTop < dimensions.shapeRadiusY || lineBottom > dimensions.shapeHeight - dimensions.shapeRadiusY)) {
var yFromEllipseCenter;
@@ -131,21 +154,43 @@
}
function generateShapeOutsideOnFloat(elementId, stylesheet, dimensions, floatValue, lineHeight) {
- stylesheet.insertRule("#" + elementId + " { "
- + "-webkit-shape-outside: rectangle("
- + dimensions.shapeX + "px, "
- + dimensions.shapeY + "px, "
- + dimensions.shapeWidth + "px, "
- + dimensions.shapeHeight + "px, "
- + dimensions.shapeRadiusX + "px, "
- + dimensions.shapeRadiusY + "px); "
- + "float: " + floatValue + "; }");
+ if (defined(dimensions.shapeCenterX) && defined(dimensions.shapeCenterY)) { // circle or ellipse
+ if (defined(dimensions.shapeRadius)) {
+ stylesheet.insertRule("#" + elementId + " { "
+ + "-webkit-shape-outside: circle("
+ + dimensions.shapeCenterX + "px, "
+ + dimensions.shapeCenterY + "px, "
+ + dimensions.shapeRadius + "px); "
+ + "float: " + floatValue + "; }");
+ } else {
+ stylesheet.insertRule("#" + elementId + " { "
+ + "-webkit-shape-outside: ellipse("
+ + dimensions.shapeCenterX + "px, "
+ + dimensions.shapeCenterY + "px, "
+ + dimensions.shapeRadiusX + "px, "
+ + dimensions.shapeRadiusY + "px); "
+ + "float: " + floatValue + "; }");
+ }
+ } else {
+ stylesheet.insertRule("#" + elementId + " { "
+ + "-webkit-shape-outside: rectangle("
+ + dimensions.shapeX + "px, "
+ + dimensions.shapeY + "px, "
+ + dimensions.shapeWidth + "px, "
+ + dimensions.shapeHeight + "px, "
+ + dimensions.shapeRadiusX + "px, "
+ + dimensions.shapeRadiusY + "px); "
+ + "float: " + floatValue + "; }");
+ }
+ convertToRoundedRect(dimensions);
simulateShapeOutline(elementId, stylesheet, dimensions);
}
// Note that this does not attempt to simulate where the float content would be
// if the shape's X and Y are not 0.
function generateSimulatedShapeOutsideOnFloat(elementId, stylesheet, dimensions, floatValue, lineHeight) {
+ convertToRoundedRect(dimensions);
+
var simpleRectangle = dimensions.shapeRadiusX == 0 || dimensions.shapeRadiusY == 0;
var floatHeight = simpleRectangle ? dimensions.shapeHeight : lineHeight;
@@ -167,8 +212,7 @@
}
element.insertAdjacentHTML('afterend', simulationHTML);
- if (floatValue == "right") {
+ if (floatValue == "right")
dimensions.shapeX = -dimensions.shapeWidth;
- }
simulateShapeOutline(elementId, stylesheet, dimensions);
}
Added: trunk/LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-simple-circle-expected.html (0 => 145982)
--- trunk/LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-simple-circle-expected.html (rev 0)
+++ trunk/LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-simple-circle-expected.html 2013-03-16 04:40:04 UTC (rev 145982)
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src=""
+<script src=""
+<script>
+ window._onload_ = function () {
+ var stylesheet = document.getElementById("stylesheet");
+ generateSimulatedShapeOutsideOnFloat(
+ "left-circle", stylesheet.sheet,
+ {
+ 'shapeCenterX': 20, 'shapeCenterY': 20,
+ 'shapeRadius': 20
+ },
+ 'left',
+ 4
+ );
+ generateSimulatedShapeOutsideOnFloat(
+ "right-circle", stylesheet.sheet,
+ {
+ 'shapeCenterX': 20, 'shapeCenterY': 20,
+ 'shapeRadius': 20
+ },
+ 'right',
+ 4
+ );
+ }
+</script>
+<style id="stylesheet">
+.container {
+ font: 4px/1 Ahem, sans-serif;
+ width: 80px;
+ text-align: justify;
+ border: 1px solid black;
+}
+</style>
+</head>
+<body>
+ <h1><a href="" 98673</a> - [CSS Exclusions] shape-outside on floats for circle and ellipse shapes</h1>
+ <h2>The vertical black lines in the following box should wrap around the circle on the left.</h2>
+ <div style="height: 60px" class="container">
+ X X X X X X X X X X X X X X X X X X X X
+ <div id="left-circle"></div>
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X
+ </div>
+ <h2>The vertical black lines in the following box should wrap around the circle on the right.</h2>
+ <div style="height: 60px" class="container">
+ X X X X X X X X X X X X X X X X X X X X
+ <div id="right-circle"></div>
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X
+ </div>
+</body>
+</html>
+
Added: trunk/LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-simple-circle.html (0 => 145982)
--- trunk/LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-simple-circle.html (rev 0)
+++ trunk/LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-simple-circle.html 2013-03-16 04:40:04 UTC (rev 145982)
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src=""
+<script src=""
+<script>
+ window._onload_ = function () {
+ var stylesheet = document.getElementById("stylesheet");
+ generateShapeOutsideOnFloat(
+ "left-circle", stylesheet.sheet,
+ {
+ 'shapeCenterX': 20, 'shapeCenterY': 20,
+ 'shapeRadius': 20
+ },
+ 'left',
+ 4
+ );
+ generateShapeOutsideOnFloat(
+ "right-circle", stylesheet.sheet,
+ {
+ 'shapeCenterX': 20, 'shapeCenterY': 20,
+ 'shapeRadius': 20
+ },
+ 'right',
+ 4
+ );
+ }
+</script>
+<style id="stylesheet">
+.container {
+ font: 4px/1 Ahem, sans-serif;
+ width: 80px;
+ text-align: justify;
+ border: 1px solid black;
+}
+</style>
+</head>
+<body>
+ <h1><a href="" 98673</a> - [CSS Exclusions] shape-outside on floats for circle and ellipse shapes</h1>
+ <h2>The vertical black lines in the following box should wrap around the circle on the left.</h2>
+ <div style="height: 60px" class="container">
+ X X X X X X X X X X X X X X X X X X X X
+ <div id="left-circle"></div>
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X
+ </div>
+ <h2>The vertical black lines in the following box should wrap around the circle on the right.</h2>
+ <div style="height: 60px" class="container">
+ X X X X X X X X X X X X X X X X X X X X
+ <div id="right-circle"></div>
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X
+ </div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-simple-ellipse-expected.html (0 => 145982)
--- trunk/LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-simple-ellipse-expected.html (rev 0)
+++ trunk/LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-simple-ellipse-expected.html 2013-03-16 04:40:04 UTC (rev 145982)
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src=""
+<script src=""
+<script>
+ window._onload_ = function () {
+ var stylesheet = document.getElementById("stylesheet");
+ generateSimulatedShapeOutsideOnFloat(
+ "left-ellipse", stylesheet.sheet,
+ {
+ 'shapeCenterX': 40, 'shapeCenterY': 20,
+ 'shapeRadiusX': 40, 'shapeRadiusY': 20,
+ },
+ 'left',
+ 4
+ );
+ generateSimulatedShapeOutsideOnFloat(
+ "right-ellipse", stylesheet.sheet,
+ {
+ 'shapeCenterX': 40, 'shapeCenterY': 20,
+ 'shapeRadiusX': 40, 'shapeRadiusY': 20,
+ },
+ 'right',
+ 4
+ );
+ }
+</script>
+<style id="stylesheet">
+.container {
+ font: 4px/1 Ahem, sans-serif;
+ width: 160px;
+ text-align: justify;
+ border: 1px solid black;
+}
+</style>
+</head>
+<body>
+ <h1><a href="" 98673</a> - [CSS Exclusions] shape-outside on floats for circle and ellipse shapes</h1>
+ <h2>The vertical black lines in the following box should wrap around the ellipse on the left.</h2>
+ <div style="height: 48px" class="container">
+ X X X X X X X X X X X X X X X X X X X X
+ <div id="left-ellipse"></div>
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X
+ </div>
+ <h2>The vertical black lines in the following box should wrap around the ellipse on the right.</h2>
+ <div style="height: 48px" class="container">
+ X X X X X X X X X X X X X X X X X X X X
+ <div id="right-ellipse"></div>
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X
+ </div>
+</body>
+</html>
+
Added: trunk/LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-simple-ellipse.html (0 => 145982)
--- trunk/LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-simple-ellipse.html (rev 0)
+++ trunk/LayoutTests/fast/exclusions/shape-outside-floats/shape-outside-floats-simple-ellipse.html 2013-03-16 04:40:04 UTC (rev 145982)
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src=""
+<script src=""
+<script>
+ window._onload_ = function () {
+ var stylesheet = document.getElementById("stylesheet");
+ generateShapeOutsideOnFloat(
+ "left-ellipse", stylesheet.sheet,
+ {
+ 'shapeCenterX': 40, 'shapeCenterY': 20,
+ 'shapeRadiusX': 40, 'shapeRadiusY': 20,
+ },
+ 'left',
+ 4
+ );
+ generateShapeOutsideOnFloat(
+ "right-ellipse", stylesheet.sheet,
+ {
+ 'shapeCenterX': 40, 'shapeCenterY': 20,
+ 'shapeRadiusX': 40, 'shapeRadiusY': 20,
+ },
+ 'right',
+ 4
+ );
+ }
+</script>
+<style id="stylesheet">
+.container {
+ font: 4px/1 Ahem, sans-serif;
+ width: 160px;
+ text-align: justify;
+ border: 1px solid black;
+}
+</style>
+</head>
+<body>
+ <h1><a href="" 98673</a> - [CSS Exclusions] shape-outside on floats for circle and ellipse shapes</h1>
+ <h2>The vertical black lines in the following box should wrap around the ellipse on the left.</h2>
+ <div style="height: 48px" class="container">
+ X X X X X X X X X X X X X X X X X X X X
+ <div id="left-ellipse"></div>
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X
+ </div>
+ <h2>The vertical black lines in the following box should wrap around the ellipse on the right.</h2>
+ <div style="height: 48px" class="container">
+ X X X X X X X X X X X X X X X X X X X X
+ <div id="right-ellipse"></div>
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X X X X X X X X X X X X X X X
+ X X X X X X
+ </div>
+</body>
+</html>
+
Modified: trunk/Source/WebCore/ChangeLog (145981 => 145982)
--- trunk/Source/WebCore/ChangeLog 2013-03-16 04:37:48 UTC (rev 145981)
+++ trunk/Source/WebCore/ChangeLog 2013-03-16 04:40:04 UTC (rev 145982)
@@ -1,3 +1,22 @@
+2013-03-15 Bem Jones-Bey <[email protected]>
+
+ [CSS Exclusions] shape-outside on floats for circle and ellipse shapes
+ https://bugs.webkit.org/show_bug.cgi?id=98673
+
+ Reviewed by Dirk Schulze.
+
+ Enable circles and ellipses for shape-outside on floats. Most of the
+ code already supports them, just needed to turn them on and add tests.
+
+ Tests: fast/exclusions/shape-outside-floats/shape-outside-floats-simple-circle.html
+ fast/exclusions/shape-outside-floats/shape-outside-floats-simple-ellipse.html
+
+ * rendering/ExclusionShapeOutsideInfo.cpp:
+ (WebCore::ExclusionShapeOutsideInfo::isEnabledFor): Enable circles and
+ ellipses. Also add a check for if the RenderBox is floating, since
+ that test should have been there all along, as shape outside is
+ only supported on floats for now.
+
2013-03-15 Christian Biesinger <[email protected]>
Convert old flexbox uses in html.css to new flexbox (non-<select>)
Modified: trunk/Source/WebCore/rendering/ExclusionShapeOutsideInfo.cpp (145981 => 145982)
--- trunk/Source/WebCore/rendering/ExclusionShapeOutsideInfo.cpp 2013-03-16 04:37:48 UTC (rev 145981)
+++ trunk/Source/WebCore/rendering/ExclusionShapeOutsideInfo.cpp 2013-03-16 04:40:04 UTC (rev 145982)
@@ -38,13 +38,8 @@
namespace WebCore {
bool ExclusionShapeOutsideInfo::isEnabledFor(const RenderBox* box)
{
- // FIXME: Enable shape outside for non-rectangular shapes! (bug 98664)
ExclusionShapeValue* value = box->style()->shapeOutside();
- return value && (value->type() == ExclusionShapeValue::SHAPE)
- && (
- (value->shape()->type() == BasicShape::BASIC_SHAPE_RECTANGLE)
- || (value->shape()->type() == BasicShape::BASIC_SHAPE_POLYGON)
- );
+ return (box->isFloating() && value && value->type() == ExclusionShapeValue::SHAPE) ? value->shape() : 0;
}
bool ExclusionShapeOutsideInfo::computeSegmentsForLine(LayoutUnit lineTop, LayoutUnit lineHeight)
