Tests: Fix test flakiness for mask-image-with-scroll-offset

pixelspark · pixelspark · commit 7252b7ecfd74 · 2025-04-10T20:31:16.000+02:00
diff --git a/Tests/LibWeb/Screenshot/data/whf.svg b/Tests/LibWeb/Screenshot/data/whf.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 100" width="250px" height="100px">
+	<path style="paint-order: fill; stroke-width: 7px; stroke: rgb(0, 0, 0); fill: none;"
+		d="M 12.081 16.735 C 12.452 24.431 12.257 32.16 12.257 39.864 C 12.257 45.194 12.257 50.524 12.257 55.854 C 12.257 58.991 12.163 62.157 12.54 65.28 C 12.819 67.597 13.408 69.752 14.658 71.713 C 20.129 80.295 19.491 80.452 26.539 72.084 C 28.049 70.292 29.372 68.575 30.648 66.62 C 31.224 65.738 33.945 60.514 35.196 60.388 C 40.978 59.801 41.188 77.229 47.317 76.494 C 51.976 75.936 57.851 65.369 60.07 62.252 C 71.941 45.581 77.42 27.247 84.474 8.554" />
+	<path style="stroke: rgb(0, 0, 0); stroke-width: 7px; fill: none;"
+		d="M 114.39 54.973 C 128.428 54.973 142.466 54.973 156.503 54.973" />
+	<path style="stroke: rgb(0, 0, 0); stroke-width: 7px; paint-order: fill; fill: none;"
+		d="M 192.852 86.865 C 192.852 69.251 193.133 51.863 191.594 34.418 C 191.185 29.777 187.376 17.14 189.886 12.418 C 190.342 11.561 198.042 12.292 198.919 12.292 C 208.296 12.292 218.05 12.743 227.261 12.743" />
+	<path style="stroke: rgb(0, 0, 0); stroke-width: 7px; fill: none;"
+		d="M 194.468 52.122 C 202.778 52.122 211.087 52.122 219.397 52.122" />
+	<path style="stroke: rgb(0, 0, 0); stroke-width: 8px; fill: none;"
+		d="M 112.97 24.534 C 112.97 39.5 112.755 54.483 113.301 69.43 C 113.497 74.787 112.519 81.541 113.904 86.759" />
+	<path style="stroke: rgb(0, 0, 0); stroke-width: 8px; fill: none;"
+		d="M 156.251 26.521 C 156.251 35.293 155.519 44.382 156.337 53.117 C 156.872 58.831 158.395 64.516 158.467 70.256 C 158.552 76.979 156.876 83.994 156.876 90.342" />
+</svg>
diff --git a/Tests/LibWeb/Screenshot/expected/mask-image-with-scroll-offset-ref.html b/Tests/LibWeb/Screenshot/expected/mask-image-with-scroll-offset-ref.html
@@ -1,10 +1,12 @@
+<!DOCTYPE html>
 <style>
-  * {
-    margin: 0;
-    scrollbar-width: none;
-  }
-  body {
-    background-color: white;
-  }
+    * {
+        margin: 0;
+        scrollbar-width: none;
+    }
+    body {
+        background-color: white;
+    }
 </style>
-<img src="../images/mask-image-with-scroll-offset-ref.png">
+<img src="../images/mask-image-with-scroll-offset-ref.png" />
+<img src="../data/whf.svg" />
diff --git a/Tests/LibWeb/Screenshot/input/mask-image-with-scroll-offset.html b/Tests/LibWeb/Screenshot/input/mask-image-with-scroll-offset.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
-<head>
-     <link rel="match" href="../expected/mask-image-with-scroll-offset-ref.html" />
+<link rel="match" href="../expected/mask-image-with-scroll-offset-ref.html" />
 <style>
     * {
         scrollbar-width: none;
@@ -10,20 +9,18 @@
     }
     #mask-image-box {
         background-color: black;
