Skip to content

Commit 3f898bd

Browse files
alkorlossvgeesus
authored andcommitted
[filter-effects-2] Fix spurious / in <img>
1 parent 544e940 commit 3f898bd

File tree

1 file changed

+10
-10
lines changed

1 file changed

+10
-10
lines changed

filter-effects-2/Overview.bs

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -226,9 +226,9 @@ performance breakdown. Clearly, this is not a scalable approach.
226226
the Backdrop Root is defined - this example is intended to illustrate why a
227227
Backdrop Root is formed by elements containing filters.</p>
228228
<div class="figure">
229-
<img alt="ALT TEXT HERE" src="examples/step1.png" style="width:30%"/>
229+
<img alt="ALT TEXT HERE" src="examples/step1.png" style="width:30%">
230230
<p class="caption"><b>Step 1.</b> "Box" is rendered, but filters are not yet applied.</p>
231-
<img alt="ALT TEXT HERE" src="examples/step2.png" style="width:30%"/>
231+
<img alt="ALT TEXT HERE" src="examples/step2.png" style="width:30%">
232232
<p class="caption"><b>Step 2.</b> "Dialog" is about to be rendered, but it has
233233
backdrop-filter applied. Since, for this example, the backdrop-filter "sees"
234234
all the way to the root, the "Box" element needs to be temporarily
@@ -237,22 +237,22 @@ performance breakdown. Clearly, this is not a scalable approach.
237237
atomicity of the Stacking Context created by "Box" is broken. This is also
238238
where the performance penalty applies - the GPU draw work that is
239239
performed here will end up being done twice.</p>
240-
<img alt="ALT TEXT HERE" src="examples/step3.png" style="width:30%"/>
240+
<img alt="ALT TEXT HERE" src="examples/step3.png" style="width:30%">
241241
<p class="caption"><b>Step 3.</b> Start painting the "Dialog" element by
242242
reading back its backdrop image, applying the "backdrop-filter: blur(2px)"
243243
filter, and cropping those results to the border box of "Dialog". (The
244244
dotted black border has been added here for clarity: this is the border box
245245
for the "Dialog" element.)</p>
246-
<img alt="ALT TEXT HERE" src="examples/step4.png" style="width:30%"/>
246+
<img alt="ALT TEXT HERE" src="examples/step4.png" style="width:30%">
247247
<p class="caption"><b>Step 4.</b> Now that the backdrop-filtered contents have
248248
been read back and filtered, discard the previously "completed" Box element
249249
and go back to the unfiltered version. Note that you can now see the black
250250
text at the bottom bleeding through the white, blurred version inside
251251
"Dialog".</p>
252-
<img alt="ALT TEXT HERE" src="examples/step5.png" style="width:30%"/>
252+
<img alt="ALT TEXT HERE" src="examples/step5.png" style="width:30%">
253253
<p class="caption"><b>Step 5.</b> Draw the contents of the "Dialog" element -
254254
the <b>blue</b> border.</p>
255-
<img alt="ALT TEXT HERE" src="examples/step6.png" style="width:30%"/>
255+
<img alt="ALT TEXT HERE" src="examples/step6.png" style="width:30%">
256256
<p class="caption"><b>Step 6.</b> Complete the Stacking Context formed by the
257257
"Box" element - apply the "filter: invert(1)" to "Box" and all of its
258258
contents, including the now-completed "Dialog" element. Note that the area
@@ -272,9 +272,9 @@ performance breakdown. Clearly, this is not a scalable approach.
272272
Backdrop Root is defined - this example is intended to illustrate why a
273273
Backdrop Root is formed by elements containing opacity less than 1.</p></p>
274274
<div class="figure">
275-
<img alt="ALT TEXT HERE" src="examples/opacity.png" style="width:30%"/>
275+
<img alt="ALT TEXT HERE" src="examples/opacity.png" style="width:30%">
276276
&nbsp;&nbsp;&nbsp;&nbsp;
277-
<img alt="ALT TEXT HERE" src="examples/opacity_correct.png" style="width:30%"/>
277+
<img alt="ALT TEXT HERE" src="examples/opacity_correct.png" style="width:30%">
278278
<p class="caption">The left image is the final result of rendering, assuming
279279
the Backdrop Root includes everything on the page. Note that the blurred
280280
region inside the blue border is very faint. It is rendered at 0.25 opacity
@@ -297,9 +297,9 @@ performance breakdown. Clearly, this is not a scalable approach.
297297
intended to illustrate why a Backdrop Root is formed by elements containing
298298
masks.</p>
299299
<div class="figure">
300-
<img alt="ALT TEXT HERE" src="examples/mask.png" style="width:30%"/>
300+
<img alt="ALT TEXT HERE" src="examples/mask.png" style="width:30%">
301301
&nbsp;&nbsp;&nbsp;&nbsp;
302-
<img alt="ALT TEXT HERE" src="examples/mask_correct.png" style="width:30%"/>
302+
<img alt="ALT TEXT HERE" src="examples/mask_correct.png" style="width:30%">
303303
<p class="caption">The left image is the final result of rendering, assuming
304304
the Backdrop Root includes everything on the page. Note that the gradient
305305
applied to the blurred region inside the blue border (but not the border

0 commit comments

Comments
 (0)