-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[CSS-Sizing] Fix to respect block size with max-content and min-conte…
…nt in a table https://bugs.webkit.org/show_bug.cgi?id=261986 Reviewed by Antti Koivisto. This patch aligns WebKit with Blink / Chromium and Gecko / Firefox. Partial Merge (only RenderTable.cpp): https://chromium.googlesource.com/chromium/src.git/+/3a0c4adda19bade345ca115fdcfe825acf0b8869 The specification [1] says to treat the 'min-content', 'max-content' and 'fit-content' values as the initial value of the property in question, if said property is a block length property. In other words, these CSS values really only make a difference in the inline direction. [1] https://www.w3.org/TR/css-sizing-3/#column-sizing Additionally, it syncs latest test copies from WPT upstream: Upstream Hash: 708e132acaee153316bf9356b0b2ba64c40a2965 * Source/WebCore/rendering/RenderTable.cpp: (RenderTable::layout): * LayoutTests/imported/w3c/resources/import-expectations.json: * LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/block-size-with-min-or-max-content-table-1a.html: Add Test Case * LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/block-size-with-min-or-max-content-table-1a-expected.html: Add Test Case Expectation * LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/block-size-with-min-or-max-content-table-1b.html: Add Test Case * LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/block-size-with-min-or-max-content-table-1b-expected.html: Add Test Case Expectation * LayoutTests/fast/css-intrinsic-dimensions/height-tables-collapsed.html: Removed in favor of WPT test * LayoutTests/fast/css-intrinsic-dimensions/height-tables-collapsed-expected.html: Removed Expectation * LayoutTests/fast/css-intrinsic-dimensions/height-css-tables-collapsed.html: Removed in favor of WPT test * LayoutTests/fast/css-intrinsic-dimensions/height-css-tables-collapsed-expected.html: Removed Expectation Canonical link: https://commits.webkit.org/271054@main
- Loading branch information
1 parent
018e5e8
commit e180ca7
Showing
10 changed files
with
242 additions
and
153 deletions.
There are no files selected for viewing
34 changes: 0 additions & 34 deletions
34
LayoutTests/fast/css-intrinsic-dimensions/height-css-tables-collapsed-expected.html
This file was deleted.
Oops, something went wrong.
40 changes: 0 additions & 40 deletions
40
LayoutTests/fast/css-intrinsic-dimensions/height-css-tables-collapsed.html
This file was deleted.
Oops, something went wrong.
36 changes: 0 additions & 36 deletions
36
LayoutTests/fast/css-intrinsic-dimensions/height-tables-collapsed-expected.html
This file was deleted.
Oops, something went wrong.
40 changes: 0 additions & 40 deletions
40
LayoutTests/fast/css-intrinsic-dimensions/height-tables-collapsed.html
This file was deleted.
Oops, something went wrong.
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
48 changes: 48 additions & 0 deletions
48
...b-platform-tests/css/css-sizing/block-size-with-min-or-max-content-table-1a-expected.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,48 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>CSS Reference Case: Block size with max-content and min-content in a table</title> | ||
| <meta charset="utf-8"> | ||
| <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com"> | ||
| <style> | ||
| html,body { | ||
| margin: 0; | ||
| } | ||
| table { | ||
| border: 2px solid black; | ||
| } | ||
|
|
||
| td { | ||
| border: 2px solid lime; | ||
| } | ||
|
|
||
| .item { | ||
| height: 50px; | ||
| width: 50px; | ||
| border: 1px solid blue; | ||
| } | ||
|
|
||
| .container { | ||
| writing-mode: vertical-lr; | ||
| } | ||
|
|
||
| .small { block-size: 1px; } | ||
| .big { block-size: 150px; } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <table class="big"><td><div class="item"></div></td></table> | ||
| <table class="big"><td><div class="item"></div></td></table> | ||
|
|
||
| <table><td class="small"><div class="item"></div></td></table> | ||
| <table><td class="small"><div class="item"></div></td></table> | ||
| </div> | ||
|
|
||
| <table class="big"><td><div class="item"></div></td></table> | ||
| <table class="big"><td><div class="item"></div></td></table> | ||
|
|
||
| <table><td class="small"><div class="item"></div></td></table> | ||
| <table><td class="small"><div class="item"></div></td></table> | ||
| </body> | ||
| </html> |
70 changes: 70 additions & 0 deletions
70
...ed/w3c/web-platform-tests/css/css-sizing/block-size-with-min-or-max-content-table-1a.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,70 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>CSS Test: Basic cases of width/height (block axis) with max-content and min-content in a table</title> | ||
| <meta charset="utf-8"> | ||
| <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-sizing/#sizing-values"> | ||
| <link rel="match" href="block-size-with-min-or-max-content-table-1-ref.html"> | ||
| <link rel="stylesheet" type="text/css" href="support/min-content-max-content.css"> | ||
| <style> | ||
| html,body { | ||
| margin: 0; | ||
| } | ||
|
|
||
| table { | ||
| border: 2px solid black; | ||
| } | ||
|
|
||
| td { | ||
| border: 2px solid lime; | ||
| } | ||
|
|
||
| .item { | ||
| height: 50px; | ||
| width: 50px; | ||
| border: 1px solid blue; | ||
| } | ||
|
|
||
| .container { | ||
| writing-mode: vertical-lr; | ||
| } | ||
|
|
||
| .small-h { height: 1px; } | ||
| .big-h { height: 150px; } | ||
| .small-w { width: 1px; } | ||
| .big-w { width: 150px; } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <table class="big-w max-width-min-content"> | ||
| <td><div class="item"></div></td> | ||
| </table> | ||
| <table class="big-w max-width-max-content"> | ||
| <td><div class="item"></div></td> | ||
| </table> | ||
|
|
||
| <table class="small-w min-width-min-content"> | ||
| <td><div class="item"></div></td> | ||
| </table> | ||
| <table class="small-w min-width-max-content"> | ||
| <td><div class="item"></div></td> | ||
| </table> | ||
| </div> | ||
|
|
||
| <table class="big-h max-height-min-content"> | ||
| <td><div class="item"></div></td> | ||
| </table> | ||
| <table class="big-h max-height-max-content"> | ||
| <td><div class="item"></div></td> | ||
| </table> | ||
|
|
||
| <table class="small-h min-height-min-content"> | ||
| <td><div class="item"></div></td> | ||
| </table> | ||
| <table class="small-h min-height-max-content"> | ||
| <td><div class="item"></div></td> | ||
| </table> | ||
| </body> | ||
| </html> |
48 changes: 48 additions & 0 deletions
48
...b-platform-tests/css/css-sizing/block-size-with-min-or-max-content-table-1b-expected.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,48 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>CSS Reference Case: Block size with max-content and min-content in a table</title> | ||
| <meta charset="utf-8"> | ||
| <link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com"> | ||
| <style> | ||
| html,body { | ||
| margin: 0; | ||
| } | ||
| table { | ||
| border: 2px solid black; | ||
| } | ||
|
|
||
| td { | ||
| border: 2px solid lime; | ||
| } | ||
|
|
||
| .item { | ||
| height: 50px; | ||
| width: 50px; | ||
| border: 1px solid blue; | ||
| } | ||
|
|
||
| .container { | ||
| writing-mode: vertical-lr; | ||
| } | ||
|
|
||
| .small { block-size: 1px; } | ||
| .big { block-size: 150px; } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <table class="big"><td><div class="item"></div></td></table> | ||
| <table class="big"><td><div class="item"></div></td></table> | ||
|
|
||
| <table><td class="small"><div class="item"></div></td></table> | ||
| <table><td class="small"><div class="item"></div></td></table> | ||
| </div> | ||
|
|
||
| <table class="big"><td><div class="item"></div></td></table> | ||
| <table class="big"><td><div class="item"></div></td></table> | ||
|
|
||
| <table><td class="small"><div class="item"></div></td></table> | ||
| <table><td class="small"><div class="item"></div></td></table> | ||
| </body> | ||
| </html> |
Oops, something went wrong.