All child elements of a flex container should be turned into a flex item
authortony@chromium.org <tony@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 30 Jun 2012 03:16:23 +0000 (03:16 +0000)
committertony@chromium.org <tony@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 30 Jun 2012 03:16:23 +0000 (03:16 +0000)
https://bugs.webkit.org/show_bug.cgi?id=90323

Reviewed by Ojan Vafai.

Source/WebCore:

We used to only convert some elements to blocks, but now we convert everything except text nodes.
This was recently changed here:
http://wiki.csswg.org/topics/css3-flexbox-flexbox-replaced-children

Tests: css3/flexbox/anonymous-block.html : Add new test case.
       css3/flexbox/flexitem.html: Update results.

* css/StyleResolver.cpp:
(WebCore::StyleResolver::collectMatchingRulesForList):

LayoutTests:

* css3/flexbox/anonymous-block-expected.html:
* css3/flexbox/anonymous-block.html:
* css3/flexbox/flexitem-expected.txt:
* css3/flexbox/flexitem.html:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@121613 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/css3/flexbox/anonymous-block-expected.html
LayoutTests/css3/flexbox/anonymous-block.html
LayoutTests/css3/flexbox/flexitem-expected.txt
LayoutTests/css3/flexbox/flexitem.html
Source/WebCore/ChangeLog
Source/WebCore/css/StyleResolver.cpp

index af7edd7..f0832c7 100644 (file)
@@ -1,5 +1,17 @@
 2012-06-29  Tony Chang  <tony@chromium.org>
 
+        All child elements of a flex container should be turned into a flex item
+        https://bugs.webkit.org/show_bug.cgi?id=90323
+
+        Reviewed by Ojan Vafai.
+
+        * css3/flexbox/anonymous-block-expected.html:
+        * css3/flexbox/anonymous-block.html:
+        * css3/flexbox/flexitem-expected.txt:
+        * css3/flexbox/flexitem.html:
+
+2012-06-29  Tony Chang  <tony@chromium.org>
+
         Allow align-self: stretch to cause the item size to shrink below its intrinsic size
         https://bugs.webkit.org/show_bug.cgi?id=90304
 
index 5235a0a..abfa1a0 100644 (file)
@@ -1,6 +1,13 @@
 <!DOCTYPE html>
 <html>
 <body>
+<p>This tests that text nodes that have a flexbox as a parent are wrapped in
+anonymous blocks.</p>
 <div>This text should be visible.</div>
+<table cellpadding=0 cellspacing=0 style="width: 100%"><tr>
+  <td>spacer</td>
+  <td style="text-align: center">middle</td>
+  <td style="text-align: right">spacer</td>
+</tr></table>
 </body>
 </html>
index 1b9af34..da22f9a 100644 (file)
@@ -1,6 +1,11 @@
 <!DOCTYPE html>
 <html>
 <body>
+<p>This tests that text nodes that have a flexbox as a parent are wrapped in
+anonymous blocks.</p>
 <div style="display: -webkit-flex">This text should be visible.</div>
+<div style="display: -webkit-flex; -webkit-justify-content: space-between">
+    spacer<span>middle</span>spacer
+</div>
 </body>
 </html>
index 63a97b7..527e47d 100644 (file)
@@ -26,9 +26,9 @@ Expected 100 for height, but got 20.
   <img data-expected-display="block" data-expected-width="200" data-expected-height="100" style="-webkit-flex: 2 0 0;" src="doesnotexist.png" alt="placeholder text">
 </div>
 PASS
- button
- PASS
- PASS
+button
+PASS
+PASS
 FAIL:
 Expected 600 for width, but got 0. 
 
index 61378a0..bedde8f 100644 (file)
@@ -70,23 +70,19 @@ if (window.layoutTestController)
 </div>
 
 <div class="flexbox">
-  <!-- The <spans> get wrapped in anonymous blocks that have the default value
-  of flex: 0 1 auto. Setting a flex: on these spans should do nothing. -->
-  <span style="-webkit-flex: 5 0 0"></span>
-  <button data-expected-display="block" data-expected-width="600" style="-webkit-flex: 1 0 0">button</button>
-  <span style="-webkit-lex: 2 2 100px"></span>
+  <span data-expected-display="block" data-expected-width="200" style="-webkit-flex: 2 0 0"></span>
+  <button data-expected-display="block" data-expected-width="100" style="-webkit-flex: 1 0 0">button</button>
+  <span data-expected-display="block" data-expected-width="300" style="-webkit-flex: 2 2 100px"></span>
 </div>
 
