Bug 1822521 - Update UA stylesheet for popover. r=emilio

Differential Revision: https://phabricator.services.mozilla.com/D172700
dothq · Mar 20, 2023 · 1529996 · 1529996
1 parent 881e51a
commit 1529996
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 7 deletions.
diff --git a/layout/style/res/html.css b/layout/style/res/html.css
@@ -886,3 +886,34 @@ ruby, rb, rt, rtc {
 slot {
   display: contents;
 }
+
+/* Popover UA style, https://html.spec.whatwg.org/#flow-content-3 */
+@media (-moz-popover-enabled) {
+  [popover]:closed:not(dialog[open]) {
+    display: none;
+  }
+
+  dialog[popover]:not(:closed) {
+    display: block;
+  }
+
+  [popover] {
+    position: fixed;
+    inset: 0;
+    width: fit-content;
+    height: fit-content;
+    margin: auto;
+    border: solid;
+    padding: 0.25em;
+    overflow: auto;
+    color: CanvasText;
+    background-color: Canvas;
+  }
+
+  [popover]:open::backdrop {
+    position: fixed;
+    inset: 0;
+    pointer-events: none !important;
+    background-color: transparent;
+  }
+}
diff --git a/servo/components/style/gecko/media_features.rs b/servo/components/style/gecko/media_features.rs
@@ -643,7 +643,7 @@ macro_rules! bool_pref_feature {
 /// to support new types in these entries and (2) ensuring that either
 /// nsPresContext::MediaFeatureValuesChanged is called when the value that
 /// would be returned by the evaluator function could change.
-pub static MEDIA_FEATURES: [QueryFeatureDescription; 64] = [
+pub static MEDIA_FEATURES: [QueryFeatureDescription; 65] = [
     feature!(
         atom!("width"),
         AllowsRanges::Yes,
@@ -957,4 +957,9 @@ pub static MEDIA_FEATURES: [QueryFeatureDescription; 64] = [
         atom!("-moz-mathml-core-ms"),
         "mathml.ms_lquote_rquote_attributes.disabled"
     ),
+    // media query for popover attribute
+    bool_pref_feature!(
+        atom!("-moz-popover-enabled"),
+        "dom.element.popover.enabled"
+    ),
 ];
diff --git a/servo/components/style/gecko/non_ts_pseudo_class_list.rs b/servo/components/style/gecko/non_ts_pseudo_class_list.rs
@@ -39,7 +39,7 @@ macro_rules! apply_non_ts_list {
                 ("active", Active, ACTIVE, _),
                 ("autofill", Autofill, AUTOFILL, _),
                 ("checked", Checked, CHECKED, _),
-                ("closed", Closed, CLOSED, _),
+                ("closed", Closed, CLOSED, PSEUDO_CLASS_ENABLED_IN_UA_SHEETS_AND_CHROME),
                 ("defined", Defined, DEFINED, _),
                 ("disabled", Disabled, DISABLED, _),
                 ("enabled", Enabled, ENABLED, _),
@@ -70,7 +70,7 @@ macro_rules! apply_non_ts_list {
                 ("-moz-math-increment-script-level", MozMathIncrementScriptLevel, INCREMENT_SCRIPT_LEVEL, _),
 
                 ("required", Required, REQUIRED, _),
-                ("open", Open, OPEN, _),
+                ("open", Open, OPEN, PSEUDO_CLASS_ENABLED_IN_UA_SHEETS_AND_CHROME),
                 ("optional", Optional, OPTIONAL_, _),
                 ("valid", Valid, VALID, _),
                 ("invalid", Invalid, INVALID, _),

diff --git a/testing/web-platform/meta/html/semantics/popovers/popover-hidden-display.html.ini b/testing/web-platform/meta/html/semantics/popovers/popover-hidden-display.html.ini
diff --git a/testing/web-platform/meta/html/semantics/popovers/popover-stacking-context.html.ini b/testing/web-platform/meta/html/semantics/popovers/popover-stacking-context.html.ini
diff --git a/testing/web-platform/tests/html/semantics/popovers/popover-and-svg-ref.html b/testing/web-platform/tests/html/semantics/popovers/popover-and-svg-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>Popover is only effective on HTMLElement, not on svg element</title>
+<style>
+svg {
+  width: 100px;
+  height: 100px;
+  background-color:green;
+}
+</style>
+<svg ></svg>
diff --git a/testing/web-platform/tests/html/semantics/popovers/popover-and-svg.html b/testing/web-platform/tests/html/semantics/popovers/popover-and-svg.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>Popover is only effective on HTMLElement, not on svg element</title>
+<link rel="author" href="mailto:[email protected]">
+<link rel=help href="https://html.spec.whatwg.org/#the-popover-attribute">
+<link rel="match" href="popover-and-svg-ref.html">
+<style>
+svg {
+  width: 100px;
+  height: 100px;
+  background-color:green;
+}
+[popover] {
+  top: 100px;
+  bottom: auto;
+}
+</style>
+<svg popover></svg>
diff --git a/widget/nsXPLookAndFeel.cpp b/widget/nsXPLookAndFeel.cpp
@@ -532,6 +532,7 @@ static constexpr struct {
     {"browser.theme.content-theme"_ns},
     {"mathml.legacy_maction_and_semantics_implementations.disabled"_ns},
     {"mathml.ms_lquote_rquote_attributes.disabled"_ns},
+    {"dom.element.popover.enabled"_ns},
 };
 
 // Read values from the user's preferences.

diff --git a/xpcom/ds/StaticAtoms.py b/xpcom/ds/StaticAtoms.py
@@ -2403,6 +2403,7 @@
     Atom("_moz_mathml_core_maction_and_semantics", "-moz-mathml-core-maction-and-semantics"),
     # media query for MathML Core's implementation of ms
     Atom("_moz_mathml_core_ms", "-moz-mathml-core-ms"),
+    Atom("_moz_popover_enabled", "-moz-popover-enabled"),
     # Contextual Identity / Containers
     Atom("usercontextid", "usercontextid"),
     Atom("geckoViewSessionContextId", "geckoViewSessionContextId"),