Diff
Modified: trunk/LayoutTests/ChangeLog (157399 => 157400)
--- trunk/LayoutTests/ChangeLog 2013-10-14 14:17:33 UTC (rev 157399)
+++ trunk/LayoutTests/ChangeLog 2013-10-14 15:34:50 UTC (rev 157400)
@@ -1,3 +1,18 @@
+2013-10-14 Bear Travis <[email protected]>
+
+ [CSS Shapes] Shape-Margin should be animatable
+ https://bugs.webkit.org/show_bug.cgi?id=122524
+
+ Reviewed by Darin Adler.
+
+ Test that shape-margin can be set dynamically and content lays out correctly.
+ Also test that shape-margin can be manipulated through CSS Animations.
+
+ * fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-margin-expected.html: Added.
+ * fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-margin.html: Added.
+ * fast/shapes/shape-outside-floats/shape-outside-shape-margin-animation-expected.txt: Added.
+ * fast/shapes/shape-outside-floats/shape-outside-shape-margin-animation.html: Added.
+
2013-10-14 Krzysztof Czech <[email protected]>
[EFL] Accessibility gardening
Added: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-margin-expected.html (0 => 157400)
--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-margin-expected.html (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-margin-expected.html 2013-10-14 15:34:50 UTC (rev 157400)
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+ .container {
+ width: 200px;
+ height: 200px;
+ overflow-wrap: break-word;
+ border: 2px solid blue;
+ font: 50px/1 Ahem, sans-serif;
+ color: green;
+ overflow: hidden;
+ }
+ .shape {
+ float: left;
+ width: 0;
+ height: 0;
+ background-color: blue;
+ }
+
+ .margin25 {
+ width: 25px;
+ height: 25px;
+ }
+
+ .margin50 {
+ width: 50px;
+ height: 50px;
+ }
+</style>
+</head>
+<body>
+ <p>When shape-margin is modified dynamically, content affected by the shape's contour should relayout. For each test, you should see green blocks separated by white space, wrapping around a blue square in the upper left. This test requires the Ahem font.</p>
+
+ <p>Setting shape-margin with no prior entry</p>
+ <div id='add-shape-margin' class='container'><div class='shape margin50'></div>x x x x x x x x x x</div>
+
+ <p>Setting shape-margin with a prior entry</p>
+ <div id='change-shape-margin' class='container'><div class='shape margin25'></div>x x x x x x x x x x</div>
+
+ <p>Removing shape-margin with a prior entry</p>
+ <div id='remove-shape-margin' class='container'><div class='shape'></div>x x x x x x x x x x</div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-margin.html (0 => 157400)
--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-margin.html (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-margin.html 2013-10-14 15:34:50 UTC (rev 157400)
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script>
+ window._onload_ = function() {
+ // fetch offsetTop to force a layout
+ document.body.offsetTop;
+
+ var el = document.querySelector('#add-shape-margin .shape');
+ el.className = 'shape margin50';
+
+ el = document.querySelector('#change-shape-margin .shape');
+ el.className = 'shape margin25';
+
+ el = document.querySelector('#remove-shape-margin .shape');
+ el.className = 'shape';
+ }
+</script>
+<style>
+ .container {
+ width: 200px;
+ height: 200px;
+ overflow-wrap: break-word;
+ border: 2px solid blue;
+ font: 50px/1 Ahem, sans-serif;
+ color: green;
+ overflow: hidden;
+ }
+ .shape {
+ float: left;
+ position: relative;
+ width: 100px;
+ height: 100px;
+ -webkit-shape-outside: rectangle(0, 0, 0, 0);
+ }
+ .shape::before {
+ position: absolute;
+ display: block;
+ top: 0; left: 0;
+ width: 0;
+ height: 0;
+ background-color: blue;
+ content: ' ';
+ }
+
+ .margin25 {
+ -webkit-shape-margin: 25px;
+ }
+ .margin25::before {
+ width: 25px;
+ height: 25px;
+ }
+
+ .margin50 {
+ -webkit-shape-margin: 50px;
+ }
+ .margin50::before {
+ width: 50px;
+ height: 50px;
+ }
+</style>
+</head>
+<body>
+ <p>When shape-margin is modified dynamically, content affected by the shape's contour should relayout. For each test, you should see green blocks separated by white space, wrapping around a blue square in the upper left. This test requires the Ahem font.</p>
+
+ <p>Setting shape-margin with no prior entry</p>
+ <div id='add-shape-margin' class='container'><div class='shape'></div>x x x x x x x x x x</div>
+
+ <p>Setting shape-margin with a prior entry</p>
+ <div id='change-shape-margin' class='container'><div class='shape margin50'></div>x x x x x x x x x x</div>
+
+ <p>Removing shape-margin with a prior entry</p>
+ <div id='remove-shape-margin' class='container'><div class='shape margin50'></div>x x x x x x x x x x</div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-shape-margin-animation-expected.txt (0 => 157400)
--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-shape-margin-animation-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-shape-margin-animation-expected.txt 2013-10-14 15:34:50 UTC (rev 157400)
@@ -0,0 +1,3 @@
+Moving Text
+PASS - "-webkit-shape-margin" property for "length-box" element at 1s saw something close to: 50
+
Added: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-shape-margin-animation.html (0 => 157400)
--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-shape-margin-animation.html (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-shape-margin-animation.html 2013-10-14 15:34:50 UTC (rev 157400)
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+ <style>
+ .container {
+ width: 200px;
+ height: 200px;
+ }
+ .box {
+ height: 100px;
+ width: 100px;
+ -webkit-shape-outside: rectangle(0, 0, 0, 0);
+ float: left;
+ background: rgba(0, 0, 255, 0.5);
+ }
+
+ #length-box {
+ -webkit-animation: length-anim 2s linear;
+ }
+
+ @-webkit-keyframes length-anim {
+ from { -webkit-shape-margin: 0px; }
+ to { -webkit-shape-margin: 100px; }
+ }
+
+ </style>
+ <script src=""
+ <script type="text/_javascript_">
+ const expectedValues = [
+ // [animation-name, time, element-id, property, expected-value, tolerance]
+ ["length-anim", 1, "length-box", "-webkit-shape-margin", "50", 0.5],
+ ];
+
+ runAnimationTest(expectedValues);
+ </script>
+</head>
+<body>
+
+<div class='container'>
+ <div class="box" id="length-box"></div>
+ Moving Text
+</div>
+
+<div id="result">
+</div>
+</body>
+</html>
Modified: trunk/Source/WebCore/ChangeLog (157399 => 157400)
--- trunk/Source/WebCore/ChangeLog 2013-10-14 14:17:33 UTC (rev 157399)
+++ trunk/Source/WebCore/ChangeLog 2013-10-14 15:34:50 UTC (rev 157400)
@@ -1,3 +1,23 @@
+2013-10-14 Bear Travis <[email protected]>
+
+ [CSS Shapes] Shape-Margin should be animatable
+ https://bugs.webkit.org/show_bug.cgi?id=122524
+
+ Reviewed by Darin Adler.
+
+ Mark content for relayout after shape-margin changes, and add shape-margin
+ to the list of animatable properties.
+
+ Tests: fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-margin.html
+ fast/shapes/shape-outside-floats/shape-outside-shape-margin-animation.html
+
+ * page/animation/CSSPropertyAnimation.cpp:
+ (WebCore::CSSPropertyAnimationWrapperMap::CSSPropertyAnimationWrapperMap): Add
+ shape-margin to the map of animatable CSS properties.
+ * rendering/RenderBox.cpp:
+ (WebCore::RenderBox::updateShapeOutsideInfoAfterStyleChange): Compare shape-margins,
+ and mark dependent content for relayout if they have changed.
+
2013-10-14 Arvid Nilsson <[email protected]>
Don't crash after OpenGL robustness reset
Modified: trunk/Source/WebCore/page/animation/CSSPropertyAnimation.cpp (157399 => 157400)
--- trunk/Source/WebCore/page/animation/CSSPropertyAnimation.cpp 2013-10-14 14:17:33 UTC (rev 157399)
+++ trunk/Source/WebCore/page/animation/CSSPropertyAnimation.cpp 2013-10-14 15:34:50 UTC (rev 157400)
@@ -1246,6 +1246,7 @@
#if ENABLE(CSS_SHAPES)
new PropertyWrapperShape(CSSPropertyWebkitShapeInside, &RenderStyle::shapeInside, &RenderStyle::setShapeInside),
new PropertyWrapperShape(CSSPropertyWebkitShapeOutside, &RenderStyle::shapeOutside, &RenderStyle::setShapeOutside),
+ new LengthPropertyWrapper<Length>(CSSPropertyWebkitShapeMargin, &RenderStyle::shapeMargin, &RenderStyle::setShapeMargin),
new PropertyWrapper<float>(CSSPropertyWebkitShapeImageThreshold, &RenderStyle::shapeImageThreshold, &RenderStyle::setShapeImageThreshold),
#endif
Modified: trunk/Source/WebCore/rendering/RenderBox.cpp (157399 => 157400)
--- trunk/Source/WebCore/rendering/RenderBox.cpp 2013-10-14 14:17:33 UTC (rev 157399)
+++ trunk/Source/WebCore/rendering/RenderBox.cpp 2013-10-14 15:34:50 UTC (rev 157400)
@@ -383,14 +383,17 @@
#if ENABLE(CSS_SHAPES)
void RenderBox::updateShapeOutsideInfoAfterStyleChange(const RenderStyle& style, const RenderStyle* oldStyle)
{
- ShapeValue* shapeOutside = style.shapeOutside();
- ShapeValue* oldShapeOutside = oldStyle ? oldStyle->shapeOutside() : nullptr;
+ const ShapeValue* shapeOutside = style.shapeOutside();
+ const ShapeValue* oldShapeOutside = oldStyle ? oldStyle->shapeOutside() : nullptr;
+ Length shapeMargin = style.shapeMargin();
+ Length oldShapeMargin = oldStyle ? oldStyle->shapeMargin() : RenderStyle::initialShapeMargin();
+
float shapeImageThreshold = style.shapeImageThreshold();
float oldShapeImageThreshold = oldStyle ? oldStyle->shapeImageThreshold() : RenderStyle::initialShapeImageThreshold();
// FIXME: A future optimization would do a deep comparison for equality. (bug 100811)
- if (shapeOutside == oldShapeOutside && shapeImageThreshold == oldShapeImageThreshold)
+ if (shapeOutside == oldShapeOutside && shapeMargin == oldShapeMargin && shapeImageThreshold == oldShapeImageThreshold)
return;
if (!shapeOutside)
