- Revision
- 156905
- Author
- [email protected]
- Date
- 2013-10-04 12:31:01 -0700 (Fri, 04 Oct 2013)
Log Message
[CSS Shapes] Shape Outside should relayout when set dynamically
https://bugs.webkit.org/show_bug.cgi?id=122197
Reviewed by Alexandru Chiculita.
Source/WebCore:
Tests: fast/shapes/shape-outside-floats/shape-outside-dynamic-shape.html
fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-overhang.html
When shape outside is modified, dependent content needs to relayout. This patch
removes the float from the float lists and marks dependents for layout using
RenderBox::removeFloatingOrPositionedChildFromBlockLists(). This is the same
method used when switching from float: left to float: right and vice versa
(see RenderElement::styleWillChange).
* rendering/RenderBox.cpp:
(WebCore::RenderBox::updateShapeOutsideInfoAfterStyleChange): Mark shape-outside dependents
for layout.
* rendering/RenderBox.h:
(WebCore::RenderBox::markShapeOutsideDependentsForLayout): Mark all the items that may be
affected by this shape-outside for relayout.
LayoutTests:
Test that a shape can be dynamically added, modified, or removed and that
content does a proper relayout.
* fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-overhang-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-overhang.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-expected.html: Added.
* fast/shapes/shape-outside-floats/shape-outside-dynamic-shape.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (156904 => 156905)
--- trunk/LayoutTests/ChangeLog 2013-10-04 19:22:38 UTC (rev 156904)
+++ trunk/LayoutTests/ChangeLog 2013-10-04 19:31:01 UTC (rev 156905)
@@ -1,3 +1,18 @@
+2013-10-04 Bear Travis <[email protected]>
+
+ [CSS Shapes] Shape Outside should relayout when set dynamically
+ https://bugs.webkit.org/show_bug.cgi?id=122197
+
+ Reviewed by Alexandru Chiculita.
+
+ Test that a shape can be dynamically added, modified, or removed and that
+ content does a proper relayout.
+
+ * fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-overhang-expected.html: Added.
+ * fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-overhang.html: Added.
+ * fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-expected.html: Added.
+ * fast/shapes/shape-outside-floats/shape-outside-dynamic-shape.html: Added.
+
2013-10-04 Grzegorz Czajkowski <[email protected]>
Tests added in r141354 erroneously assume correction suggestion to be in the context menu
Added: trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-expected.html (0 => 156905)
--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-expected.html (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-expected.html 2013-10-04 19:31:01 UTC (rev 156905)
@@ -0,0 +1,45 @@
+<!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;
+ background-color: blue;
+ }
+
+ .rectangle50 {
+ width: 50px;
+ height: 50px;
+ }
+
+ .rectangle25 {
+ width: 25px;
+ height: 25px;
+ }
+</style>
+</head>
+<body>
+ <p>When shape-outside 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-outside with no prior entry</p>
+ <div id='add-shape-outside' class='container'><div class='shape rectangle50'></div>x x x x x x x x x x</div>
+
+ <p>Setting shape-outside with a prior entry</p>
+ <div id='change-shape-outside' class='container'><div class='shape rectangle25'></div>x x x x x x x x x x</div>
+
+ <p>Removing shape-outside with a prior entry</p>
+ <div id='remove-shape-outside' 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-overhang-expected.html (0 => 156905)
--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-overhang-expected.html (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-overhang-expected.html 2013-10-04 19:31:01 UTC (rev 156905)
@@ -0,0 +1,47 @@
+<!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-wrapper {
+ width: 0;
+ height: 0;
+ }
+ .shape {
+ float: left;
+ width: 100px;
+ height: 100px;
+ background-color: blue;
+ }
+
+ .rectangle50 {
+ width: 50px;
+ height: 50px;
+ }
+ .rectangle25 {
+ width: 25px;
+ height: 25px;
+ }
+</style>
+</head>
+<body>
+ <p>When shape-outside is modified dynamically, content affected by the shape's contour should relayout. This test is for shape-outside floats that overhang their parent container. 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-outside with no prior entry</p>
+ <div id='add-shape-outside' class='container'><div class='shape-wrapper'><div class='shape rectangle50'></div></div>x x x x x x x x x x</div>
+
+ <p>Setting shape-outside with a prior entry</p>
+ <div id='change-shape-outside' class='container'><div class='shape-wrapper'><div class='shape rectangle25'></div></div>x x x x x x x x x x</div>
+
+ <p>Removing shape-outside with a prior entry</p>
+ <div id='remove-shape-outside' class='container'><div class='shape-wrapper'><div class='shape'></div></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-overhang.html (0 => 156905)
--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-overhang.html (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-overhang.html 2013-10-04 19:31:01 UTC (rev 156905)
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script>
+ window._onload_ = function() {
+ // fetch offsetTop to force a layout
+ document.body.offsetTop;
+
+ var el = document.querySelector('#add-shape-outside .shape');
+ el.className = 'shape rectangle50';
+
+ el = document.querySelector('#change-shape-outside .shape');
+ el.className = 'shape rectangle25';
+
+ el = document.querySelector('#remove-shape-outside .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-wrapper {
+ width: 0;
+ height: 0;
+ }
+ .shape {
+ float: left;
+ position: relative;
+ width: 100px;
+ height: 100px;
+ }
+ .shape::before {
+ position: absolute;
+ display: block;
+ top: 0px; left: 0px;
+ width: 100%;
+ height: 100%;
+ background-color: blue;
+ content: ' ';
+ }
+
+ .rectangle50 {
+ -webkit-shape-outside: rectangle(0, 0, 50px, 50px);
+ }
+ .rectangle50::before {
+ width: 50px;
+ height: 50px;
+ }
+
+ .rectangle25 {
+ -webkit-shape-outside: rectangle(0, 0, 25px, 25px);
+ }
+ .rectangle25::before {
+ width: 25px;
+ height: 25px;
+ }
+</style>
+</head>
+<body>
+ <p>When shape-outside is modified dynamically, content affected by the shape's contour should relayout. This test is for shape-outside floats that overhang their parent container. 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-outside with no prior entry</p>
+ <div id='add-shape-outside' class='container'><div class='shape-wrapper'><div class='shape'></div></div>x x x x x x x x x x</div>
+
+ <p>Setting shape-outside with a prior entry</p>
+ <div id='change-shape-outside' class='container'><div class='shape-wrapper'><div class='shape rectangle50'></div></div>x x x x x x x x x x</div>
+
+ <p>Removing shape-outside with a prior entry</p>
+ <div id='remove-shape-outside' class='container'><div class='shape-wrapper'><div class='shape rectangle50'></div></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.html (0 => 156905)
--- trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-dynamic-shape.html (rev 0)
+++ trunk/LayoutTests/fast/shapes/shape-outside-floats/shape-outside-dynamic-shape.html 2013-10-04 19:31:01 UTC (rev 156905)
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script>
+ window._onload_ = function() {
+ // fetch offsetTop to force a layout
+ document.body.offsetTop;
+
+ var el = document.querySelector('#add-shape-outside .shape');
+ el.className = 'shape rectangle50';
+
+ el = document.querySelector('#change-shape-outside .shape');
+ el.className = 'shape rectangle25';
+
+ el = document.querySelector('#remove-shape-outside .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;
+ }
+ .shape::before {
+ position: absolute;
+ display: block;
+ top: 0px; left: 0px;
+ width: 100%;
+ height: 100%;
+ background-color: blue;
+ content: ' ';
+ }
+
+ .rectangle50 {
+ -webkit-shape-outside: rectangle(0, 0, 50px, 50px);
+ }
+ .rectangle50::before {
+ width: 50px;
+ height: 50px;
+ }
+
+ .rectangle25 {
+ -webkit-shape-outside: rectangle(0, 0, 25px, 25px);
+ }
+ .rectangle25::before {
+ width: 25px;
+ height: 25px;
+ }
+</style>
+</head>
+<body>
+ <p>When shape-outside 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-outside with no prior entry</p>
+ <div id='add-shape-outside' class='container'><div class='shape'></div>x x x x x x x x x x</div>
+
+ <p>Setting shape-outside with a prior entry</p>
+ <div id='change-shape-outside' class='container'><div class='shape rectangle50'></div>x x x x x x x x x x</div>
+
+ <p>Removing shape-outside with a prior entry</p>
+ <div id='remove-shape-outside' class='container'><div class='shape rectangle50'></div>x x x x x x x x x x</div>
+</body>
+</html>
Modified: trunk/Source/WebCore/ChangeLog (156904 => 156905)
--- trunk/Source/WebCore/ChangeLog 2013-10-04 19:22:38 UTC (rev 156904)
+++ trunk/Source/WebCore/ChangeLog 2013-10-04 19:31:01 UTC (rev 156905)
@@ -1,3 +1,26 @@
+2013-10-04 Bear Travis <[email protected]>
+
+ [CSS Shapes] Shape Outside should relayout when set dynamically
+ https://bugs.webkit.org/show_bug.cgi?id=122197
+
+ Reviewed by Alexandru Chiculita.
+
+ Tests: fast/shapes/shape-outside-floats/shape-outside-dynamic-shape.html
+ fast/shapes/shape-outside-floats/shape-outside-dynamic-shape-overhang.html
+
+ When shape outside is modified, dependent content needs to relayout. This patch
+ removes the float from the float lists and marks dependents for layout using
+ RenderBox::removeFloatingOrPositionedChildFromBlockLists(). This is the same
+ method used when switching from float: left to float: right and vice versa
+ (see RenderElement::styleWillChange).
+
+ * rendering/RenderBox.cpp:
+ (WebCore::RenderBox::updateShapeOutsideInfoAfterStyleChange): Mark shape-outside dependents
+ for layout.
+ * rendering/RenderBox.h:
+ (WebCore::RenderBox::markShapeOutsideDependentsForLayout): Mark all the items that may be
+ affected by this shape-outside for relayout.
+
2013-10-04 Antti Koivisto <[email protected]>
Tighten markContainingBlocksForLayout
Modified: trunk/Source/WebCore/rendering/RenderBox.cpp (156904 => 156905)
--- trunk/Source/WebCore/rendering/RenderBox.cpp 2013-10-04 19:22:38 UTC (rev 156904)
+++ trunk/Source/WebCore/rendering/RenderBox.cpp 2013-10-04 19:31:01 UTC (rev 156905)
@@ -397,6 +397,7 @@
shapeOutsideInfo->dirtyShapeSize();
} else
ShapeOutsideInfo::removeInfo(this);
+ markShapeOutsideDependentsForLayout();
}
#endif
Modified: trunk/Source/WebCore/rendering/RenderBox.h (156904 => 156905)
--- trunk/Source/WebCore/rendering/RenderBox.h 2013-10-04 19:22:38 UTC (rev 156904)
+++ trunk/Source/WebCore/rendering/RenderBox.h 2013-10-04 19:31:01 UTC (rev 156905)
@@ -593,6 +593,12 @@
{
return ShapeOutsideInfo::isEnabledFor(this) ? ShapeOutsideInfo::info(this) : 0;
}
+
+ void markShapeOutsideDependentsForLayout()
+ {
+ if (isFloating())
+ removeFloatingOrPositionedChildFromBlockLists();
+ }
#endif
protected:
