diff options
| author | Rodrigo Arias Mallo <rodarima@gmail.com> | 2024-08-12 18:21:11 +0200 |
|---|---|---|
| committer | Rodrigo Arias Mallo <rodarima@gmail.com> | 2024-10-17 20:37:54 +0200 |
| commit | 277b72c715df6934b261b2c743f64e26ab49633a (patch) | |
| tree | dbaeb43396e69865242aaf9779c1e0a6883b8045 /test/html/render | |
| parent | f3d7483ab4b1751944907fa24a260f0afbb60633 (diff) | |
Add img-max-bounds HTML test
Tests several combinations of size contraints on images so we can check
if the aspect ratio is kept or not.
Diffstat (limited to 'test/html/render')
| -rw-r--r-- | test/html/render/img-max-bounds.html | 41 | ||||
| -rw-r--r-- | test/html/render/img-max-bounds.ref.html | 41 |
2 files changed, 82 insertions, 0 deletions
diff --git a/test/html/render/img-max-bounds.html b/test/html/render/img-max-bounds.html new file mode 100644 index 00000000..8adc2867 --- /dev/null +++ b/test/html/render/img-max-bounds.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test image aspect ratio while constrained</title> + <style> + body {margin: 20px} + div {width: 640px; height: 640px; background: lightblue;} + </style> + </head> + <body> + <div> + <p>All images should be 32px by 32px like this one:</p> + <img src="pic.png" style="width:32px;height:32px;"> + <p>Only one max-* contraint</p> + <img src="pic.png" style="max-width :32px;"> + <img src="pic.png" style="max-height:32px;"> + <img src="pic.png" style="max-width :5%;"> + <img src="pic.png" style="max-height:5%;"> + <p>One max-* and fixed size contraint</p> + <img src="pic.png" style="height:32px; max-width:256px"> + <img src="pic.png" style="height:5%; max-width:256px"> + <img src="pic.png" style="max-height:256px; width:32px"> + <img src="pic.png" style="max-height:256px; width:5%"> + <p>Two max-* contraints</p> + <img src="pic.png" style="max-height:32px; max-width:256px"> + <img src="pic.png" style="max-height:5%; max-width:256px"> + <img src="pic.png" style="max-height:256px; max-width:32px"> + <img src="pic.png" style="max-height:256px; max-width:5%"> + <p>Both min-* and max-* constrained</p> + <img src="pic.png" style="min-width:32px; min-height:16px; max-width:32px; max-height:64px"> + <img src="pic.png" style="min-width:5%; min-height:16px; max-width:5%; max-height:64px"> + <img src="pic.png" style="min-width:16px; min-height:32px; max-width:64px; max-height:32px"> + <img src="pic.png" style="min-width:16px; min-height:5%; max-width:64px; max-height:5%"> + <p>Bad constraints</p> + <img src="pic.png" style="max-width: 16px; min-width: 32px;"> + <img src="pic.png" style="max-height:16px; min-height:32px;"> + <img src="pic.png" style="max-width: 16px; min-width: 5%;"> + <img src="pic.png" style="max-height:16px; min-height:5%;"> + </div> + </body> +</html> diff --git a/test/html/render/img-max-bounds.ref.html b/test/html/render/img-max-bounds.ref.html new file mode 100644 index 00000000..464767dd --- /dev/null +++ b/test/html/render/img-max-bounds.ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test image aspect ratio while constrained</title> + <style> + body {margin: 20px} + div {width: 640px; height: 640px; background: lightblue;} + </style> + </head> + <body> + <div> + <p>All images should be 32px by 32px like this one:</p> + <img src="pic.png" style="width:32px;height:32px;"> + <p>Only one max-* contraint</p> + <img src="pic.png" style="width:32px;height:32px;"> + <img src="pic.png" style="width:32px;height:32px;"> + <img src="pic.png" style="width:32px;height:32px;"> + <img src="pic.png" style="width:32px;height:32px;"> + <p>One max-* and fixed size contraint</p> + <img src="pic.png" style="width:32px;height:32px;"> + <img src="pic.png" style="width:32px;height:32px;"> + <img src="pic.png" style="width:32px;height:32px;"> + <img src="pic.png" style="width:32px;height:32px;"> + <p>Two max-* contraints</p> + <img src="pic.png" style="width:32px;height:32px;"> + <img src="pic.png" style="width:32px;height:32px;"> + <img src="pic.png" style="width:32px;height:32px;"> + <img src="pic.png" style="width:32px;height:32px;"> + <p>Both min-* and max-* constrained</p> + <img src="pic.png" style="width:32px;height:32px;"> + <img src="pic.png" style="width:32px;height:32px;"> + <img src="pic.png" style="width:32px;height:32px;"> + <img src="pic.png" style="width:32px;height:32px;"> + <p>Bad constraints</p> + <img src="pic.png" style="width:32px;height:32px;"> + <img src="pic.png" style="width:32px;height:32px;"> + <img src="pic.png" style="width:32px;height:32px;"> + <img src="pic.png" style="width:32px;height:32px;"> + </div> + </body> +</html> |