Skip to content
Permalink
Browse files
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
  • Loading branch information
Ahmad-S792 authored and Ahmad Saleem committed Oct 24, 2022
1 parent 61e2b7c commit 29a59ed73e09bf27feb6bd3e78345d52e7517ad6
Show file tree
Hide file tree
Showing 3 changed files with 40 additions and 2 deletions.
@@ -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>
@@ -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>
@@ -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();

0 comments on commit 29a59ed

Please sign in to comment.