<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[287263] trunk</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/287263">287263</a></dd>
<dt>Author</dt> <dd>svillar@igalia.com</dd>
<dt>Date</dt> <dd>2021-12-20 08:56:35 -0800 (Mon, 20 Dec 2021)</dd>
</dl>

<h3>Log Message</h3>
<pre>[css-flexbox] Pre-layout orthogonal children to compute the preferred logical width
https://bugs.webkit.org/show_bug.cgi?id=234300

Reviewed by Javier Fernandez.

LayoutTests/imported/w3c:

* web-platform-tests/css/css-flexbox/intrinsic-width-orthogonal-writing-mode-expected.txt: Replaced
FAIL by PASS expectations for 2 subtests that are passing now.

Source/WebCore:

In order to properly compute the flex container intrinsic width we must layout the orthogonal
children so that we could use the children's block sizes (which are in the flex container
inline axis).

The very same solution was adopted long time ago by the RenderGrid code.

* rendering/RenderFlexibleBox.cpp:
(WebCore::RenderFlexibleBox::computeIntrinsicLogicalWidths const): prelayout orthogonal children.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsimportedw3cChangeLog">trunk/LayoutTests/imported/w3c/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsimportedw3cwebplatformtestscsscssflexboxintrinsicwidthorthogonalwritingmodeexpectedtxt">trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-width-orthogonal-writing-mode-expected.txt</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderFlexibleBoxcpp">trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsimportedw3cChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/imported/w3c/ChangeLog (287262 => 287263)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/imported/w3c/ChangeLog 2021-12-20 16:23:17 UTC (rev 287262)
+++ trunk/LayoutTests/imported/w3c/ChangeLog    2021-12-20 16:56:35 UTC (rev 287263)
</span><span class="lines">@@ -1,3 +1,13 @@
</span><ins>+2021-12-14  Sergio Villar Senin  <svillar@igalia.com>
+
+        [css-flexbox] Pre-layout orthogonal children to compute the preferred logical width
+        https://bugs.webkit.org/show_bug.cgi?id=234300
+
+        Reviewed by Javier Fernandez.
+
+        * web-platform-tests/css/css-flexbox/intrinsic-width-orthogonal-writing-mode-expected.txt: Replaced
+        FAIL by PASS expectations for 2 subtests that are passing now.
+
</ins><span class="cx"> 2021-12-16  Vitaly Dyachkov  <obyknovenius@me.com>
</span><span class="cx"> 
</span><span class="cx">         Flexbox ignores margins of absolute positioned children when `align-items: flex-end` or `justify-content: flex-end`
</span></span></pre></div>
<a id="trunkLayoutTestsimportedw3cwebplatformtestscsscssflexboxintrinsicwidthorthogonalwritingmodeexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-width-orthogonal-writing-mode-expected.txt (287262 => 287263)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-width-orthogonal-writing-mode-expected.txt   2021-12-20 16:23:17 UTC (rev 287262)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/intrinsic-width-orthogonal-writing-mode-expected.txt      2021-12-20 16:56:35 UTC (rev 287263)
</span><span class="lines">@@ -1,15 +1,7 @@
</span><span class="cx"> 
</span><span class="cx"> PASS .inline-flexbox 1
</span><del>-FAIL .inline-flexbox 2 assert_equals:
-<div class="inline-flexbox" data-expected-width="20">
-    <div class="vertical" style="line-height: 20px;">Some text</div>
-</div>
-width expected 20 but got 0
-FAIL .inline-flexbox 3 assert_equals:
-<div class="inline-flexbox" data-expected-width="20">
-    <span class="vertical" data-expected-width="20" style="line-height: 20px;">Some text</span>
-</div>
-width expected 20 but got 0
</del><ins>+PASS .inline-flexbox 2
+PASS .inline-flexbox 3
</ins><span class="cx"> 
</span><span class="cx"> Some text
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (287262 => 287263)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog   2021-12-20 16:23:17 UTC (rev 287262)
+++ trunk/Source/WebCore/ChangeLog      2021-12-20 16:56:35 UTC (rev 287263)
</span><span class="lines">@@ -1,3 +1,19 @@
</span><ins>+2021-12-14  Sergio Villar Senin  <svillar@igalia.com>
+
+        [css-flexbox] Pre-layout orthogonal children to compute the preferred logical width
+        https://bugs.webkit.org/show_bug.cgi?id=234300
+
+        Reviewed by Javier Fernandez.
+
+        In order to properly compute the flex container intrinsic width we must layout the orthogonal
+        children so that we could use the children's block sizes (which are in the flex container
+        inline axis).
+
+        The very same solution was adopted long time ago by the RenderGrid code.
+
+        * rendering/RenderFlexibleBox.cpp:
+        (WebCore::RenderFlexibleBox::computeIntrinsicLogicalWidths const): prelayout orthogonal children.
+
</ins><span class="cx"> 2021-12-20  Karl Dubost  <karl+github@la-grange.net>
</span><span class="cx"> 
</span><span class="cx">         Fixes dead code in compareIcons()
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderFlexibleBoxcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp (287262 => 287263)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp     2021-12-20 16:23:17 UTC (rev 287262)
+++ trunk/Source/WebCore/rendering/RenderFlexibleBox.cpp        2021-12-20 16:56:35 UTC (rev 287263)
</span><span class="lines">@@ -113,6 +113,10 @@
</span><span class="cx">             continue;
</span><span class="cx">         ++numItemsWithNormalLayout;
</span><span class="cx"> 
</span><ins>+        // Pre-layout orthogonal children in order to get a valid value for the preferred width.
+        if (style().isHorizontalWritingMode() != child->style().isHorizontalWritingMode())
+            child->layoutIfNeeded();
+
</ins><span class="cx">         LayoutUnit margin = marginIntrinsicLogicalWidthForChild(*child);
</span><span class="cx"> 
</span><span class="cx">         LayoutUnit minPreferredLogicalWidth;
</span></span></pre>
</div>
</div>

</body>
</html>