@@ -226,9 +226,9 @@ performance breakdown. Clearly, this is not a scalable approach.
226
226
the Backdrop Root is defined - this example is intended to illustrate why a
227
227
Backdrop Root is formed by elements containing filters.</p>
228
228
<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%">
230
230
<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%">
232
232
<p class="caption"><b> Step 2.</b> "Dialog" is about to be rendered, but it has
233
233
backdrop-filter applied. Since, for this example, the backdrop-filter "sees"
234
234
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.
237
237
atomicity of the Stacking Context created by "Box" is broken. This is also
238
238
where the performance penalty applies - the GPU draw work that is
239
239
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%">
241
241
<p class="caption"><b> Step 3.</b> Start painting the "Dialog" element by
242
242
reading back its backdrop image, applying the "backdrop-filter: blur(2px)"
243
243
filter, and cropping those results to the border box of "Dialog". (The
244
244
dotted black border has been added here for clarity: this is the border box
245
245
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%">
247
247
<p class="caption"><b> Step 4.</b> Now that the backdrop-filtered contents have
248
248
been read back and filtered, discard the previously "completed" Box element
249
249
and go back to the unfiltered version. Note that you can now see the black
250
250
text at the bottom bleeding through the white, blurred version inside
251
251
"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%">
253
253
<p class="caption"><b> Step 5.</b> Draw the contents of the "Dialog" element -
254
254
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%">
256
256
<p class="caption"><b> Step 6.</b> Complete the Stacking Context formed by the
257
257
"Box" element - apply the "filter: invert(1)" to "Box" and all of its
258
258
contents, including the now-completed "Dialog" element. Note that the area
@@ -272,9 +272,9 @@ performance breakdown. Clearly, this is not a scalable approach.
272
272
Backdrop Root is defined - this example is intended to illustrate why a
273
273
Backdrop Root is formed by elements containing opacity less than 1.</p></p>
274
274
<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%">
276
276
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%">
278
278
<p class="caption"> The left image is the final result of rendering, assuming
279
279
the Backdrop Root includes everything on the page. Note that the blurred
280
280
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.
297
297
intended to illustrate why a Backdrop Root is formed by elements containing
298
298
masks.</p>
299
299
<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%">
301
301
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%">
303
303
<p class="caption"> The left image is the final result of rendering, assuming
304
304
the Backdrop Root includes everything on the page. Note that the gradient
305
305
applied to the blurred region inside the blue border (but not the border
0 commit comments