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

Differential Revision: https://phabricator.services.mozilla.com/D172700
2023-03-22 17:51:09 +00:00 · 2023-03-22 17:51:09 +00:00 · 0d88e41955
--- 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;
+  }
+}
--- 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"
+    ),
 ];
--- 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, _),
--- a/testing/web-platform/meta/html/semantics/popovers/popover-focus-child-dialog.html.ini
+++ b/testing/web-platform/meta/html/semantics/popovers/popover-focus-child-dialog.html.ini
@ -2,5 +2,6 @@
  expected:
    if (os == "android") and fission: [ERROR, TIMEOUT]
    ERROR
+  max-asserts: 2
  [Popovers should not initially focus child popover elements.]
    expected: NOTRUN
--- 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
@ -1,2 +0,0 @@
-[popover-hidden-display.html]
-  expected: FAIL
--- 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
@ -1,2 +0,0 @@
-[popover-stacking-context.html]
-  expected: FAIL
--- 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>
--- 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:cathiechen@igalia.com">
+<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>
--- 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.
--- a/xpcom/ds/StaticAtoms.py
+++ b/xpcom/ds/StaticAtoms.py
@ -2403,6 +2403,7 @@ STATIC_ATOMS = [
    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"),