Reland of [css-align] Don't resolve 'auto' values for computed style.

Fixed the regression caused by the previous patch and provided a proper regression test. Reason for revert: This patch breaks DevTools toolbars (Console gear icon, checkbox labels are centered), it also seems to break the Welcome to Chrome page layout. Original issue's description: > [css-align] Don't resolve 'auto' values for computed style. > > The CSS Box Alignment specification has been changed recently so that > now all the propeties have the specificed value as computed value. The > rationale of this change are at the associated W3C github issue [1]. > > This change implies that we don't need to execute the StyleAdjuter > logic we implemented specifically for supporting 'auto' values > resolution for computed style. We can live now with resolution at > layout time only. > > [1] w3c/csswg-drafts#440 > > BUG=725489 > > Review-Url: https://codereview.chromium.org/2455093002 > Cr-Commit-Position: refs/heads/master@{#475400} > Committed: https://chromium.googlesource.com/chromium/src/+/5389373c6dec30d783eb46b4c8190720f411a8a7 TBR=cbiesinger@chromium.org,cbiesinger@google.com,meade@chromium.org,rego@igalia.com,svillar@igalia.com,jfernandez@igalia.com NOPRESUBMIT=true NOTREECHECKS=true NOTRY=true BUG=725489 Review-Url: https://codereview.chromium.org/2913093002 Cr-Commit-Position: refs/heads/master@{#475689} Committed: https://chromium.googlesource.com/chromium/src/+/8e4d09ab6b864897d8399ccda555a61b030ceb84 BUG=725489 Review-Url: https://codereview.chromium.org/2915773002 Cr-Commit-Position: refs/heads/master@{#476024}
web-platform-tests · May 31, 2017 · 65015ca · 65015ca
1 parent f98c29e
commit 65015ca
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 1 deletion.
diff --git a/css/css-align-3/default-alignment/place-items-shorthand-006.html b/css/css-align-3/default-alignment/place-items-shorthand-006.html
@@ -10,7 +10,7 @@
 <script>
     var values = ["normal", "stretch"].concat(selfPositionValues, baselineValues);
     values.forEach(function(alignValue) {
-        ["", "auto"].concat(values).forEach(function(justifyValue) {
+        [""].concat(values).forEach(function(justifyValue) {
             var value = (alignValue + " " + justifyValue).trim();
             test(function() {
                 checkPlaceShorhand("place-items", alignValue, justifyValue)

diff --git a/css/css-flexbox-1/align-items-006.html b/css/css-flexbox-1/align-items-006.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD//XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+    <head>
+        <title>CSS Test: A flex container with 'column' direction and 'align-items' property set to 'flex-start'</title>
+        <link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+        <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" />
+        <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property" />
+        <link rel="match" href="reference/align-content-001-ref.html" />
+        <meta name="assert" content="This test checks that 'align-items: flex-start' implies the flex item's 'auto' width to be resolved as 'fit-content'." />
+        <style type="text/css">
+            .block {
+                position: absolute;
+                width: 300px;
+                height: 100px;
+            }
+            #flexbox
+            {
+                font: 50px/1 Ahem;
+                background: green;
+                flex-direction: column;
+                align-items: flex-start;
+                display: flex;
+                width: 300px;
+                height: 100px;
+            }
+        </style>
+    </head>
+    <body>
+        <p>Test passes if there is no red visible on the page.</p>
+        <div class="block">
+            <div style="width: 200px; height: 50px; background: green"></div>
+        </div>
+        <div id="flexbox">
+            <div style="background: red; color: red">XXXX</div>
+        </div>
+    </body>
+</html>