https://bugs.webkit.org/show_bug.cgi?id=122562
Reviewed by Alexandru Chiculita.
Source/WebCore:
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):
LayoutTests:
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:
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@157186
268f45cc-cd09-0410-ab3c-
d52691b4dbfc
+2013-10-09 Bem Jones-Bey <bjonesbe@adobe.com>
+
+ [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 <cfleizach@apple.com>
AX: VoiceOver double speaks all items in <li> nodes
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
------------------------------------------------------------------------
--- /dev/null
+<!DOCTYPE html>
+<title>CSS Reference</title>
+<link rel="author" title="Adobe" href="http://html.adobe.com/">
+<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
+<link rel="help" href="http://dev.w3.org/csswg/css-shapes-1/#relation-to-box-model-and-float-behavior">
+<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>
--- /dev/null
+<!DOCTYPE html>
+<title>CSS Test: shape-outside on floats shape clipped to bottom of margin box</title>
+<link rel="author" title="Adobe" href="http://html.adobe.com/">
+<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
+<link rel="help" href="http://dev.w3.org/csswg/css-shapes-1/#relation-to-box-model-and-float-behavior">
+<link rel="match" href="shape-outside-floats-clipped-000-ref.html">
+<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>
--- /dev/null
+<!DOCTYPE html>
+<title>CSS Reference</title>
+<link rel="author" title="Adobe" href="http://html.adobe.com/">
+<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
+<link rel="help" href="http://dev.w3.org/csswg/css-shapes-1/#relation-to-box-model-and-float-behavior">
+<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>
--- /dev/null
+<!DOCTYPE html>
+<title>CSS Test: shape-outside on floats shape clipped to bottom of margin box</title>
+<link rel="author" title="Adobe" href="http://html.adobe.com/">
+<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
+<link rel="help" href="http://dev.w3.org/csswg/css-shapes-1/#relation-to-box-model-and-float-behavior">
+<link rel="match" href="shape-outside-floats-clipped-000-ref.html">
+<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>
--- /dev/null
+<!DOCTYPE html>
+<title>CSS Reference</title>
+<link rel="author" title="Adobe" href="http://html.adobe.com/">
+<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
+<link rel="help" href="http://dev.w3.org/csswg/css-shapes-1/#relation-to-box-model-and-float-behavior">
+<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>
--- /dev/null
+<!DOCTYPE html>
+<title>CSS Test: shape-outside on floats shape clipped to bottom of margin box</title>
+<link rel="author" title="Adobe" href="http://html.adobe.com/">
+<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
+<link rel="help" href="http://dev.w3.org/csswg/css-shapes-1/#relation-to-box-model-and-float-behavior">
+<link rel="match" href="shape-outside-floats-clipped-000-ref.html">
+<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>
--- /dev/null
+<!DOCTYPE html>
+<title>CSS Reference</title>
+<link rel="author" title="Adobe" href="http://html.adobe.com/">
+<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
+<link rel="help" href="http://dev.w3.org/csswg/css-shapes-1/#relation-to-box-model-and-float-behavior">
+<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>
--- /dev/null
+<!DOCTYPE html>
+<title>CSS Test: shape-outside on floats shape clipped to bottom of margin box</title>
+<link rel="author" title="Adobe" href="http://html.adobe.com/">
+<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
+<link rel="help" href="http://dev.w3.org/csswg/css-shapes-1/#relation-to-box-model-and-float-behavior">
+<link rel="match" href="shape-outside-floats-clipped-000-ref.html">
+<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>
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
------------------------------------------------------------------------
/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
+2013-10-09 Bem Jones-Bey <bjonesbe@adobe.com>
+
+ [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 <sergio.correia@openbossa.org>
[CoordinatedGraphics] ASSERTION FAILED: !m_flushingLayers (after r156291)
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);
}