Tests: Add tests that verify object-fit and -position with zoom

LadybirdBrowser · Jan 7, 2025 · 02a1e11 · 02a1e11
1 parent e217f01
commit 02a1e11
Show file tree

Hide file tree

Showing 4 changed files with 176 additions and 0 deletions.
diff --git a/Tests/LibWeb/Ref/expected/object-fit-with-zoom-ref.html b/Tests/LibWeb/Ref/expected/object-fit-with-zoom-ref.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+body { margin: 0; }
+.row { clear: both; }
+
+.container {
+  width: 128px;
+  height: 128px;
+  border: 4px solid black;
+  float: left;
+}
+
+.blue { background-color: #00f; }
+.green { background-color: #0f0; }
+
+.full {
+  position: relative;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.center-half {
+  position: relative;
+  left: 25%;
+  top: 25%;
+  width: 50%;
+  height: 50%;
+}
+
+.offset-half {
+  position: relative;
+  left: 12.5%;
+  top: 12.5%;
+  width: 50%;
+  height: 50%;
+}
+    </style>
+  </head>
+  <body>
+    <div class="row">
+      <div class="container"><div class="blue full"></div></div>
+      <div class="container"><div class="green offset-half"><div class="blue center-half"></div></div></div>
+    </div>
+    <div class="row">
+      <div class="container"><div class="green full"><div class="blue center-half"></div></div></div>
+      <div class="container"><div class="green offset-half"><div class="blue center-half"></div></div></div>
+    </div>
+  </body>
+</html>
diff --git a/Tests/LibWeb/Ref/input/object-fit-with-zoom-0.5.html b/Tests/LibWeb/Ref/input/object-fit-with-zoom-0.5.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="match" href="../expected/object-fit-with-zoom-ref.html" />
+    <style>
+body { margin: 0; }
+div { clear: both; }
+.scale-down > img { object-fit: scale-down }
+
+img {
+  width: 256px;
+  height: 256px;
+  object-fit: none;
+  image-rendering: crisp-edges;
+  border: 8px solid black;
+  float: left;
+}
+
+.offset {
+  object-position: 32px 32px;
+}
+    </style>
+  </head>
+  <body>
+    <div>
+      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIAAQMAAADOtka5AAAABlBMVEUAAP8A/wDoRkJMAAAAlElEQVR42u3MoQ0AQAjAQPZfGvybDyEorrLiIocFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwDs+AQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABsA90AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACcBwrJtKWSEyoL6AAAAABJRU5ErkJggg==" />
+      <img class="offset" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACAAQMAAAD58POIAAAABlBMVEUAAP8A/wDoRkJMAAAAJklEQVRIx2P4jwYYRgVGBdAEGKBgVGBUYFRgVIBUgdHydFQAhwAABZj6TKPJLmoAAAAASUVORK5CYII=" />
+    </div>
+    <div class="scale-down">
+      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIAAQMAAADOtka5AAAABlBMVEUAAP8A/wDoRkJMAAAAlElEQVR42u3MoQ0AQAjAQPZfGvybDyEorrLiIocFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwDs+AQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABsA90AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACcBwrJtKWSEyoL6AAAAABJRU5ErkJggg==" />
+      <img class="offset" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACAAQMAAAD58POIAAAABlBMVEUAAP8A/wDoRkJMAAAAJklEQVRIx2P4jwYYRgVGBdAEGKBgVGBUYFRgVIBUgdHydFQAhwAABZj6TKPJLmoAAAAASUVORK5CYII=" />
+    </div>
+    <script>
+      if (window.internals) {
+        window.internals.setBrowserZoom(0.5);
+      } else {
+        document.body.innerText = "This test requires access to the internals object. When opening it manually, please start Ladybird with the command line argument `--expose-internals-object`";
+      }
+    </script>
+  </body>
+</html>
diff --git a/Tests/LibWeb/Ref/input/object-fit-with-zoom-2.0.html b/Tests/LibWeb/Ref/input/object-fit-with-zoom-2.0.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="match" href="../expected/object-fit-with-zoom-ref.html" />
+    <style>
+body { margin: 0; }
+div { clear: both; }
+.scale-down > img { object-fit: scale-down }
+
+img {
+  width: 64px;
+  height: 64px;
+  object-fit: none;
+  image-rendering: crisp-edges;
+  border: 2px solid black;
+  float: left;
+}
+
+.offset {
+  object-position: 8px 8px;
+}
+    </style>
+  </head>
+  <body>
+    <div>
+      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACAAQMAAAD58POIAAAABlBMVEUAAP8A/wDoRkJMAAAAJklEQVRIx2P4jwYYRgVGBdAEGKBgVGBUYFRgVIBUgdHydFQAhwAABZj6TKPJLmoAAAAASUVORK5CYII=" />
+      <img class="offset" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAQMAAABJtOi3AAAABlBMVEUAAP8A/wDoRkJMAAAAFUlEQVQI12P4DwQMxBAMDNQliLMXAORTX6F6xmICAAAAAElFTkSuQmCC" />
+    </div>
+    <div class="scale-down">
+      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACAAQMAAAD58POIAAAABlBMVEUAAP8A/wDoRkJMAAAAJklEQVRIx2P4jwYYRgVGBdAEGKBgVGBUYFRgVIBUgdHydFQAhwAABZj6TKPJLmoAAAAASUVORK5CYII=" />
+      <img class="offset" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAQMAAABJtOi3AAAABlBMVEUAAP8A/wDoRkJMAAAAFUlEQVQI12P4DwQMxBAMDNQliLMXAORTX6F6xmICAAAAAElFTkSuQmCC" />
+    </div>
+    <script>
+      if (window.internals) {
+        window.internals.setBrowserZoom(2.0);
+      } else {
+        document.body.innerText = "This test requires access to the internals object. When opening it manually, please start Ladybird with the command line argument `--expose-internals-object`";
+      }
+    </script>
+  </body>
+</html>
diff --git a/Tests/LibWeb/Ref/input/object-fit-with-zoom-4.0.html b/Tests/LibWeb/Ref/input/object-fit-with-zoom-4.0.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="match" href="../expected/object-fit-with-zoom-ref.html" />
+    <style>
+body { margin: 0; }
+div { clear: both; }
+.scale-down > img { object-fit: scale-down }
+
+img {
+  width: 32px;
+  height: 32px;
+  object-fit: none;
+  image-rendering: crisp-edges;
+  border: 1px solid black;
+  float: left;
+}
+
+.offset {
+  object-position: 4px 4px;
+}
+    </style>
+  </head>
+  <body>
+    <div>
+      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAQMAAACQp+OdAAAABlBMVEUAAP8A/wDoRkJMAAAAGElEQVQoz2P4DwUMg4bBAASjDNyMQRVfAGtyfpBbaRBCAAAAAElFTkSuQmCC" />
+      <img class="offset" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAP8A/wDoRkJMAAAAE0lEQVQI12P4/58Bjj7wY0dIagBBkhfpgPvxRQAAAABJRU5ErkJggg==" />
+    </div>
+    <div class="scale-down">
+      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAQMAAACQp+OdAAAABlBMVEUAAP8A/wDoRkJMAAAAGElEQVQoz2P4DwUMg4bBAASjDNyMQRVfAGtyfpBbaRBCAAAAAElFTkSuQmCC" />
+      <img class="offset" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAP8A/wDoRkJMAAAAE0lEQVQI12P4/58Bjj7wY0dIagBBkhfpgPvxRQAAAABJRU5ErkJggg==" />
+    </div>
+    <script>
+      if (window.internals) {
+        window.internals.setBrowserZoom(4.0);
+      } else {
+        document.body.innerText = "This test requires access to the internals object. When opening it manually, please start Ladybird with the command line argument `--expose-internals-object`";
+      }
+    </script>
+  </body>
+</html>