summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authortony@chromium.org <tony@chromium.org@bbb929c8-8fbe-4397-9dbb-9b2b20218538>2012-06-12 22:39:01 +0000
committertony@chromium.org <tony@chromium.org@bbb929c8-8fbe-4397-9dbb-9b2b20218538>2012-06-12 22:39:01 +0000
commitc23a47143626498a097f44428404764073ff4ed6 (patch)
tree80646b7923b425c1d1ac7dce5080f03176c17689
parentbecaf9d0e33dbf3ada6cf89396dae0201d38a4d6 (diff)
downloadchromium_src-c23a47143626498a097f44428404764073ff4ed6.zip
chromium_src-c23a47143626498a097f44428404764073ff4ed6.tar.gz
chromium_src-c23a47143626498a097f44428404764073ff4ed6.tar.bz2
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): git-svn-id: svn://svn.chromium.org/blink/trunk@120132 bbb929c8-8fbe-4397-9dbb-9b2b20218538
Diffstat
-rw-r--r--third_party/WebKit/LayoutTests/ChangeLog12
-rw-r--r--third_party/WebKit/LayoutTests/css3/flexbox/flexitem-expected.txt38
-rw-r--r--third_party/WebKit/LayoutTests/css3/flexbox/flexitem.html96
-rw-r--r--third_party/WebKit/LayoutTests/css3/flexbox/resources/flexbox.js7
-rw-r--r--third_party/WebKit/Source/WebCore/ChangeLog17
-rw-r--r--third_party/WebKit/Source/WebCore/css/StyleResolver.cpp38
6 files changed, 208 insertions, 0 deletions
diff --git a/third_party/WebKit/LayoutTests/ChangeLog b/third_party/WebKit/LayoutTests/ChangeLog
index 558dada..e9622f1 100644
--- a/third_party/WebKit/LayoutTests/ChangeLog
+++ b/third_party/WebKit/LayoutTests/ChangeLog
@@ -1,3 +1,15 @@
+2012-06-12 Tony Chang <tony@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 <jsbell@chromium.org>
IndexedDB: ObjectStore/Index shouldn't hold reference to backing store
diff --git a/third_party/WebKit/LayoutTests/css3/flexbox/flexitem-expected.txt b/third_party/WebKit/LayoutTests/css3/flexbox/flexitem-expected.txt
new file mode 100644
index 0000000..63a97b7
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/css3/flexbox/flexitem-expected.txt
@@ -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="../images/resources/blue-100.png">
+ <!-- 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="../images/resources/green-10.png">
+</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="../images/resources/blue-100.png">
+ <!-- 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="doesnotexist.png">
+ <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
+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>
diff --git a/third_party/WebKit/LayoutTests/css3/flexbox/flexitem.html b/third_party/WebKit/LayoutTests/css3/flexbox/flexitem.html
new file mode 100644
index 0000000..1f56700
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/css3/flexbox/flexitem.html
@@ -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="resources/flexbox.js"></script>
+<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="data:text/html,<body 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="../images/resources/blue-100.png">
+ <!-- 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="../images/resources/green-10.png">
+</div>
+
+<div class="flexbox">
+ <img data-expected-display="block" data-expected-width="200" style="-webkit-flex: 1 0 auto;" src="../images/resources/blue-100.png">
+ <!-- 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="doesnotexist.png">
+ <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>
+
+<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>
diff --git a/third_party/WebKit/LayoutTests/css3/flexbox/resources/flexbox.js b/third_party/WebKit/LayoutTests/css3/flexbox/resources/flexbox.js
index 380c9e7..6121d69 100644
--- a/third_party/WebKit/LayoutTests/css3/flexbox/resources/flexbox.js
+++ b/third_party/WebKit/LayoutTests/css3/flexbox/resources/flexbox.js
@@ -65,6 +65,13 @@ function checkExpectedValues(node, failures)
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()
diff --git a/third_party/WebKit/Source/WebCore/ChangeLog b/third_party/WebKit/Source/WebCore/ChangeLog
index 28d4399..c5b1fdc 100644
--- a/third_party/WebKit/Source/WebCore/ChangeLog
+++ b/third_party/WebKit/Source/WebCore/ChangeLog
@@ -1,3 +1,20 @@
+2012-06-12 Tony Chang <tony@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 <jsbell@chromium.org>
IndexedDB: ObjectStore/Index shouldn't hold reference to backing store
diff --git a/third_party/WebKit/Source/WebCore/css/StyleResolver.cpp b/third_party/WebKit/Source/WebCore/css/StyleResolver.cpp
index 9562915..c2df9f6 100644
--- a/third_party/WebKit/Source/WebCore/css/StyleResolver.cpp
+++ b/third_party/WebKit/Source/WebCore/css/StyleResolver.cpp
@@ -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 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) {
@@ -2061,6 +2092,13 @@ void StyleResolver::adjustRenderStyle(RenderStyle* style, RenderStyle* parentSty
// 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.
generated by cgit v1.1 at 2025-12-01 10:17:21 +0000