-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
part 2: Add WPT to test 'details'/'summary' with display:inline and i…
…nline-block. This test passes in Chrome 134 dev, Safari Tech Preview 18.2, and Firefox Nightly 136 (but only with the pref-flip from the previous patch in this series). Differential Revision: https://phabricator.services.mozilla.com/D234616 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1942190 gecko-commit: 1e3dec2f84defef3bd2a8fa9521d14e6b8ff8c35 gecko-reviewers: TYLin
- Loading branch information
1 parent
eb2707a
commit 45576e4
Showing
2 changed files
with
239 additions
and
0 deletions.
There are no files selected for viewing
114 changes: 114 additions & 0 deletions
114
html/rendering/the-details-element/details-summary-display-inline-001-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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:dholbert@mozilla.com"> | ||
| <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> | ||
| XX XXXX | ||
| </div> | ||
| </div> | ||
| <div class="container"> | ||
| X | ||
| <div class="details inline"> | ||
| <div class="summary inline-block">XX XX XX</div> | ||
| XX XXXX | ||
| </div> | ||
| </div> | ||
| <div class="container"> | ||
| X | ||
| <div class="details inline"> | ||
| <div class="summary block">XX XX XX</div> | ||
| XX XXXX | ||
| </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> | ||
| XX XXXX | ||
| </div> | ||
| </div> | ||
| <div class="container"> | ||
| X | ||
| <div class="details inline-block"> | ||
| <div class="summary inline-block">XX XX XX</div> | ||
| XX XXXX | ||
| </div> | ||
| </div> | ||
| <div class="container"> | ||
| X | ||
| <div class="details inline-block"> | ||
| <div class="summary block">XX XX XX</div> | ||
| XX XXXX | ||
| </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> | ||
| XX XXXX | ||
| </div> | ||
| </div> | ||
| <div class="container"> | ||
| X | ||
| <div class="details block"> | ||
| <div class="summary inline-block">XX XX XX</div> | ||
| XX XXXX | ||
| </div> | ||
| </div> | ||
| <div class="container"> | ||
| X | ||
| <div class="details block"> | ||
| <div class="summary block">XX XX XX</div> | ||
| XX XXXX | ||
| </div> | ||
| </div> | ||
| </div> |
125 changes: 125 additions & 0 deletions
125
html/rendering/the-details-element/details-summary-display-inline-001.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,125 @@ | ||
| <!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:dholbert@mozilla.com"> | ||
| <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> | ||
| <link rel="match" href="details-summary-display-inline-001-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::details-content { | ||
| /* Let the details text flow naturally alongside the summary text, if | ||
| they both have inline-flavored display values. */ | ||
| display: contents; | ||
| } | ||
|
|
||
| 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> |