[Table] Enable vertical writing mode(s) for table cells

https://bugs.webkit.org/show_bug.cgi?id=266928

Reviewed by Antti Koivisto.

We are able to layout table cells in non-horizontal writing mode.

* LayoutTests/TestExpectations: failing tests were never really working.
* LayoutTests/imported/w3c/web-platform-tests/css/css-tables/table-cell-writing-mode-computed-expected.txt:
* Source/WebCore/style/StyleAdjuster.cpp:
(WebCore::Style::Adjuster::adjust const):

fast/table/table-display-types-vertical.html : progression

Canonical link: https://commits.webkit.org/272535@main

LayoutTests/TestExpectations

@@ -4491,9 +4491,6 @@ webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/block-
 webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/block-flow-direction-slr-062.xht [ ImageOnlyFailure ]
 webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/block-flow-direction-slr-063.xht [ ImageOnlyFailure ]
 webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/block-flow-direction-slr-066.xht [ ImageOnlyFailure ]
-webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/block-flow-direction-srl-057.xht [ ImageOnlyFailure ]
-webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/block-flow-direction-vlr-018.xht [ ImageOnlyFailure ]
-webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/block-flow-direction-vrl-017.xht [ ImageOnlyFailure ]
 webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/ch-units-vrl-001.html [ ImageOnlyFailure ]
 webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/ch-units-vrl-002.html [ ImageOnlyFailure ]
 webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/ch-units-vrl-005.html [ ImageOnlyFailure ]
@@ -4516,9 +4513,6 @@ webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/line-b
 webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/line-box-direction-slr-056.xht [ ImageOnlyFailure ]
 webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/line-box-direction-slr-058.xht [ ImageOnlyFailure ]
 webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/line-box-direction-slr-060.xht [ ImageOnlyFailure ]
-webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/line-box-direction-srl-055.xht [ ImageOnlyFailure ]
-webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/line-box-direction-vlr-016.xht [ ImageOnlyFailure ]
-webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/line-box-direction-vrl-015.xht [ ImageOnlyFailure ]
 webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/mongolian-orientation-001.html [ ImageOnlyFailure ]
 webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/nested-orthogonal-001.html [ ImageOnlyFailure ]
 webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/normal-flow-overconstrained-vrl-002.xht [ ImageOnlyFailure ]
@@ -4550,7 +4544,6 @@ webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/sizing
 webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-004.xht [ ImageOnlyFailure ]
 webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/sizing-orthog-vrl-in-htb-008.xht [ ImageOnlyFailure ]
 webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/table-cell-001.html [ ImageOnlyFailure ]
-webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/table-cell-002.html [ ImageOnlyFailure ]
 webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/table-column-order-slr-007.xht [ ImageOnlyFailure ]
 webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/table-progression-slr-002.html [ ImageOnlyFailure ]
 webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/table-progression-srl-001.html [ ImageOnlyFailure ]
@@ -4576,6 +4569,9 @@ webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/vertic
 webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/vertical-alignment-slr-033.xht [ ImageOnlyFailure ]
 webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/vertical-alignment-slr-035.xht [ ImageOnlyFailure ]
 webkit.org/b/209080 imported/w3c/web-platform-tests/css/css-writing-modes/vertical-alignment-slr-041.xht [ ImageOnlyFailure ]
+imported/w3c/web-platform-tests/css/css-writing-modes/ch-units-vrl-003.html [ ImageOnlyFailure ]
+imported/w3c/web-platform-tests/css/css-writing-modes/ch-units-vrl-004.html [ ImageOnlyFailure ]
+
 webkit.org/b/209080 imported/w3c/web-platform-tests/css/cssom-view/scrollIntoView-sideways-lr-writing-mode-and-rtl-direction.html [ Pass Failure ]
 webkit.org/b/209080 imported/w3c/web-platform-tests/css/cssom-view/scrollIntoView-sideways-lr-writing-mode.html [ Pass Failure ]
 

LayoutTests/imported/w3c/web-platform-tests/css/css-tables/table-cell-writing-mode-computed-expected.txt

@@ -1,4 +1,4 @@
 Test
 
-FAIL Computed value of orthogonal writing-mode on table cell assert_equals: expected "vertical-lr" but got "horizontal-tb"
+PASS Computed value of orthogonal writing-mode on table cell
 

LayoutTests/platform/ios/fast/table/table-display-types-vertical-expected.txt

@@ -1,8 +1,8 @@
-layer at (0,0) size 800x1312
+layer at (0,0) size 800x904
   RenderView at (0,0) size 800x600
