[css-highlight-api] Fix examples' Ranges (#6033)

ffiori · web-flow · commit 7b2b399331f2 · 2021-02-22T15:42:30.000-08:00
* Fix examples 2 and 3 to set the range endpoints to the text node instead of `document.body`.

Authored-by: Fernando Fiori &lt;ffiori@github.com&gt;
diff --git a/css-highlight-api-1/Overview.bs b/css-highlight-api-1/Overview.bs
@@ -308,13 +308,15 @@ Painting</h4>
 					</style>
 					<body>Lorem Ipsum.
 					<script>
+						let textNode = document.body.firstChild;
+
 						let r1 = new Range();
-						r1.setStart(document.body, 1);
-						r1.setEnd(document.body, 5);
+						r1.setStart(textNode, 1);
+						r1.setEnd(textNode, 5);
 
 						let r2 = new Range();
-						r2.setStart(document.body, 3);
-						r2.setEnd(document.body, 7);
+						r2.setStart(textNode, 3);
+						r2.setEnd(textNode, 7);
 
 						CSS.highlights.add(new Highlight("sample", r1, r2));
 					</script>
@@ -389,13 +391,15 @@ Priority of Overlapping Highlights</h4>
 			</style>
 			<body>Some text
 			<script>
+				let textNode = document.body.firstChild;
+
 				let r1 = new Range();
-				r1.setStart(document.body, 0);
-				r1.setEnd(document.body, 6);
+				r1.setStart(textNode, 0);
+				r1.setEnd(textNode, 6);
 
 				let r2 = new Range();
-				r2.setStart(document.body, 3);
-				r2.setEnd(document.body, 9);
+				r2.setStart(textNode, 3);
+				r2.setEnd(textNode, 9);
 
 				CSS.highlights.add(new Highlight("foo", r1));
 				CSS.highlights.add(new Highlight("bar", r2));
