figure

16 cases. Source: tests/figure.json.

#1 canonical

Source

:::figure[Request lifecycle from ingress to response]{#fig-lifecycle width=60%}
![](lifecycle.svg)
:::

Rendered

Request lifecycle from ingress to response

Downgrade

![](lifecycle.svg)

*Request lifecycle from ingress to response*

#2 image with alt and title, no caption

Source

:::figure
![Alt text](a.png "T")
:::

Rendered

Alt text

Downgrade

![Alt text](a.png "T")

#3 table as content

Source

:::figure[Sizes]
| a | b |
|---|---|
| 1 | 2 |
:::

Rendered

Sizes
a b
1 2

Downgrade

| a | b |
| - | - |
| 1 | 2 |

*Sizes*

#4 code block as content

Source

:::figure[Listing]
```js
let x = 1;
```
:::

Rendered

let x = 1;
Listing

Downgrade

```js
let x = 1;
```

*Listing*

#5 caption with inline markup

Source

:::figure[The *fast* path]
![](f.svg)
:::

Rendered

The fast path

Downgrade

![](f.svg)

*The *fast* path*

#6 width bounds

Source

:::figure{width=1%}
![](a.svg)
:::

:::figure{width=100%}
![](b.svg)
:::

Rendered

Downgrade

![](a.svg)

![](b.svg)

#7 nested inside a card

Source

::::card
:::figure[C]
![](x.svg)
:::
::::

Rendered

C

Downgrade

![](x.svg)

*C*

#8 classes

Source

:::figure{.wide}
![](a.svg)
:::

Rendered

Downgrade

![](a.svg)

#9 unclosed fence

Source

:::figure[C]
![](x.svg)

Rendered

C

Downgrade

![](x.svg)

*C*

Diagnostics: DIRECTIVE_UNCLOSED

#10 empty content

invalid

Source

:::figure
:::

Rendered

Downgrade

(empty)

Diagnostics: FIGURE_CONTENT

#11 wrong content type: text paragraph

invalid

Source

:::figure
some text
:::

Rendered

some text

Downgrade

some text

Diagnostics: FIGURE_CONTENT

#12 wrong content type: image with trailing text

invalid

Source

:::figure
![](a.svg) caption here
:::

Rendered

caption here

Downgrade

![](a.svg) caption here

Diagnostics: FIGURE_CONTENT

#13 wrong content type: two blocks

invalid

Source

:::figure
![](a.svg)

![](b.svg)
:::

Rendered

Downgrade

![](a.svg)

![](b.svg)

Diagnostics: FIGURE_CONTENT

#14 width must be a percentage

invalid

Source

:::figure{width=300px}
![](a.svg)
:::

Rendered

Downgrade

![](a.svg)

Diagnostics: DIRECTIVE_INVALID_ATTRIBUTE

#15 width out of range

invalid

Source

:::figure{width=150%}
![](a.svg)
:::

Rendered

Downgrade

![](a.svg)

Diagnostics: DIRECTIVE_INVALID_ATTRIBUTE

#16 width of zero

invalid

Source

:::figure{width=0%}
![](a.svg)
:::

Rendered

Downgrade

![](a.svg)

Diagnostics: DIRECTIVE_INVALID_ATTRIBUTE