Changeset 137920 in webkit


Ignore:
Timestamp:
Dec 17, 2012 10:27:28 AM (11 years ago)
Author:
commit-queue@webkit.org
Message:

[CSS Exclusions] Floats should respect shape-inside on exclusions
​https://bugs.webkit.org/show_bug.cgi?id=89261

Patch by Bem Jones-Bey <Bem Jones-Bey> on 2012-12-17
Reviewed by David Hyatt.

Source/WebCore:

Position floats properly with respect to an exclusion shape. Note that
this will not attempt to position floats in a polygon that has
multiple segments. In the multiple segment case, the floats will be
positioned as if the exclusion did not exist.

Updated an existing test case to test for this.
Test: fast/exclusions/shape-inside/shape-inside-floats-simple.html

  • rendering/RenderBlock.cpp:

(WebCore::RenderBlock::computeLogicalLocationForFloat): Adjust the
right and left offsets to take into account the right and left offset
contributed by the exclusion shape.

LayoutTests:

Update test to properly test floats with shape-inside.

  • fast/exclusions/shape-inside/shape-inside-floats-simple-expected.html:
  • fast/exclusions/shape-inside/shape-inside-floats-simple.html:
Location:
trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r137913 r137920  
     12012-12-17  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 David Hyatt.
     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-12-17  Antoine Quint  <graouts@apple.com>
    214

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

    r126605 r137920  
    22<html>
    33<head>
    4 <style>
    5     div {
    6         width: 200px;
    7         height: 200px;
    8     }
    9     #shape-inside {
    10         padding: 10px;
    11         position: relative;
    12     }
    13     #border {
    14         position: absolute;
    15         top: 8px;
    16         left: 8px;
    17         border: 2px solid blue;
     4<script src="../resources/simple-rectangle.js"></script>
     5<style id="stylesheet">
     6    .container {
     7        font: 10px/1 Ahem, sans-serif;
    188    }
    199    .spacer {
    20         width: 73px;
    21         height: 73px;
    22         border: 1px solid green;
     10        width: 50px;
     11        height: 50px;
     12        background-color: green;
     13    }
     14    .vertical-lr {
     15        -webkit-writing-mode: vertical-lr;
     16    }
     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>

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

    r127241 r137920  
    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;
    12     }
    13     #shape-inside {
    14         padding: 10px;
    15         position: relative;
    16         -webkit-shape-inside: rectangle(0, 0, 200px, 200px);
    17     }
    18     #border {
    19         position: absolute;
    20         top: 8px;
    21         left: 8px;
    22         border: 2px solid blue;
     4<script src="../resources/simple-rectangle.js"></script>
     5<style id="stylesheet">
     6    .container {
     7        font: 10px/1 Ahem, sans-serif;
    238    }
    249    .spacer {
    25         width: 73px;
    26         height: 73px;
    27         border: 1px solid green;
     10        width: 50px;
     11        height: 50px;
     12        background-color: green;
     13    }
     14    .vertical-lr {
     15        -webkit-writing-mode: vertical-lr;
     16    }
     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>

  • trunk/Source/WebCore/ChangeLog

    r137915 r137920  
     12012-12-17  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 David Hyatt.
     7
     8        Position floats properly with respect to an exclusion shape. Note that
     9        this will not attempt to position floats in a polygon that has
     10        multiple segments. In the multiple segment case, the floats will be
     11        positioned as if the exclusion did not exist.
     12
     13        Updated an existing test case to test for this.
     14        Test: fast/exclusions/shape-inside/shape-inside-floats-simple.html
     15
     16        * rendering/RenderBlock.cpp:
     17        (WebCore::RenderBlock::computeLogicalLocationForFloat): Adjust the
     18        right and left offsets to take into account the right and left offset
     19        contributed by the exclusion shape.
     20
    1212012-12-17  Antoine Quint  <graouts@apple.com>
    222

  • trunk/Source/WebCore/rendering/RenderBlock.cpp

    r137632 r137920  
    38193819{
    38203820    RenderBox* childBox = floatingObject->renderer();
    3821     LayoutUnit logicalRightOffset = logicalRightOffsetForContent(logicalTopOffset); // Constant part of right offset.
    38223821    LayoutUnit logicalLeftOffset = logicalLeftOffsetForContent(logicalTopOffset); // Constant part of left offset.
     3822    LayoutUnit logicalRightOffset; // Constant part of right offset.
     3823#if ENABLE(CSS_EXCLUSIONS)
     3824    // FIXME Bug 102948: This only works for shape outside directly set on this block.
     3825    ExclusionShapeInsideInfo* shapeInsideInfo = exclusionShapeInsideInfo();
     3826    // FIXME Bug 102846: Take into account the height of the content. The offset should be
     3827    // equal to the maximum segment length.
     3828    if (shapeInsideInfo && shapeInsideInfo->hasSegments() && shapeInsideInfo->segments().size() == 1) {
     3829        // FIXME Bug 102949: Add support for shapes with multipe segments.
     3830
     3831        // The segment offsets are relative to the content box.
     3832        logicalRightOffset = logicalLeftOffset + shapeInsideInfo->segments()[0].logicalRight;
     3833        logicalLeftOffset += shapeInsideInfo->segments()[0].logicalLeft;
     3834    } else
     3835#endif
     3836        logicalRightOffset = logicalRightOffsetForContent(logicalTopOffset);
     3837
    38233838    LayoutUnit floatLogicalWidth = min(logicalWidthForFloat(floatingObject), logicalRightOffset - logicalLeftOffset); // The width we look for.
    38243839
Note: See TracChangeset for help on using the changeset viewer.