Bug 1855668 - Make ::backdrop inherit from the originating element. r=zrhoffman

This is as a result of a spec change (see link in the test), but it
addresses a very long-standing issue with this pseudo-element, see
https://github.com/whatwg/fullscreen/issues/124.

Differential Revision: https://phabricator.services.mozilla.com/D189484

layout/base/nsCSSFrameConstructor.cpp

@@ -1078,7 +1078,7 @@ void nsFrameConstructorState::ConstructBackdropFrameFor(nsIContent* aContent,
   RefPtr<ComputedStyle> style =
       mPresShell->StyleSet()->ResolvePseudoElementStyle(
           *aContent->AsElement(), PseudoStyleType::backdrop, nullptr,
-          /* aParentStyle */ nullptr);
+          aFrame->Style());
   MOZ_ASSERT(style->StyleDisplay()->mTopLayer == StyleTopLayer::Top);
   nsContainerFrame* parentFrame =
       GetGeometricParent(*style->StyleDisplay(), nullptr);

servo/components/style/gecko/pseudo_element.rs

@@ -70,15 +70,6 @@ impl PseudoElement {
         PseudoElementCascadeType::Lazy
     }
 
-    /// Whether the pseudo-element should inherit from the default computed
-    /// values instead of from the parent element.
-    ///
-    /// This is not the common thing, but there are some pseudos (namely:
-    /// ::backdrop), that shouldn't inherit from the parent element.
-    pub fn inherits_from_default_values(&self) -> bool {
-        matches!(*self, PseudoElement::Backdrop)
-    }
-
     /// Gets the canonical index of this eagerly-cascaded pseudo-element.
     #[inline]
     pub fn eager_index(&self) -> usize {

servo/components/style/stylist.rs

@@ -1050,7 +1050,6 @@ impl Stylist {
         pseudo: &PseudoElement,
         rule_inclusion: RuleInclusion,
         originating_element_style: &ComputedValues,
-        parent_style: &Arc<ComputedValues>,
         is_probe: bool,
         matching_fn: Option<&dyn Fn(&PseudoElement) -> bool>,
     ) -> Option<Arc<ComputedValues>>
@@ -1061,7 +1060,6 @@ impl Stylist {
             guards,
             element,
             originating_element_style,
-            parent_style,
             pseudo,
             is_probe,
             rule_inclusion,
@@ -1073,7 +1071,7 @@ impl Stylist {
             pseudo,
             guards,
             Some(originating_element_style),
-            Some(parent_style),
+            Some(originating_element_style),
             Some(element),
         ))
     }
@@ -1195,7 +1193,6 @@ impl Stylist {
         guards: &StylesheetGuards,
         element: E,
         originating_element_style: &ComputedValues,
-        parent_style: &Arc<ComputedValues>,
         pseudo: &PseudoElement,
         is_probe: bool,
         rule_inclusion: RuleInclusion,
@@ -1246,7 +1243,7 @@ impl Stylist {
         let rules = self.rule_tree.compute_rule_node(&mut declarations, guards);
 
         let mut visited_rules = None;
-        if parent_style.visited_style().is_some() {
+        if originating_element_style.visited_style().is_some() {
             let mut declarations = ApplicableDeclarationList::new();
             let mut selector_caches = SelectorCaches::default();
 

servo/ports/geckolib/glue.rs

@@ -4120,19 +4120,14 @@ fn get_pseudo_style(
                 inherited_styles.is_none() ||
                     ptr::eq(inherited_styles.unwrap(), &**styles.primary())
             );
-            let base = if pseudo.inherits_from_default_values() {
+            let originating_element_style = styles.primary();
-                stylist.device().default_computed_values_arc()
-            } else {
-                styles.primary()
-            };
             let guards = StylesheetGuards::same(guard);
             stylist.lazily_compute_pseudo_element_style(
                 &guards,
                 element,
                 &pseudo,
                 rule_inclusion,
-                styles.primary(),
+                originating_element_style,
-                base,
                 is_probe,
                 matching_func,
             )

testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-descendant-selector.html

@@ -9,6 +9,7 @@ dialog {
 }
 
 ::backdrop {
+    visibility: visible;
     position: absolute;
     height: 100px;
     width: 100px;

testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-does-not-inherit-ref.html

@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<style>
-#backdrop {
-    position: absolute;
-    top: 100px;
-    left: 100px;
-    height: 100px;
-    width: 100px;
-    background: green;
-}
-</style>
-<body>
-Test that ::backdrop does not inherit from anything. The test passes if there is
-a green box and no red.
-<div id="backdrop"></div>
-</body>

testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-does-not-inherit.html

@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<link rel="match" href="backdrop-does-not-inherit-ref.html">
-<link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer">
-<style>
-dialog {
-    visibility: inherit;
-    background: red;
-}
-
-dialog::backdrop {
-    position: absolute;
-    top: 100px;
-    left: 100px;
-    height: 100px;
-    width: 100px;
-    visibility: inherit;
-    background: green;
-}
-</style>
-<body>
-Test that ::backdrop does not inherit from anything. The test passes if there is
-a green box and no red.
-<div style="visibility: hidden">
-    <dialog></dialog>
-</div>
-<script>
-document.querySelector('dialog').showModal();
-</script>
-</body>

testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-dynamic-style-change.html

@@ -9,6 +9,7 @@ dialog {
 }
 
 ::backdrop {
+    visibility: visible;
     position: absolute;
     top: 100px;
     left: 100px;

testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-in-flow.html

@@ -7,6 +7,7 @@ dialog {
 }
 
 dialog::backdrop {
+    visibility: visible;
     height: 100px;
     width: 50px;
 }

testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-inherits-ref.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<style>
+#backdrop {
+  position: absolute;
+  top: 100px;
+  left: 100px;
+  height: 100px;
+  width: 100px;
+  background: green;
+}
+</style>
+<body>
+Test that ::backdrop inherits from its originating element. The test passes if
+there is a green box and no red.
+<div id="backdrop"></div>
+</body>

testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-inherits.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<link rel="match" href="backdrop-inherits-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-position-4/#backdrop">
+<style>
+dialog {
+  --backdrop-bg: green;
+  visibility: hidden;
+}
+
+dialog::backdrop {
+  position: absolute;
+  top: 100px;
+  left: 100px;
+  height: 100px;
+  width: 100px;
+  visibility: visible;
+  background-color: var(--backdrop-bg);
+}
+</style>
+Test that ::backdrop inherits from its originating element. The test passes if
+there is a green box and no red.
+<dialog></dialog>
+<script>
+document.querySelector('dialog').showModal();
+</script>

testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/backdrop-receives-element-events.html

@@ -11,6 +11,8 @@ dialog {
 }
 
 dialog::backdrop {
+    visibility: visible;
+    pointer-events: initial;
     background-color: red;
     top: 0;
     bottom: 0;