Commit a4039c89 authored by ojan@chromium.org's avatar ojan@chromium.org

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
parent d0a8b977
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> 2012-08-15 Scott Graham <scottmg@chromium.org>
Rename window.internals.fastMallocStatistics to mallocStatistics Rename window.internals.fastMallocStatistics to mallocStatistics
<!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>
<!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>
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> 2012-08-15 Joanmarie Diggs <jdiggs@igalia.com>
[Gtk] atk_text_set_caret_offset() fails for table cells [Gtk] atk_text_set_caret_offset() fails for table cells
...@@ -2067,6 +2067,15 @@ static bool doesNotInheritTextDecoration(RenderStyle* style, Element* e) ...@@ -2067,6 +2067,15 @@ static bool doesNotInheritTextDecoration(RenderStyle* style, Element* e)
|| style->isFloating() || style->isOutOfFlowPositioned(); || 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) void StyleResolver::adjustRenderStyle(RenderStyle* style, RenderStyle* parentStyle, Element *e)
{ {
ASSERT(parentStyle); ASSERT(parentStyle);
...@@ -2154,14 +2163,14 @@ void StyleResolver::adjustRenderStyle(RenderStyle* style, RenderStyle* parentSty ...@@ -2154,14 +2163,14 @@ void StyleResolver::adjustRenderStyle(RenderStyle* style, RenderStyle* parentSty
if (style->writingMode() != TopToBottomWritingMode && (style->display() == BOX || style->display() == INLINE_BOX)) if (style->writingMode() != TopToBottomWritingMode && (style->display() == BOX || style->display() == INLINE_BOX))
style->setWritingMode(TopToBottomWritingMode); style->setWritingMode(TopToBottomWritingMode);
if (e && e->parentNode() && e->parentNode()->renderer() && e->parentNode()->renderer()->isFlexibleBox()) { if (isDisplayFlexibleBox(parentStyle->display())) {
style->setFloating(NoFloat); style->setFloating(NoFloat);
style->setDisplay(equivalentBlockDisplay(style->display(), style->isFloating(), m_checker.strictParsing())); style->setDisplay(equivalentBlockDisplay(style->display(), style->isFloating(), m_checker.strictParsing()));
} }
} }
// Make sure our z-index value is only applied if the object is positioned. // 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(); style->setHasAutoZIndex();
// Auto z-index becomes 0 for the root element and transparent objects. This prevents // Auto z-index becomes 0 for the root element and transparent objects. This prevents
......
...@@ -42,7 +42,9 @@ public: ...@@ -42,7 +42,9 @@ public:
RenderBox(Node*); RenderBox(Node*);
virtual ~RenderBox(); 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! // Use this with caution! No type checking is done!
RenderBox* firstChildBox() const; RenderBox* firstChildBox() const;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment