-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Make table's clientWidth/Height include its border sizes.
Blink doesn't have table wrapper box currently while Gecko has it, so this CL tries to mimic the behavior that clientWidth/Height refers to table wrapper box which doesn't have borders applied to itself and table grid box has the borders. This CL adds table's border sizes to clientWidth/Height at |LayoutBox::PixelSnappedClientWidth/Height|. As a result of this CL, table's clientWidth/Height and offsetWidth/Height are equal now, respectively. The corresponding csswg discussion is w3c/csswg-drafts#4245. Bug: 560528, 978019 Change-Id: I2693eaf38b882fe4a41f931ec1312ecf53352f27 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1763510 Commit-Queue: Joonghun Park <[email protected]> Reviewed-by: Koji Ishii <[email protected]> Reviewed-by: Morten Stenshorne <[email protected]> Reviewed-by: David Grogan <[email protected]> Reviewed-by: Mason Freed <[email protected]> Cr-Commit-Position: refs/heads/master@{#701557}
- Loading branch information
1 parent
3fd2715
commit 7bc2d37
Showing
3 changed files
with
99 additions
and
0 deletions.
There are no files selected for viewing
34 changes: 34 additions & 0 deletions
34
css/cssom-view/table-border-collapse-client-width-height.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| <!DOCTYPE html> | ||
| <title>CSSOM Test: Table with border-collapse: collapse's clientWidth/Height</title> | ||
| <link rel="help" href="https://www.w3.org/TR/CSS2/tables.html#model" /> | ||
| <link rel="help" href="https://www.w3.org/TR/CSS2/tables.html#collapsing-borders" /> | ||
| <link rel="help" href="https://drafts.csswg.org/cssom-view/#extension-to-the-element-interface" /> | ||
| <script src=/resources/testharness.js></script> | ||
| <script src=/resources/testharnessreport.js></script> | ||
| <style> | ||
| table { | ||
| border-collapse: collapse; | ||
| } | ||
| td { | ||
| border: 8px solid #faa; | ||
| } | ||
| </style> | ||
| <table> | ||
| <tbody> | ||
| <tr> | ||
| <td>a</td> | ||
| <td>b</td> | ||
| </tr> | ||
| <tr> | ||
| <td>c</td> | ||
| <td>d</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| <script type="text/javascript"> | ||
| var table = document.getElementsByTagName('table')[0]; | ||
| test(function() { | ||
| assert_equals(table.clientWidth, table.offsetWidth); | ||
| assert_equals(table.clientHeight, table.offsetHeight); | ||
| }, "Table's clientWidth/Height and OffsetWidth/Height should be the same"); | ||
| </script> |
34 changes: 34 additions & 0 deletions
34
css/cssom-view/table-border-separate-client-width-height.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| <!DOCTYPE html> | ||
| <title>CSSOM Test: Table with border-collapse: separate's clientWidth/Height</title> | ||
| <link rel="help" href="https://www.w3.org/TR/CSS2/tables.html#model" /> | ||
| <link rel="help" href="https://www.w3.org/TR/CSS2/tables.html#separated-borders" /> | ||
| <link rel="help" href="https://drafts.csswg.org/cssom-view/#extension-to-the-element-interface" /> | ||
| <script src=/resources/testharness.js></script> | ||
| <script src=/resources/testharnessreport.js></script> | ||
| <style> | ||
| table { | ||
| border-collapse: separate; | ||
| } | ||
| td { | ||
| border: 8px solid #faa; | ||
| } | ||
| </style> | ||
| <table> | ||
| <tbody> | ||
| <tr> | ||
| <td>a</td> | ||
| <td>b</td> | ||
| </tr> | ||
| <tr> | ||
| <td>c</td> | ||
| <td>d</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| <script type="text/javascript"> | ||
| var table = document.getElementsByTagName('table')[0]; | ||
| test(function() { | ||
| assert_equals(table.clientWidth, table.offsetWidth); | ||
| assert_equals(table.clientHeight, table.offsetHeight); | ||
| }, "Table's clientWidth/Height and OffsetWidth/Height should be the same"); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| <!DOCTYPE html> | ||
| <title>CSSOM Test: Table with its own specified border's clientWidth/Height</title> | ||
| <link rel="help" href="https://www.w3.org/TR/CSS2/tables.html#model" /> | ||
| <link rel="help" href="https://www.w3.org/TR/CSS2/tables.html#separated-borders" /> | ||
| <link rel="help" href="https://drafts.csswg.org/cssom-view/#extension-to-the-element-interface" /> | ||
| <script src=/resources/testharness.js></script> | ||
| <script src=/resources/testharnessreport.js></script> | ||
| <style> | ||
| table { | ||
| border: 8px solid #faa; | ||
| } | ||
| </style> | ||
| <table> | ||
| <tbody> | ||
| <tr> | ||
| <td>a</td> | ||
| <td>b</td> | ||
| </tr> | ||
| <tr> | ||
| <td>c</td> | ||
| <td>d</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| <script type="text/javascript"> | ||
| var table = document.getElementsByTagName('table')[0]; | ||
| test(function() { | ||
| assert_equals(table.clientWidth, table.offsetWidth); | ||
| assert_equals(table.clientHeight, table.offsetHeight); | ||
| }, "Table's clientWidth/Height and OffsetWidth/Height should be the same"); | ||
| </script> |