Skip to content

Commit

Permalink
Add more image aspect ratio tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@rodarima
rodarima committed Oct 6, 2024
1 parent 47ae7bf commit 08c617e
Show file tree
Hide file tree
Showing 7 changed files with 171 additions and 1 deletion.
4 changes: 3 additions & 1 deletion test/html/Makefile.am
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,11 @@ TESTS = \
render/hackernews.html \
render/img-aspect-ratio-absolute.html \
render/img-aspect-ratio-div.html \
render/img-aspect-ratio-mix-border.html \
render/img-aspect-ratio-mix-margin.html \
render/img-aspect-ratio-mix.html \
render/img-aspect-ratio-relative-inside-fixed.html \
render/img-aspect-ratio.html \
render/img-max-bounds.html \
render/main-style.html \
render/margin-auto.html \
render/max-width-body.html \
Expand Down
42 changes: 42 additions & 0 deletions test/html/render/img-aspect-ratio-mix-border.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<title>Test image aspect ratio while constrained</title>
<style>
body {margin: 20px}
div {width: 640px; height: 640px; background: lightblue;}
img {border: 10px solid green}
</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>
42 changes: 42 additions & 0 deletions test/html/render/img-aspect-ratio-mix-border.ref.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<title>Test image aspect ratio while constrained</title>
<style>
body {margin: 20px}
div {width: 640px; height: 640px; background: lightblue;}
img {border: 10px solid green}
</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>
42 changes: 42 additions & 0 deletions test/html/render/img-aspect-ratio-mix-margin.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<title>Test image aspect ratio while constrained</title>
<style>
body {margin: 20px}
div {width: 640px; height: 640px; background: lightblue;}
img {margin: 10px}
</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>
42 changes: 42 additions & 0 deletions test/html/render/img-aspect-ratio-mix-margin.ref.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<title>Test image aspect ratio while constrained</title>
<style>
body {margin: 20px}
div {width: 640px; height: 640px; background: lightblue;}
img {margin: 10px}
</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>
0 test/html/render/img-max-bounds.html → test/html/render/img-aspect-ratio-mix.html
View file
File renamed without changes.
0 test/html/render/img-max-bounds.ref.html → ...html/render/img-aspect-ratio-mix.ref.html
View file
File renamed without changes.

0 comments on commit 08c617e

Please sign in to comment.