doc_inspector_breadcrumbs.html (1998B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 div { 6 min-height: 10px; min-width: 10px; 7 border: 1px solid red; 8 margin: 10px; 9 } 10 #pseudo-container::before { 11 content: 'before'; 12 } 13 #pseudo-container::after { 14 content: 'after'; 15 } 16 dialog::backdrop { 17 background-color: rgb(from hotpink r g b / 0.2); 18 } 19 20 ::view-transition-group(root) { 21 /* large number so the view-transition pseudo elements are available during the whole test */ 22 animation-duration: 3600s; 23 } 24 </style> 25 </head> 26 <body> 27 <article id="i1"> 28 <div id="i11"> 29 <div id="i111"> 30 <div id="i1111"> 31 </div> 32 </div> 33 </div> 34 </article> 35 <article id="i2"> 36 <div id="i21"> 37 <div id="i211"> 38 <div id="i2111"> 39 </div> 40 </div> 41 </div> 42 <div id="i22"> 43 <div id="i221"> 44 </div> 45 <div id="i222"> 46 <div id="i2221"> 47 <div id="i22211"> 48 </div> 49 </div> 50 </div> 51 </div> 52 </article> 53 <article id="i3"> 54 <link id="i31" /> 55 <link /> 56 <link /> 57 <link /> 58 <link /> 59 <link /> 60 <link /> 61 <link /> 62 <link /> 63 <link /> 64 <link /> 65 <link /> 66 <link /> 67 <link /> 68 <link /> 69 <link /> 70 <link /> 71 <link /> 72 <link /> 73 </article> 74 <div id='pseudo-container'></div> 75 <dialog>My Modal</dialog> 76 <!-- This is a comment node --> 77 <svg id="vector" viewBox="0 0 10 10"> 78 <clipPath id="clip"> 79 <rect id="rectangle" x="0" y="0" width="10" height="5"></rect> 80 </clipPath> 81 <circle cx="5" cy="5" r="5" fill="blue" clip-path="url(#clip)"></circle> 82 </svg> 83 <script> 84 "use strict"; 85 86 // show the dialog modal so the backdrop pseudo element node gets displayed 87 document.querySelector("dialog").showModal(); 88 </script> 89 </body> 90 </html>