Changeset 134265 in webkit


Ignore:
Timestamp:
Nov 12, 2012 11:20:26 AM (12 years ago)
Author:
commit-queue@webkit.org
Message:

Source/WebCore: Specified width CSS tables should not include border and padding as part of that width.
​https://bugs.webkit.org/show_bug.cgi?id=77028

Patch by Arpita Bahuguna <​arpitabahuguna@gmail.com> on 2012-11-12
Reviewed by Julien Chaffraix.

CSS table width should not include border and padding even though HTML
tables size as though their width includes border/padding.

This is applicable for all CSS tables with specified widths.

The change would also make our rendering of CSS tables with specified
width similar to that of Opera, IE and FF.

Test: fast/table/css-table-width-with-border-padding.html

  • rendering/RenderTable.cpp:

(WebCore::RenderTable::convertStyleLogicalWidthToComputedWidth):
Added check for all (positive) specified widths for CSS tables to
consider border and padding outside of the specified width.

LayoutTests: Specified width CSS tables should not include border and padding as part of that width.
​https://bugs.webkit.org/show_bug.cgi?id=77028

Patch by Arpita Bahuguna <​arpitabahuguna@gmail.com> on 2012-11-12
Reviewed by Julien Chaffraix.

  • fast/table/css-table-width-with-border-padding-expected.html: Added.
  • fast/table/css-table-width-with-border-padding.html: Added.

Test added for verifying that for specified width css tables, border
and padding are not considered as part of the specified table width.

The test also verifies the width values for the different box-sizing
properties viz, content-box, border-box and padding-box.

Out of these padding-box is currently not supported even though
the test verifies against this property as well.
The expected width values added for padding-box are thus incorrect
and should be lesser by 100px (padding value).

  • fast/table/min-width-css-block-table-expected.txt:
  • fast/table/min-width-css-inline-table-expected.txt:
  • fast/table/script-tests/min-width-helpers.js:

Existing test values changed for CSS tables that have percent width
specified since for both these tests, border and padding has been
specified for all the tables.

As a result of this fix, the specified table width shall no longer
include the border and padding values thereby increasing our table
width size by exactly 30px (the value of border and padding in these
tests).
The new values for percent width css tables now match those for FF
and Opera.

