Permalink
Browse files

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.

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@125693 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information...
1 parent 89eec51 commit ec445beeb40d94d5715090fbc81f948ebf48b286 @ojanvafai ojanvafai committed Aug 15, 2012
View
@@ -1,3 +1,14 @@
+2012-08-10 Ojan Vafai <ojan@chromium.org>
+
+ 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 <scottmg@chromium.org>
Rename window.internals.fastMallocStatistics to mallocStatistics
@@ -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>
@@ -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>
@@ -1,3 +1,24 @@
+2012-08-10 Ojan Vafai <ojan@chromium.org>
+
+ 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 <jdiggs@igalia.com>
[Gtk] atk_text_set_caret_offset() fails for table cells
@@ -2067,6 +2067,15 @@ static bool doesNotInheritTextDecoration(RenderStyle* style, Element* e)
|| 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 @@ 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 (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
@@ -42,7 +42,9 @@ class RenderBox : public RenderBoxModelObject {
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;

0 comments on commit ec445be

Please sign in to comment.