Changeset 145982 in webkit
- Timestamp:
- Mar 15, 2013 9:40:04 PM (11 years ago)
- Location:
- trunk
- Files:
-
- 4 added
- 4 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/LayoutTests/ChangeLog
r145980 r145982 1 2013-03-15 Bem Jones-Bey <bjonesbe@adobe.com> 2 3 [CSS Exclusions] shape-outside on floats for circle and ellipse shapes 4 https://bugs.webkit.org/show_bug.cgi?id=98673 5 6 Reviewed by Dirk Schulze. 7 8 Tests for circles and ellipses on floats. 9 10 * fast/exclusions/resources/rounded-rectangle.js: 11 (defined): Helper function to test and see if a js value is defined. 12 (convertToRoundedRect): Convert a circle or ellipse dimensions to a rounded rect. 13 (generateShapeOutsideOnFloat): Add ability to generate circles and 14 ellipses, since they are just special cases of rounded rectangles. 15 (generateSimulatedShapeOutsideOnFloat): Add ability to simulate 16 circles and ellipses, by treating them as rounded rectangles. Also 17 fix minor style issue with an if statement. 18 (xOutset): Remove unneeded condition in if statement. 19 * fast/exclusions/shape-outside-floats/shape-outside-floats-simple-circle-expected.html: Added. 20 * fast/exclusions/shape-outside-floats/shape-outside-floats-simple-circle.html: Added. 21 * fast/exclusions/shape-outside-floats/shape-outside-floats-simple-ellipse-expected.html: Added. 22 * fast/exclusions/shape-outside-floats/shape-outside-floats-simple-ellipse.html: Added. 23 1 24 2013-03-15 Simon Fraser <simon.fraser@apple.com> 2 25 -
trunk/LayoutTests/fast/exclusions/resources/rounded-rectangle.js
r145847 r145982 1 1 if (window.internals) 2 2 window.internals.settings.setCSSExclusionsEnabled(true); 3 4 function defined(value) { return typeof value !== "undefined"; } 5 6 function convertToRoundedRect(dimensions) { 7 if (defined(dimensions.shapeCenterX) && defined(dimensions.shapeCenterY)) { 8 if (defined(dimensions.shapeRadius)) { 9 // Convert a circle. 10 dimensions.shapeX = dimensions.shapeCenterX - dimensions.shapeRadius; 11 dimensions.shapeY = dimensions.shapeCenterY - dimensions.shapeRadius; 12 dimensions.shapeWidth = dimensions.shapeRadius * 2; 13 dimensions.shapeHeight = dimensions.shapeRadius * 2; 14 dimensions.shapeRadiusX = dimensions.shapeRadius; 15 dimensions.shapeRadiusY = dimensions.shapeRadius; 16 } else { 17 // Convert an ellipse. 18 dimensions.shapeX = dimensions.shapeCenterX - dimensions.shapeRadiusX; 19 dimensions.shapeY = dimensions.shapeCenterY - dimensions.shapeRadiusY; 20 dimensions.shapeWidth = dimensions.shapeRadiusX * 2; 21 dimensions.shapeHeight = dimensions.shapeRadiusY * 2; 22 } 23 } 24 // Otherwise, we have a rounded rect, so no conversion is needed. 25 } 3 26 4 27 function xFromEllipseCenter(yFromEllipseCenter, radiusX, radiusY) { … … 21 44 function xOutset(dimensions, lineTop, lineBottom) { 22 45 var left = 0; 23 if (line Top < dimensions.shapeHeight && lineBottom > dimensions.shapeHeight)46 if (lineBottom > dimensions.shapeHeight) 24 47 lineBottom = dimensions.shapeHeight; 25 48 if (lineTop < dimensions.shapeHeight && (lineTop < dimensions.shapeRadiusY || lineBottom > dimensions.shapeHeight - dimensions.shapeRadiusY)) { … … 132 155 133 156 function generateShapeOutsideOnFloat(elementId, stylesheet, dimensions, floatValue, lineHeight) { 134 stylesheet.insertRule("#" + elementId + " { " 135 + "-webkit-shape-outside: rectangle(" 136 + dimensions.shapeX + "px, " 137 + dimensions.shapeY + "px, " 138 + dimensions.shapeWidth + "px, " 139 + dimensions.shapeHeight + "px, " 140 + dimensions.shapeRadiusX + "px, " 141 + dimensions.shapeRadiusY + "px); " 142 + "float: " + floatValue + "; }"); 157 if (defined(dimensions.shapeCenterX) && defined(dimensions.shapeCenterY)) { // circle or ellipse 158 if (defined(dimensions.shapeRadius)) { 159 stylesheet.insertRule("#" + elementId + " { " 160 + "-webkit-shape-outside: circle(" 161 + dimensions.shapeCenterX + "px, " 162 + dimensions.shapeCenterY + "px, " 163 + dimensions.shapeRadius + "px); " 164 + "float: " + floatValue + "; }"); 165 } else { 166 stylesheet.insertRule("#" + elementId + " { " 167 + "-webkit-shape-outside: ellipse(" 168 + dimensions.shapeCenterX + "px, " 169 + dimensions.shapeCenterY + "px, " 170 + dimensions.shapeRadiusX + "px, " 171 + dimensions.shapeRadiusY + "px); " 172 + "float: " + floatValue + "; }"); 173 } 174 } else { 175 stylesheet.insertRule("#" + elementId + " { " 176 + "-webkit-shape-outside: rectangle(" 177 + dimensions.shapeX + "px, " 178 + dimensions.shapeY + "px, " 179 + dimensions.shapeWidth + "px, " 180 + dimensions.shapeHeight + "px, " 181 + dimensions.shapeRadiusX + "px, " 182 + dimensions.shapeRadiusY + "px); " 183 + "float: " + floatValue + "; }"); 184 } 185 convertToRoundedRect(dimensions); 143 186 simulateShapeOutline(elementId, stylesheet, dimensions); 144 187 } … … 147 190 // if the shape's X and Y are not 0. 148 191 function generateSimulatedShapeOutsideOnFloat(elementId, stylesheet, dimensions, floatValue, lineHeight) { 192 convertToRoundedRect(dimensions); 193 149 194 var simpleRectangle = dimensions.shapeRadiusX == 0 || dimensions.shapeRadiusY == 0; 150 195 var floatHeight = simpleRectangle ? dimensions.shapeHeight : lineHeight; … … 168 213 169 214 element.insertAdjacentHTML('afterend', simulationHTML); 170 if (floatValue == "right") {215 if (floatValue == "right") 171 216 dimensions.shapeX = -dimensions.shapeWidth; 172 } 173 simulateShapeOutline(elementId, stylesheet, dimensions); 174 } 217 simulateShapeOutline(elementId, stylesheet, dimensions); 218 } -
trunk/Source/WebCore/ChangeLog
r145977 r145982 1 2013-03-15 Bem Jones-Bey <bjonesbe@adobe.com> 2 3 [CSS Exclusions] shape-outside on floats for circle and ellipse shapes 4 https://bugs.webkit.org/show_bug.cgi?id=98673 5 6 Reviewed by Dirk Schulze. 7 8 Enable circles and ellipses for shape-outside on floats. Most of the 9 code already supports them, just needed to turn them on and add tests. 10 11 Tests: fast/exclusions/shape-outside-floats/shape-outside-floats-simple-circle.html 12 fast/exclusions/shape-outside-floats/shape-outside-floats-simple-ellipse.html 13 14 * rendering/ExclusionShapeOutsideInfo.cpp: 15 (WebCore::ExclusionShapeOutsideInfo::isEnabledFor): Enable circles and 16 ellipses. Also add a check for if the RenderBox is floating, since 17 that test should have been there all along, as shape outside is 18 only supported on floats for now. 19 1 20 2013-03-15 Christian Biesinger <cbiesinger@chromium.org> 2 21 -
trunk/Source/WebCore/rendering/ExclusionShapeOutsideInfo.cpp
r144776 r145982 39 39 bool ExclusionShapeOutsideInfo::isEnabledFor(const RenderBox* box) 40 40 { 41 // FIXME: Enable shape outside for non-rectangular shapes! (bug 98664)42 41 ExclusionShapeValue* value = box->style()->shapeOutside(); 43 return value && (value->type() == ExclusionShapeValue::SHAPE) 44 && ( 45 (value->shape()->type() == BasicShape::BASIC_SHAPE_RECTANGLE) 46 || (value->shape()->type() == BasicShape::BASIC_SHAPE_POLYGON) 47 ); 42 return (box->isFloating() && value && value->type() == ExclusionShapeValue::SHAPE) ? value->shape() : 0; 48 43 } 49 44
Note: See TracChangeset
for help on using the changeset viewer.