diff options
| author | Rodrigo Arias Mallo <rodarima@gmail.com> | 2024-08-16 13:21:34 +0200 |
|---|---|---|
| committer | Rodrigo Arias Mallo <rodarima@gmail.com> | 2024-10-17 20:38:16 +0200 |
| commit | 7d7212a47fe35e9e61c6a0b5bee7c93a26313eab (patch) | |
| tree | d8f30c5a3aaf0c3a47f8bc735ce868930b347857 /test/html | |
| parent | 49623838743ad69811dd8348c57ca0baed46934c (diff) | |
Add more image aspect ratio tests
Diffstat (limited to 'test/html')
| -rw-r--r-- | test/html/Makefile.am | 2 | ||||
| -rw-r--r-- | test/html/render/img-aspect-ratio-absolute.html | 18 | ||||
| -rw-r--r-- | test/html/render/img-aspect-ratio-absolute.ref.html | 18 | ||||
| -rw-r--r-- | test/html/render/img-aspect-ratio-div.html | 40 | ||||
| -rw-r--r-- | test/html/render/img-aspect-ratio-div.ref.html | 40 |
5 files changed, 118 insertions, 0 deletions
diff --git a/test/html/Makefile.am b/test/html/Makefile.am index 2585b783..013429f6 100644 --- a/test/html/Makefile.am +++ b/test/html/Makefile.am @@ -17,6 +17,8 @@ TESTS = \ render/github-infinite-loop.html \ render/hackernews.html \ render/img-aspect-ratio.html \ + render/img-aspect-ratio-div.html \ + render/img-aspect-ratio-absolute.html \ render/img-max-bounds.html \ render/main-style.html \ render/margin-auto.html \ diff --git a/test/html/render/img-aspect-ratio-absolute.html b/test/html/render/img-aspect-ratio-absolute.html new file mode 100644 index 00000000..49d07d4b --- /dev/null +++ b/test/html/render/img-aspect-ratio-absolute.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test image aspect ratio</title> + <style> + body { + min-width: 16px; + } + img { + width:100%; + height:100%; + } + </style> + </head> + <body> + <img src="pic.png"> + </body> +</html> diff --git a/test/html/render/img-aspect-ratio-absolute.ref.html b/test/html/render/img-aspect-ratio-absolute.ref.html new file mode 100644 index 00000000..42f9945d --- /dev/null +++ b/test/html/render/img-aspect-ratio-absolute.ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test image aspect ratio</title> + <style> + body { + min-width: 16px; + } + img { + width:569px; + height:569px; + } + </style> + </head> + <body> + <img src="pic.png"> + </body> +</html> diff --git a/test/html/render/img-aspect-ratio-div.html b/test/html/render/img-aspect-ratio-div.html new file mode 100644 index 00000000..b92a9751 --- /dev/null +++ b/test/html/render/img-aspect-ratio-div.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test image aspect ratio inside an unconstrained div</title> + <style> + div { + /*border: 1px solid black*/; + } + div.out { + width: 300px; + height: 600px; + background: lightgreen; + } + div.big { + min-width: 16px; + } + div.small { + max-width: 64px; + } + /* Even if we are specifiying the image to have 100% height, the image + * must not extend to all the available height of the div.out container. + * It should continue to keep the aspect ratio as the width is constrained + * to 64 px, so it should be 64 px tall. */ + img { + width:100%; + height:100%; + } + </style> + </head> + <body> + <div class="out"> + <div class="big"> + <img src="pic.png"> + </div> + <div class="small"> + <img src="pic.png"> + </div> + </div> + </body> +</html> diff --git a/test/html/render/img-aspect-ratio-div.ref.html b/test/html/render/img-aspect-ratio-div.ref.html new file mode 100644 index 00000000..b4f01c42 --- /dev/null +++ b/test/html/render/img-aspect-ratio-div.ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test image aspect ratio inside an unconstrained div</title> + <style> + div { + /*border: 1px solid black;*/ + } + div.out { + width: 300px; + height: 600px; + background: lightgreen; + } + div.big { + min-width: 16px; + } + div.small { + max-width: 64px; + } + /* Even if we are specifiying the image to have 100% height, the image + * must not extend to all the available height of the div.out container. + * It should continue to keep the aspect ratio as the width is constrained + * to 64 px, so it should be 64 px tall. */ + img { + width:100%; + height:100%; + } + </style> + </head> + <body> + <div class="out"> + <div class="big"> + <img style="width:300px; height:300px" src="pic.png"> + </div> + <div class="small"> + <img style="width:64px; height:64px" src="pic.png"> + </div> + </div> + </body> +</html> |