Location:
trunk
Files:
2 added
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r134252 r134265  
     12012-11-12  Arpita Bahuguna  <arpitabahuguna@gmail.com>
     2
     3        Specified width CSS tables should not include border and padding as part of that width.
     4        https://bugs.webkit.org/show_bug.cgi?id=77028
     5
     6        Reviewed by Julien Chaffraix.
     7
     8        * fast/table/css-table-width-with-border-padding-expected.html: Added.
     9        * fast/table/css-table-width-with-border-padding.html: Added.
     10        Test added for verifying that for specified width css tables, border
     11        and padding are not considered as part of the specified table width.
     12
     13        The test also verifies the width values for the different box-sizing
     14        properties viz, content-box, border-box and padding-box.
     15
     16        Out of these padding-box is currently not supported even though
     17        the test verifies against this property as well.
     18        The expected width values added for padding-box are thus incorrect
     19        and should be lesser by 100px (padding value).
     20
     21        * fast/table/min-width-css-block-table-expected.txt:
     22        * fast/table/min-width-css-inline-table-expected.txt:
     23        * fast/table/script-tests/min-width-helpers.js:
     24        Existing test values changed for CSS tables that have percent width
     25        specified since for both these tests, border and padding has been
     26        specified for all the tables.
     27
     28        As a result of this fix, the specified table width shall no longer
     29        include the border and padding values thereby increasing our table
     30        width size by exactly 30px (the value of border and padding in these
     31        tests).
     32        The new values for percent width css tables now match those for FF
     33        and Opera.
     34
    1352012-11-12  David Grogan  <dgrogan@chromium.org>
    236

  • trunk/LayoutTests/fast/table/min-width-css-block-table-expected.txt

    r106479 r134265  
    2626PASS computeLogicalWidth('horizontal', 'ltr', 'width: 600px; min-width: 500px;') is '600px'
    2727PASS computeLogicalWidth('horizontal', 'ltr', 'width: 400px; min-width: 500px;') is '500px'
    28 PASS computeLogicalWidth('horizontal', 'ltr', 'width: 60%; min-width: 500px;') is '570px'
     28PASS computeLogicalWidth('horizontal', 'ltr', 'width: 60%; min-width: 500px;') is '600px'
    2929PASS computeLogicalWidth('horizontal', 'ltr', 'width: 40%; min-width: 500px;') is '500px'
    30 PASS computeLogicalWidth('horizontal', 'ltr', 'min-width: 50%;') is '470px'
     30PASS computeLogicalWidth('horizontal', 'ltr', 'min-width: 50%;') is '500px'
    3131PASS computeLogicalWidth('horizontal', 'ltr', 'min-width: 15%;') is '250px'
    3232PASS computeLogicalWidth('horizontal', 'ltr', 'min-width: 5%;') is '250px'
    3333PASS computeLogicalWidth('horizontal', 'ltr', 'width: 600px; min-width: 50%;') is '600px'
    34 PASS computeLogicalWidth('horizontal', 'ltr', 'width: 400px; min-width: 50%;') is '470px'
    35 PASS computeLogicalWidth('horizontal', 'ltr', 'width: 60%; min-width: 50%;') is '570px'
    36 PASS computeLogicalWidth('horizontal', 'ltr', 'width: 40%; min-width: 50%;') is '470px'
     34PASS computeLogicalWidth('horizontal', 'ltr', 'width: 400px; min-width: 50%;') is '500px'
     35PASS computeLogicalWidth('horizontal', 'ltr', 'width: 60%; min-width: 50%;') is '600px'
     36PASS computeLogicalWidth('horizontal', 'ltr', 'width: 40%; min-width: 50%;') is '500px'
    3737PASS computeLogicalWidth('horizontal', 'ltr', 'min-width: auto;') is '250px'
    3838
    … …  
    4444PASS computeLogicalWidth('horizontal', 'rtl', 'width: 600px; min-width: 500px;') is '600px'
    4545PASS computeLogicalWidth('horizontal', 'rtl', 'width: 400px; min-width: 500px;') is '500px'
    46 PASS computeLogicalWidth('horizontal', 'rtl', 'width: 60%; min-width: 500px;') is '570px'
     46PASS computeLogicalWidth('horizontal', 'rtl', 'width: 60%; min-width: 500px;') is '600px'
    4747PASS computeLogicalWidth('horizontal', 'rtl', 'width: 40%; min-width: 500px;') is '500px'
    48 PASS computeLogicalWidth('horizontal', 'rtl', 'min-width: 50%;') is '470px'
     48PASS computeLogicalWidth('horizontal', 'rtl', 'min-width: 50%;') is '500px'
    4949PASS computeLogicalWidth('horizontal', 'rtl', 'min-width: 15%;') is '250px'
    5050PASS computeLogicalWidth('horizontal', 'rtl', 'min-width: 5%;') is '250px'
    5151PASS computeLogicalWidth('horizontal', 'rtl', 'width: 600px; min-width: 50%;') is '600px'
    52 PASS computeLogicalWidth('horizontal', 'rtl', 'width: 400px; min-width: 50%;') is '470px'
    53 PASS computeLogicalWidth('horizontal', 'rtl', 'width: 60%; min-width: 50%;') is '570px'
    54 PASS computeLogicalWidth('horizontal', 'rtl', 'width: 40%; min-width: 50%;') is '470px'
     52PASS computeLogicalWidth('horizontal', 'rtl', 'width: 400px; min-width: 50%;') is '500px'
     53PASS computeLogicalWidth('horizontal', 'rtl', 'width: 60%; min-width: 50%;') is '600px'
     54PASS computeLogicalWidth('horizontal', 'rtl', 'width: 40%; min-width: 50%;') is '500px'
    5555PASS computeLogicalWidth('horizontal', 'rtl', 'min-width: auto;') is '250px'
    5656
    … …  
    6464PASS computeLogicalWidth('vertical', 'ltr', 'height: 600px; min-height: 500px;') is '600px'
    6565PASS computeLogicalWidth('vertical', 'ltr', 'height: 400px; min-height: 500px;') is '500px'
    66 PASS computeLogicalWidth('vertical', 'ltr', 'height: 60%; min-height: 500px;') is '570px'
     66PASS computeLogicalWidth('vertical', 'ltr', 'height: 60%; min-height: 500px;') is '600px'
    6767PASS computeLogicalWidth('vertical', 'ltr', 'height: 40%; min-height: 500px;') is '500px'
    68 PASS computeLogicalWidth('vertical', 'ltr', 'min-height: 50%;') is '470px'
     68PASS computeLogicalWidth('vertical', 'ltr', 'min-height: 50%;') is '500px'
    6969PASS computeLogicalWidth('vertical', 'ltr', 'min-height: 15%;') is '250px'
    7070PASS computeLogicalWidth('vertical', 'ltr', 'min-height: 5%;') is '250px'
    7171PASS computeLogicalWidth('vertical', 'ltr', 'height: 600px; min-height: 50%;') is '600px'
    72 PASS computeLogicalWidth('vertical', 'ltr', 'height: 400px; min-height: 50%;') is '470px'
    73 PASS computeLogicalWidth('vertical', 'ltr', 'height: 60%; min-height: 50%;') is '570px'
    74 PASS computeLogicalWidth('vertical', 'ltr', 'height: 40%; min-height: 50%;') is '470px'
     72PASS computeLogicalWidth('vertical', 'ltr', 'height: 400px; min-height: 50%;') is '500px'
     73PASS computeLogicalWidth('vertical', 'ltr', 'height: 60%; min-height: 50%;') is '600px'
     74PASS computeLogicalWidth('vertical', 'ltr', 'height: 40%; min-height: 50%;') is '500px'
    7575PASS computeLogicalWidth('vertical', 'ltr', 'min-height: auto;') is '250px'
    7676
    … …  
    8282PASS computeLogicalWidth('vertical', 'rtl', 'height: 600px; min-height: 500px;') is '600px'
    8383PASS computeLogicalWidth('vertical', 'rtl', 'height: 400px; min-height: 500px;') is '500px'
    84 PASS computeLogicalWidth('vertical', 'rtl', 'height: 60%; min-height: 500px;') is '570px'
     84PASS computeLogicalWidth('vertical', 'rtl', 'height: 60%; min-height: 500px;') is '600px'
    8585PASS computeLogicalWidth('vertical', 'rtl', 'height: 40%; min-height: 500px;') is '500px'
    86 PASS computeLogicalWidth('vertical', 'rtl', 'min-height: 50%;') is '470px'
     86PASS computeLogicalWidth('vertical', 'rtl', 'min-height: 50%;') is '500px'
    8787PASS computeLogicalWidth('vertical', 'rtl', 'min-height: 15%;') is '250px'
    8888PASS computeLogicalWidth('vertical', 'rtl', 'min-height: 5%;') is '250px'
    8989PASS computeLogicalWidth('vertical', 'rtl', 'height: 600px; min-height: 50%;') is '600px'
    90 PASS computeLogicalWidth('vertical', 'rtl', 'height: 400px; min-height: 50%;') is '470px'
    91 PASS computeLogicalWidth('vertical', 'rtl', 'height: 60%; min-height: 50%;') is '570px'
    92 PASS computeLogicalWidth('vertical', 'rtl', 'height: 40%; min-height: 50%;') is '470px'
     90PASS computeLogicalWidth('vertical', 'rtl', 'height: 400px; min-height: 50%;') is '500px'
     91PASS computeLogicalWidth('vertical', 'rtl', 'height: 60%; min-height: 50%;') is '600px'
     92PASS computeLogicalWidth('vertical', 'rtl', 'height: 40%; min-height: 50%;') is '500px'
    9393PASS computeLogicalWidth('vertical', 'rtl', 'min-height: auto;') is '250px'
    9494

  • trunk/LayoutTests/fast/table/min-width-css-inline-table-expected.txt

    r106479 r134265  
    2626PASS computeLogicalWidth('horizontal', 'ltr', 'width: 600px; min-width: 500px;') is '600px'
    2727PASS computeLogicalWidth('horizontal', 'ltr', 'width: 400px; min-width: 500px;') is '500px'
    28 PASS computeLogicalWidth('horizontal', 'ltr', 'width: 60%; min-width: 500px;') is '570px'
     28PASS computeLogicalWidth('horizontal', 'ltr', 'width: 60%; min-width: 500px;') is '600px'
    2929PASS computeLogicalWidth('horizontal', 'ltr', 'width: 40%; min-width: 500px;') is '500px'
    30 PASS computeLogicalWidth('horizontal', 'ltr', 'min-width: 50%;') is '470px'
     30PASS computeLogicalWidth('horizontal', 'ltr', 'min-width: 50%;') is '500px'
    3131PASS computeLogicalWidth('horizontal', 'ltr', 'min-width: 15%;') is '250px'
    3232PASS computeLogicalWidth('horizontal', 'ltr', 'min-width: 5%;') is '250px'
    3333PASS computeLogicalWidth('horizontal', 'ltr', 'width: 600px; min-width: 50%;') is '600px'
    34 PASS computeLogicalWidth('horizontal', 'ltr', 'width: 400px; min-width: 50%;') is '470px'
    35 PASS computeLogicalWidth('horizontal', 'ltr', 'width: 60%; min-width: 50%;') is '570px'
    36 PASS computeLogicalWidth('horizontal', 'ltr', 'width: 40%; min-width: 50%;') is '470px'
     34PASS computeLogicalWidth('horizontal', 'ltr', 'width: 400px; min-width: 50%;') is '500px'
     35PASS computeLogicalWidth('horizontal', 'ltr', 'width: 60%; min-width: 50%;') is '600px'
     36PASS computeLogicalWidth('horizontal', 'ltr', 'width: 40%; min-width: 50%;') is '500px'
    3737PASS computeLogicalWidth('horizontal', 'ltr', 'min-width: auto;') is '250px'
    3838
    … …  
    4444PASS computeLogicalWidth('horizontal', 'rtl', 'width: 600px; min-width: 500px;') is '600px'
    4545PASS computeLogicalWidth('horizontal', 'rtl', 'width: 400px; min-width: 500px;') is '500px'
    46 PASS computeLogicalWidth('horizontal', 'rtl', 'width: 60%; min-width: 500px;') is '570px'
     46PASS computeLogicalWidth('horizontal', 'rtl', 'width: 60%; min-width: 500px;') is '600px'
    4747PASS computeLogicalWidth('horizontal', 'rtl', 'width: 40%; min-width: 500px;') is '500px'
    48 PASS computeLogicalWidth('horizontal', 'rtl', 'min-width: 50%;') is '470px'
     48PASS computeLogicalWidth('horizontal', 'rtl', 'min-width: 50%;') is '500px'
    4949PASS computeLogicalWidth('horizontal', 'rtl', 'min-width: 15%;') is '250px'
    5050PASS computeLogicalWidth('horizontal', 'rtl', 'min-width: 5%;') is '250px'
    5151PASS computeLogicalWidth('horizontal', 'rtl', 'width: 600px; min-width: 50%;') is '600px'
    52 PASS computeLogicalWidth('horizontal', 'rtl', 'width: 400px; min-width: 50%;') is '470px'
    53 PASS computeLogicalWidth('horizontal', 'rtl', 'width: 60%; min-width: 50%;') is '570px'
    54 PASS computeLogicalWidth('horizontal', 'rtl', 'width: 40%; min-width: 50%;') is '470px'
     52PASS computeLogicalWidth('horizontal', 'rtl', 'width: 400px; min-width: 50%;') is '500px'
     53PASS computeLogicalWidth('horizontal', 'rtl', 'width: 60%; min-width: 50%;') is '600px'
     54PASS computeLogicalWidth('horizontal', 'rtl', 'width: 40%; min-width: 50%;') is '500px'
    5555PASS computeLogicalWidth('horizontal', 'rtl', 'min-width: auto;') is '250px'
    5656
    … …  
    6464PASS computeLogicalWidth('vertical', 'ltr', 'height: 600px; min-height: 500px;') is '600px'
    6565PASS computeLogicalWidth('vertical', 'ltr', 'height: 400px; min-height: 500px;') is '500px'
    66 PASS computeLogicalWidth('vertical', 'ltr', 'height: 60%; min-height: 500px;') is '570px'
     66PASS computeLogicalWidth('vertical', 'ltr', 'height: 60%; min-height: 500px;') is '600px'
    6767PASS computeLogicalWidth('vertical', 'ltr', 'height: 40%; min-height: 500px;') is '500px'
    68 PASS computeLogicalWidth('vertical', 'ltr', 'min-height: 50%;') is '470px'
     68PASS computeLogicalWidth('vertical', 'ltr', 'min-height: 50%;') is '500px'
    6969PASS computeLogicalWidth('vertical', 'ltr', 'min-height: 15%;') is '250px'
    7070PASS computeLogicalWidth('vertical', 'ltr', 'min-height: 5%;') is '250px'
    7171PASS computeLogicalWidth('vertical', 'ltr', 'height: 600px; min-height: 50%;') is '600px'
    72 PASS computeLogicalWidth('vertical', 'ltr', 'height: 400px; min-height: 50%;') is '470px'
    73 PASS computeLogicalWidth('vertical', 'ltr', 'height: 60%; min-height: 50%;') is '570px'
    74 PASS computeLogicalWidth('vertical', 'ltr', 'height: 40%; min-height: 50%;') is '470px'
     72PASS computeLogicalWidth('vertical', 'ltr', 'height: 400px; min-height: 50%;') is '500px'
     73PASS computeLogicalWidth('vertical', 'ltr', 'height: 60%; min-height: 50%;') is '600px'
     74PASS computeLogicalWidth('vertical', 'ltr', 'height: 40%; min-height: 50%;') is '500px'
    7575PASS computeLogicalWidth('vertical', 'ltr', 'min-height: auto;') is '250px'
    7676
    … …  
    8282PASS computeLogicalWidth('vertical', 'rtl', 'height: 600px; min-height: 500px;') is '600px'
    8383PASS computeLogicalWidth('vertical', 'rtl', 'height: 400px; min-height: 500px;') is '500px'
    84 PASS computeLogicalWidth('vertical', 'rtl', 'height: 60%; min-height: 500px;') is '570px'
     84PASS computeLogicalWidth('vertical', 'rtl', 'height: 60%; min-height: 500px;') is '600px'
    8585PASS computeLogicalWidth('vertical', 'rtl', 'height: 40%; min-height: 500px;') is '500px'
    86 PASS computeLogicalWidth('vertical', 'rtl', 'min-height: 50%;') is '470px'
     86PASS computeLogicalWidth('vertical', 'rtl', 'min-height: 50%;') is '500px'
    8787PASS computeLogicalWidth('vertical', 'rtl', 'min-height: 15%;') is '250px'
    8888PASS computeLogicalWidth('vertical', 'rtl', 'min-height: 5%;') is '250px'
    8989PASS computeLogicalWidth('vertical', 'rtl', 'height: 600px; min-height: 50%;') is '600px'
    90 PASS computeLogicalWidth('vertical', 'rtl', 'height: 400px; min-height: 50%;') is '470px'
    91 PASS computeLogicalWidth('vertical', 'rtl', 'height: 60%; min-height: 50%;') is '570px'
    92 PASS computeLogicalWidth('vertical', 'rtl', 'height: 40%; min-height: 50%;') is '470px'
     90PASS computeLogicalWidth('vertical', 'rtl', 'height: 400px; min-height: 50%;') is '500px'
     91PASS computeLogicalWidth('vertical', 'rtl', 'height: 60%; min-height: 50%;') is '600px'
     92PASS computeLogicalWidth('vertical', 'rtl', 'height: 40%; min-height: 50%;') is '500px'
    9393PASS computeLogicalWidth('vertical', 'rtl', 'min-height: auto;') is '250px'
    9494

  • trunk/LayoutTests/fast/table/script-tests/min-width-helpers.js

    r106479 r134265  
    3030    {"min-width": "500px", "width": "400px", "computed-width": {"css": "500px", "html": "470px"}},
    3131    /* fixed min-width, percent width */
    32     {"min-width": "500px", "width": "60%", "computed-width": {"css": "570px", "html": "570px"}},
     32    {"min-width": "500px", "width": "60%", "computed-width": {"css": "600px", "html": "570px"}},
    3333    {"min-width": "500px", "width": "40%", "computed-width": {"css": "500px", "html": "470px"}},
    3434    /* percent min-width, auto width */
    35     {"min-width": "50%", "width": null, "computed-width": {"css": "470px", "html": "470px"}},
     35    {"min-width": "50%", "width": null, "computed-width": {"css": "500px", "html": "470px"}},
    3636    {"min-width": "15%", "width": null, "computed-width": {"css": "250px", "html": "250px"}},
    3737    {"min-width": "5%", "width": null, "computed-width": {"css": "250px", "html": "250px"}},
    3838    /* percent min-width, fixed width */
    3939    {"min-width": "50%", "width": "600px", "computed-width": {"css": "600px", "html": "570px"}},
    40     {"min-width": "50%", "width": "400px", "computed-width": {"css": "470px", "html": "470px"}},
     40    {"min-width": "50%", "width": "400px", "computed-width": {"css": "500px", "html": "470px"}},
    4141     /* percent min-width, percent width */
    42     {"min-width": "50%", "width": "60%", "computed-width": {"css": "570px", "html": "570px"}},
    43     {"min-width": "50%", "width": "40%", "computed-width": {"css": "470px", "html": "470px"}},
     42    {"min-width": "50%", "width": "60%", "computed-width": {"css": "600px", "html": "570px"}},
     43    {"min-width": "50%", "width": "40%", "computed-width": {"css": "500px", "html": "470px"}},
    4444     /* auto min-width (shouldn't affect anything), auto width */
    4545    {"min-width": "auto", "width": null, "computed-width": {"css": "250px", "html": "250px"}},

  • trunk/Source/WebCore/ChangeLog

    r134262 r134265  
     12012-11-12  Arpita Bahuguna  <arpitabahuguna@gmail.com>
     2
     3        Specified width CSS tables should not include border and padding as part of that width.
     4        https://bugs.webkit.org/show_bug.cgi?id=77028
     5
     6        Reviewed by Julien Chaffraix.
     7
     8        CSS table width should not include border and padding even though HTML
     9        tables size as though their width includes border/padding.
     10
     11        This is applicable for all CSS tables with specified widths.
     12
     13        The change would also make our rendering of CSS tables with specified
     14        width similar to that of Opera, IE and FF.
     15
     16        Test: fast/table/css-table-width-with-border-padding.html
     17
     18        * rendering/RenderTable.cpp:
     19        (WebCore::RenderTable::convertStyleLogicalWidthToComputedWidth):
     20        Added check for all (positive) specified widths for CSS tables to
     21        consider border and padding outside of the specified width.
     22
    1232012-11-12  Allan Sandfeld Jensen  <allan.jensen@digia.com>
    224

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

    r133779 r134265  
    319319    LayoutUnit borders = 0;
    320320    bool isCSSTable = !node() || !node()->hasTagName(tableTag);
    321     if (isCSSTable && styleLogicalWidth.isFixed() && styleLogicalWidth.isPositive()) {
     321    if (isCSSTable && styleLogicalWidth.isSpecified() && styleLogicalWidth.isPositive()) {
    322322        recalcBordersInRowDirection();
    323323        if (style()->boxSizing() == CONTENT_BOX)
Note: See TracChangeset for help on using the changeset viewer.