@@ -103,7 +103,7 @@ Introduction</h2>
103
103
r.setStart(document.body, 0);
104
104
r.setEnd(document.body, 2);
105
105
106
- CSS.highlights.add(new Highlight( "example-highlight", r));
106
+ CSS.highlights.set( "example-highlight", new Highlight( r));
107
107
</script>
108
108
</xmp>
109
109
@@ -139,7 +139,7 @@ Setting up Custom Highlights</h2>
139
139
<h3 id=creation>
140
140
Creating Custom Highlights</h3>
141
141
142
- A <dfn>custom highlight</dfn> is a named collection of [=ranges=]
142
+ A <dfn>custom highlight</dfn> is a collection of [=ranges=]
143
143
representing portions of a document.
144
144
They do not necessarily fit into the element tree,
145
145
and can arbitrarily cross element boundaries without honoring its nesting structure.
@@ -160,35 +160,24 @@ Creating Custom Highlights</h3>
160
160
authors can chose between using {{Range}} objects and {{StaticRange}} objects.
161
161
See [[#range-invalidation]] for more details about this choice and its implications.
162
162
163
- The <dfn for="custom highlight">name</dfn> of a [=custom highlight=]
164
- is represented by its {{Highlight/name}} attribute,
165
- which must be a valid <<ident-token>> .
166
-
167
163
<xmp class="idl">
168
164
[Exposed=Window]
169
165
interface Highlight {
170
- constructor(CSSOMString name, AbstractRange... initialRanges);
166
+ constructor(AbstractRange... initialRanges);
171
167
setlike<AbstractRange>;
172
168
attribute long priority;
173
- readonly attribute CSSOMString name;
174
169
};
175
170
</xmp>
176
171
177
172
See [[#priorities]] for more information on the {{Highlight/priority}} attribute.
178
173
179
174
<div algorithm="to create a custom highlight">
180
- When the <dfn for=Highlight constructor>Highlight(CSSOMString name, AbstractRange... initialRanges)</dfn> constructor is invoked,
175
+ When the <dfn for=Highlight constructor>Highlight(AbstractRange... initialRanges)</dfn> constructor is invoked,
181
176
run the following steps:
182
177
183
178
<ol>
184
179
<li>
185
180
Let |highlight| be the new {{Highlight}} object.
186
- <li>
187
- If {{name!!argument}} does not [=CSS/parse=] as an <<ident-token>> , then [=throw=] a {{"SyntaxError"}} .
188
- <li>
189
- Let |nameArg| be the result of [=converted to an ECMAScript value|converting=] {{name!!argument}} to an ECMAScript value.
190
- <li>
191
- Set |highlight|'s {{Highlight/name}} to |nameArg|
192
181
<li>
193
182
Set |highlight|'s {{Highlight/priority}} to <code> 0</code> .
194
183
<li>
@@ -206,13 +195,13 @@ Creating Custom Highlights</h3>
206
195
Registering Custom Highlights</h3>
207
196
208
197
In order to have any effect,
209
- [=custom highlights=] then needs to be
210
- [=registered=] it into the [=highlight registry=] .
198
+ [=custom highlights=] need to be
199
+ [=registered=] into the [=highlight registry=] .
211
200
212
201
The <dfn>highlight registry</dfn> is accessed via the {{CSS/highlights}} attribute of the {{CSS}} namespace,
213
202
and represents all the [=custom highlights=] [=registered=] for the [=current global object=] ’s [=associated Document=] .
214
- It is a [=setlike =] , and can be updated using the usual methods.
215
- It's [=set entries=] is initially empty.
203
+ It is a [=maplike =] , and can be updated using the usual methods.
204
+ It's [=map entries=] is initially empty.
216
205
217
206
A [=custom highlight=] is said to be <dfn>registered</dfn>
218
207
if it is in the [=highlight registry=] .
@@ -225,41 +214,35 @@ Registering Custom Highlights</h3>
225
214
226
215
[Exposed=Window]
227
216
interface HighlightRegistry {
228
- setlike< Highlight>;
217
+ maplike<DOMString, Highlight>;
229
218
};
230
219
</xmp>
231
220
232
221
<div algorithm="to register a custom highlight">
233
222
To [=register=] a [=custom highlight=] ,
234
- invoke the {{HighlightRegistry/add()}} method of the [=highlight registry=]
235
- with the [=custom highlight=] as the argument.
236
-
237
- When invoked,
238
- the <dfn method for=HighlightRegistry>add(Highlight value)</dfn> method must run these steps:
239
-
240
- 1. If there is already a [=set entry=] with the same {{Highlight/name}} as the {{Highlight/name}} of {{value}} ,
241
- then [=throw=] an {{"OperationError"}} .
242
- 3. Let |valueArg| be the result of [=converted to an ECMAScript value|converting=] {{value}} to an ECMAScript value.
243
- 4. Let |result| be the result of running [[webidl#es-add-delete|the steps for a built-in setlike add function]] ,
244
- with the [=context object=] as the <code> this</code> value
245
- and with |valueArg| as the argument.
246
- 5. Return |result|.
247
- </div>
223
+ invoke the <code> set</code> method of the [=highlight registry=]
224
+ which will run [[webidl#es-map-set|the steps for a built-in maplike set function]] ,
225
+ with the [=context object=] as the <code> this</code> value,
226
+ the passed-in [=custom highlight name=] as |keyArg|,
227
+ and the passed-in highlight as |valueArg|.
228
+
229
+ The <dfn>custom highlight name</dfn> assigned to a [=custom highlight=] when it is [=registered=]
230
+ is used to identify the highlight during styling (see [[#styling-highlights]] ).
248
231
249
232
<h2 id=styling-highlights>
250
233
Styling Custom Highlights</h2>
251
234
252
235
<h3 id=custom-highlight-pseudo>
253
236
The Custom Highlight Pseudo-element: ''::highlight()''</h3>
254
237
255
- The <dfn>::highlight(<<highlight-name>>)</dfn> pseudo-element
238
+ The <dfn>::highlight(<<custom- highlight-name>>)</dfn> pseudo-element
256
239
(also known as the <dfn>custom highlight pseudo-element</dfn> )
257
240
represents the portion of a document that
258
241
is being [=contained=] or [=partially contained=]
259
242
in all the [=ranges=] of the [=registered=] [=custom highlight=]
260
- with the [=custom highlight/ name=] <<highlight-name>> ,
243
+ with the [=custom highlight name=] <<custom- highlight-name>> ,
261
244
if any.
262
- <dfn type><<highlight-name>></dfn> must be a valid CSS <<ident-token>> .
245
+ <dfn type><<custom- highlight-name>></dfn> must be a valid CSS <<ident-token>> .
263
246
264
247
265
248
<h3 id=processing-model>
@@ -317,7 +300,7 @@ Painting</h4>
317
300
r2.setStart(textNode, 3);
318
301
r2.setEnd(textNode, 7);
319
302
320
- CSS.highlights.add(new Highlight( "sample", r1, r2));
303
+ CSS.highlights.set( "sample", new Highlight( r1, r2));
321
304
</script>
322
305
</xmp>
323
306
0 commit comments