Title: [284314] trunk
- Revision
- 284314
- Author
- simon.fra...@apple.com
- Date
- 2021-10-16 03:35:18 -0700 (Sat, 16 Oct 2021)
Log Message
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.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (284313 => 284314)
--- trunk/LayoutTests/ChangeLog 2021-10-16 10:22:11 UTC (rev 284313)
+++ trunk/LayoutTests/ChangeLog 2021-10-16 10:35:18 UTC (rev 284314)
@@ -1,3 +1,16 @@
+2021-10-16 Simon Fraser <simon.fra...@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 <grao...@webkit.org>
Accelerated animations on ::backdrop shouldn't affect <dialog> (backdrop-animate-002.html fails)
Added: trunk/LayoutTests/fast/layers/dialog-is-stacking-context-expected.html (0 => 284314)
--- trunk/LayoutTests/fast/layers/dialog-is-stacking-context-expected.html (rev 0)
+++ trunk/LayoutTests/fast/layers/dialog-is-stacking-context-expected.html 2021-10-16 10:35:18 UTC (rev 284314)
@@ -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>
Added: trunk/LayoutTests/fast/layers/dialog-is-stacking-context.html (0 => 284314)
--- trunk/LayoutTests/fast/layers/dialog-is-stacking-context.html (rev 0)
+++ trunk/LayoutTests/fast/layers/dialog-is-stacking-context.html 2021-10-16 10:35:18 UTC (rev 284314)
@@ -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>
Modified: trunk/Source/WebCore/ChangeLog (284313 => 284314)
--- trunk/Source/WebCore/ChangeLog 2021-10-16 10:22:11 UTC (rev 284313)
+++ trunk/Source/WebCore/ChangeLog 2021-10-16 10:35:18 UTC (rev 284314)
@@ -1,3 +1,20 @@
+2021-10-16 Simon Fraser <simon.fra...@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 <grao...@webkit.org>
Accelerated animations on ::backdrop shouldn't affect <dialog> (backdrop-animate-002.html fails)
Modified: trunk/Source/WebCore/style/StyleAdjuster.cpp (284313 => 284314)
--- trunk/Source/WebCore/style/StyleAdjuster.cpp 2021-10-16 10:22:11 UTC (rev 284313)
+++ trunk/Source/WebCore/style/StyleAdjuster.cpp 2021-10-16 10:35:18 UTC (rev 284314)
@@ -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);
}
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes
