- Revision
- 132685
- Author
- [email protected]
- Date
- 2012-10-26 12:57:52 -0700 (Fri, 26 Oct 2012)
Log Message
[CSS Exclusions] Block children have incorrect offset when shape-inside element lays out below other elements
https://bugs.webkit.org/show_bug.cgi?id=98189
Patch by Bear Travis <[email protected]> on 2012-10-26
Reviewed by Dirk Schulze.
Source/WebCore:
The initial code assumed that each block created a new layout state, such that
LayoutState::layoutOffset would be specific to each block child of a shape-inside.
Typically, however, block children of a shape-inside do not create a new layout state,
and therefore we use the current element's offset instead.
Test: fast/exclusions/shape-inside/shape-inside-subsequent-blocks.html
* rendering/RenderBlockLineLayout.cpp:
(WebCore::RenderBlock::layoutRunsAndFloatsInRange): Modified to use only logicalTop
rather than LayoutState::layoutOffset::width/height and logicalTop.
LayoutTests:
Test that block content in subsequent shape-insides lays out correctly. Introducing a script
that can eventually be used to simplify the rectangle cases.
* fast/exclusions/resources/simple-rectangle.js: Added.
(createRectangleTest): Generate a shape-inside rectangle test using the given parameters.
(createRectangleTestResult): Generate a shape-inside rectangle expected result using
the given parameters.
* fast/exclusions/shape-inside/shape-inside-subsequent-blocks-expected.html: Added.
* fast/exclusions/shape-inside/shape-inside-subsequent-blocks.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (132684 => 132685)
--- trunk/LayoutTests/ChangeLog 2012-10-26 19:28:43 UTC (rev 132684)
+++ trunk/LayoutTests/ChangeLog 2012-10-26 19:57:52 UTC (rev 132685)
@@ -1,3 +1,20 @@
+2012-10-26 Bear Travis <[email protected]>
+
+ [CSS Exclusions] Block children have incorrect offset when shape-inside element lays out below other elements
+ https://bugs.webkit.org/show_bug.cgi?id=98189
+
+ Reviewed by Dirk Schulze.
+
+ Test that block content in subsequent shape-insides lays out correctly. Introducing a script
+ that can eventually be used to simplify the rectangle cases.
+
+ * fast/exclusions/resources/simple-rectangle.js: Added.
+ (createRectangleTest): Generate a shape-inside rectangle test using the given parameters.
+ (createRectangleTestResult): Generate a shape-inside rectangle expected result using
+ the given parameters.
+ * fast/exclusions/shape-inside/shape-inside-subsequent-blocks-expected.html: Added.
+ * fast/exclusions/shape-inside/shape-inside-subsequent-blocks.html: Added.
+
2012-10-26 Dirk Schulze <[email protected]>
-webkit-clip-path property should just reference clipPath
Added: trunk/LayoutTests/fast/exclusions/resources/simple-rectangle.js (0 => 132685)
--- trunk/LayoutTests/fast/exclusions/resources/simple-rectangle.js (rev 0)
+++ trunk/LayoutTests/fast/exclusions/resources/simple-rectangle.js 2012-10-26 19:57:52 UTC (rev 132685)
@@ -0,0 +1,55 @@
+if (window.internals)
+ window.internals.settings.setCSSExclusionsEnabled(true);
+
+function createRectangleTest(elementId, stylesheetId, bounds, shapeBounds, units, content) {
+ var elem;
+ if (elementId)
+ elem = document.getElementById(elementId);
+ else {
+ elem = document.createElement('div');
+ elem.setAttribute('id', elementId);
+ document.appendChild(elem);
+ }
+
+ var stylesheet = document.getElementById(stylesheetId).sheet;
+ var rules = [];
+ for (var i in bounds)
+ rules.push(i + ':' + bounds[i] + units);
+ var rectangleBounds = [shapeBounds.x + units, shapeBounds.y + units, shapeBounds.width + units, shapeBounds.height + units];
+ rules.push('-webkit-shape-inside: rectangle(' + rectangleBounds.join(',') + ')');
+ rules.push('position: relative');
+ stylesheet.insertRule('#' + elementId + '{' + rules.join(';') + '}');
+
+ rules = [];
+ rules.push('left: ' + (shapeBounds.x - 1) + units, 'top: ' + (shapeBounds.y - 1) + units, 'width: ' + rectangleBounds[2], 'height: ' + rectangleBounds[3]);
+ rules.push('position: absolute', 'display: block', 'content: \' \'');
+ rules.push('border: 1px solid blue');
+ stylesheet.insertRule('#' + elementId + '::before{' + rules.join(';') + '}');
+ elem.innerHTML = content;
+}
+
+function createRectangleTestResult(elementId, stylesheetId, bounds, shapeBounds, units, content) {
+ var elem;
+ if (elementId)
+ elem = document.getElementById(elementId);
+ else {
+ elem = document.createElement('div');
+ elem.setAttribute('id', elementId);
+ document.appendChild(elem);
+ }
+
+ var stylesheet = document.getElementById(stylesheetId).sheet;
+ var rules = [];
+ rules.push('width: ' + shapeBounds.width + units, 'height: ' + shapeBounds.height + units);
+ rules.push('padding-left: ' + shapeBounds.x + units, 'padding-right: ' + (bounds.width - shapeBounds.width - shapeBounds.x) + units);
+ rules.push('padding-top: ' + shapeBounds.y + units, 'padding-bottom: ' + (bounds.height - shapeBounds.height - shapeBounds.y) + units);
+ rules.push('position: relative');
+ stylesheet.insertRule('#' + elementId + '{' + rules.join(';') + '}');
+
+ rules = [];
+ rules.push('left: ' + (shapeBounds.x - 1) + units, 'top: ' + (shapeBounds.y - 1) + units, 'width: ' + shapeBounds.width + units, 'height: ' + shapeBounds.height + units);
+ rules.push('position: absolute', 'display: block', 'content: \' \'');
+ rules.push('border: 1px solid blue');
+ stylesheet.insertRule('#' + elementId + '::before{' + rules.join(';') + '}');
+ elem.innerHTML = content;
+}
Added: trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-subsequent-blocks-expected.html (0 => 132685)
--- trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-subsequent-blocks-expected.html (rev 0)
+++ trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-subsequent-blocks-expected.html 2012-10-26 19:57:52 UTC (rev 132685)
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style id='stylesheet'>
+div {
+ font: 50px/1 Ahem, sans-serif;
+ color: green;
+}
+p {
+ margin: 0;
+}
+</style>
+<script src=''></script>
+<script>
+ window._onload_ = function() {
+ createRectangleTestResult('shape-inside1', 'stylesheet', { width: 200, height: 200 }, { x: 50, y: 50, width: 100, height: 100 }, 'px', '<p>XX</p><p>XX</p>');
+ createRectangleTestResult('shape-inside2', 'stylesheet', { width: 200, height: 200 }, { x: 50, y: 50, width: 100, height: 100 }, 'px', '<p>XX</p><p>XX</p>');
+ };
+</script>
+</head>
+<body>
+<p>This test requires the Ahem font. It tests that subsequent shape-insides should display their content correctly. You should see two green squares inside blue outlines.</p>
+<div id='shape-inside1'></div>
+<div id='shape-inside2'></div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-subsequent-blocks.html (0 => 132685)
--- trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-subsequent-blocks.html (rev 0)
+++ trunk/LayoutTests/fast/exclusions/shape-inside/shape-inside-subsequent-blocks.html 2012-10-26 19:57:52 UTC (rev 132685)
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style id='stylesheet'>
+div {
+ font: 50px/1 Ahem, sans-serif;
+ color: green;
+}
+p {
+ margin: 0;
+}
+</style>
+<script src=''></script>
+<script>
+ window._onload_ = function() {
+ createRectangleTest('shape-inside1', 'stylesheet', { width: 200, height: 200 }, { x: 50, y: 50, width: 100, height: 100 }, 'px', '<p>XX</p><p>XX</p>');
+ createRectangleTest('shape-inside2', 'stylesheet', { width: 200, height: 200 }, { x: 50, y: 50, width: 100, height: 100 }, 'px', '<p>XX</p><p>XX</p>');
+ };
+</script>
+</head>
+<body>
+<p>This test requires the Ahem font. It tests that subsequent shape-insides should display their content correctly. You should see two green squares inside blue outlines.</p>
+<div id='shape-inside1'></div>
+<div id='shape-inside2'></div>
+</body>
+</html>
Modified: trunk/Source/WebCore/ChangeLog (132684 => 132685)
--- trunk/Source/WebCore/ChangeLog 2012-10-26 19:28:43 UTC (rev 132684)
+++ trunk/Source/WebCore/ChangeLog 2012-10-26 19:57:52 UTC (rev 132685)
@@ -1,3 +1,21 @@
+2012-10-26 Bear Travis <[email protected]>
+
+ [CSS Exclusions] Block children have incorrect offset when shape-inside element lays out below other elements
+ https://bugs.webkit.org/show_bug.cgi?id=98189
+
+ Reviewed by Dirk Schulze.
+
+ The initial code assumed that each block created a new layout state, such that
+ LayoutState::layoutOffset would be specific to each block child of a shape-inside.
+ Typically, however, block children of a shape-inside do not create a new layout state,
+ and therefore we use the current element's offset instead.
+
+ Test: fast/exclusions/shape-inside/shape-inside-subsequent-blocks.html
+
+ * rendering/RenderBlockLineLayout.cpp:
+ (WebCore::RenderBlock::layoutRunsAndFloatsInRange): Modified to use only logicalTop
+ rather than LayoutState::layoutOffset::width/height and logicalTop.
+
2012-10-26 Elliott Sprehn <[email protected]>
Remove setRenderStyle in favor of callbacks on HTMLOptionElement and HTMLOptGroupElement
Modified: trunk/Source/WebCore/rendering/RenderBlockLineLayout.cpp (132684 => 132685)
--- trunk/Source/WebCore/rendering/RenderBlockLineLayout.cpp 2012-10-26 19:28:43 UTC (rev 132684)
+++ trunk/Source/WebCore/rendering/RenderBlockLineLayout.cpp 2012-10-26 19:57:52 UTC (rev 132685)
@@ -1403,9 +1403,9 @@
ExclusionShapeInsideInfo* exclusionShapeInsideInfo = layoutExclusionShapeInsideInfo(this);
if (exclusionShapeInsideInfo) {
if (exclusionShapeInsideInfo != this->exclusionShapeInsideInfo()) {
- // FIXME: If layout state is disabled, the offset will be incorrect.
- LayoutSize layoutOffset = view()->layoutState()->layoutOffset();
- absoluteLogicalTop = logicalTop() + (isHorizontalWritingMode() ? layoutOffset.height() : layoutOffset.width());
+ // FIXME Bug 100284: If subsequent LayoutStates are pushed, we will have to add
+ // their offsets from the original shape-inside container.
+ absoluteLogicalTop = logicalTop();
}
// Begin layout at the logical top of our shape inside.
if (logicalHeight() + absoluteLogicalTop < exclusionShapeInsideInfo->shapeLogicalTop())
