Title: [120132] trunk
- Revision
- 120132
- Author
- t...@chromium.org
- Date
- 2012-06-12 15:39:01 -0700 (Tue, 12 Jun 2012)
Log Message
Replaced items in a flexbox should be coerced to display:block
https://bugs.webkit.org/show_bug.cgi?id=87068
Reviewed by Ojan Vafai.
Source/WebCore:
The flexbox spec lists HTML tags that should automatically be converted
to display:block when a flex child. It also says that atomic inline-level
children should become block (e.g., inline-table should be treated as table).
http://dev.w3.org/csswg/css3-flexbox/#flex-items
Test: css3/flexbox/flexitem.html
* css/StyleResolver.cpp:
(WebCore::StyleResolver::collectMatchingRulesForList):
LayoutTests:
* css3/flexbox/flexitem-expected.txt: Added.
* css3/flexbox/flexitem.html: Added.
* css3/flexbox/resources/flexbox.js:
(checkExpectedValues):
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (120131 => 120132)
--- trunk/LayoutTests/ChangeLog 2012-06-12 22:36:54 UTC (rev 120131)
+++ trunk/LayoutTests/ChangeLog 2012-06-12 22:39:01 UTC (rev 120132)
@@ -1,3 +1,15 @@
+2012-06-12 Tony Chang <t...@chromium.org>
+
+ Replaced items in a flexbox should be coerced to display:block
+ https://bugs.webkit.org/show_bug.cgi?id=87068
+
+ Reviewed by Ojan Vafai.
+
+ * css3/flexbox/flexitem-expected.txt: Added.
+ * css3/flexbox/flexitem.html: Added.
+ * css3/flexbox/resources/flexbox.js:
+ (checkExpectedValues):
+
2012-06-12 Joshua Bell <jsb...@chromium.org>
IndexedDB: ObjectStore/Index shouldn't hold reference to backing store
Added: trunk/LayoutTests/css3/flexbox/flexitem-expected.txt (0 => 120132)
--- trunk/LayoutTests/css3/flexbox/flexitem-expected.txt (rev 0)
+++ trunk/LayoutTests/css3/flexbox/flexitem-expected.txt 2012-06-12 22:39:01 UTC (rev 120132)
@@ -0,0 +1,38 @@
+button
+
+object
+
+PASS
+
+PASS
+
+FAIL:
+Expected 100 for height, but got 10.
+
+<div class="flexbox">
+ <img data-expected-display="block" data-expected-width="345" style="-webkit-flex: 1 0 auto;" src=""
+ <!-- FIXME: The image should stretch in the cross direction. -->
+ <img data-expected-display="block" data-expected-width="255" data-expected-height="100" style="-webkit-flex: 1 0 auto;" src=""
+</div>
+
+FAIL:
+Expected 100 for height, but got 20.
+Expected 100 for height, but got 20.
+
+<div class="flexbox">
+ <img data-expected-display="block" data-expected-width="200" style="-webkit-flex: 1 0 auto;" src=""
+ <!-- FIXME: The missing image placeholders should stretch in the cross direction. -->
+ <img data-expected-display="block" data-expected-width="200" data-expected-height="100" style="-webkit-flex: 2 0 0;" src=""
+ <img data-expected-display="block" data-expected-width="200" data-expected-height="100" style="-webkit-flex: 2 0 0;" src="" alt="placeholder text">
+</div>
+PASS
+ button
+ PASS
+ PASS
+FAIL:
+Expected 600 for width, but got 0.
+
+<div class="flexbox">
+ <!-- FIXME: This table should flex. -->
+ <div data-expected-display="table" data-expected-width="600" style="display: inline-table"></div>
+</div>
Added: trunk/LayoutTests/css3/flexbox/flexitem.html (0 => 120132)
--- trunk/LayoutTests/css3/flexbox/flexitem.html (rev 0)
+++ trunk/LayoutTests/css3/flexbox/flexitem.html 2012-06-12 22:39:01 UTC (rev 120132)
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+<style>
+.flexbox {
+ width: 600px;
+ display: -webkit-flex;
+ background-color: #aaa;
+ position: relative;
+ min-height: 10px;
+}
+.flexbox > * {
+ -webkit-flex: 1 0 0;
+ margin: 0;
+ border: 0;
+ padding: 0;
+}
+</style>
+<script>
+if (window.layoutTestController)
+ layoutTestController.dumpAsText();
+</script>
+<script src=""
+<body _onload_="checkFlexBoxen()">
+<div class="flexbox">
+ <button data-expected-display="block" data-expected-width="100">button</button>
+ <canvas data-expected-display="block" data-expected-width="100">canvas</canvas>
+ <iframe data-expected-display="block" data-expected-width="100" src="" bgcolor=#fff>iframe</body>"></iframe>
+ <object data-expected-display="block" data-expected-width="100">object</object>
+ <select data-expected-display="block" data-expected-width="100">
+ <option>select</option>
+ </select>
+ <textarea data-expected-display="block" data-expected-width="100">textarea</textarea>
+</div>
+
+
+<div class="flexbox">
+ <input data-expected-display="block" data-expected-width="75" type="checkbox" value="radio"></input>
+ <input data-expected-display="block" data-expected-width="75" type="file" value="file"></input>
+ <input data-expected-display="block" data-expected-width="75" type="image" value="image"></input>
+ <input data-expected-display="block" data-expected-width="75" type="password" value="password"></input>
+ <input data-expected-display="block" data-expected-width="75" type="radio" value="radio"></input>
+ <input data-expected-display="block" data-expected-width="75" type="reset" value="reset"></input>
+ <input data-expected-display="block" data-expected-width="75" type="submit" value="submit"></input>
+ <input data-expected-display="block" data-expected-width="75" type="text" value="text"></input>
+</div>
+
+<div class="flexbox">
+ <img data-expected-display="block" data-expected-width="345" style="-webkit-flex: 1 0 auto;" src=""
+ <!-- FIXME: The image should stretch in the cross direction. -->
+ <img data-expected-display="block" data-expected-width="255" data-expected-height="100" style="-webkit-flex: 1 0 auto;" src=""
+</div>
+
+<div class="flexbox">
+ <img data-expected-display="block" data-expected-width="200" style="-webkit-flex: 1 0 auto;" src=""
+ <!-- FIXME: The missing image placeholders should stretch in the cross direction. -->
+ <img data-expected-display="block" data-expected-width="200" data-expected-height="100" style="-webkit-flex: 2 0 0;" src=""
+ <img data-expected-display="block" data-expected-width="200" data-expected-height="100" style="-webkit-flex: 2 0 0;" src="" alt="placeholder text">
+</div>
+
+<div class="flexbox">
+ <svg data-expected-display="block" data-expected-width="100" style="-webkit-flex: 1 0 auto; width: 100px; height: 100px">
+ <circle cx="50" cy="50" r="50" fill="blue">
+ </circle>
+ </svg>
+ <svg data-expected-display="block" data-expected-width="500" style="-webkit-flex: 1 1 auto; height: 100px">
+ <circle cx="50" cy="50" r="50" fill="green">
+ </circle>
+ </svg>
+</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>
+</div>
+
+<div class="flexbox">
+ <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>
+
+<div class="flexbox">
+ <!-- FIXME: This table should flex. -->
+ <div data-expected-display="table" data-expected-width="600" style="display: inline-table"></div>
+</div>
+
+</html>
Modified: trunk/LayoutTests/css3/flexbox/resources/flexbox.js (120131 => 120132)
--- trunk/LayoutTests/css3/flexbox/resources/flexbox.js 2012-06-12 22:36:54 UTC (rev 120131)
+++ trunk/LayoutTests/css3/flexbox/resources/flexbox.js 2012-06-12 22:39:01 UTC (rev 120132)
@@ -65,6 +65,13 @@
if (totalTop != parseInt(expectedOffset))
failures.push("Expected " + expectedOffset + " for clientTop+offsetTop, but got " + totalTop + ", clientTop: " + node.clientTop + ", + offsetTop: " + node.offsetTop + ". ");
}
+
+ var expectedDisplay = node.getAttribute && node.getAttribute("data-expected-display");
+ if (expectedDisplay) {
+ var actualDisplay = getComputedStyle(node).display;
+ if (actualDisplay != expectedDisplay)
+ failures.push("Expected " + expectedDisplay + " for display, but got " + actualDisplay + ". ");
+ }
}
function checkFlexBoxen()
Modified: trunk/Source/WebCore/ChangeLog (120131 => 120132)
--- trunk/Source/WebCore/ChangeLog 2012-06-12 22:36:54 UTC (rev 120131)
+++ trunk/Source/WebCore/ChangeLog 2012-06-12 22:39:01 UTC (rev 120132)
@@ -1,3 +1,20 @@
+2012-06-12 Tony Chang <t...@chromium.org>
+
+ Replaced items in a flexbox should be coerced to display:block
+ https://bugs.webkit.org/show_bug.cgi?id=87068
+
+ Reviewed by Ojan Vafai.
+
+ The flexbox spec lists HTML tags that should automatically be converted
+ to display:block when a flex child. It also says that atomic inline-level
+ children should become block (e.g., inline-table should be treated as table).
+ http://dev.w3.org/csswg/css3-flexbox/#flex-items
+
+ Test: css3/flexbox/flexitem.html
+
+ * css/StyleResolver.cpp:
+ (WebCore::StyleResolver::collectMatchingRulesForList):
+
2012-06-12 Joshua Bell <jsb...@chromium.org>
IndexedDB: ObjectStore/Index shouldn't hold reference to backing store
Modified: trunk/Source/WebCore/css/StyleResolver.cpp (120131 => 120132)
--- trunk/Source/WebCore/css/StyleResolver.cpp 2012-06-12 22:36:54 UTC (rev 120131)
+++ trunk/Source/WebCore/css/StyleResolver.cpp 2012-06-12 22:39:01 UTC (rev 120132)
@@ -73,6 +73,7 @@
#include "KeyframeList.h"
#include "LinkHash.h"
#include "LocaleToScriptMapping.h"
+#include "MathMLNames.h"
#include "Matrix3DTransformOperation.h"
#include "MatrixTransformOperation.h"
#include "MediaList.h"
@@ -1919,6 +1920,36 @@
}
}
+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) {
@@ -2061,6 +2092,13 @@
// https://bugs.webkit.org/show_bug.cgi?id=46418 - Flexible box support.
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()));
+ }
}
// Make sure our z-index value is only applied if the object is positioned.
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
http://lists.webkit.org/mailman/listinfo.cgi/webkit-changes
