diff options
| author | Laurenz <laurmaedje@gmail.com> | 2025-07-09 15:48:43 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2025-07-09 13:48:43 +0000 |
| commit | 3aa7e861e7ffe03193d94c2cfd249739ef746f09 (patch) | |
| tree | 063945efc6eca31a1f2703fc3127e8723e2eab2d /tests | |
| parent | a45c3388a642d6d7321b5c5b684d3582e91cff41 (diff) | |
Support images in HTML export (#6578)
Diffstat (limited to 'tests')
| -rw-r--r-- | tests/ref/html/image-jpg-html-base64.html | 8 | ||||
| -rw-r--r-- | tests/ref/html/image-scaling-methods.html | 10 | ||||
| -rw-r--r-- | tests/suite/visualize/image.typ | 23 |
3 files changed, 37 insertions, 4 deletions
diff --git a/tests/ref/html/image-jpg-html-base64.html b/tests/ref/html/image-jpg-html-base64.html new file mode 100644 index 00000000..89075323 --- /dev/null +++ b/tests/ref/html/image-jpg-html-base64.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + </head> + <body><img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAA3ADcAAD/4QBiRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAEAAAITAAMAAAABAAEAAAAAAAAAAADcAAAAAQAAANwAAAAB/8AACwgAUAAwAQERAP/bAEMACAYGBwYFCAcHBwkJCAoMFA0MCwsMGRITDxQdGh8eHRocHCAkLicgIiwjHBwoNyksMDE0NDQfJzk9ODI8LjM0Mv/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/aAAgBAQAAPwD5/ooooooooooooor7+ooor4Bor7+ooor4Booor7+or4Booor7+or4Bor7+ooor4Bor7+ooor4Bor7+ooor4Bor7+ooor/2Q==" alt="The letter F"></body> +</html> diff --git a/tests/ref/html/image-scaling-methods.html b/tests/ref/html/image-scaling-methods.html new file mode 100644 index 00000000..a15664d5 --- /dev/null +++ b/tests/ref/html/image-scaling-methods.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + </head> + <body> + <div style="display: flex; flex-direction: row; gap: 4pt"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAIAAADZSiLoAAAAKUlEQVR4AQEeAOH/AP8AAAD/AAAA/wCAAAAAgAAAAIAAgIAAAICAgACAcFMHfiTGz0oAAAAASUVORK5CYII=" style="width: 28.346456692913385pt"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAIAAADZSiLoAAAAKUlEQVR4AQEeAOH/AP8AAAD/AAAA/wCAAAAAgAAAAIAAgIAAAICAgACAcFMHfiTGz0oAAAAASUVORK5CYII=" style="image-rendering: smooth; width: 28.346456692913385pt"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAIAAADZSiLoAAAAKUlEQVR4AQEeAOH/AP8AAAD/AAAA/wCAAAAAgAAAAIAAgIAAAICAgACAcFMHfiTGz0oAAAAASUVORK5CYII=" style="image-rendering: pixelated; width: 28.346456692913385pt"></div> + </body> +</html> diff --git a/tests/suite/visualize/image.typ b/tests/suite/visualize/image.typ index 45c70c4b..36ec06cb 100644 --- a/tests/suite/visualize/image.typ +++ b/tests/suite/visualize/image.typ @@ -9,6 +9,9 @@ #set page(height: 60pt) #image("/assets/images/tiger.jpg") +--- image-jpg-html-base64 html --- +#image("/assets/images/f2t.jpg", alt: "The letter F") + --- image-sizing --- // Test configuring the size and fitting behaviour of images. @@ -128,7 +131,7 @@ A #box(image("/assets/images/tiger.jpg", height: 1cm, width: 80%)) B width: 1cm, ) ---- image-scaling-methods --- +--- image-scaling-methods render html --- #let img(scaling) = image( bytes(( 0xFF, 0x00, 0x00, 0x00, 0xFF, 0x00, 0x00, 0x00, 0xFF, @@ -144,14 +147,26 @@ A #box(image("/assets/images/tiger.jpg", height: 1cm, width: 80%)) B scaling: scaling, ) -#stack( - dir: ltr, - spacing: 4pt, +#let images = ( img(auto), img("smooth"), img("pixelated"), ) +#context if target() == "html" { + // TODO: Remove this once `stack` is supported in HTML export. + html.div( + style: "display: flex; flex-direction: row; gap: 4pt", + images.join(), + ) +} else { + stack( + dir: ltr, + spacing: 4pt, + ..images, + ) +} + --- image-natural-dpi-sizing --- // Test that images aren't upscaled. // Image is just 48x80 at 220dpi. It should not be scaled to fit the page |