Normal-flow-only flex items don't correctly respect z-index
authortimothy_horton@apple.com <timothy_horton@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 9 Nov 2018 22:57:31 +0000 (22:57 +0000)
committertimothy_horton@apple.com <timothy_horton@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 9 Nov 2018 22:57:31 +0000 (22:57 +0000)
https://bugs.webkit.org/show_bug.cgi?id=191486

Reviewed by Simon Fraser.

Source/WebCore:

Test: css3/flexbox/z-index-with-normal-flow-only.html

* rendering/RenderLayer.cpp:
(WebCore::canCreateStackingContext):
r125693 did not ensure that flex items which would otherwise be
normal-flow-only would be put into the z-order tree when necessary.
Fix by respecting the same trigger we use to make layers for flex items;
namely, not having auto z-index.

LayoutTests:

* css3/flexbox/z-index-with-normal-flow-only-expected.html: Added.
* css3/flexbox/z-index-with-normal-flow-only.html: Added.
Add a test that a <canvas> with z-index 50 correctly stacks below
a <canvas> that is a flex-item with z-index 100.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@238058 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/css3/flexbox/z-index-with-normal-flow-only-expected.html [new file with mode: 0644]
LayoutTests/css3/flexbox/z-index-with-normal-flow-only.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderLayer.cpp

index b6bae47..8dbb63a 100644 (file)
@@ -1,3 +1,15 @@
+2018-11-09  Tim Horton  <timothy_horton@apple.com>
+
+        Normal-flow-only flex items don't correctly respect z-index
+        https://bugs.webkit.org/show_bug.cgi?id=191486
+
+        Reviewed by Simon Fraser.
+
+        * css3/flexbox/z-index-with-normal-flow-only-expected.html: Added.
+        * css3/flexbox/z-index-with-normal-flow-only.html: Added.
+        Add a test that a <canvas> with z-index 50 correctly stacks below
+        a <canvas> that is a flex-item with z-index 100.
+
 2018-11-09  Jer Noble  <jer.noble@apple.com>
 
         SourceBuffer throws an error when appending a second init segment after changeType().
diff --git a/LayoutTests/css3/flexbox/z-index-with-normal-flow-only-expected.html b/LayoutTests/css3/flexbox/z-index-with-normal-flow-only-expected.html
new file mode 100644 (file)
index 0000000..c00811d
--- /dev/null
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<style>
+div {
+    width: 100px;
+    height: 100px;
+    background-color: green;
+}
+</style>
+<div></div>
diff --git a/LayoutTests/css3/flexbox/z-index-with-normal-flow-only.html b/LayoutTests/css3/flexbox/z-index-with-normal-flow-only.html
new file mode 100644 (file)
index 0000000..1cde85d
--- /dev/null
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<style>
+canvas {
+    width: 100px;
+    height: 100px;
+}
+
+.positioned {
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+</style>
+<div style="position: relative;">
+    <div style="display: flex;">
+        <canvas style="z-index: 100; background-color: green;"></img>
+    </div>
+    <canvas class="positioned" style="z-index: 50; background-color: red;"></img>
+</div>
index 3c98b3d..6c917e9 100644 (file)
@@ -1,3 +1,19 @@
+2018-11-09  Tim Horton  <timothy_horton@apple.com>
+
+        Normal-flow-only flex items don't correctly respect z-index
+        https://bugs.webkit.org/show_bug.cgi?id=191486
+
+        Reviewed by Simon Fraser.
+
+        Test: css3/flexbox/z-index-with-normal-flow-only.html
+
+        * rendering/RenderLayer.cpp:
+        (WebCore::canCreateStackingContext):
+        r125693 did not ensure that flex items which would otherwise be
+        normal-flow-only would be put into the z-order tree when necessary.
+        Fix by respecting the same trigger we use to make layers for flex items;
+        namely, not having auto z-index.
+
 2018-11-09  Wenson Hsieh  <wenson_hsieh@apple.com>
 
         [Cocoa] Implement SPI on WKWebView to increase and decrease list levels
index 7f58ac0..59eda26 100644 (file)
@@ -529,6 +529,7 @@ static bool canCreateStackingContext(const RenderLayer& layer)
         || renderer.isPositioned() // Note that this only creates stacking context in conjunction with explicit z-index.
         || renderer.hasReflection()
         || renderer.style().hasIsolation()
+        || !renderer.style().hasAutoZIndex()
 #if PLATFORM(IOS_FAMILY)
         || layer.canUseAcceleratedTouchScrolling()
 #endif