瀏覽代碼

Tests/LibWeb: Add ref-tests for "overflow: hidden"

Adds ref-tests from pages used in the following PRs:
https://github.com/SerenityOS/serenity/pull/16035
https://github.com/SerenityOS/serenity/pull/17591
Aliaksandr Kalenik 1 年之前
父節點
當前提交
25e9d2ccf0

+ 45 - 0
Tests/LibWeb/Ref/overflow-hidden-2.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <link rel="match" href="reference/overflow-hidden-2-ref.html" />
+        <style>
+            .box1 {
+                width: 400px;
+                height: 400px;
+                background-color: slateblue;
+                position: absolute;
+                overflow: hidden;
+            }
+
+            .translate {
+                width: 200px;
+                height: 200px;
+                background-color: black;
+                transform: translate(150px, 150px);
+            }
+
+            .box2 {
+                width: 100px;
+                height: 100px;
+                background-color: orangered;
+                position: absolute;
+            }
+
+            .box3 {
+                position: relative;
+                width: 100px;
+                height: 100px;
+                background-color: greenyellow;
+                top: -90px;
+                left: -120px;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="box1">
+            <div class="translate">
+                <div class="box2"><div class="box3"></div></div>
+            </div>
+        </div>
+    </body>
+</html>

+ 26 - 0
Tests/LibWeb/Ref/overflow-hidden.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <link rel="match" href="reference/overflow-hidden-ref.html" />
+        <style>
+            .outer-box {
+                width: 300px;
+                height: 300px;
+                background-color: darkblue;
+                overflow: hidden;
+            }
+
+            .inner-box {
+                width: 600px;
+                height: 600px;
+                background-color: orangered;
+                transform: translate(100px, 100px);
+            }
+        </style>
+    </head>
+    <body>
+        <div class="outer-box">
+            <div><div class="inner-box"></div></div>
+        </div>
+    </body>
+</html>

+ 43 - 0
Tests/LibWeb/Ref/reference/overflow-hidden-2-ref.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <style>
+            .box1 {
+                width: 400px;
+                height: 400px;
+                background-color: slateblue;
+                position: absolute;
+            }
+
+            .translate {
+                width: 200px;
+                height: 200px;
+                background-color: black;
+                transform: translate(150px, 150px);
+            }
+
+            .box2 {
+                width: 100px;
+                height: 100px;
+                background-color: orangered;
+                position: absolute;
+            }
+
+            .box3 {
+                position: relative;
+                width: 100px;
+                height: 100px;
+                background-color: greenyellow;
+                top: -90px;
+                left: -120px;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="box1">
+            <div class="translate">
+                <div class="box2"><div class="box3"></div></div>
+            </div>
+        </div>
+    </body>
+</html>

+ 26 - 0
Tests/LibWeb/Ref/reference/overflow-hidden-ref.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <style>
+            .outer-box {
+                width: 300px;
+                height: 300px;
+                background-color: darkblue;
+                overflow: hidden;
+                position: relative
+            }
+
+            .inner-box {
+                width: 200px;
+                height: 200px;
+                background-color: orangered;
+                position: absolute;
+                top: 100px;
+                left: 100px;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="outer-box"><div class="inner-box"></div></div>
+    </body>
+</html>