Diff
Modified: trunk/LayoutTests/ChangeLog (157185 => 157186)
--- trunk/LayoutTests/ChangeLog 2013-10-09 21:34:28 UTC (rev 157185)
+++ trunk/LayoutTests/ChangeLog 2013-10-09 21:45:44 UTC (rev 157186)
@@ -1,3 +1,23 @@
+2013-10-09 Bem Jones-Bey <[email protected]>
+
+ [CSS Shapes] Clip shape-outside to the bottom of the margin box
+ https://bugs.webkit.org/show_bug.cgi?id=122562
+
+ Reviewed by Alexandru Chiculita.
+
+ Test that the shape is properly clipped to the bottom of the float.
+
+ * csswg/contributors/adobe/submitted/shapes/shape-outside/resources/w3c-import.log:
+ * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-000-expected.html: Added.
+ * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-000.html: Added.
+ * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001-expected.html: Added.
+ * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001.html: Added.
+ * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-002-expected.html: Added.
+ * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-002.html: Added.
+ * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003-expected.html: Added.
+ * csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003.html: Added.
+ * csswg/contributors/adobe/submitted/shapes/shape-outside/w3c-import.log:
+
2013-10-09 Chris Fleizach <[email protected]>
AX: VoiceOver double speaks all items in <li> nodes
Modified: trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/resources/w3c-import.log (157185 => 157186)
--- trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/resources/w3c-import.log 2013-10-09 21:34:28 UTC (rev 157185)
+++ trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/resources/w3c-import.log 2013-10-09 21:45:44 UTC (rev 157186)
@@ -8,7 +8,7 @@
Do NOT modify or remove this file
------------------------------------------------------------------------
-Last Import: 2013-09-27 16:37
+Last Import: 2013-10-09 14:13
W3C Mercurial changeset: Not Available
Test status at time of import: unknown
------------------------------------------------------------------------
Added: trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-000-expected.html (0 => 157186)
--- trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-000-expected.html (rev 0)
+++ trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-000-expected.html 2013-10-09 21:45:44 UTC (rev 157186)
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<title>CSS Reference</title>
+<link rel="author" title="Adobe" href=""
+<link rel="author" title="Bem Jones-Bey" href=""
+<link rel="help" href=""
+<meta name="flags" content="ahem">
+<head>
+<style>
+.container {
+ font: 50px/1 Ahem, sans-serif;
+ line-height: 50px;
+ width: 100px;
+ height: 100px;
+ border: 1px solid black;
+ color: green;
+ background-color: red;
+ display: inline-block;
+}
+
+#float-left {
+ float: left;
+ width: 100px;
+ height: 50px;
+ background-color: green;
+}
+
+#float-right {
+ float: right;
+ width: 100px;
+ height: 50px;
+ background-color: green;
+}
+</style>
+
+<body>
+ <p>This should display two green squares. You should not see any red.</p>
+ <div class="container">
+ <div id="float-left">
+ </div>
+ XX
+ </div>
+ <div class="container">
+ <div id="float-right">
+ </div>
+ XX
+ </div>
+</body>
Added: trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-000.html (0 => 157186)
--- trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-000.html (rev 0)
+++ trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-000.html 2013-10-09 21:45:44 UTC (rev 157186)
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<title>CSS Test: shape-outside on floats shape clipped to bottom of margin box</title>
+<link rel="author" title="Adobe" href=""
+<link rel="author" title="Bem Jones-Bey" href=""
+<link rel="help" href=""
+<link rel="match" href=""
+<meta name="flags" content="ahem">
+<head>
+<style>
+.container {
+ font: 50px/1 Ahem, sans-serif;
+ line-height: 50px;
+ width: 100px;
+ height: 100px;
+ border: 1px solid black;
+ color: green;
+ background-color: red;
+ display: inline-block;
+}
+
+#float-left {
+ float: left;
+ width: 100px;
+ height: 50px;
+ -webkit-shape-outside: rectangle(0, 0, 100%, 200%);
+ background-color: green;
+}
+
+#float-right {
+ float: right;
+ width: 100px;
+ height: 50px;
+ -webkit-shape-outside: rectangle(0, 0, 100%, 200%);
+ background-color: green;
+}
+</style>
+
+<body>
+ <p>This should display two green squares. You should not see any red.</p>
+ <div class="container">
+ <div id="float-left">
+ </div>
+ XX
+ </div>
+ <div class="container">
+ <div id="float-right">
+ </div>
+ XX
+ </div>
+</body>
Added: trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001-expected.html (0 => 157186)
--- trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001-expected.html (rev 0)
+++ trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001-expected.html 2013-10-09 21:45:44 UTC (rev 157186)
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<title>CSS Reference</title>
+<link rel="author" title="Adobe" href=""
+<link rel="author" title="Bem Jones-Bey" href=""
+<link rel="help" href=""
+<meta name="flags" content="ahem">
+<head>
+<style>
+.container {
+ font: 50px/1 Ahem, sans-serif;
+ line-height: 50px;
+ width: 100px;
+ height: 100px;
+ border: 1px solid black;
+ color: green;
+ background-color: red;
+ display: inline-block;
+}
+
+#float-left {
+ float: left;
+ width: 100px;
+ height: 50px;
+ background-color: green;
+}
+
+#float-right {
+ float: right;
+ width: 100px;
+ height: 50px;
+ background-color: green;
+}
+</style>
+
+<body>
+ <p>This should display two green squares. You should not see any red.</p>
+ <div class="container">
+ <div id="float-left">
+ </div>
+ XX
+ </div>
+ <div class="container">
+ <div id="float-right">
+ </div>
+ XX
+ </div>
+</body>
Added: trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001.html (0 => 157186)
--- trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001.html (rev 0)
+++ trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001.html 2013-10-09 21:45:44 UTC (rev 157186)
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<title>CSS Test: shape-outside on floats shape clipped to bottom of margin box</title>
+<link rel="author" title="Adobe" href=""
+<link rel="author" title="Bem Jones-Bey" href=""
+<link rel="help" href=""
+<link rel="match" href=""
+<meta name="flags" content="ahem">
+<head>
+<style>
+.container {
+ font: 50px/1 Ahem, sans-serif;
+ line-height: 50px;
+ width: 100px;
+ height: 100px;
+ border: 1px solid black;
+ color: green;
+ background-color: red;
+ display: inline-block;
+}
+
+#float-left {
+ float: left;
+ width: 100px;
+ height: 25px;
+ margin-bottom: 25px;
+ -webkit-shape-outside: rectangle(0, 0, 100%, 200%);
+ background-color: green;
+ color: green;
+ overflow: visible;
+}
+
+#float-right {
+ float: right;
+ width: 100px;
+ height: 25px;
+ margin-bottom: 25px;
+ -webkit-shape-outside: rectangle(0, 0, 100%, 200%);
+ background-color: green;
+ color: green;
+ overflow: visible;
+}
+</style>
+
+<body>
+ <p>This should display two green squares. You should not see any red.</p>
+ <div class="container">
+ <div id="float-left">
+ XX
+ </div>
+ XX
+ </div>
+ <div class="container">
+ <div id="float-right">
+ XX
+ </div>
+ XX
+ </div>
+</body>
Added: trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-002-expected.html (0 => 157186)
--- trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-002-expected.html (rev 0)
+++ trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-002-expected.html 2013-10-09 21:45:44 UTC (rev 157186)
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<title>CSS Reference</title>
+<link rel="author" title="Adobe" href=""
+<link rel="author" title="Bem Jones-Bey" href=""
+<link rel="help" href=""
+<meta name="flags" content="ahem">
+<head>
+<style>
+.container {
+ font: 50px/1 Ahem, sans-serif;
+ line-height: 50px;
+ width: 100px;
+ height: 100px;
+ border: 1px solid black;
+ color: green;
+ background-color: red;
+ display: inline-block;
+}
+
+#float-left {
+ float: left;
+ width: 100px;
+ height: 50px;
+ background-color: green;
+}
+
+#float-right {
+ float: right;
+ width: 100px;
+ height: 50px;
+ background-color: green;
+}
+</style>
+
+<body>
+ <p>This should display two green squares. You should not see any red.</p>
+ <div class="container">
+ <div id="float-left">
+ </div>
+ XX
+ </div>
+ <div class="container">
+ <div id="float-right">
+ </div>
+ XX
+ </div>
+</body>
Added: trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-002.html (0 => 157186)
--- trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-002.html (rev 0)
+++ trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-002.html 2013-10-09 21:45:44 UTC (rev 157186)
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<title>CSS Test: shape-outside on floats shape clipped to bottom of margin box</title>
+<link rel="author" title="Adobe" href=""
+<link rel="author" title="Bem Jones-Bey" href=""
+<link rel="help" href=""
+<link rel="match" href=""
+<meta name="flags" content="ahem">
+<head>
+<style>
+.container {
+ font: 50px/1 Ahem, sans-serif;
+ line-height: 50px;
+ width: 100px;
+ height: 100px;
+ border: 1px solid black;
+ color: green;
+ background-color: red;
+ display: inline-block;
+}
+
+#float-left {
+ float: left;
+ width: 100px;
+ height: 100px;
+ margin-bottom: -50px;
+ -webkit-shape-outside: rectangle(0, 0, 100%, 200%);
+ background-color: green;
+}
+
+#float-right {
+ float: right;
+ width: 100px;
+ height: 100px;
+ margin-bottom: -50px;
+ -webkit-shape-outside: rectangle(0, 0, 100%, 200%);
+ background-color: green;
+}
+</style>
+
+<body>
+ <p>This should display two green squares. You should not see any red.</p>
+ <div class="container">
+ <div id="float-left">
+ </div>
+ XX
+ </div>
+ <div class="container">
+ <div id="float-right">
+ </div>
+ XX
+ </div>
+</body>
Added: trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003-expected.html (0 => 157186)
--- trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003-expected.html (rev 0)
+++ trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003-expected.html 2013-10-09 21:45:44 UTC (rev 157186)
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<title>CSS Reference</title>
+<link rel="author" title="Adobe" href=""
+<link rel="author" title="Bem Jones-Bey" href=""
+<link rel="help" href=""
+<meta name="flags" content="ahem">
+<head>
+<style>
+.container {
+ font: 50px/1 Ahem, sans-serif;
+ line-height: 50px;
+ width: 100px;
+ height: 100px;
+ border: 1px solid black;
+ color: green;
+ background-color: red;
+ display: inline-block;
+}
+
+#float-left {
+ float: left;
+ width: 100px;
+ height: 50px;
+ background-color: green;
+}
+
+#float-right {
+ float: right;
+ width: 100px;
+ height: 50px;
+ background-color: green;
+}
+</style>
+
+<body>
+ <p>This should display two green squares. You should not see any red.</p>
+ <div class="container">
+ <div id="float-left">
+ </div>
+ XX
+ </div>
+ <div class="container">
+ <div id="float-right">
+ </div>
+ XX
+ </div>
+</body>
Added: trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003.html (0 => 157186)
--- trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003.html (rev 0)
+++ trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003.html 2013-10-09 21:45:44 UTC (rev 157186)
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<title>CSS Test: shape-outside on floats shape clipped to bottom of margin box</title>
+<link rel="author" title="Adobe" href=""
+<link rel="author" title="Bem Jones-Bey" href=""
+<link rel="help" href=""
+<link rel="match" href=""
+<meta name="flags" content="ahem">
+<head>
+<style>
+.container {
+ font: 50px/1 Ahem, sans-serif;
+ line-height: 50px;
+ width: 100px;
+ height: 100px;
+ border: 1px solid black;
+ color: green;
+ background-color: green;
+ display: inline-block;
+}
+
+#float-left {
+ float: left;
+ width: 100px;
+ height: 25px;
+ margin-top: 25px;
+ -webkit-shape-outside: rectangle(0, 0, 100%, 200%);
+ background-color: green;
+}
+
+#float-right {
+ float: right;
+ width: 100px;
+ height: 25px;
+ margin-top: 25px;
+ -webkit-shape-outside: rectangle(0, 0, 100%, 200%);
+ background-color: green;
+}
+</style>
+
+<body>
+ <p>This should display two green squares. You should not see any red.</p>
+ <div class="container">
+ <div id="float-left"></div>
+ XX
+ </div>
+ <div class="container">
+ <div id="float-right"></div>
+ XX
+ </div>
+</body>
Modified: trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/w3c-import.log (157185 => 157186)
--- trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/w3c-import.log 2013-10-09 21:34:28 UTC (rev 157185)
+++ trunk/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/w3c-import.log 2013-10-09 21:45:44 UTC (rev 157186)
@@ -8,7 +8,7 @@
Do NOT modify or remove this file
------------------------------------------------------------------------
-Last Import: 2013-09-27 16:37
+Last Import: 2013-10-09 14:13
W3C Mercurial changeset: Not Available
Test status at time of import: unknown
------------------------------------------------------------------------
@@ -22,6 +22,14 @@
/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-circle-000.html
/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-circle-001-expected.html
/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-circle-001.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-000-expected.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-000.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001-expected.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-002-expected.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-002.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003-expected.html
+/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003.html
/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-ellipse-000-expected.html
/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-ellipse-000.html
/LayoutTests/csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-horizontal-rectangle-000-expected.html
Modified: trunk/Source/WebCore/ChangeLog (157185 => 157186)
--- trunk/Source/WebCore/ChangeLog 2013-10-09 21:34:28 UTC (rev 157185)
+++ trunk/Source/WebCore/ChangeLog 2013-10-09 21:45:44 UTC (rev 157186)
@@ -1,3 +1,22 @@
+2013-10-09 Bem Jones-Bey <[email protected]>
+
+ [CSS Shapes] Clip shape-outside to the bottom of the margin box
+ https://bugs.webkit.org/show_bug.cgi?id=122562
+
+ Reviewed by Alexandru Chiculita.
+
+ The spec says that a shape-outside shape must be clipped to the
+ margin box. This implements clipping the bottom of the shape to the
+ bottom of the margin box.
+
+ Test: csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-000.html
+ csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-001.html
+ csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-002.html
+ csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003.html
+
+ * rendering/RenderBlockFlow.cpp:
+ (WebCore::RenderBlockFlow::nextFloatLogicalBottomBelow):
+
2013-10-09 Sergio Correia <[email protected]>
[CoordinatedGraphics] ASSERTION FAILED: !m_flushingLayers (after r156291)
Modified: trunk/Source/WebCore/rendering/RenderBlockFlow.cpp (157185 => 157186)
--- trunk/Source/WebCore/rendering/RenderBlockFlow.cpp 2013-10-09 21:34:28 UTC (rev 157185)
+++ trunk/Source/WebCore/rendering/RenderBlockFlow.cpp 2013-10-09 21:45:44 UTC (rev 157186)
@@ -2030,14 +2030,16 @@
auto end = floatingObjectSet.end();
for (auto it = floatingObjectSet.begin(); it != end; ++it) {
FloatingObject* floatingObject = it->get();
- LayoutUnit floatBottom;
+ LayoutUnit floatBottom = floatingObject->logicalBottom(isHorizontalWritingMode());
#if ENABLE(CSS_SHAPES)
ShapeOutsideInfo* shapeOutside = floatingObject->renderer().shapeOutsideInfo();
- if (offsetMode == ShapeOutsideFloatShapeOffset && shapeOutside)
- floatBottom = floatingObject->logicalTop(isHorizontalWritingMode()) + marginBeforeForChild(&(floatingObject->renderer())) + shapeOutside->shapeLogicalBottom();
- else
+ if (offsetMode == ShapeOutsideFloatShapeOffset && shapeOutside) {
+ LayoutUnit shapeBottom = floatingObject->logicalTop(isHorizontalWritingMode()) + marginBeforeForChild(&(floatingObject->renderer())) + shapeOutside->shapeLogicalBottom();
+ // Use the shapeBottom unless it extends outside of the margin box, in which case it is clipped.
+ if (shapeBottom < floatBottom)
+ floatBottom = shapeBottom;
+ }
#endif
- floatBottom = floatingObject->logicalBottom(isHorizontalWritingMode());
if (floatBottom > logicalHeight)
bottom = min(floatBottom, bottom);
}