-layer at (0,0) size 800x1312
-  RenderBlock {HTML} at (0,0) size 800x1313
-    RenderBody {BODY} at (8,10) size 784x1295
+layer at (0,0) size 800x832
+  RenderBlock {HTML} at (0,0) size 800x833
+    RenderBody {BODY} at (8,10) size 784x815
       RenderBlock {TABLE} at (10,0) size 100x120 [border: (1px solid #000000)]
         RenderTable at (1,1) size 98x118
           RenderTableSection {THEAD} at (0,0) size 26x118
@@ -155,43 +155,19 @@ layer at (0,0) size 800x1312
                         RenderTableCell {TD} at (2,44) size 22x42 [r=0 c=1 rs=1 cs=1]
                           RenderText {#text} at (1,1) size 19x39
                             text run at (1,1) width 39: "Cell 4"
-      RenderTable at (0,592) size 102x703
-        RenderTableSection (anonymous) at (0,0) size 102x702
-          RenderTableRow (anonymous) at (0,0) size 102x702
-            RenderTableCell {P} at (0,0) size 102x702 [border: (1px solid #000000)] [r=0 c=0 rs=1 cs=1]
-              RenderText {#text} at (1,1) size 100x699
-                text run at (1,1) width 86: "Lorem ipsum"
-                text run at (1,21) width 92: "dolor sit amet,"
-                text run at (1,41) width 73: "consectetur"
-                text run at (1,61) width 99: "adipisicing elit,"
-                text run at (1,81) width 100: "sed do eiusmod"
-                text run at (1,101) width 46: "tempor"
-                text run at (1,121) width 82: "incididunt ut"
-                text run at (1,141) width 56: "labore et"
-                text run at (1,161) width 88: "dolore magna"
-                text run at (1,181) width 100: "aliqua. Ut enim"
-                text run at (1,201) width 61: "ad minim"
-                text run at (1,221) width 82: "veniam, quis"
-                text run at (1,241) width 48: "nostrud"
-                text run at (1,261) width 76: "exercitation"
-                text run at (1,281) width 100: "ullamco laboris"
-                text run at (1,301) width 88: "nisi ut aliquip"
-                text run at (1,321) width 34: "ex ea"
-                text run at (1,341) width 64: "commodo"
-                text run at (1,361) width 68: "consequat."
-                text run at (1,381) width 96: "Duis aute irure"
-                text run at (1,401) width 51: "dolor in"
-                text run at (1,421) width 86: "reprehenderit"
-                text run at (1,441) width 76: "in voluptate"
-                text run at (1,461) width 60: "velit esse"
-                text run at (1,481) width 86: "cillum dolore"
-                text run at (1,501) width 93: "eu fugiat nulla"
-                text run at (1,521) width 53: "pariatur."
-                text run at (1,541) width 92: "Excepteur sint"
-                text run at (1,561) width 56: "occaecat"
-                text run at (1,581) width 87: "cupidatat non"
-                text run at (1,601) width 88: "proident, sunt"
-                text run at (1,621) width 76: "in culpa qui"
-                text run at (1,641) width 100: "officia deserunt"
-                text run at (1,661) width 91: "mollit anim id"
-                text run at (1,681) width 80: "est laborum."
+      RenderTable at (0,592) size 302x223
+        RenderTableSection (anonymous) at (0,0) size 302x222
+          RenderTableRow (anonymous) at (0,0) size 302x222
+            RenderTableCell {P} at (0,0) size 222x302 [border: (1px solid #000000)] [r=0 c=0 rs=1 cs=1]
+              RenderText {#text} at (1,1) size 219x300
+                text run at (1,1) width 259: "Lorem ipsum dolor sit amet, consectetur"
+                text run at (21,1) width 252: "adipisicing elit, sed do eiusmod tempor"
+                text run at (41,1) width 300: "incididunt ut labore et dolore magna aliqua. Ut"
+                text run at (61,1) width 235: "enim ad minim veniam, quis nostrud"
+                text run at (81,1) width 290: "exercitation ullamco laboris nisi ut aliquip ex"
+                text run at (101,1) width 292: "ea commodo consequat. Duis aute irure dolor"
+                text run at (121,1) width 290: "in reprehenderit in voluptate velit esse cillum"
+                text run at (141,1) width 291: "dolore eu fugiat nulla pariatur. Excepteur sint"
+                text run at (161,1) width 293: "occaecat cupidatat non proident, sunt in culpa"
+                text run at (181,1) width 241: "qui officia deserunt mollit anim id est"
+                text run at (201,1) width 58: "laborum."

LayoutTests/platform/mac/fast/table/table-display-types-vertical-expected.txt

@@ -1,8 +1,8 @@
-layer at (0,0) size 785x1238
+layer at (0,0) size 785x900
   RenderView at (0,0) size 785x600
-layer at (0,0) size 785x1238
-  RenderBlock {HTML} at (0,0) size 785x1239
-    RenderBody {BODY} at (8,10) size 769x1221
+layer at (0,0) size 785x806
+  RenderBlock {HTML} at (0,0) size 785x807
+    RenderBody {BODY} at (8,10) size 769x789
       RenderBlock {TABLE} at (10,0) size 92x120 [border: (1px solid #000000)]
         RenderTable at (1,1) size 90x118
           RenderTableSection {THEAD} at (0,0) size 24x118
@@ -155,43 +155,19 @@ layer at (0,0) size 785x1238
                         RenderTableCell {TD} at (2,44) size 20x42 [r=0 c=1 rs=1 cs=1]
                           RenderText {#text} at (1,1) size 18x39
                             text run at (1,1) width 39: "Cell 4"
-      RenderTable at (0,588) size 102x633
-        RenderTableSection (anonymous) at (0,0) size 102x632
-          RenderTableRow (anonymous) at (0,0) size 102x632
-            RenderTableCell {P} at (0,0) size 102x632 [border: (1px solid #000000)] [r=0 c=0 rs=1 cs=1]
-              RenderText {#text} at (1,1) size 100x630
-                text run at (1,1) width 86: "Lorem ipsum"
-                text run at (1,19) width 92: "dolor sit amet,"
-                text run at (1,37) width 73: "consectetur"
-                text run at (1,55) width 99: "adipisicing elit,"
-                text run at (1,73) width 100: "sed do eiusmod"
-                text run at (1,91) width 46: "tempor"
-                text run at (1,109) width 82: "incididunt ut"
-                text run at (1,127) width 56: "labore et"
-                text run at (1,145) width 88: "dolore magna"
-                text run at (1,163) width 100: "aliqua. Ut enim"
-                text run at (1,181) width 61: "ad minim"
-                text run at (1,199) width 82: "veniam, quis"
-                text run at (1,217) width 48: "nostrud"
-                text run at (1,235) width 76: "exercitation"
-                text run at (1,253) width 100: "ullamco laboris"
-                text run at (1,271) width 88: "nisi ut aliquip"
-                text run at (1,289) width 34: "ex ea"
-                text run at (1,307) width 64: "commodo"
-                text run at (1,325) width 68: "consequat."
-                text run at (1,343) width 96: "Duis aute irure"
-                text run at (1,361) width 51: "dolor in"
-                text run at (1,379) width 86: "reprehenderit"
-                text run at (1,397) width 76: "in voluptate"
-                text run at (1,415) width 60: "velit esse"
-                text run at (1,433) width 86: "cillum dolore"
-                text run at (1,451) width 93: "eu fugiat nulla"
-                text run at (1,469) width 53: "pariatur."
-                text run at (1,487) width 92: "Excepteur sint"
-                text run at (1,505) width 56: "occaecat"
-                text run at (1,523) width 87: "cupidatat non"
-                text run at (1,541) width 88: "proident, sunt"
-                text run at (1,559) width 76: "in culpa qui"
-                text run at (1,577) width 100: "officia deserunt"
-                text run at (1,595) width 91: "mollit anim id"
-                text run at (1,613) width 80: "est laborum."
+      RenderTable at (0,588) size 302x201
+        RenderTableSection (anonymous) at (0,0) size 302x200
+          RenderTableRow (anonymous) at (0,0) size 302x200
+            RenderTableCell {P} at (0,0) size 200x302 [border: (1px solid #000000)] [r=0 c=0 rs=1 cs=1]
+              RenderText {#text} at (1,1) size 198x300
+                text run at (1,1) width 259: "Lorem ipsum dolor sit amet, consectetur"
+                text run at (19,1) width 252: "adipisicing elit, sed do eiusmod tempor"
+                text run at (37,1) width 300: "incididunt ut labore et dolore magna aliqua. Ut"
+                text run at (55,1) width 235: "enim ad minim veniam, quis nostrud"
+                text run at (73,1) width 290: "exercitation ullamco laboris nisi ut aliquip ex"
+                text run at (91,1) width 292: "ea commodo consequat. Duis aute irure dolor"
+                text run at (109,1) width 290: "in reprehenderit in voluptate velit esse cillum"
+                text run at (127,1) width 291: "dolore eu fugiat nulla pariatur. Excepteur sint"
+                text run at (145,1) width 293: "occaecat cupidatat non proident, sunt in culpa"
+                text run at (163,1) width 240: "qui officia deserunt mollit anim id est"
+                text run at (181,1) width 58: "laborum."

Source/WebCore/style/StyleAdjuster.cpp

@@ -448,10 +448,8 @@ void Adjuster::adjust(RenderStyle& style, const RenderStyle* userAgentAppearance
             style.setPosition(PositionType::Static);
 
         // writing-mode does not apply to table row groups, table column groups, table rows, and table columns.
-        // FIXME: Table cells should be allowed to be perpendicular or flipped with respect to the table, though.
         if (style.display() == DisplayType::TableColumn || style.display() == DisplayType::TableColumnGroup || style.display() == DisplayType::TableFooterGroup
-            || style.display() == DisplayType::TableHeaderGroup || style.display() == DisplayType::TableRow || style.display() == DisplayType::TableRowGroup
-            || style.display() == DisplayType::TableCell)
+            || style.display() == DisplayType::TableHeaderGroup || style.display() == DisplayType::TableRow || style.display() == DisplayType::TableRowGroup)
             style.setWritingMode(m_parentStyle.writingMode());
 
         if (style.isDisplayDeprecatedFlexibleBox()) {