When table cell have inline children which change writing-mode, the c…

…ell overflows its contents When table cell have inline children which change writing-mode, the cell overflows its contents https://bugs.webkit.org/show_bug.cgi?id=112897 Reviewed by Alan Bujtas. Inspired from - https://src.chromium.org/viewvc/blink?view=revision&revision=163239 When writing-mode is changed at block element, Blink thinks the logical height as preferred logical width. This is done at RenderBlockFlow::computeBlockPreferredLogicalWidths(). However, RenderBlockFlow::computeInlinePreferredLogicalWidths() doesn't check writing-mode, and just uses child's preferred logical width as preferred logical width. If the height of a child is bigger than its preferred width, this make the width of table cell narrower than its child. We should check writing-mode of inline block. If the writing-mode is changed, we must use child's logical height as preferred logical width. * Source/WebCore/rendering/RenderBlockFlow.cpp: (RenderBlockFlow::computeInlinePreferredLogicalWidths): Add logic for accounting for writing mode * LayoutTests/fast/writing-mode/table-vertical-child-width.html: Added Test Case * LayoutTests/fast/writing-mode/table-vertical-child-width-expected.html: Added Test Case Expectations Canonical link: https://commits.webkit.org/255919@main
WebKit · Oct 24, 2022 · 29a59ed73e09bf27feb6bd3e78345d52e7517ad6 · 29a59ed
1 parent 61e2b7c
commit 29a59ed73e09bf27feb6bd3e78345d52e7517ad6
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 2 deletions.
diff --git a/LayoutTests/fast/writing-mode/table-vertical-child-width-expected.html b/LayoutTests/fast/writing-mode/table-vertical-child-width-expected.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html><head>
+    <meta charset="UTF-8">
+<style>
+    .middle { vertical-align: middle; }
+</style>
+</head><body>
+The table should not overflow its contents, and 1st table and 2nd table look same.
+<table border="1">
+    <tr><td><div class="middle" style="writing-mode: vertical-rl; width: 100px; background-color: red;">vertical text</div>
+</table>
+<table border="1">
+    <tr><td><div style="writing-mode: vertical-rl; width: 100px; background-color: red;">vertical text</div>
+</table>
+</body></html>
diff --git a/LayoutTests/fast/writing-mode/table-vertical-child-width.html b/LayoutTests/fast/writing-mode/table-vertical-child-width.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html><head>
+<meta charset="UTF-8">
+<meta name="fuzzy" content="maxDifference=8-244; totalPixels=24-378" />
+<style>
+    .middle { vertical-align: middle; }
+</style>
+</head><body>
+The table should not overflow its contents, and 1st table and 2nd table look same.
+<table border="1">
+    <tr><td><span class="middle" style="writing-mode: vertical-rl; width: 100px; background-color: red;">vertical text</span>
+</table>
+<table border="1">
+    <tr><td><div style="writing-mode: vertical-rl; width: 100px; background-color: red;">vertical text</div>
+</table>
+</body></html>
diff --git a/Source/WebCore/rendering/RenderBlockFlow.cpp b/Source/WebCore/rendering/RenderBlockFlow.cpp
@@ -2,7 +2,7 @@
  * Copyright (C) 1999 Lars Knoll (knoll@kde.org)
  *           (C) 1999 Antti Koivisto (koivisto@kde.org)
  *           (C) 2007 David Smith (catfish.man@gmail.com)
- * Copyright (C) 2003-2015 Apple Inc. All rights reserved.
+ * Copyright (C) 2003-2022 Apple Inc. All rights reserved.
  * Copyright (C) Research In Motion Limited 2010. All rights reserved.
  *
  * This library is free software; you can redistribute it and/or
@@ -4224,7 +4224,14 @@ void RenderBlockFlow::computeInlinePreferredLogicalWidths(LayoutUnit& minLogical
                 // Case (2). Inline replaced elements and floats.
                 // Terminate the current line as far as minwidth is concerned.
                 LayoutUnit childMinPreferredLogicalWidth, childMaxPreferredLogicalWidth;
-                computeChildPreferredLogicalWidths(*child, childMinPreferredLogicalWidth, childMaxPreferredLogicalWidth);
+                if (is<RenderBox>(*child) && child->isHorizontalWritingMode() != isHorizontalWritingMode()) {
+                    auto& box = downcast<RenderBox>(*child);
+                    auto extent = box.computeLogicalHeight(box.borderAndPaddingLogicalHeight(), 0).m_extent;
+                    childMinPreferredLogicalWidth = extent;
+                    childMaxPreferredLogicalWidth = extent;
+                } else
+                    computeChildPreferredLogicalWidths(*child, childMinPreferredLogicalWidth, childMaxPreferredLogicalWidth);
+
                 childMin += childMinPreferredLogicalWidth.ceilToFloat();
                 childMax += childMaxPreferredLogicalWidth.ceilToFloat();