Diff
Modified: trunk/LayoutTests/ChangeLog (157308 => 157309)
--- trunk/LayoutTests/ChangeLog 2013-10-11 17:57:34 UTC (rev 157308)
+++ trunk/LayoutTests/ChangeLog 2013-10-11 18:01:39 UTC (rev 157309)
@@ -1,3 +1,20 @@
+2013-10-11 Bear Travis <[email protected]>
+
+ [CSS Shapes] Shape-Image-Threshold should be animatable
+ https://bugs.webkit.org/show_bug.cgi?id=122622
+
+ Reviewed by Darin Adler.
+
+ Adding tests for dynamically changing shape-image threshold via JS and CSS
+ animations. Included are some SVG resources used as the shape image sources.
+
+ * fast/shapes/resources/svg-shape-002.svg: Added.
+ * fast/shapes/resources/svg-shape-003.svg: Added.
+ * fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-image-threshold-expected.html: Added.
+ * fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-image-threshold.html: Added.
+ * fast/shapes/shape-outside-floats/shape-outside-shape-image-threshold-animation-expected.txt: Added.
+ * fast/shapes/shape-outside-floats/shape-outside-shape-image-threshold-animation.html: Added.
+
2013-10-11 Bem Jones-Bey <[email protected]>
[CSS Shapes] New positioning model: Negative margins
Added: trunk/LayoutTests/fast/shapes/resources/svg-shape-002.svg (0 => 157309)
--- trunk/LayoutTests/fast/shapes/resources/svg-shape-002.svg (rev 0)
+++ trunk/LayoutTests/fast/shapes/resources/svg-shape-002.svg 2013-10-11 18:01:39 UTC (rev 157309)
@@ -0,0 +1,6 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 1' preserveAspectRatio='none' width='100px' height='100px'>
+ <rect width='1' height='1' fill='rgba(255, 0, 0, 1)'/>
+ <rect x='1' width='1' height='1' fill='rgba(255, 255, 0, 0.75)'/>
+ <rect x='2' width='1' height='1' fill='rgba(0, 255, 0, 0.5)' />
+ <rect x='3' width='1' height='1' fill='rgba(0, 0, 255, 0.25)' />
+</svg>
Added: trunk/LayoutTests/fast/shapes/resources/svg-shape-003.svg (0 => 157309)
--- trunk/LayoutTests/fast/shapes/resources/svg-shape-003.svg (rev 0)
+++ trunk/LayoutTests/fast/shapes/resources/svg-shape-003.svg 2013-10-11 18:01:39 UTC (rev 157309)
@@ -0,0 +1,9 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none' width='100px' height='100px'>
+ <defs>
+ <linearGradient id='gradient' x1='0' x2='1' y1='0' y2='0'>
+ <stop offset='0%' stop-color='blue' stop-opacity='1' />
+ <stop offset='100%' stop-color='blue' stop-opacity='0' />
+ </linearGradient>
+ </defs>
+ <rect width='1' height='1' fill='url(#gradient)' />
+</svg>
Added: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-image-threshold-expected.html (0 => 157309)
--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-image-threshold-expected.html (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-image-threshold-expected.html 2013-10-11 18:01:39 UTC (rev 157309)
@@ -0,0 +1,58 @@
+<!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;
+ position: relative;
+ width: 100px;
+ height: 100px;
+ -webkit-shape-outside: url('../resources/svg-shape-002.svg');
+ }
+ .shape::before {
+ position: absolute;
+ display: block;
+ top: 0; left: 0;
+ width: 100px;
+ height: 100px;
+ background-color: blue;
+ content: ' ';
+ }
+
+ .threshold25 {
+ -webkit-shape-image-threshold: 0.26;
+ }
+ .threshold25::before {
+ width: 75px;
+ }
+
+ .threshold75 {
+ -webkit-shape-image-threshold: 0.76;
+ }
+ .threshold75::before {
+ width: 25px;
+ }
+</style>
+</head>
+<body>
+ <p>When shape-image-threshold 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 rectangle in the upper left. This test requires the Ahem font.</p>
+
+ <p>Setting shape-image-threshold with no prior entry</p>
+ <div id='add-shape-image-threshold' class='container'><div class='shape threshold25'></div>x x x x x x x x x x</div>
+
+ <p>Setting shape-image-threshold with a prior entry</p>
+ <div id='change-shape-image-threshold' class='container'><div class='shape threshold75'></div>x x x x x x x x x x</div>
+
+ <p>Removing shape-image-threshold with a prior entry</p>
+ <div id='remove-shape-image-threshold' 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-image-threshold.html (0 => 157309)
--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-image-threshold.html (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-image-threshold.html 2013-10-11 18:01:39 UTC (rev 157309)
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script>
+ window._onload_ = function() {
+ // fetch offsetTop to force a layout
+ document.body.offsetTop;
+
+ var el = document.querySelector('#add-shape-image-threshold .shape');
+ el.style.setProperty('-webkit-shape-image-threshold', 0.25);
+ el.className = 'shape threshold25';
+
+ el = document.querySelector('#change-shape-image-threshold .shape');
+ el.className = 'shape threshold75';
+
+ el = document.querySelector('#remove-shape-image-threshold .shape');
+ el.className = 'shape';
+
+ console.log('accomplished!');
+ };
+</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: url('../resources/svg-shape-002.svg');
+ }
+ .shape::before {
+ position: absolute;
+ display: block;
+ top: 0; left: 0;
+ width: 100px;
+ height: 100px;
+ background-color: blue;
+ content: ' ';
+ }
+
+ .threshold25 {
+ -webkit-shape-image-threshold: 0.26;
+ }
+ .threshold25::before {
+ width: 75px;
+ }
+
+ .threshold75 {
+ -webkit-shape-image-threshold: 0.76;
+ }
+ .threshold75::before {
+ width: 25px;
+ }
+</style>
+</head>
+<body>
+ <p>When shape-image-threshold 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 rectangle in the upper left. This test requires the Ahem font.</p>
+
+ <p>Setting shape-image-threshold with no prior entry</p>
+ <div id='add-shape-image-threshold' class='container'><div class='shape'></div>x x x x x x x x x x</div>
+
+ <p>Setting shape-image-threshold with a prior entry</p>
+ <div id='change-shape-image-threshold' class='container'><div class='shape threshold25'></div>x x x x x x x x x x</div>
+
+ <p>Removing shape-image-threshold with a prior entry</p>
+ <div id='remove-shape-image-threshold' class='container'><div class='shape threshold25'></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-image-threshold-animation-expected.txt (0 => 157309)
--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-shape-image-threshold-animation-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-shape-image-threshold-animation-expected.txt 2013-10-11 18:01:39 UTC (rev 157309)
@@ -0,0 +1,3 @@
+Moving Text
+PASS - "-webkit-shape-image-threshold" property for "shape" element at 1s saw something close to: 0.5
+
Added: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-shape-image-threshold-animation.html (0 => 157309)
--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-shape-image-threshold-animation.html (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-shape-image-threshold-animation.html 2013-10-11 18:01:39 UTC (rev 157309)
@@ -0,0 +1,43 @@
+<html>
+<head>
+<style>
+.shape {
+ width: 100px;
+ height: 100px;
+ float: left;
+ -webkit-shape-outside: url('../resources/svg-shape-003.svg');
+ background: url('../resources/svg-shape-003.svg');
+}
+.container {
+ width: 200px;
+ height: 200px;
+ border: 2px solid blue;
+}
+@-webkit-keyframes threshold-anim {
+ from { -webkit-shape-image-threshold: 0; }
+ to { -webkit-shape-image-threshold: 1; }
+}
+.shape {
+ -webkit-animation: threshold-anim 2s linear;
+}
+</style>
+<script src=""
+ <script type="text/_javascript_">
+ const expectedValues = [
+ // [animation-name, time, element-id, property, expected-value, tolerance]
+ ["threshold-anim", 1, "shape", "-webkit-shape-image-threshold", "0.5", 0.05],
+ ];
+
+ runAnimationTest(expectedValues);
+</script>
+</head>
+<body>
+<div class='container'>
+<div class='shape' id='shape'></div>
+Moving Text
+</div>
+
+<div id="result">
+</div>
+</body>
+</html>
Modified: trunk/Source/WebCore/ChangeLog (157308 => 157309)
--- trunk/Source/WebCore/ChangeLog 2013-10-11 17:57:34 UTC (rev 157308)
+++ trunk/Source/WebCore/ChangeLog 2013-10-11 18:01:39 UTC (rev 157309)
@@ -1,3 +1,31 @@
+2013-10-11 Bear Travis <[email protected]>
+
+ [CSS Shapes] Shape-Image-Threshold should be animatable
+ https://bugs.webkit.org/show_bug.cgi?id=122622
+
+ Reviewed by Darin Adler.
+
+ Make the shape-image-threshold property respond to dynamic changes
+ made through JS or CSS animations. Responding to changes made to
+ shape-image-threshold is handled in RenderBox::updateShapeOutsideInfoAfterStyleChange,
+ while CSSPropertyAnimation.cpp adds the property to the list of
+ animatable properties.
+
+ Tests: fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-image-threshold.html
+ fast/shapes/shape-outside-floats/shape-outside-shape-image-threshold-animation.html
+
+ * page/animation/CSSPropertyAnimation.cpp:
+ (WebCore::CSSPropertyAnimationWrapperMap::CSSPropertyAnimationWrapperMap): Add
+ shape-image-threshold to the list of animatable properties.
+ * rendering/RenderBox.cpp:
+ (WebCore::RenderBox::styleDidChange): updateShapeOutsideInfoAfterStyleChange
+ needs to take two RenderStyle arguments to compare multiple shape properties,
+ rather than just the shape-outside property.
+ (WebCore::RenderBox::updateShapeOutsideInfoAfterStyleChange): Compare
+ shape-image-threshold values to see if they changed, and invalidate the layout
+ if necessary.
+ * rendering/RenderBox.h:
+
2013-10-11 Brent Fulgham <[email protected]>
Unreviewed gardening. Remove a Windows work-around that is not needed.
Modified: trunk/Source/WebCore/page/animation/CSSPropertyAnimation.cpp (157308 => 157309)
--- trunk/Source/WebCore/page/animation/CSSPropertyAnimation.cpp 2013-10-11 17:57:34 UTC (rev 157308)
+++ trunk/Source/WebCore/page/animation/CSSPropertyAnimation.cpp 2013-10-11 18:01:39 UTC (rev 157309)
@@ -1246,6 +1246,7 @@
#if ENABLE(CSS_SHAPES)
new PropertyWrapperShape(CSSPropertyWebkitShapeInside, &RenderStyle::shapeInside, &RenderStyle::setShapeInside),
new PropertyWrapperShape(CSSPropertyWebkitShapeOutside, &RenderStyle::shapeOutside, &RenderStyle::setShapeOutside),
+ new PropertyWrapper<float>(CSSPropertyWebkitShapeImageThreshold, &RenderStyle::shapeImageThreshold, &RenderStyle::setShapeImageThreshold),
#endif
new PropertyWrapperVisitedAffectedColor(CSSPropertyWebkitColumnRuleColor, MaybeInvalidColor, &RenderStyle::columnRuleColor, &RenderStyle::setColumnRuleColor, &RenderStyle::visitedLinkColumnRuleColor, &RenderStyle::setVisitedLinkColumnRuleColor),
Modified: trunk/Source/WebCore/rendering/RenderBox.cpp (157308 => 157309)
--- trunk/Source/WebCore/rendering/RenderBox.cpp 2013-10-11 17:57:34 UTC (rev 157308)
+++ trunk/Source/WebCore/rendering/RenderBox.cpp 2013-10-11 18:01:39 UTC (rev 157309)
@@ -376,23 +376,30 @@
}
#if ENABLE(CSS_SHAPES)
- updateShapeOutsideInfoAfterStyleChange(style()->shapeOutside(), oldStyle ? oldStyle->shapeOutside() : 0);
+ updateShapeOutsideInfoAfterStyleChange(*style(), oldStyle);
#endif
}
#if ENABLE(CSS_SHAPES)
-void RenderBox::updateShapeOutsideInfoAfterStyleChange(const ShapeValue* shapeOutside, const ShapeValue* oldShapeOutside)
+void RenderBox::updateShapeOutsideInfoAfterStyleChange(const RenderStyle& style, const RenderStyle* oldStyle)
{
+ ShapeValue* shapeOutside = style.shapeOutside();
+ ShapeValue* oldShapeOutside = oldStyle ? oldStyle->shapeOutside() : nullptr;
+
+ 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)
+ if (shapeOutside == oldShapeOutside && shapeImageThreshold == oldShapeImageThreshold)
return;
- if (shapeOutside) {
- ShapeOutsideInfo* shapeOutsideInfo = ShapeOutsideInfo::ensureInfo(this);
- shapeOutsideInfo->dirtyShapeSize();
- } else
+ if (!shapeOutside)
ShapeOutsideInfo::removeInfo(this);
- markShapeOutsideDependentsForLayout();
+ else
+ ShapeOutsideInfo::ensureInfo(this)->dirtyShapeSize();
+
+ if (shapeOutside || shapeOutside != oldShapeOutside)
+ markShapeOutsideDependentsForLayout();
}
#endif
Modified: trunk/Source/WebCore/rendering/RenderBox.h (157308 => 157309)
--- trunk/Source/WebCore/rendering/RenderBox.h 2013-10-11 17:57:34 UTC (rev 157308)
+++ trunk/Source/WebCore/rendering/RenderBox.h 2013-10-11 18:01:39 UTC (rev 157309)
@@ -643,7 +643,7 @@
private:
#if ENABLE(CSS_SHAPES)
- void updateShapeOutsideInfoAfterStyleChange(const ShapeValue* shapeOutside, const ShapeValue* oldShapeOutside);
+ void updateShapeOutsideInfoAfterStyleChange(const RenderStyle&, const RenderStyle* oldStyle);
#endif
bool fixedElementLaysOutRelativeToFrame(const FrameView&) const;
