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