Source/WebCore/ChangeLog

 12012-11-26 Bem Jones-Bey <bjonesbe@adobe.com>
 2
 3 [CSS Exclusions] Floats should respect shape-inside on exclusions
 4 https://bugs.webkit.org/show_bug.cgi?id=89261
 5
 6 Reviewed by NOBODY (OOPS!).
 7
 8 Add the offset added by the shape inside to the left and right offsets
 9 used for float positioning. This makes it so that the float will be
 10 positioned inside the shape instead of the content box.
 11
 12 Updated an existing test case to test for this.
 13 Test: fast/exclusions/shape-inside/shape-inside-floats-simple.html
 14
 15 * rendering/RenderBlock.cpp:
 16 (WebCore::RenderBlock::computeLogicalLocationForFloat):
 17
1182012-11-26 Rafael Brandao <rafael.lobo@openbossa.org>
219
320 [Cairo] Surface should not be destroyed before its usage

Source/WebCore/rendering/RenderBlock.cpp

@@LayoutPoint RenderBlock::computeLogicalLocationForFloat(const FloatingObject* fl
38643864 RenderBox* childBox = floatingObject->renderer();
38653865 LayoutUnit logicalRightOffset = logicalRightOffsetForContent(logicalTopOffset); // Constant part of right offset.
38663866 LayoutUnit logicalLeftOffset = logicalLeftOffsetForContent(logicalTopOffset); // Constant part of left offset.
 3867#if ENABLE(CSS_EXCLUSIONS)
 3868 // FIXME Bug 102948: This only works for shape outside directly set on this block.
 3869 ExclusionShapeInsideInfo* shapeInsideInfo = exclusionShapeInsideInfo();
 3870 // FIXME Bug 102846: Take into account the height of the content. The offset should be
 3871 // equal to the maximum segment length.
 3872 if (shapeInsideInfo && shapeInsideInfo->hasSegments()) {
 3873 // FIXME Bug 102949: Add support for shapes with multipe segments.
 3874 logicalRightOffset += shapeInsideInfo->segments()[0].logicalRight - availableLogicalWidth();
 3875 logicalLeftOffset += shapeInsideInfo->segments()[0].logicalLeft;
 3876 }
 3877#endif
38673878 LayoutUnit floatLogicalWidth = min(logicalWidthForFloat(floatingObject), logicalRightOffset - logicalLeftOffset); // The width we look for.
38683879
38693880 LayoutUnit floatLogicalLeft;

LayoutTests/ChangeLog

 12012-11-26 Bem Jones-Bey <bjonesbe@adobe.com>
 2
 3 [CSS Exclusions] Floats should respect shape-inside on exclusions
 4 https://bugs.webkit.org/show_bug.cgi?id=89261
 5
 6 Reviewed by NOBODY (OOPS!).
 7
 8 Update test to properly test floats with shape-inside.
 9
 10 * fast/exclusions/shape-inside/shape-inside-floats-simple-expected.html:
 11 * fast/exclusions/shape-inside/shape-inside-floats-simple.html:
 12
1132012-11-26 Julien Chaffraix <jchaffraix@webkit.org>
214
315 RenderBox::computePercentageLogicalHeight should use containingBlockLogicalWidthForContent

LayoutTests/fast/exclusions/shape-inside/shape-inside-floats-simple-expected.html

11<!DOCTYPE html>
22<html>
33<head>
4 <style>
5  div {
6  width: 200px;
7  height: 200px;
 4<script src="../resources/simple-rectangle.js"></script>
 5<style id="stylesheet">
 6 .container {
 7 font: 10px/1 Ahem, sans-serif;
88 }
9  #shape-inside {
10  padding: 10px;
11  position: relative;
 9 .spacer {
 10 width: 50px;
 11 height: 50px;
 12 background-color: green;
1213 }
13  #border {
14  position: absolute;
15  top: 8px;
16  left: 8px;
17  border: 2px solid blue;
 14 .vertical-lr {
 15 -webkit-writing-mode: vertical-lr;
1816 }
19  .spacer {
20  width: 73px;
21  height: 73px;
22  border: 1px solid green;
 17 .vertical-rl {
 18 -webkit-writing-mode: vertical-rl;
2319 }
2420</style>
 21<script>
 22 window.onload = function () {
 23 var content = 'XXXXXXXXXXXXXXX\nXXXXXXXXXXXXXXX\nXXXXXXXXXXXXXXX\n<div class="spacer" style="float:right"></div>\n<div class="spacer" style="float:left"></div>\nXXXXX\nXXXXX\nXXXXX\nXXXXX\nXXXXX\nXXXXXXXXXXXXXXX\nXXXXXXXXXXXXXXX\nXXXXXXXXXXXXXXX\nXXXXXXXXXXXXXXX\nXXXXXXXXXXXXXXX\nXXXXXXXXXXXXXXX\nXXXXXXXXXXXXXXX';
 24 createRectangleTestResult('base', 'stylesheet', { height: 200, width: 200 }, { x: 25, y: 0, width: 150, height: 150 }, 'px', content);
 25 createRectangleTestResult('rl', 'stylesheet', { height: 200, width: 200 }, { x: 0, y: 25, width: 150, height: 150 }, 'px', content);
 26 createRectangleTestResult('lr', 'stylesheet', { height: 200, width: 200 }, { x: 0, y: 25, width: 150, height: 150 }, 'px', content);
 27 };
 28</script>
2529</head>
2630<body>
27  <div id="shape-inside">
28  <div id="border"></div>
29  <div class="spacer" style="float:left"></div>
30  <div class="spacer" style="float:right"></div>
31  The blue box should contain a green square in both the upper left
32  and upper right corners. This text should flow around the green squares,
33  but within the blue outline.
 31 <h1>The following tests should all be large black squares that contain two smaller green squares on the same line.</h1>
 32 <h2>Standard left right writing mode</h2>
 33 <div id="base" class="container">
3434 </div>
 35 <h2>Vertical Right Left writing mode</h2>
 36 <div id="rl" class="container vertical-rl"></div>
 37 <h2>Vertical Left Right writing mode</h2>
 38 <div id="lr" class="container vertical-lr"></div>
3539</body>
3640</html>

LayoutTests/fast/exclusions/shape-inside/shape-inside-floats-simple.html

11<!DOCTYPE html>
22<html>
33<head>
4 <script>
5  if (window.internals)
6  window.internals.settings.setCSSExclusionsEnabled(true);
7 </script>
8 <style>
9  div {
10  width: 200px;
11  height: 200px;
 4<script src="../resources/simple-rectangle.js"></script>
 5<style id="stylesheet">
 6 .container {
 7 font: 10px/1 Ahem, sans-serif;
128 }
13  #shape-inside {
14  padding: 10px;
15  position: relative;
16  -webkit-shape-inside: rectangle(0, 0, 200px, 200px);
 9 .spacer {
 10 width: 50px;
 11 height: 50px;
 12 background-color: green;
1713 }
18  #border {
19  position: absolute;
20  top: 8px;
21  left: 8px;
22  border: 2px solid blue;
 14 .vertical-lr {
 15 -webkit-writing-mode: vertical-lr;
2316 }
24  .spacer {
25  width: 73px;
26  height: 73px;
27  border: 1px solid green;
 17 .vertical-rl {
 18 -webkit-writing-mode: vertical-rl;
2819 }
2920</style>
 21<script>
 22 window.onload = function () {
 23 var content = 'XXXXXXXXXXXXXXX\nXXXXXXXXXXXXXXX\nXXXXXXXXXXXXXXX\n<div class="spacer" style="float:right"></div>\n<div class="spacer" style="float:left"></div>\nXXXXX\nXXXXX\nXXXXX\nXXXXX\nXXXXX\nXXXXXXXXXXXXXXX\nXXXXXXXXXXXXXXX\nXXXXXXXXXXXXXXX\nXXXXXXXXXXXXXXX\nXXXXXXXXXXXXXXX\nXXXXXXXXXXXXXXX\nXXXXXXXXXXXXXXX';
 24 createRectangleTest('base', 'stylesheet', { height: 200, width: 200 }, { x: 25, y: 0, width: 150, height: 150 }, 'px', content);
 25 createRectangleTest('rl', 'stylesheet', { height: 200, width: 200 }, { x: 0, y: 25, width: 150, height: 150 }, 'px', content);
 26 createRectangleTest('lr', 'stylesheet', { height: 200, width: 200 }, { x: 0, y: 25, width: 150, height: 150 }, 'px', content);
 27 };
 28</script>
3029</head>
3130<body>
32  <div id="shape-inside">
33  <div id="border"></div>
34  <div class="spacer" style="float:left"></div>
35  <div class="spacer" style="float:right"></div>
36  The blue box should contain a green square in both the upper left
37  and upper right corners. This text should flow around the green squares,
38  but within the blue outline.
 31 <h1>The following tests should all be large black squares that contain two smaller green squares on the same line.</h1>
 32 <h2>Standard left right writing mode</h2>
 33 <div id="base" class="container">
3934 </div>
 35 <h2>Vertical Right Left writing mode</h2>
 36 <div id="rl" class="container vertical-rl"></div>
 37 <h2>Vertical Left Right writing mode</h2>
 38 <div id="lr" class="container vertical-lr"></div>
4039</body>
4140</html>