details-display.html (2216B)
1 <!DOCTYPE HTML> 2 <meta charset=UTF-8> 3 <title>CSS Test: default display of details and summary elements</title> 4 <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements"> 5 <link rel="help" href="https://github.com/whatwg/html/pull/10265"> 6 <script src=/resources/testharness.js></script> 7 <script src=/resources/testharnessreport.js></script> 8 9 <details id="a"> 10 <summary id="b">This is the real summary.</summary> 11 12 <p>This is the rest of the details.</p> 13 <summary id="c">This summary is not special.</summary> 14 </details> 15 16 <summary id="d">This summary is not special.</summary> 17 18 <script> 19 20 test(() => { 21 assert_equals(getComputedStyle(document.getElementById("a")).display, "block"); 22 }, "default display of details element is block"); 23 test(() => { 24 assert_equals(getComputedStyle(document.getElementById("b")).display, "list-item"); 25 }, "default display of first summary child of details is list-item"); 26 test(() => { 27 assert_equals(getComputedStyle(document.getElementById("c")).display, "block"); 28 }, "default display of other summary element in details is block"); 29 test(() => { 30 assert_equals(getComputedStyle(document.getElementById("d")).display, "block"); 31 }, "default display of summary element outside details is block"); 32 33 let new_styles = ` 34 details { display: grid } 35 summary { display: flex } 36 `; 37 let new_style_element = document.createElement("style"); 38 new_style_element.append(document.createTextNode(new_styles)); 39 document.head.append(new_style_element); 40 41 test(() => { 42 assert_equals(getComputedStyle(document.getElementById("a")).display, "grid"); 43 }, "display of details element can be changed"); 44 test(() => { 45 assert_equals(getComputedStyle(document.getElementById("b")).display, "flex"); 46 }, "display of first summary child of details can be changed"); 47 test(() => { 48 assert_equals(getComputedStyle(document.getElementById("c")).display, "flex"); 49 }, "display of other summary element in details can be changed"); 50 test(() => { 51 assert_equals(getComputedStyle(document.getElementById("d")).display, "flex"); 52 }, "display of summary element outside details can be changed"); 53 54 55 </script>