-<div class="flexbox">
+<div class="flexbox" style="width: 700px">
   <div data-expected-display="block" data-expected-width="100" style="display: inline-block;"></div>
   <div data-expected-display="-webkit-box" data-expected-width="100" style="display: -webkit-inline-box;"></div>
   <div data-expected-display="-webkit-flex" data-expected-width="100" style="display: -webkit-inline-flex;"></div>
   <div data-expected-display="block" data-expected-width="100" style="display: table-cell"></div>
   <div data-expected-display="block" data-expected-width="100" style="display: compact"></div>
   <div data-expected-display="block" data-expected-width="100" style="display: run-in"></div>
-  <!-- This inline should be wrapping in an anonymous block, which gets the
-  default flex: 0 1 auto. -->
-  <div data-expected-display="inline" data-expected-width="0" style="display: inline;"></div>
+  <div data-expected-display="block" data-expected-width="100" style="display: inline;"></div>
 </div>
 
 <div class="flexbox">
index 26c7ead..b07c002 100644 (file)
@@ -1,3 +1,20 @@
+2012-06-29  Tony Chang  <tony@chromium.org>
+
+        All child elements of a flex container should be turned into a flex item
+        https://bugs.webkit.org/show_bug.cgi?id=90323
+
+        Reviewed by Ojan Vafai.
+
+        We used to only convert some elements to blocks, but now we convert everything except text nodes.
+        This was recently changed here:
+        http://wiki.csswg.org/topics/css3-flexbox-flexbox-replaced-children
+
+        Tests: css3/flexbox/anonymous-block.html : Add new test case.
+               css3/flexbox/flexitem.html: Update results.
+
+        * css/StyleResolver.cpp:
+        (WebCore::StyleResolver::collectMatchingRulesForList):
+
 2012-06-29  Joshua Bell  <jsbell@chromium.org>
 
         IndexedDB: Keep direction on IDBCursor to avoid calls to back end
index 56313fe..8bc5efe 100644 (file)
@@ -1981,36 +1981,6 @@ static void addIntrinsicMargins(RenderStyle* style)
     }
 }
 
-static bool shouldBecomeBlockWhenParentIsFlexbox(const Element* element)
-{
-    return element->hasTagName(imgTag)
-        || element->hasTagName(canvasTag)
-#if ENABLE(SVG)
-        || element->hasTagName(SVGNames::svgTag)
-#endif
-#if ENABLE(MATHML)
-        || element->hasTagName(MathMLNames::mathTag)
-#endif
-#if ENABLE(VIDEO)
-        || element->hasTagName(audioTag)
-        || element->hasTagName(videoTag)
-#endif
-        || element->hasTagName(iframeTag)
-        || element->hasTagName(objectTag)
-        || element->hasTagName(embedTag)
-        || element->hasTagName(appletTag)
-#if ENABLE(PROGRESS_TAG)
-        || element->hasTagName(progressTag)
-#endif
-#if ENABLE(METER_TAG)
-        || element->hasTagName(meterTag)
-#endif
-        || element->hasTagName(inputTag)
-        || element->hasTagName(buttonTag)
-        || element->hasTagName(selectTag)
-        || element->hasTagName(textareaTag);
-}
-
 static EDisplay equivalentBlockDisplay(EDisplay display, bool isFloating, bool strictParsing)
 {
     switch (display) {
@@ -2155,12 +2125,8 @@ void StyleResolver::adjustRenderStyle(RenderStyle* style, RenderStyle* parentSty
         if (style->writingMode() != TopToBottomWritingMode && (style->display() == BOX || style->display() == INLINE_BOX))
             style->setWritingMode(TopToBottomWritingMode);
 
-        if (e && e->parentNode() && e->parentNode()->renderer() && e->parentNode()->renderer()->isFlexibleBox()) {
-            if (shouldBecomeBlockWhenParentIsFlexbox(e))
-                style->setDisplay(BLOCK);
-            else if (style->display() != INLINE)
-                style->setDisplay(equivalentBlockDisplay(style->display(), style->isFloating(), m_checker.strictParsing()));
-        }
+        if (e && e->parentNode() && e->parentNode()->renderer() && e->parentNode()->renderer()->isFlexibleBox())
+            style->setDisplay(equivalentBlockDisplay(style->display(), style->isFloating(), m_checker.strictParsing()));
     }
 
     // Make sure our z-index value is only applied if the object is positioned.