details-summary-display-inline-002.html (3247B)
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-002-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 { 32 /* Dodgerblue for Details */ 33 color: dodgerblue; 34 } 35 summary { 36 /* Hide the disclosure-widget, for easier comparison w/ reference case. */ 37 list-style-type: none; 38 /* Salmon for Summary */ 39 color: salmon; 40 } 41 42 .inline { display: inline; } 43 .inline-block { display: inline-block; } 44 .block { display: block; } 45 </style> 46 <!-- details is inline, summary is {inline, inline-block, block}: --> 47 <div class="group"> 48 <div class="container"> 49 X 50 <details class="inline" open> 51 <summary class="inline">XX XX XX</summary> 52 XX XXXX 53 </details> 54 </div> 55 <div class="container"> 56 X 57 <details class="inline" open> 58 <summary class="inline-block">XX XX XX</summary> 59 XX XXXX 60 </details> 61 </div> 62 <div class="container"> 63 X 64 <details class="inline" open> 65 <summary class="block">XX XX XX</summary> 66 XX XXXX 67 </details> 68 </div> 69 </div> 70 71 <!-- details is inline-block, summary is {inline, inline-block, block}: --> 72 <div class="group"> 73 <div class="container"> 74 X 75 <details class="inline-block" open> 76 <summary class="inline">XX XX XX</summary> 77 XX XXXX 78 </details> 79 </div> 80 <div class="container"> 81 X 82 <details class="inline-block" open> 83 <summary class="inline-block">XX XX XX</summary> 84 XX XXXX 85 </details> 86 </div> 87 <div class="container"> 88 X 89 <details class="inline-block" open> 90 <summary class="block">XX XX XX</summary> 91 XX XXXX 92 </details> 93 </div> 94 </div> 95 96 <!-- details is block, summary is {inline, inline-block, block}: --> 97 <div class="group"> 98 <div class="container"> 99 X 100 <details class="block" open> 101 <summary class="inline">XX XX XX</summary> 102 XX XXXX 103 </details> 104 </div> 105 <div class="container"> 106 X 107 <details class="block" open> 108 <summary class="inline-block">XX XX XX</summary> 109 XX XXXX 110 </details> 111 </div> 112 <div class="container"> 113 X 114 <details class="block" open> 115 <summary class="block">XX XX XX</summary> 116 XX XXXX 117 </details> 118 </div> 119 </div>