Make sure child layers of top layer elements are rendered and correctly z-ordered (top-layer-stacking.html fails)
https://bugs.webkit.org/show_bug.cgi?id=231832
Reviewed by Antoine Quint.
Source/WebCore:
Top layer elements should create CSS stacking context, per https://fullscreen.spec.whatwg.org/#rendering
I decided to call isInTopLayerOrBackdrop() twice to avoid calling it every time this function
is called. It's a cheap function.
Test: fast/layers/dialog-is-stacking-context.html
* style/StyleAdjuster.cpp:
(WebCore::Style::Adjuster::adjust const):
LayoutTests:
Ref test that compares a dialog with positioned children and one with children place
with margins.
* fast/layers/dialog-is-stacking-context-expected.html: Added.
* fast/layers/dialog-is-stacking-context.html: Added.
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@284314 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index f768bae..ee5fba2 100644
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,3 +1,16 @@
+2021-10-16 Simon Fraser <simon.fraser@apple.com>
+
+ Make sure child layers of top layer elements are rendered and correctly z-ordered (top-layer-stacking.html fails)
+ https://bugs.webkit.org/show_bug.cgi?id=231832
+
+ Reviewed by Antoine Quint.
+
+ Ref test that compares a dialog with positioned children and one with children place
+ with margins.
+
+ * fast/layers/dialog-is-stacking-context-expected.html: Added.
+ * fast/layers/dialog-is-stacking-context.html: Added.
+
2021-10-15 Antoine Quint <graouts@webkit.org>
Accelerated animations on ::backdrop shouldn't affect <dialog> (backdrop-animate-002.html fails)
diff --git a/LayoutTests/fast/layers/dialog-is-stacking-context-expected.html b/LayoutTests/fast/layers/dialog-is-stacking-context-expected.html
new file mode 100644
index 0000000..dc7a624
--- /dev/null
+++ b/LayoutTests/fast/layers/dialog-is-stacking-context-expected.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ dialog {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ width: 300px;
+ height: 200px;
+ }
+
+ .box {
+ margin: -200px 0;
+ width: 100px;
+ height: 100px;
+ background-color: green;
+ }
+
+ .negative {
+ margin: 50px;
+ z-index: -1;
+ background-color: orange;
+ }
+ </style>
+</head>
+<body>
+ <dialog id="theDialog">
+ <div class="negative box"></div>
+ <div class="box"></div>
+ </dialog>
+<script>
+ document.getElementById('theDialog').showModal();
+</script>
+</body>
+</html>
diff --git a/LayoutTests/fast/layers/dialog-is-stacking-context.html b/LayoutTests/fast/layers/dialog-is-stacking-context.html
new file mode 100644
index 0000000..bdc6c51
--- /dev/null
+++ b/LayoutTests/fast/layers/dialog-is-stacking-context.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <style>
+ dialog {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ width: 300px;
+ height: 200px;
+ }
+
+ .box {
+ position: absolute;
+ z-index: 0;
+ width: 100px;
+ height: 100px;
+ background-color: green;
+ }
+
+ .negative {
+ margin: 50px;
+ z-index: -1;
+ background-color: orange;
+ }
+ </style>
+</head>
+<body>
+ <dialog id="theDialog">
+ <div class="box"></div>
+ <div class="negative box"></div>
+ </dialog>
+<script>
+ document.getElementById('theDialog').showModal();
+</script>
+</body>
+</html>
diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index 47e464b..7ce13c6 100644
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,20 @@
+2021-10-16 Simon Fraser <simon.fraser@apple.com>
+
+ Make sure child layers of top layer elements are rendered and correctly z-ordered (top-layer-stacking.html fails)
+ https://bugs.webkit.org/show_bug.cgi?id=231832
+
+ Reviewed by Antoine Quint.
+
+ Top layer elements should create CSS stacking context, per https://fullscreen.spec.whatwg.org/#rendering
+
+ I decided to call isInTopLayerOrBackdrop() twice to avoid calling it every time this function
+ is called. It's a cheap function.
+
+ Test: fast/layers/dialog-is-stacking-context.html
+
+ * style/StyleAdjuster.cpp:
+ (WebCore::Style::Adjuster::adjust const):
+
2021-10-15 Antoine Quint <graouts@webkit.org>
Accelerated animations on ::backdrop shouldn't affect <dialog> (backdrop-animate-002.html fails)
diff --git a/Source/WebCore/style/StyleAdjuster.cpp b/Source/WebCore/style/StyleAdjuster.cpp
index 15a4b73..f5d4707 100644
--- a/Source/WebCore/style/StyleAdjuster.cpp
+++ b/Source/WebCore/style/StyleAdjuster.cpp
@@ -316,8 +316,7 @@
// Top layer elements are always position: absolute; unless the position is set to fixed.
// https://fullscreen.spec.whatwg.org/#new-stacking-layer
- bool isInTopLayer = isInTopLayerOrBackdrop(style, m_element);
- if (style.position() != PositionType::Absolute && style.position() != PositionType::Fixed && isInTopLayer)
+ if (style.position() != PositionType::Absolute && style.position() != PositionType::Fixed && isInTopLayerOrBackdrop(style, m_element))
style.setPosition(PositionType::Absolute);
// Absolute/fixed positioned elements, floating elements and the document element need block-like outside display.
@@ -382,7 +381,8 @@
|| style.hasIsolation()
|| style.position() == PositionType::Sticky
|| style.position() == PositionType::Fixed
- || style.willChangeCreatesStackingContext())
+ || style.willChangeCreatesStackingContext()
+ || isInTopLayerOrBackdrop(style, m_element))
style.setUsedZIndex(0);
}
