doc_inspector_highlighter.html (1561B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 div { 7 position:absolute; 8 } 9 10 #simple-div { 11 padding: 5px; 12 border: 7px solid red; 13 margin: 9px; 14 top: 30px; 15 left: 150px; 16 } 17 18 #rotated-div { 19 padding: 5px; 20 border: 7px solid red; 21 margin: 9px; 22 transform: rotate(45deg); 23 top: 30px; 24 left: 80px; 25 } 26 27 #widthHeightZero-div { 28 top: 30px; 29 left: 10px; 30 width: 0; 31 height: 0; 32 } 33 34 #pseudo::before { 35 content: "Animals:"; 36 display: list-item; 37 width: 100px; 38 height: 50px; 39 } 40 41 #pseudo::before::marker { 42 content: "+"; 43 color: tomato; 44 } 45 46 #pseudo::after { 47 content: "-"; 48 color: gold; 49 } 50 51 dialog::backdrop { 52 background-color: rgb(from hotpink r g b / 0.2); 53 width: 85px; 54 height: 333px; 55 } 56 57 ::view-transition-group(root) { 58 /* large number so the view-transition pseudo elements are available during the whole test */ 59 animation-duration: 3600s; 60 } 61 </style> 62 </head> 63 <body> 64 <div id="simple-div">Gort! Klaatu barada nikto!</div> 65 <div id="rotated-div"></div> 66 <div id="widthHeightZero-div">Width & height = 0</div> 67 <ul id="pseudo"> 68 <li>Dogs</li> 69 <li>Cats</li> 70 </ul> 71 <dialog>My Modal</dialog> 72 <script> 73 "use strict"; 74 75 // show the dialog modal so the backdrop pseudo element node gets displayed 76 document.querySelector("dialog").showModal(); 77 </script> 78 </body> 79 </html>