Bug 1804925 - Implement details and summary styling in a UA sheet. r=…

…TYLin This preserves the revert keyword behavior. This doesn't match the spec to the letter, see whatwg/html#8610, but I think it's probably ok to keep behavior for now. Changing to match the spec would avoid duplicating the details.css summary rule. Differential Revision: https://phabricator.services.mozilla.com/D164439
jamienicol · Dec 13, 2022 · a5a62c9 · a5a62c9
1 parent 8469390
commit a5a62c9
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 9 deletions.
diff --git a/layout/style/res/details.css b/layout/style/res/details.css
@@ -5,18 +5,17 @@
 slot:not([name]) {
   display: none;
 }
-/* Either the fallback summary (inside the shadow tree), or the slotted main
-   summary. */
-summary,
-slot[name=internal-main-summary]::slotted(summary) {
+:host([open]) slot:not([name]) {
+  display: revert;
+}
+
+/* See the comment around the summary styles in html.css, these rules should
+ * match */
+summary {
   display: list-item;
   counter-increment: list-item 0;
   list-style: disclosure-closed inside;
 }
-:host([open]) summary,
-:host([open]) slot[name=internal-main-summary]::slotted(summary) {
+:host([open]) summary {
   list-style-type: disclosure-open;
 }
-:host([open]) slot:not([name]) {
-  display: revert;
-}
diff --git a/layout/style/res/html.css b/layout/style/res/html.css
@@ -734,6 +734,24 @@ iframe:fullscreen {
   padding: unset !important;
 }
 
+/* Details and summary
+ * https://html.spec.whatwg.org/#the-details-and-summary-elements
+ *
+ * Note that these rules need to be duplicated in details.css for the anonymous
+ * summary, which wouldn't match otherwise.
+ *
+ * The spec here says something different, see
+ * https://github.com/whatwg/html/issues/8610
+ */
+details > summary:first-of-type {
+  display: list-item;
+  counter-increment: list-item 0;
+  list-style: disclosure-closed inside;
+}
+details[open] > summary:first-of-type {
+  list-style-type: disclosure-open;
+}
+
 /* media elements */
 video {
   object-fit: contain;

diff --git a/testing/web-platform/tests/html/rendering/the-details-element/details-revert-ref.html b/testing/web-platform/tests/html/rendering/the-details-element/details-revert-ref.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<style>
+  summary {
+    display: list-item;
+    counter-increment: list-item 0;
+    list-style: disclosure-closed inside;
+  }
+  details[open] > summary {
+    list-style-type: disclosure-open;
+  }
+</style>
+<details>
+  <summary>Example</summary>
+</details>
+<details open>
+  <summary>Example</summary>
+</details>
diff --git a/testing/web-platform/tests/html/rendering/the-details-element/details-revert.html b/testing/web-platform/tests/html/rendering/the-details-element/details-revert.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset="utf-8">
+<link rel="help" href="https://html.spec.whatwg.org/#the-details-and-summary-elements">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1804925">
+<link rel="match" href="details-revert-ref.html">
+<style>
+  summary {
+    display: revert;
+    counter-increment: revert;
+    list-style: revert;
+  }
+</style>
+<details>
+  <summary>Example</summary>
+</details>
+<details open>
+  <summary>Example</summary>
+</details>