Add img-aspect-ratio-relative-inside-fixed test

dillo-browser · Oct 6, 2024 · 47ae7bf · 47ae7bf
1 parent 2837c96
commit 47ae7bf
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 3 deletions.
diff --git a/test/html/Makefile.am b/test/html/Makefile.am
@@ -16,15 +16,16 @@ TESTS = \
 	render/float-img-justify.html \
 	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-aspect-ratio-div.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 \
-	render/max-width-div.html \
 	render/max-width-div-clamp.html \
+	render/max-width-div.html \
 	render/max-width-html.html \
 	render/max-width-nested-div.html \
 	render/meta-refresh-0-no-url.html \

diff --git a/test/html/render/img-aspect-ratio-relative-inside-fixed.html b/test/html/render/img-aspect-ratio-relative-inside-fixed.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test image aspect ratio when both dimensions are relative and container is fixed</title>
+    <style>
+      div {
+        border: 1px solid black;
+        width: 64px;
+        height: 256px;
+      }
+      img {
+        width:100%;
+        height:100%;
+      }
+    </style>
+  </head>
+  <body>
+    <p>The image must fill the complete div even if that means distorting it.
+    The image specifies the size as 100% of the container in both dimensions and
+    the container has a fixed size.</p>
+    <div>
+      <img src="pic.png">
+    </div>
+  </body>
+</html>
diff --git a/test/html/render/img-aspect-ratio-relative-inside-fixed.ref.html b/test/html/render/img-aspect-ratio-relative-inside-fixed.ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Test image aspect ratio when both dimensions are relative and container is fixed</title>
+    <style>
+      div {
+        border: 1px solid black;
+        width: 64px;
+        height: 256px;
+      }
+      img {
+        width:64px;
+        height:256px;
+      }
+    </style>
+  </head>
+  <body>
+    <p>The image must fill the complete div even if that means distorting it.
+    The image specifies the size as 100% of the container in both dimensions and
+    the container has a fixed size.</p>
+    <div>
+      <img src="pic.png">
+    </div>
+  </body>
+</html>