aboutsummaryrefslogtreecommitdiff
path: root/test/html/render
diff options
context:
space:
mode:
Diffstat (limited to 'test/html/render')
-rw-r--r--test/html/render/img-aspect-ratio-mix-border.html42
-rw-r--r--test/html/render/img-aspect-ratio-mix-border.ref.html42
-rw-r--r--test/html/render/img-aspect-ratio-mix-margin.html42
-rw-r--r--test/html/render/img-aspect-ratio-mix-margin.ref.html42
-rw-r--r--test/html/render/img-aspect-ratio-mix.html (renamed from test/html/render/img-max-bounds.html)0
-rw-r--r--test/html/render/img-aspect-ratio-mix.ref.html (renamed from test/html/render/img-max-bounds.ref.html)0
6 files changed, 168 insertions, 0 deletions
diff --git a/test/html/render/img-aspect-ratio-mix-border.html b/test/html/render/img-aspect-ratio-mix-border.html
new file mode 100644
index 00000000..38cd25e8
--- /dev/null
+++ b/test/html/render/img-aspect-ratio-mix-border.html
@@ -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>
diff --git a/test/html/render/img-aspect-ratio-mix-border.ref.html b/test/html/render/img-aspect-ratio-mix-border.ref.html
new file mode 100644
index 00000000..775c8cb2
--- /dev/null
+++ b/test/html/render/img-aspect-ratio-mix-border.ref.html
@@ -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>
diff --git a/test/html/render/img-aspect-ratio-mix-margin.html b/test/html/render/img-aspect-ratio-mix-margin.html
new file mode 100644
index 00000000..af06cd76
--- /dev/null
+++ b/test/html/render/img-aspect-ratio-mix-margin.html
@@ -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>
diff --git a/test/html/render/img-aspect-ratio-mix-margin.ref.html b/test/html/render/img-aspect-ratio-mix-margin.ref.html
new file mode 100644
index 00000000..36207ab6
--- /dev/null
+++ b/test/html/render/img-aspect-ratio-mix-margin.ref.html
@@ -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>
diff --git a/test/html/render/img-max-bounds.html b/test/html/render/img-aspect-ratio-mix.html
index 8adc2867..8adc2867 100644
--- a/test/html/render/img-max-bounds.html
+++ b/test/html/render/img-aspect-ratio-mix.html
diff --git a/test/html/render/img-max-bounds.ref.html b/test/html/render/img-aspect-ratio-mix.ref.html
index 464767dd..464767dd 100644
--- a/test/html/render/img-max-bounds.ref.html
+++ b/test/html/render/img-aspect-ratio-mix.ref.html