Increase steps duration & make width, height 100%

* height and width 100% * feat: add querySelectorAllInShadowRoot method for shadow DOM element selection * feat: add functionality to click all "show more" buttons in shadow DOM during tests
WebKit · Dec 6, 2024 · cd96d0b · cd96d0b
1 parent 2525f91
commit cd96d0b
Show file tree

Hide file tree

Showing 7 changed files with 257 additions and 22 deletions.
diff --git a/experimental/responsive-design/dist/index.html b/experimental/responsive-design/dist/index.html
@@ -4,8 +4,22 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Cooking with Lit and Tailwind</title>
+        <style>
+            body,
+            html {
+                margin: 0;
+                width: 100%;
+                height: 100%;
+                overflow: hidden;
+            }
+            #content-iframe {
+                width: 100%;
+                height: 100%;
+                border: none;
+            }
+        </style>
     </head>
-    <body style="overflow: hidden; margin: 0">
-        <iframe title="Cooking Website with Recipes" id="content-iframe" src="iframe.html" width="800px" height="600px" style="border: none"></iframe>
+    <body>
+        <iframe title="Cooking Website with Recipes" id="content-iframe" src="iframe.html"></iframe>
     </body>
 </html>
diff --git a/experimental/responsive-design/index.html b/experimental/responsive-design/index.html
@@ -4,8 +4,22 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Cooking with Lit and Tailwind</title>
+        <style>
+            body,
+            html {
+                margin: 0;
+                width: 100%;
+                height: 100%;
+                overflow: hidden;
+            }
+            #content-iframe {
+                width: 100%;
+                height: 100%;
+                border: none;
+            }
+        </style>
     </head>
-    <body style="overflow: hidden; margin: 0">
-        <iframe title="Cooking Website with Recipes" id="content-iframe" src="iframe.html" width="800px" height="600px" style="border: none"></iframe>
+    <body>
+        <iframe title="Cooking Website with Recipes" id="content-iframe" src="iframe.html"></iframe>
     </body>
 </html>
diff --git a/experimental/responsive-design/package-lock.json b/experimental/responsive-design/package-lock.json
diff --git a/experimental/responsive-design/package.json b/experimental/responsive-design/package.json
@@ -27,7 +27,7 @@
         "test": "echo \"Error: no test specified\" && exit 1"
     },
     "dependencies": {
-        "lit": "^3.1.4"
+        "lit": "^3.2.1"
     },
     "devDependencies": {
         "@rollup/plugin-html": "^1.0.4",
@@ -43,6 +43,7 @@
         "rollup-plugin-copy": "^3.5.0",
         "rollup-plugin-import-css": "^3.5.6",
         "rollup-plugin-postcss": "^4.0.2",
+        "rollup-plugin-summary": "^3.0.0",
         "tailwindcss": "^3.4.14"
     }
 }
diff --git a/experimental/responsive-design/rollup.config.js b/experimental/responsive-design/rollup.config.js
@@ -3,6 +3,7 @@ import terser from "@rollup/plugin-terser";
 import copy from "rollup-plugin-copy";
 import css from "rollup-plugin-import-css";
 import html from "@rollup/plugin-html";
+import summary from "rollup-plugin-summary";
 import path from "path";
 import fs from "fs";
 
@@ -19,12 +20,6 @@ export default {
     plugins: [
         resolve(),
         css(),
-        copy({
-            targets: [
-                { src: "index.html", dest: "dist/" },
-                { src: "public/", dest: "dist/" },
-            ],
-        }),
         html({
             template: () => {
                 const imagesDir = path.resolve("public", "images");
@@ -51,5 +46,12 @@ export default {
             },
             fileName: "iframe.html",
         }),
+        summary(),
+        copy({
+            targets: [
+                { src: "index.html", dest: "dist/" },
+                { src: "public/", dest: "dist/" },
+            ],
+        }),
     ],
 };
diff --git a/resources/benchmark-runner.mjs b/resources/benchmark-runner.mjs
@@ -150,7 +150,7 @@ class PageElement {
     }
 
     setWidth(width) {
-        this.#node.width = width;
+        this.#node.style.width = width;
     }
 
     scrollIntoView() {
@@ -215,6 +215,14 @@ class PageElement {
         return new PageElement(element);
     }
 
+    querySelectorAllInShadowRoot(selector, path = []) {
+        const lookupStartNode = this.#node.shadowRoot ?? this.#node;
+        const elements = Array.from(getParent(lookupStartNode, path).querySelectorAll(selector));
+        for (let i = 0; i < elements.length; i++)
+            elements[i] = new PageElement(elements[i]);
+        return elements;
+    }
+
     querySelector(selector) {
         const element = this.#node.querySelector(selector);