Changeset 97525 in webkit


Ignore:
Timestamp:
Oct 14, 2011 3:49:25 PM (13 years ago)
Author:
robert@webkit.org
Message:

Replaced elements squeezed when width is specified as percentage inside a table with Auto layout
​https://bugs.webkit.org/show_bug.cgi?id=29447

If inserting a 'replaced' element (e.g. image, plugin) in a table cell that is not descendant from
a block with fixed layout then do not squeeze the element, let it use its intrinsic width and height.

Reviewed by David Hyatt.

Source/WebCore:

Test: fast/replaced/table-percent-width.html

  • rendering/RenderBox.cpp:

(WebCore::shouldExpandToIntrinsicDimension):
(WebCore::RenderBox::containingBlockReplacedLogicalWidthForContent):
(WebCore::RenderBox::computeReplacedLogicalWidthUsing):
(WebCore::RenderBox::computeReplacedLogicalHeightUsing):

  • rendering/RenderBox.h:

LayoutTests:

  • fast/replaced/table-percent-width-expected.txt: Added.
  • fast/replaced/table-percent-width.html: Added.
  • platform/chromium-win/fast/replaced/table-percent-height-expected.txt: Rebaselined
Location:
trunk
Files:
2 added
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r97524 r97525  
     12011-09-28  Robert Hogan  <robert@webkit.org>
     2
     3        Replaced elements squeezed when width is specified as percentage inside a table with Auto layout
     4        https://bugs.webkit.org/show_bug.cgi?id=29447
     5
     6        If inserting a 'replaced' element (e.g. image, plugin) in a table cell that is not descendant from
     7        a block with fixed layout then do not squeeze the element, let it use its intrinsic width and height.
     8
     9        Reviewed by David Hyatt.
     10
     11        * fast/replaced/table-percent-width-expected.txt: Added.
     12        * fast/replaced/table-percent-width.html: Added.
     13        * platform/chromium-win/fast/replaced/table-percent-height-expected.txt: Rebaselined
     14
    1152011-10-14  Simon Fraser  <simon.fraser@apple.com>
    216

  • trunk/LayoutTests/platform/chromium-win/fast/replaced/table-percent-height-expected.txt

    r74097 r97525  
     1
     2
    13
    24
    … …  
    2325
    2426
    25 
    26 
    27 This is a searchable index. Enter search keywords:
    28 This is a searchable index. Enter search keywords:
    29 
    30 
    31 
    32 
    3327This test checks that replaced elements with percentage heights within table cells have the correct height.
     28Note, some of the button height tests fail on the Windows ports. See bug #34071.
    3429
    3530On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
    3631
    3732
    38 PASS getComputedStyleForElement(document.getElementById('canvas-75'), 'width') is '300px'
    39 PASS getComputedStyleForElement(document.getElementById('canvas-75'), 'height') is '112px'
    40 PASS getComputedStyleForElement(document.getElementById('canvas-100'), 'width') is '300px'
    41 PASS getComputedStyleForElement(document.getElementById('canvas-100'), 'height') is '150px'
    42 PASS getComputedStyleForElement(document.getElementById('embed-75'), 'width') is '300px'
    43 PASS getComputedStyleForElement(document.getElementById('embed-75'), 'height') is '112px'
    44 PASS getComputedStyleForElement(document.getElementById('embed-100'), 'width') is '300px'
    45 PASS getComputedStyleForElement(document.getElementById('embed-100'), 'height') is '150px'
    46 PASS getComputedStyleForElement(document.getElementById('img-75'), 'width') is '75px'
    47 PASS getComputedStyleForElement(document.getElementById('img-75'), 'height') is '75px'
    48 PASS getComputedStyleForElement(document.getElementById('img-100'), 'width') is '100px'
    49 PASS getComputedStyleForElement(document.getElementById('img-100'), 'height') is '100px'
    50 PASS getComputedStyleForElement(document.getElementById('object-75'), 'width') is '300px'
    51 PASS getComputedStyleForElement(document.getElementById('object-75'), 'height') is '112px'
    52 PASS getComputedStyleForElement(document.getElementById('object-100'), 'width') is '300px'
    53 PASS getComputedStyleForElement(document.getElementById('object-100'), 'height') is '150px'
    54 PASS getComputedStyleForElement(document.getElementById('button-75'), 'width') is '51px'
    55 PASS getComputedStyleForElement(document.getElementById('button-75'), 'height') is '15px'
    56 PASS getComputedStyleForElement(document.getElementById('button-100'), 'width') is '51px'
    57 PASS getComputedStyleForElement(document.getElementById('button-100'), 'height') is '15px'
    58 PASS getComputedStyleForElement(document.getElementById('input-button-75'), 'width') is '16px'
    59 PASS getComputedStyleForElement(document.getElementById('input-button-75'), 'height') is '18px'
    60 PASS getComputedStyleForElement(document.getElementById('input-button-100'), 'width') is '16px'
    61 PASS getComputedStyleForElement(document.getElementById('input-button-100'), 'height') is '18px'
    62 PASS getComputedStyleForElement(document.getElementById('input-checkbox-75'), 'width') is '12px'
    63 PASS getComputedStyleForElement(document.getElementById('input-checkbox-75'), 'height') is '4px'
    64 PASS getComputedStyleForElement(document.getElementById('input-checkbox-100'), 'width') is '12px'
    65 PASS getComputedStyleForElement(document.getElementById('input-checkbox-100'), 'height') is '6px'
    66 PASS getComputedStyleForElement(document.getElementById('input-file-75'), 'width') is '237px'
    67 PASS getComputedStyleForElement(document.getElementById('input-file-75'), 'height') is '13px'
    68 PASS getComputedStyleForElement(document.getElementById('input-file-100'), 'width') is '237px'
    69 PASS getComputedStyleForElement(document.getElementById('input-file-100'), 'height') is '18px'
    70 PASS getComputedStyleForElement(document.getElementById('input-image-75'), 'width') is '75px'
    71 PASS getComputedStyleForElement(document.getElementById('input-image-75'), 'height') is '75px'
    72 PASS getComputedStyleForElement(document.getElementById('input-image-100'), 'width') is '100px'
    73 PASS getComputedStyleForElement(document.getElementById('input-image-100'), 'height') is '100px'
    74 FAIL getComputedStyleForElement(document.getElementById('input-password-75'), 'width') should be 148px. Was 146px.
    75 PASS getComputedStyleForElement(document.getElementById('input-password-75'), 'height') is '8px'
    76 FAIL getComputedStyleForElement(document.getElementById('input-password-100'), 'width') should be 148px. Was 146px.
    77 PASS getComputedStyleForElement(document.getElementById('input-password-100'), 'height') is '13px'
    78 PASS getComputedStyleForElement(document.getElementById('input-radio-75'), 'width') is '12px'
    79 FAIL getComputedStyleForElement(document.getElementById('input-radio-75'), 'height') should be 4px. Was 2px.
    80 PASS getComputedStyleForElement(document.getElementById('input-radio-100'), 'width') is '12px'
    81 FAIL getComputedStyleForElement(document.getElementById('input-radio-100'), 'height') should be 6px. Was 3px.
    82 PASS getComputedStyleForElement(document.getElementById('input-reset-75'), 'width') is '45px'
    83 PASS getComputedStyleForElement(document.getElementById('input-reset-75'), 'height') is '18px'
    84 PASS getComputedStyleForElement(document.getElementById('input-reset-100'), 'width') is '45px'
    85 PASS getComputedStyleForElement(document.getElementById('input-reset-100'), 'height') is '18px'
    86 PASS getComputedStyleForElement(document.getElementById('input-submit-75'), 'width') is '54px'
    87 PASS getComputedStyleForElement(document.getElementById('input-submit-75'), 'height') is '18px'
    88 PASS getComputedStyleForElement(document.getElementById('input-submit-100'), 'width') is '54px'
    89 PASS getComputedStyleForElement(document.getElementById('input-submit-100'), 'height') is '18px'
    90 FAIL getComputedStyleForElement(document.getElementById('input-text-75'), 'width') should be 148px. Was 146px.
    91 PASS getComputedStyleForElement(document.getElementById('input-text-75'), 'height') is '8px'
    92 FAIL getComputedStyleForElement(document.getElementById('input-text-100'), 'width') should be 148px. Was 146px.
    93 PASS getComputedStyleForElement(document.getElementById('input-text-100'), 'height') is '13px'
    94 PASS getComputedStyleForElement(document.getElementById('isindex-75'), 'width') is '142px'
    95 PASS getComputedStyleForElement(document.getElementById('isindex-75'), 'height') is '13px'
    96 PASS getComputedStyleForElement(document.getElementById('isindex-100'), 'width') is '142px'
    97 PASS getComputedStyleForElement(document.getElementById('isindex-100'), 'height') is '13px'
    98 PASS getComputedStyleForElement(document.getElementById('select-75'), 'width') is '68px'
    99 PASS getComputedStyleForElement(document.getElementById('select-75'), 'height') is '18px'
    100 PASS getComputedStyleForElement(document.getElementById('select-100'), 'width') is '68px'
    101 PASS getComputedStyleForElement(document.getElementById('select-100'), 'height') is '18px'
    102 PASS getComputedStyleForElement(document.getElementById('textarea-75'), 'width') is '163px'
    103 PASS getComputedStyleForElement(document.getElementById('textarea-75'), 'height') is '19px'
    104 PASS getComputedStyleForElement(document.getElementById('textarea-100'), 'width') is '163px'
    105 PASS getComputedStyleForElement(document.getElementById('textarea-100'), 'height') is '26px'
     33PASS getWidth('canvas-75') is '224px'
     34PASS getHeight('canvas-75') is '112px'
     35PASS getWidth('canvas-100') is '300px'
     36PASS getHeight('canvas-100') is '150px'
     37PASS getWidth('embed-75') is '300px'
     38PASS getHeight('embed-75') is '112px'
     39PASS getWidth('embed-100') is '300px'
     40PASS getHeight('embed-100') is '150px'
     41PASS getWidth('img-75') is '75px'
     42PASS getHeight('img-75') is '75px'
     43PASS getWidth('img-100') is '100px'
     44PASS getHeight('img-100') is '100px'
     45PASS getWidth('img-75-nested') is '75px'
     46PASS getHeight('img-75-nested') is '75px'
     47PASS getWidth('img-100-nested') is '100px'
     48PASS getHeight('img-100-nested') is '100px'
     49PASS getWidth('object-75') is '300px'
     50PASS getHeight('object-75') is '112px'
     51PASS getWidth('object-100') is '300px'
     52PASS getHeight('object-100') is '150px'
     53PASS getWidth('button-75') is getWidth('button-100')
     54PASS getHeight('button-75') != '0px' is true
     55FAIL getHeight('button-75') should be 16px. Was 10px.
     56PASS getWidth('input-button-75') is getWidth('input-button-100')
     57PASS getHeight('input-button-75') != '0px' is true
     58FAIL getHeight('input-button-75') should be 16px. Was 10px.
     59PASS getWidth('input-checkbox-75') is getWidth('input-checkbox-100')
     60PASS getHeight('input-checkbox-75') != '0px' is true
     61PASS getHeight('input-checkbox-75') is 75% of getHeight('input-checkbox-100').
     62PASS getWidth('input-file-75') is getWidth('input-file-100')
     63PASS getHeight('input-file-75') != '0px' is true
     64PASS getHeight('input-file-75') is 75% of getHeight('input-file-100').
     65PASS getWidth('input-image-75') is '75px'
     66PASS getHeight('input-image-75') is '75px'
     67PASS getWidth('input-image-100') is '100px'
     68PASS getHeight('input-image-100') is '100px'
     69PASS getWidth('input-radio-75') is getWidth('input-radio-100')
     70PASS getHeight('input-radio-75') != '0px' is true
     71PASS getHeight('input-radio-75') is 75% of getHeight('input-radio-100').
     72PASS getWidth('input-reset-75') is getWidth('input-reset-100')
     73PASS getHeight('input-reset-75') != '0px' is true
     74FAIL getHeight('input-reset-75') should be 16px. Was 10px.
     75PASS getWidth('input-submit-75') is getWidth('input-submit-100')
     76PASS getHeight('input-submit-75') != '0px' is true
     77FAIL getHeight('input-submit-75') should be 16px. Was 10px.
     78PASS getWidth('select-75') is getWidth('select-100')
     79PASS getHeight('select-75') != '0px' is true
     80FAIL getHeight('select-75') should be 18px. Was 13px.
    10681PASS successfullyParsed is true
    10782

  • trunk/Source/WebCore/ChangeLog

    r97519 r97525  
     12011-09-28  Robert Hogan  <robert@webkit.org>
     2
     3        Replaced elements squeezed when width is specified as percentage inside a table with Auto layout
     4        https://bugs.webkit.org/show_bug.cgi?id=29447
     5
     6        If inserting a 'replaced' element (e.g. image, plugin) in a table cell that is not descendant from
     7        a block with fixed layout then do not squeeze the element, let it use its intrinsic width and height.
     8
     9        Reviewed by David Hyatt.
     10
     11        Test: fast/replaced/table-percent-width.html
     12
     13        * rendering/RenderBox.cpp:
     14        (WebCore::shouldExpandToIntrinsicDimension):
     15        (WebCore::RenderBox::containingBlockReplacedLogicalWidthForContent):
     16        (WebCore::RenderBox::computeReplacedLogicalWidthUsing):
     17        (WebCore::RenderBox::computeReplacedLogicalHeightUsing):
     18        * rendering/RenderBox.h:
     19
    1202011-10-14  Cary Clark  <caryclark@google.com>
    221

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

    r97448 r97525  
    12721272}
    12731273
     1274enum IntrinsicDimension { LogicalHeightDimension, LogicalWidthDimension };
     1275
     1276static bool shouldExpandToIntrinsicDimension(RenderBlock* cb, IntrinsicDimension dimension)
     1277{
     1278    // This function allows images to size correctly to their intrinsic height/width when inside table cells
     1279    // that only have percent or auto height/width.
     1280    // It's only interested in inspecting as far as the containing table, if there is one.
     1281    bool inTableCell = false;
     1282    while (cb && !cb->isRenderView()) {
     1283        if (cb->isTableCell())
     1284            inTableCell = true;
     1285
     1286        if (dimension == LogicalHeightDimension && !cb->style()->logicalHeight().isAuto() && !cb->style()->logicalHeight().isPercent())
     1287            return false;
     1288        if (dimension == LogicalWidthDimension && !cb->style()->logicalWidth().isAuto() && !cb->style()->logicalWidth().isPercent())
     1289            return false;
     1290
     1291        if (cb->isTable())
     1292            break;
     1293
     1294        cb = cb->containingBlock();
     1295    }
     1296    return inTableCell;
     1297}
     1298
     1299LayoutUnit RenderBox::containingBlockReplacedLogicalWidthForContent() const
     1300{
     1301    RenderBlock* cb = containingBlock();
     1302    if (shouldExpandToIntrinsicDimension(cb, LogicalWidthDimension))
     1303        return max(shrinkToAvoidFloats() ? cb->availableLogicalWidthForLine(logicalTop(), false) : cb->availableLogicalWidth(), intrinsicLogicalWidth());
     1304    return containingBlockLogicalWidthForContent();
     1305}
     1306
    12741307LayoutUnit RenderBox::containingBlockLogicalWidthForContent() const
    12751308{
    … …  
    21782211            // containing block's block-flow.
    21792212            // https://bugs.webkit.org/show_bug.cgi?id=46496
    2180             const LayoutUnit cw = isPositioned() ? containingBlockLogicalWidthForPositioned(toRenderBoxModelObject(container())) : containingBlockLogicalWidthForContent();
     2213            const LayoutUnit cw = isPositioned() ? containingBlockLogicalWidthForPositioned(toRenderBoxModelObject(container())) : containingBlockReplacedLogicalWidthForContent();
    21812214            if (cw > 0)
    21822215                return computeContentBoxLogicalWidth(logicalWidth.calcMinValue(cw));
    … …  
    22382271                // FIXME: This needs to be made block-flow-aware.  If the cell and image are perpendicular block-flows, this isn't right.
    22392272                // https://bugs.webkit.org/show_bug.cgi?id=46997
    2240                 while (cb && !cb->isRenderView() && (cb->style()->logicalHeight().isAuto() || cb->style()->logicalHeight().isPercent())) {
    2241                     if (cb->isTableCell()) {
    2242                         // Don't let table cells squeeze percent-height replaced elements
    2243                         // <http://bugs.webkit.org/show_bug.cgi?id=15359>
    2244                         availableHeight = max(availableHeight, intrinsicLogicalHeight());
    2245                         return logicalHeight.calcValue(availableHeight - borderAndPaddingLogicalHeight());
    2246                     }
    2247                     cb = cb->containingBlock();
     2273                if (shouldExpandToIntrinsicDimension(toRenderBlock(cb), LogicalHeightDimension)) {
     2274                    availableHeight = max(availableHeight, intrinsicLogicalHeight());
     2275                    return logicalHeight.calcValue(availableHeight - borderAndPaddingLogicalHeight());
    22482276                }
    22492277            }

  • trunk/Source/WebCore/rendering/RenderBox.h

    r97289 r97525  
    298298    LayoutUnit containingBlockLogicalWidthForContentInRegion(RenderRegion*, LayoutUnit offsetFromLogicalTopOfFirstPage) const;
    299299    LayoutUnit perpendicularContainingBlockLogicalHeight() const;
     300    LayoutUnit containingBlockReplacedLogicalWidthForContent() const;
    300301   
    301302    virtual void computeLogicalWidth();
Note: See TracChangeset for help on using the changeset viewer.