Title: [125693] trunk
- Revision
- 125693
- Author
- [email protected]
- Date
- 2012-08-15 12:28:20 -0700 (Wed, 15 Aug 2012)
Log Message
z-index should work without position on flexitems
https://bugs.webkit.org/show_bug.cgi?id=91405
Reviewed by Tony Chang.
Source/WebCore:
Require a layer on any RenderBox that has a non-auto z-index.
Statically positioned, non-flex-item's have their z-index coerced to auto,
so it's safe to check z-index unconditionally.
Test: css3/flexbox/z-index.html
* css/StyleResolver.cpp:
(WebCore::StyleResolver::adjustRenderStyle):
-Don't coerce z-index to auto on statically positioned flex-items.
-Use the parentStyle to determine if the parent is a flexbox instead of
looking at the element's parentNode's renderer.
* rendering/RenderBox.h:
-Add having a non-auto z-index to the list of things that require a layer.
LayoutTests:
* css3/flexbox/z-index-expected.html: Added.
* css3/flexbox/z-index.html: Added.
Use a ref-test since we want to be sure that the elements get painted in the right order.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (125692 => 125693)
--- trunk/LayoutTests/ChangeLog 2012-08-15 19:18:27 UTC (rev 125692)
+++ trunk/LayoutTests/ChangeLog 2012-08-15 19:28:20 UTC (rev 125693)
@@ -1,3 +1,14 @@
+2012-08-10 Ojan Vafai <[email protected]>
+
+ z-index should work without position on flexitems
+ https://bugs.webkit.org/show_bug.cgi?id=91405
+
+ Reviewed by Tony Chang.
+
+ * css3/flexbox/z-index-expected.html: Added.
+ * css3/flexbox/z-index.html: Added.
+ Use a ref-test since we want to be sure that the elements get painted in the right order.
+
2012-08-15 Scott Graham <[email protected]>
Rename window.internals.fastMallocStatistics to mallocStatistics
Added: trunk/LayoutTests/css3/flexbox/z-index-expected.html (0 => 125693)
--- trunk/LayoutTests/css3/flexbox/z-index-expected.html (rev 0)
+++ trunk/LayoutTests/css3/flexbox/z-index-expected.html 2012-08-15 19:28:20 UTC (rev 125693)
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<style>
+.container > * {
+ position: absolute;
+}
+.large {
+ width: 50px;
+ height: 50px;
+}
+.small {
+ left: 25px;
+ height: 25px;
+ width: 50px;
+}
+</style>
+<div>This tests that z-index on non-positioned flex-items works. The green boxes should be above the orange boxes, which should be above the purple boxes, which are above the salmon boxes.<div>
+<div class="container" style="position:relative">
+ <div class="large" style="z-index: 1; background-color: salmon;"></div>
+ <div class="large" style="z-index: 100; background-color: orange; left: 50px;"></div>
+ <div class="small" style="z-index: 150; background-color: green"></div>
+ <div class="small" style="z-index: 50; background-color: purple; top: 25px;"></div>
+</div>
+<div class="container" style="position:relative; top: 50px">
+ <img class="large" style="z-index: 1; background-color: salmon;"></img>
+ <img class="large" style="z-index: 100; background-color: orange; left: 50px;"></img>
+ <img class="small" style="z-index: 150; background-color: green"></img>
+ <img class="small" style="z-index: 50; background-color: purple; top: 25px;"></img>
+</div>
Property changes on: trunk/LayoutTests/css3/flexbox/z-index-expected.html
___________________________________________________________________
Added: svn:mime-type
Added: svn:eol-style
Added: trunk/LayoutTests/css3/flexbox/z-index.html (0 => 125693)
--- trunk/LayoutTests/css3/flexbox/z-index.html (rev 0)
+++ trunk/LayoutTests/css3/flexbox/z-index.html 2012-08-15 19:28:20 UTC (rev 125693)
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<style>
+.flex-item {
+ width: 50px;
+ height: 50px;
+}
+.positioned {
+ position: absolute;
+ left: 25px;
+ height: 25px;
+ width: 50px;
+}
+</style>
+<div>This tests that z-index on non-positioned flex-items works. The green boxes should be above the orange boxes, which should be above the purple boxes, which are above the salmon boxes.<div>
+<div style="position:relative">
+ <div style="display:-webkit-flex;">
+ <div class="flex-item" style="z-index: 1; background-color: salmon;"></div>
+ <div class="flex-item" style="z-index: 100; background-color: orange;"></div>
+ </div>
+ <div class="positioned" style="top: 0; z-index: 150; background-color: green"></div>
+ <div class="positioned" style="top: 25px; z-index: 50; background-color: purple"></div>
+</div>
+<div style="position:relative">
+ <div style="display:-webkit-flex;">
+ <img class="flex-item" style="z-index: 1; background-color: salmon;"></img>
+ <img class="flex-item" style="z-index: 100; background-color: orange;"></img>
+ </div>
+ <img class="positioned" style="top: 0; z-index: 150; background-color: green"></img>
+ <img class="positioned" style="top: 25px; z-index: 50; background-color: purple"></img>
+</div>
Property changes on: trunk/LayoutTests/css3/flexbox/z-index.html
___________________________________________________________________
Added: svn:mime-type
Added: svn:eol-style
Modified: trunk/Source/WebCore/ChangeLog (125692 => 125693)
--- trunk/Source/WebCore/ChangeLog 2012-08-15 19:18:27 UTC (rev 125692)
+++ trunk/Source/WebCore/ChangeLog 2012-08-15 19:28:20 UTC (rev 125693)
@@ -1,3 +1,24 @@
+2012-08-10 Ojan Vafai <[email protected]>
+
+ z-index should work without position on flexitems
+ https://bugs.webkit.org/show_bug.cgi?id=91405
+
+ Reviewed by Tony Chang.
+
+ Require a layer on any RenderBox that has a non-auto z-index.
+ Statically positioned, non-flex-item's have their z-index coerced to auto,
+ so it's safe to check z-index unconditionally.
+
+ Test: css3/flexbox/z-index.html
+
+ * css/StyleResolver.cpp:
+ (WebCore::StyleResolver::adjustRenderStyle):
+ -Don't coerce z-index to auto on statically positioned flex-items.
+ -Use the parentStyle to determine if the parent is a flexbox instead of
+ looking at the element's parentNode's renderer.
+ * rendering/RenderBox.h:
+ -Add having a non-auto z-index to the list of things that require a layer.
+
2012-08-15 Joanmarie Diggs <[email protected]>
[Gtk] atk_text_set_caret_offset() fails for table cells
Modified: trunk/Source/WebCore/css/StyleResolver.cpp (125692 => 125693)
--- trunk/Source/WebCore/css/StyleResolver.cpp 2012-08-15 19:18:27 UTC (rev 125692)
+++ trunk/Source/WebCore/css/StyleResolver.cpp 2012-08-15 19:28:20 UTC (rev 125693)
@@ -2067,6 +2067,15 @@
|| style->isFloating() || style->isOutOfFlowPositioned();
}
+static bool isDisplayFlexibleBox(EDisplay display)
+{
+#if ENABLE(CSS3_FLEXBOX)
+ return display == FLEX || display == INLINE_FLEX;
+#else
+ return false;
+#endif
+}
+
void StyleResolver::adjustRenderStyle(RenderStyle* style, RenderStyle* parentStyle, Element *e)
{
ASSERT(parentStyle);
@@ -2154,14 +2163,14 @@
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 (isDisplayFlexibleBox(parentStyle->display())) {
style->setFloating(NoFloat);
style->setDisplay(equivalentBlockDisplay(style->display(), style->isFloating(), m_checker.strictParsing()));
}
}
// Make sure our z-index value is only applied if the object is positioned.
- if (style->position() == StaticPosition)
+ if (style->position() == StaticPosition && !isDisplayFlexibleBox(parentStyle->display()))
style->setHasAutoZIndex();
// Auto z-index becomes 0 for the root element and transparent objects. This prevents
Modified: trunk/Source/WebCore/rendering/RenderBox.h (125692 => 125693)
--- trunk/Source/WebCore/rendering/RenderBox.h 2012-08-15 19:18:27 UTC (rev 125692)
+++ trunk/Source/WebCore/rendering/RenderBox.h 2012-08-15 19:28:20 UTC (rev 125693)
@@ -42,7 +42,9 @@
RenderBox(Node*);
virtual ~RenderBox();
- virtual bool requiresLayer() const OVERRIDE { return isRoot() || isOutOfFlowPositioned() || isRelPositioned() || isTransparent() || hasOverflowClip() || hasTransform() || hasHiddenBackface() || hasMask() || hasReflection() || hasFilter() || style()->specifiesColumns(); }
+ // hasAutoZIndex only returns true if the element is positioned or a flex-item since
+ // position:static elements that are not flex-items get their z-index coerced to auto.
+ virtual bool requiresLayer() const OVERRIDE { return isRoot() || isOutOfFlowPositioned() || isRelPositioned() || isTransparent() || hasOverflowClip() || hasTransform() || hasHiddenBackface() || hasMask() || hasReflection() || hasFilter() || style()->specifiesColumns() || !style()->hasAutoZIndex(); }
// Use this with caution! No type checking is done!
RenderBox* firstChildBox() const;
_______________________________________________
webkit-changes mailing list
[email protected]
http://lists.webkit.org/mailman/listinfo/webkit-changes
