Skip to content

Commit a815bf7

Browse files
ffioriffiori
authored
[css-highlight-api-1] Update examples (w3c#6332)
1 parent 44ca423 commit a815bf7

1 file changed

Lines changed: 31 additions & 27 deletions

File tree

‎css-highlight-api-1/Overview.bs‎

Lines changed: 31 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -92,18 +92,18 @@ Introduction</h2>
9292

9393
<xmp highlight=html>
9494
<style>
95-
:root::highlight(example-highlight) {
96-
background-color: yellow;
97-
color: blue;
98-
}
95+
:root::highlight(example-highlight) {
96+
background-color: yellow;
97+
color: blue;
98+
}
9999
</style>
100100
<body><span>One </span><span>two </span><span>three…</span>
101101
<script>
102-
let r = new Range();
103-
r.setStart(document.body, 0);
104-
r.setEnd(document.body, 2);
102+
let r = new Range();
103+
r.setStart(document.body, 0);
104+
r.setEnd(document.body, 2);
105105

106-
CSS.highlights.set("example-highlight", new Highlight(r));
106+
CSS.highlights.set("example-highlight", new Highlight(r));
107107
</script>
108108
</xmp>
109109

@@ -242,21 +242,22 @@ Registering Custom Highlights</h3>
242242
<div class=example id=styling-problems-with-multiple-names-per-highlight>
243243
<xmp highlight=html>
244244
<style>
245-
div::highlight(bar) {
246-
color: red;
247-
}
248-
div::highlight(foo) {
249-
color: green;
250-
}
245+
div::highlight(bar) {
246+
color: red;
247+
}
248+
div::highlight(foo) {
249+
color: green;
250+
}
251251
</style>
252252
<body><div>abc</div>
253253
<script>
254-
let r = new Range();
255-
r.setStart(div, 0);
256-
r.setEnd(div, 1);
257-
let h = new Highlight(r);
258-
CSS.highlights.set('foo', h);
259-
CSS.highlights.set('bar', h);
254+
let div = document.body.firstChild;
255+
let r = new Range();
256+
r.setStart(div, 0);
257+
r.setEnd(div, 1);
258+
let h = new Highlight(r);
259+
CSS.highlights.set('foo', h);
260+
CSS.highlights.set('bar', h);
260261
</script>
261262
</xmp>
262263
In the example above, the same [=custom highlight=] object is [=registered=] under the names 'foo' and 'bar'.
@@ -382,11 +383,11 @@ Priority of Overlapping Highlights</h4>
382383
<div class=example id=overlap-highlight-ex>
383384
<xmp highlight=html>
384385
<style>
385-
p::highlight(foo) {
386+
:root::highlight(foo) {
386387
color:blue;
387388
background-color:yellow;
388389
}
389-
p::highlight(bar) {
390+
:root::highlight(bar) {
390391
background-color:orange;
391392
}
392393
</style>
@@ -402,13 +403,16 @@ Priority of Overlapping Highlights</h4>
402403
r2.setStart(textNode, 3);
403404
r2.setEnd(textNode, 9);
404405

405-
CSS.highlights.add(new Highlight("foo", r1));
406-
CSS.highlights.add(new Highlight("bar", r2));
406+
let h1 = new Highlight(r1);
407+
let h2 = new Highlight(r2);
408+
409+
CSS.highlights.set("foo", h1);
410+
CSS.highlights.set("bar", h2);
407411
</script>
408412
</xmp>
409413

410414
As there are no priorities set
411-
(i.e. there is a tie between <code>rg1</code> and <code>rg2</code>),
415+
(i.e. there is a tie between <code>h1</code> and <code>h2</code>),
412416
the custom highlights' styles are stacked
413417
in order of insertion into the [=highlight registry=].
414418
The rendered results will have "Som" with blue text on yellow background,
@@ -419,8 +423,8 @@ Priority of Overlapping Highlights</h4>
419423
<span style="background:yellow;color:blue;">Som</span><span style="background:orange;color:blue;">e t</span><span style="background:orange;">ext</span>
420424
</div>
421425

422-
Setting <code highlight=javascript>rg1.priority = 1;</code>
423-
would cause <code>rg1</code> to stack higher than <code>rg2</code>,
426+
Setting <code highlight=javascript>h1.priority = 1;</code>
427+
would cause <code>h1</code> to stack higher than <code>h2</code>,
424428
which would result in "Some t" being blue on yellow,
425429
and "ext" being default color on orange.
426430

0 commit comments

Comments
 (0)