Skip to content

Commit

Permalink
part 3: Add variant of previous patch's details/summary WPT without a…
Browse files Browse the repository at this point in the history 
…ny special styling on ::details-content.

This test leaves ::details-content unstyled, which per spec means that the
::details-content should generate a 'display:block' wrapper around the
details-text.  The reference case mimics this by simply adding an unstyled
div around that text.

This test passes in Chrome 134 dev and Safari Tech Preview 18.2.

It fails in Firefox because Firefox doesn't support ::details-content yet;
and in particular, Firefox doesn't automatically generate any wrapper-box for
that pseudo-element, and the lack-of-that-box leads to the wrong rendering.

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

bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1942190
gecko-commit: 5a74fd9392bad7b40efce636e024c4a8aa215dc0
gecko-reviewers: TYLin
  • Loading branch information
@dholbert @moz-wptsync-bot
dholbert authored and moz-wptsync-bot committed Jan 18, 2025
1 parent 45576e4 commit b4b2ff9
Show file tree
Hide file tree
Showing 2 changed files with 233 additions and 0 deletions.
114 changes: 114 additions & 0 deletions html/rendering/the-details-element/details-summary-display-inline-002-ref.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reference Case</title>
<link rel="author" title="Daniel Holbert" href="mailto:[email protected]">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
:root { font: 20px/1 Ahem; }

div.group {
/* Logical groupings, floated left to stack horizontally, just to make the
best use of our screen real-estate: */
border: 1px solid black;
float: left;
}

div.container {
border: 3px solid gray;
margin: 5px;
width: max-content;

/* This should be wide enough to fit 5 Ahem glyphs, but not 6.
This lets us make sure that linewrapping works properly when
details/summary have inline-flavored display values. */
max-width: 5.5em;
}

div.details {
/* Dodgerblue for Details */
color: dodgerblue;
}
div.summary {
/* Salmon for Summary */
color: salmon;
}

.inline { display: inline; }
.inline-block { display: inline-block; }
.block { display: block; }
</style>
<!-- details is inline, summary is {inline, inline-block, block}: -->
<div class="group">
<div class="container">
X
<div class="details inline">
<div class="summary inline">XX XX XX</div>
<div>XX XXXX</div>
</div>
</div>
<div class="container">
X
<div class="details inline">
<div class="summary inline-block">XX XX XX</div>
<div>XX XXXX</div>
</div>
</div>
<div class="container">
X
<div class="details inline">
<div class="summary block">XX XX XX</div>
<div>XX XXXX</div>
</div>
</div>
</div>

<!-- details is inline-block, summary is {inline, inline-block, block}: -->
<div class="group">
<div class="container">
X
<div class="details inline-block">
<div class="summary inline">XX XX XX</div>
<div>XX XXXX</div>
</div>
</div>
<div class="container">
X
<div class="details inline-block">
<div class="summary inline-block">XX XX XX</div>
<div>XX XXXX</div>
</div>
</div>
<div class="container">
X
<div class="details inline-block">
<div class="summary block">XX XX XX</div>
<div>XX XXXX</div>
</div>
</div>
</div>

<!-- details is block, summary is {inline, inline-block, block}: -->
<div class="group">
<div class="container">
X
<div class="details block">
<div class="summary inline">XX XX XX</div>
<div>XX XXXX</div>
</div>
</div>
<div class="container">
X
<div class="details block">
<div class="summary inline-block">XX XX XX</div>
<div>XX XXXX</div>
</div>
</div>
<div class="container">
X
<div class="details block">
<div class="summary block">XX XX XX</div>
<div>XX XXXX</div>
</div>
</div>
</div>
119 changes: 119 additions & 0 deletions html/rendering/the-details-element/details-summary-display-inline-002.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test: details and summary with all pairwise combinations of 'display: {inline, inline-block, block}'</title>
<link rel="author" title="Daniel Holbert" href="mailto:[email protected]">
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
<link rel="match" href="details-summary-display-inline-002-ref.html">
<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements">
<meta name="assert" content="The details and summary elements should each be stylable as inline-level boxes">
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
:root { font: 20px/1 Ahem; }

div.group {
/* Logical groupings, floated left to stack horizontally, just to make the
best use of our screen real-estate: */
border: 1px solid black;
float: left;
}

div.container {
border: 3px solid gray;
margin: 5px;
width: max-content;

/* This should be wide enough to fit 5 Ahem glyphs, but not 6.
This lets us make sure that linewrapping works properly when
details/summary have inline-flavored display values. */
max-width: 5.5em;
}

details {
/* Dodgerblue for Details */
color: dodgerblue;
}
summary {
/* Hide the disclosure-widget, for easier comparison w/ reference case. */
list-style-type: none;
/* Salmon for Summary */
color: salmon;
}

.inline { display: inline; }
.inline-block { display: inline-block; }
.block { display: block; }
</style>
<!-- details is inline, summary is {inline, inline-block, block}: -->
<div class="group">
<div class="container">
X
<details class="inline" open>
<summary class="inline">XX XX XX</summary>
XX XXXX
</details>
</div>
<div class="container">
X
<details class="inline" open>
<summary class="inline-block">XX XX XX</summary>
XX XXXX
</details>
</div>
<div class="container">
X
<details class="inline" open>
<summary class="block">XX XX XX</summary>
XX XXXX
</details>
</div>
</div>

<!-- details is inline-block, summary is {inline, inline-block, block}: -->
<div class="group">
<div class="container">
X
<details class="inline-block" open>
<summary class="inline">XX XX XX</summary>
XX XXXX
</details>
</div>
<div class="container">
X
<details class="inline-block" open>
<summary class="inline-block">XX XX XX</summary>
XX XXXX
</details>
</div>
<div class="container">
X
<details class="inline-block" open>
<summary class="block">XX XX XX</summary>
XX XXXX
</details>
</div>
</div>

<!-- details is block, summary is {inline, inline-block, block}: -->
<div class="group">
<div class="container">
X
<details class="block" open>
<summary class="inline">XX XX XX</summary>
XX XXXX
</details>
</div>
<div class="container">
X
<details class="block" open>
<summary class="inline-block">XX XX XX</summary>
XX XXXX
</details>
</div>
<div class="container">
X
<details class="block" open>
<summary class="block">XX XX XX</summary>
XX XXXX
</details>
</div>
</div>

0 comments on commit b4b2ff9

Please sign in to comment.