<!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>[207535] 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/207535">207535</a></dd>
<dt>Author</dt> <dd>jfernandez@igalia.com</dd>
<dt>Date</dt> <dd>2016-10-19 06:42:43 -0700 (Wed, 19 Oct 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: Debugger buttons positioned incorrectly, align-content default value is unexpected
https://bugs.webkit.org/show_bug.cgi?id=163572
Reviewed by Sergio Villar Senin.
Source/WebCore:
We only allow the new CSS Box Alignment syntax when the Grid Layout
feature is enabled. Due to flexbox backward compatibility we have
implemented a different code path for the style initial/default values
assignment. However, we have incorrectly resolved both align-content
and justify-content to 'flex-start' when grid layout is disabled.
This patch changes the approach, so we set 'normal' (the value specified
by the new syntax) for both properties, but using the values defined in
the old syntax (Flexbox specification) at computed style resolution.
Since 'stretch' is the default value for the align-content property, this
issue implies that any flexbox line with an undefined height will be
laid out incorrectly, if not explicitly set via CSS, because flex items
can't use the available height, even though they use 'stretch' for their
'align-self' properties.
Test: css3/flexbox/flexbox-lines-must-be-stretched-by-default.html
* css/CSSComputedStyleDeclaration.cpp:
(WebCore::valueForContentPositionAndDistributionWithOverflowAlignment):
(WebCore::ComputedStyleExtractor::propertyValue):
* rendering/style/RenderStyle.h:
(WebCore::RenderStyle::initialContentAlignment):
LayoutTests:
Modified test cases for initial values.
Added regression test for the align-content issue.
* css3/flexbox/flexbox-lines-must-be-stretched-by-default-expected.txt: Added.
* css3/flexbox/flexbox-lines-must-be-stretched-by-default.html: Added.
* fast/css/ensure-flexbox-compatibility-with-initial-values-expected.txt:</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsfastcssensureflexboxcompatibilitywithinitialvaluesexpectedtxt">trunk/LayoutTests/fast/css/ensure-flexbox-compatibility-with-initial-values-expected.txt</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorecssCSSComputedStyleDeclarationcpp">trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingstyleRenderStyleh">trunk/Source/WebCore/rendering/style/RenderStyle.h</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestscss3flexboxflexboxlinesmustbestretchedbydefaultexpectedtxt">trunk/LayoutTests/css3/flexbox/flexbox-lines-must-be-stretched-by-default-expected.txt</a></li>
<li><a href="#trunkLayoutTestscss3flexboxflexboxlinesmustbestretchedbydefaulthtml">trunk/LayoutTests/css3/flexbox/flexbox-lines-must-be-stretched-by-default.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (207534 => 207535)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-10-19 11:39:34 UTC (rev 207534)
+++ trunk/LayoutTests/ChangeLog 2016-10-19 13:42:43 UTC (rev 207535)
</span><span class="lines">@@ -1,3 +1,17 @@
</span><ins>+2016-10-19 Javier Fernandez <jfernandez@igalia.com>
+
+ Web Inspector: Debugger buttons positioned incorrectly, align-content default value is unexpected
+ https://bugs.webkit.org/show_bug.cgi?id=163572
+
+ Reviewed by Sergio Villar Senin.
+
+ Modified test cases for initial values.
+ Added regression test for the align-content issue.
+
+ * css3/flexbox/flexbox-lines-must-be-stretched-by-default-expected.txt: Added.
+ * css3/flexbox/flexbox-lines-must-be-stretched-by-default.html: Added.
+ * fast/css/ensure-flexbox-compatibility-with-initial-values-expected.txt:
+
</ins><span class="cx"> 2016-10-19 Jer Noble <jer.noble@apple.com>
</span><span class="cx">
</span><span class="cx"> [Mac][MSE] Movies with a 'mvex' box have a zero-duration
</span></span></pre></div>
<a id="trunkLayoutTestscss3flexboxflexboxlinesmustbestretchedbydefaultexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/flexbox-lines-must-be-stretched-by-default-expected.txt (0 => 207535)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/flexbox/flexbox-lines-must-be-stretched-by-default-expected.txt (rev 0)
+++ trunk/LayoutTests/css3/flexbox/flexbox-lines-must-be-stretched-by-default-expected.txt 2016-10-19 13:42:43 UTC (rev 207535)
</span><span class="lines">@@ -0,0 +1,7 @@
</span><ins>+'Test for BUG=647694 - align-content "stretch" is not applied by default when grid is disabled.'
+
+PASS
+
+PASS
+
+
</ins></span></pre></div>
<a id="trunkLayoutTestscss3flexboxflexboxlinesmustbestretchedbydefaulthtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css3/flexbox/flexbox-lines-must-be-stretched-by-default.html (0 => 207535)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css3/flexbox/flexbox-lines-must-be-stretched-by-default.html (rev 0)
+++ trunk/LayoutTests/css3/flexbox/flexbox-lines-must-be-stretched-by-default.html 2016-10-19 13:42:43 UTC (rev 207535)
</span><span class="lines">@@ -0,0 +1,63 @@
</span><ins>+<!DOCTYPE html>
+<style>
+.flex-container {
+ display: flex;
+ height:100px;
+ width:200px;
+ background-color:pink;
+ flex-wrap: wrap;
+}
+.flex-item1 {
+ width: 100%;
+ background-color:blue;
+ border:1px solid;
+ border-color:red;
+}
+.flex-item2 {
+ width: 100%;
+ background-color:blue;
+}
+</style>
+<script src="../../resources/check-layout.js"></script>
+<body>
+<p>'Test for BUG=647694 - align-content "stretch" is not applied by default when grid is disabled.'</p>
+<script>
+function runTest(gridEnabled)
+{
+ if (window.internals)
+ window.internals.setCSSGridLayoutEnabled(gridEnabled);
+
+ var flexContainer = document.createElement("div");
+ if (gridEnabled)
+ flexContainer.className += "gridEnabled flex-container";
+ else
+ flexContainer.className += "gridDisabled flex-container";
+ document.body.appendChild(flexContainer);
+
+ var flexItem1 = document.createElement("div");
+ flexItem1.id = "flexItem1";
+ flexItem1.className += "flex-item1";
+ flexItem1.setAttribute("data-expected-height", "51");
+ flexContainer.appendChild(flexItem1);
+
+ var flexItem2 = document.createElement("div");
+ flexItem2.id = "flexItem2";
+ flexItem2.className += "flex-item2";
+ flexItem2.setAttribute("data-expected-height", "49");
+ flexContainer.appendChild(flexItem2);
+
+ var br = document.createElement("br");
+ document.body.appendChild(br);
+
+ flexContainer.style.alignContent = "initial";
+
+ if (gridEnabled)
+ checkLayout('.gridEnabled');
+ else
+ checkLayout('.gridDisabled');
+}
+
+runTest(false);
+runTest(true);
+</script>
+</body>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssensureflexboxcompatibilitywithinitialvaluesexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/css/ensure-flexbox-compatibility-with-initial-values-expected.txt (207534 => 207535)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/ensure-flexbox-compatibility-with-initial-values-expected.txt 2016-10-19 11:39:34 UTC (rev 207534)
+++ trunk/LayoutTests/fast/css/ensure-flexbox-compatibility-with-initial-values-expected.txt 2016-10-19 13:42:43 UTC (rev 207535)
</span><span class="lines">@@ -25,19 +25,19 @@
</span><span class="cx"> Verifying initial values are supported when grid is DISABLED.
</span><span class="cx"> PASS CSS.supports('align-items', 'stretch') is true
</span><span class="cx"> PASS CSS.supports('align-self', 'stretch') is true
</span><del>-PASS CSS.supports('align-content', 'flex-start') is true
</del><ins>+PASS CSS.supports('align-content', 'stretch') is true
</ins><span class="cx"> PASS CSS.supports('justify-content', 'flex-start') is true
</span><span class="cx"> PASS CSS.supports('align-items', 'stretch') is true
</span><span class="cx"> PASS CSS.supports('align-self', 'stretch') is true
</span><del>-PASS CSS.supports('align-content', 'flex-start') is true
</del><ins>+PASS CSS.supports('align-content', 'stretch') is true
</ins><span class="cx"> PASS CSS.supports('justify-content', 'flex-start') is true
</span><span class="cx"> PASS CSS.supports('align-items', 'stretch') is true
</span><span class="cx"> PASS CSS.supports('align-self', 'stretch') is true
</span><del>-PASS CSS.supports('align-content', 'flex-start') is true
</del><ins>+PASS CSS.supports('align-content', 'stretch') is true
</ins><span class="cx"> PASS CSS.supports('justify-content', 'flex-start') is true
</span><span class="cx"> PASS CSS.supports('align-items', 'stretch') is true
</span><span class="cx"> PASS CSS.supports('align-self', 'stretch') is true
</span><del>-PASS CSS.supports('align-content', 'flex-start') is true
</del><ins>+PASS CSS.supports('align-content', 'stretch') is true
</ins><span class="cx"> PASS CSS.supports('justify-content', 'flex-start') is true
</span><span class="cx"> PASS successfullyParsed is true
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (207534 => 207535)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2016-10-19 11:39:34 UTC (rev 207534)
+++ trunk/Source/WebCore/ChangeLog 2016-10-19 13:42:43 UTC (rev 207535)
</span><span class="lines">@@ -1,3 +1,34 @@
</span><ins>+2016-10-19 Javier Fernandez <jfernandez@igalia.com>
+
+ Web Inspector: Debugger buttons positioned incorrectly, align-content default value is unexpected
+ https://bugs.webkit.org/show_bug.cgi?id=163572
+
+ Reviewed by Sergio Villar Senin.
+
+ We only allow the new CSS Box Alignment syntax when the Grid Layout
+ feature is enabled. Due to flexbox backward compatibility we have
+ implemented a different code path for the style initial/default values
+ assignment. However, we have incorrectly resolved both align-content
+ and justify-content to 'flex-start' when grid layout is disabled.
+
+ This patch changes the approach, so we set 'normal' (the value specified
+ by the new syntax) for both properties, but using the values defined in
+ the old syntax (Flexbox specification) at computed style resolution.
+
+ Since 'stretch' is the default value for the align-content property, this
+ issue implies that any flexbox line with an undefined height will be
+ laid out incorrectly, if not explicitly set via CSS, because flex items
+ can't use the available height, even though they use 'stretch' for their
+ 'align-self' properties.
+
+ Test: css3/flexbox/flexbox-lines-must-be-stretched-by-default.html
+
+ * css/CSSComputedStyleDeclaration.cpp:
+ (WebCore::valueForContentPositionAndDistributionWithOverflowAlignment):
+ (WebCore::ComputedStyleExtractor::propertyValue):
+ * rendering/style/RenderStyle.h:
+ (WebCore::RenderStyle::initialContentAlignment):
+
</ins><span class="cx"> 2016-10-19 Carlos Alberto Lopez Perez <clopez@igalia.com>
</span><span class="cx">
</span><span class="cx"> [GTK] REGRESSION(r207396) Build broken with Clang.
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSComputedStyleDeclarationcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp (207534 => 207535)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp 2016-10-19 11:39:34 UTC (rev 207534)
+++ trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp 2016-10-19 13:42:43 UTC (rev 207535)
</span><span class="lines">@@ -62,6 +62,7 @@
</span><span class="cx"> #include "RenderBlock.h"
</span><span class="cx"> #include "RenderBox.h"
</span><span class="cx"> #include "RenderStyle.h"
</span><ins>+#include "RuntimeEnabledFeatures.h"
</ins><span class="cx"> #include "SVGElement.h"
</span><span class="cx"> #include "Settings.h"
</span><span class="cx"> #include "ShapeValue.h"
</span><span class="lines">@@ -2414,14 +2415,22 @@
</span><span class="cx"> return result;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-static Ref<CSSValueList> valueForContentPositionAndDistributionWithOverflowAlignment(const StyleContentAlignmentData& data)
</del><ins>+static Ref<CSSValueList> valueForContentPositionAndDistributionWithOverflowAlignment(const StyleContentAlignmentData& data, CSSValueID normalBehaviorValueID)
</ins><span class="cx"> {
</span><span class="cx"> auto& cssValuePool = CSSValuePool::singleton();
</span><span class="cx"> auto result = CSSValueList::createSpaceSeparated();
</span><span class="cx"> if (data.distribution() != ContentDistributionDefault)
</span><span class="cx"> result.get().append(cssValuePool.createValue(data.distribution()));
</span><del>- if (data.distribution() == ContentDistributionDefault || data.position() != ContentPositionNormal)
- result.get().append(cssValuePool.createValue(data.position()));
</del><ins>+ if (data.distribution() == ContentDistributionDefault || data.position() != ContentPositionNormal) {
+ bool gridEnabled = false;
+#if ENABLE(CSS_GRID_LAYOUT)
+ gridEnabled = RuntimeEnabledFeatures::sharedFeatures().isCSSGridLayoutEnabled();
+#endif
+ if (data.position() != ContentPositionNormal || gridEnabled)
+ result.get().append(cssValuePool.createValue(data.position()));
+ else
+ result.get().append(cssValuePool.createIdentifierValue(normalBehaviorValueID));
+ }
</ins><span class="cx"> if ((data.position() >= ContentPositionCenter || data.distribution() != ContentDistributionDefault) && data.overflow() != OverflowAlignmentDefault)
</span><span class="cx"> result.get().append(cssValuePool.createValue(data.overflow()));
</span><span class="cx"> ASSERT(result.get().length() > 0);
</span><span class="lines">@@ -2803,7 +2812,7 @@
</span><span class="cx"> case CSSPropertyEmptyCells:
</span><span class="cx"> return cssValuePool.createValue(style->emptyCells());
</span><span class="cx"> case CSSPropertyAlignContent:
</span><del>- return valueForContentPositionAndDistributionWithOverflowAlignment(style->alignContent());
</del><ins>+ return valueForContentPositionAndDistributionWithOverflowAlignment(style->alignContent(), CSSValueStretch);
</ins><span class="cx"> case CSSPropertyAlignItems:
</span><span class="cx"> return valueForItemPositionWithOverflowAlignment(style->alignItems());
</span><span class="cx"> case CSSPropertyAlignSelf:
</span><span class="lines">@@ -2823,7 +2832,7 @@
</span><span class="cx"> case CSSPropertyFlexWrap:
</span><span class="cx"> return cssValuePool.createValue(style->flexWrap());
</span><span class="cx"> case CSSPropertyJustifyContent:
</span><del>- return valueForContentPositionAndDistributionWithOverflowAlignment(style->justifyContent());
</del><ins>+ return valueForContentPositionAndDistributionWithOverflowAlignment(style->justifyContent(), CSSValueFlexStart);
</ins><span class="cx"> #if ENABLE(CSS_GRID_LAYOUT)
</span><span class="cx"> case CSSPropertyJustifyItems:
</span><span class="cx"> return valueForItemPositionWithOverflowAlignment(resolveJustifyItemsAuto(style->justifyItems(), styledNode->parentNode()));
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingstyleRenderStyleh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/style/RenderStyle.h (207534 => 207535)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/style/RenderStyle.h 2016-10-19 11:39:34 UTC (rev 207534)
+++ trunk/Source/WebCore/rendering/style/RenderStyle.h 2016-10-19 13:42:43 UTC (rev 207535)
</span><span class="lines">@@ -2004,7 +2004,7 @@
</span><span class="cx"> static int initialOrder() { return 0; }
</span><span class="cx"> static StyleSelfAlignmentData initialSelfAlignment() { return StyleSelfAlignmentData(ItemPositionAuto, OverflowAlignmentDefault); }
</span><span class="cx"> static StyleSelfAlignmentData initialDefaultAlignment() { return StyleSelfAlignmentData(isCSSGridLayoutEnabled() ? ItemPositionNormal : ItemPositionStretch, OverflowAlignmentDefault); }
</span><del>- static StyleContentAlignmentData initialContentAlignment() { return StyleContentAlignmentData(isCSSGridLayoutEnabled() ? ContentPositionNormal : ContentPositionFlexStart, ContentDistributionDefault, OverflowAlignmentDefault); }
</del><ins>+ static StyleContentAlignmentData initialContentAlignment() { return StyleContentAlignmentData(ContentPositionNormal, ContentDistributionDefault, OverflowAlignmentDefault); }
</ins><span class="cx"> static EFlexDirection initialFlexDirection() { return FlowRow; }
</span><span class="cx"> static EFlexWrap initialFlexWrap() { return FlexNoWrap; }
</span><span class="cx"> static int initialMarqueeLoopCount() { return -1; }
</span></span></pre>
</div>
</div>
</body>
</html>