-        mask-image: url("data:image/svg+xml;,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20250%20100%22%20xmlns:bx=%22https://boxy-svg.com%22%20width=%22250px%22%20height=%22100px%22%3E%3Cdefs/%3E%3Cpath%20style=%22paint-order:%20fill;%20stroke-width:%207px;%20stroke:%20rgb(0,%200,%200);%20fill:%20none;%22%20d=%22M%2012.081%2016.735%20C%2012.452%2024.431%2012.257%2032.16%2012.257%2039.864%20C%2012.257%2045.194%2012.257%2050.524%2012.257%2055.854%20C%2012.257%2058.991%2012.163%2062.157%2012.54%2065.28%20C%2012.819%2067.597%2013.408%2069.752%2014.658%2071.713%20C%2020.129%2080.295%2019.491%2080.452%2026.539%2072.084%20C%2028.049%2070.292%2029.372%2068.575%2030.648%2066.62%20C%2031.224%2065.738%2033.945%2060.514%2035.196%2060.388%20C%2040.978%2059.801%2041.188%2077.229%2047.317%2076.494%20C%2051.976%2075.936%2057.851%2065.369%2060.07%2062.252%20C%2071.941%2045.581%2077.42%2027.247%2084.474%208.554%22/%3E%3Cpath%20style=%22stroke:%20rgb(0,%200,%200);%20stroke-width:%207px;%20fill:%20none;%22%20d=%22M%20114.39%2054.973%20C%20128.428%2054.973%20142.466%2054.973%20156.503%2054.973%22/%3E%3Cpath%20style=%22stroke:%20rgb(0,%200,%200);%20stroke-width:%207px;%20paint-order:%20fill;%20fill:%20none;%22%20d=%22M%20192.852%2086.865%20C%20192.852%2069.251%20193.133%2051.863%20191.594%2034.418%20C%20191.185%2029.777%20187.376%2017.14%20189.886%2012.418%20C%20190.342%2011.561%20198.042%2012.292%20198.919%2012.292%20C%20208.296%2012.292%20218.05%2012.743%20227.261%2012.743%22/%3E%3Cpath%20style=%22stroke:%20rgb(0,%200,%200);%20stroke-width:%207px;%20fill:%20none;%22%20d=%22M%20194.468%2052.122%20C%20202.778%2052.122%20211.087%2052.122%20219.397%2052.122%22/%3E%3Cpath%20style=%22stroke:%20rgb(0,%200,%200);%20stroke-width:%208px;%20fill:%20none;%22%20d=%22M%20112.97%2024.534%20C%20112.97%2039.5%20112.755%2054.483%20113.301%2069.43%20C%20113.497%2074.787%20112.519%2081.541%20113.904%2086.759%22/%3E%3Cpath%20style=%22stroke:%20rgb(0,%200,%200);%20stroke-width:%208px;%20fill:%20none;%22%20d=%22M%20156.251%2026.521%20C%20156.251%2035.293%20155.519%2044.382%20156.337%2053.117%20C%20156.872%2058.831%20158.395%2064.516%20158.467%2070.256%20C%20158.552%2076.979%20156.876%2083.994%20156.876%2090.342%22/%3E%3C/svg%3E");
+        mask-image: url("../data/whf.svg");
         width: 250px;
         height: 100px;
         position: absolute;
         top: 60px;
     }
 </style>
-</head>
-<body>
-    <div id="mask-image-box">
-    </div>
-    <script>
-        setTimeout(() => {
-            window.scrollTo(0, 50);
-        }, 0);
-    </script>
-</body>
+<div id="mask-image-box"></div>
+<script>
+    setTimeout(() => {
+        window.scrollTo(0, 50);
+    }, 0);
+</script>
+<!-- FIXME: Workaround to ensure CSS background-image is loaded before taking screenshot: https://github.com/LadybirdBrowser/ladybird/issues/3448 -->
+<img src="../data/whf.svg" />
