details-summary-display-inline-001.html (3435B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Test: details and summary with all pairwise combinations of 'display: {inline, inline-block, block}'</title> 4 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 5 <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> 6 <link rel="match" href="details-summary-display-inline-001-ref.html"> 7 <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements"> 8 <meta name="assert" content="The details and summary elements should each be stylable as inline-level boxes"> 9 <link rel="stylesheet" href="/fonts/ahem.css"> 10 <style> 11 :root { font: 20px/1 Ahem; } 12 13 div.group { 14 /* Logical groupings, floated left to stack horizontally, just to make the 15 best use of our screen real-estate: */ 16 border: 1px solid black; 17 float: left; 18 } 19 20 div.container { 21 border: 3px solid gray; 22 margin: 5px; 23 width: max-content; 24 25 /* This should be wide enough to fit 5 Ahem glyphs, but not 6. 26 This lets us make sure that linewrapping works properly when 27 details/summary have inline-flavored display values. */ 28 max-width: 5.5em; 29 } 30 31 details::details-content { 32 /* Let the details text flow naturally alongside the summary text, if 33 they both have inline-flavored display values. */ 34 display: contents; 35 } 36 37 details { 38 /* Dodgerblue for Details */ 39 color: dodgerblue; 40 } 41 summary { 42 /* Hide the disclosure-widget, for easier comparison w/ reference case. */ 43 list-style-type: none; 44 /* Salmon for Summary */ 45 color: salmon; 46 } 47 48 .inline { display: inline; } 49 .inline-block { display: inline-block; } 50 .block { display: block; } 51 </style> 52 <!-- details is inline, summary is {inline, inline-block, block}: --> 53 <div class="group"> 54 <div class="container"> 55 X 56 <details class="inline" open> 57 <summary class="inline">XX XX XX</summary> 58 XX XXXX 59 </details> 60 </div> 61 <div class="container"> 62 X 63 <details class="inline" open> 64 <summary class="inline-block">XX XX XX</summary> 65 XX XXXX 66 </details> 67 </div> 68 <div class="container"> 69 X 70 <details class="inline" open> 71 <summary class="block">XX XX XX</summary> 72 XX XXXX 73 </details> 74 </div> 75 </div> 76 77 <!-- details is inline-block, summary is {inline, inline-block, block}: --> 78 <div class="group"> 79 <div class="container"> 80 X 81 <details class="inline-block" open> 82 <summary class="inline">XX XX XX</summary> 83 XX XXXX 84 </details> 85 </div> 86 <div class="container"> 87 X 88 <details class="inline-block" open> 89 <summary class="inline-block">XX XX XX</summary> 90 XX XXXX 91 </details> 92 </div> 93 <div class="container"> 94 X 95 <details class="inline-block" open> 96 <summary class="block">XX XX XX</summary> 97 XX XXXX 98 </details> 99 </div> 100 </div> 101 102 <!-- details is block, summary is {inline, inline-block, block}: --> 103 <div class="group"> 104 <div class="container"> 105 X 106 <details class="block" open> 107 <summary class="inline">XX XX XX</summary> 108 XX XXXX 109 </details> 110 </div> 111 <div class="container"> 112 X 113 <details class="block" open> 114 <summary class="inline-block">XX XX XX</summary> 115 XX XXXX 116 </details> 117 </div> 118 <div class="container"> 119 X 120 <details class="block" open> 121 <summary class="block">XX XX XX</summary> 122 XX XXXX 123 </details> 124 </div> 125 </div>