doc_markup_search.html (1908B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 @import url("doc_markup_search.css"); 6 </style> 7 </head> 8 <body> 9 <ul> 10 <li> 11 <span>this is an <em>important</em> node</span> 12 </li> 13 </ul> 14 <section class="Buttons"> 15 <button type="button" class="Button">OK</button> 16 <p>Click the button</p> 17 </section> 18 <section class="talltop"></section> 19 <section class="tallbottom"></section> 20 <section class="overflows"> 21 thisisaverylongtextnodesowegetthemarkupviewtooverflowhorizontallythisisaverylongtextnodesowegetthemarkupviewtooverflowhorizontallythisisaverylongtextnodesowegetthemarkupviewtooverflowhorizontallyOVERFLOWSMATCH 22 </section> 23 <section id="cropped-attribute"></section> 24 <section class="pseudos">|</section> 25 <dialog>My Modal</dialog> 26 <script> 27 "use strict"; 28 29 const sentence = "this is a very tall text node so we can check that search highlights are properly scrolled into view."; 30 const textNodeContent = sentence.repeat(100); 31 32 // Split the search term in 2 here so we only have a single result when searching for it 33 document.querySelector(".talltop").append(document.createTextNode("TALLTOP" + "MATCH" + textNodeContent)); 34 document.querySelector(".tallbottom").append(document.createTextNode(textNodeContent + "TALLBOTTOM" + "MATCH")); 35 36 // Keep in sync with devtools.markup.collapseAttributeLength 37 const croppedAttributeEl = document.querySelector("#cropped-attribute") 38 const collapseAttributeLength = 120; 39 // Splitting in 2 so this won't be seen as a match 40 const strToMatch = "cropped" + "value"; 41 const middle = Math.floor(collapseAttributeLength / 2); 42 const cls = "-".repeat(middle) + strToMatch + "-".repeat(middle); 43 croppedAttributeEl.classList.add(cls); 44 45 // show the dialog modal so the backdrop pseudo element node gets displayed 46 document.querySelector("dialog").showModal(); 47 </script> 48 </body> 49 </html>