Increase steps duration & make width, height 100%

issackjohn · issackjohn · commit 3413c3d91329 · 2024-12-11T09:35:53.000-08:00
* 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
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);
 
diff --git a/resources/tests.mjs b/resources/tests.mjs

Original file line number	Diff line number	Diff line change
`@@ -150,7 +150,7 @@ class PageElement {`
`150`	`150`	`}`
`151`	`151`
`152`	`152`	`setWidth(width) {`
`153`		`- this.#node.width = width;`
	`153`	`+ this.#node.style.width = width;`
`154`	`154`	`}`
`155`	`155`
`156`	`156`	`scrollIntoView() {`
`@@ -215,6 +215,14 @@ class PageElement {`
`215`	`215`	`return new PageElement(element);`
`216`	`216`	`}`
`217`	`217`
	`218`	`+ querySelectorAllInShadowRoot(selector, path = []) {`
	`219`	`+ const lookupStartNode = this.#node.shadowRoot ?? this.#node;`
	`220`	`+ const elements = Array.from(getParent(lookupStartNode, path).querySelectorAll(selector));`
	`221`	`+ for (let i = 0; i < elements.length; i++)`
	`222`	`+ elements[i] = new PageElement(elements[i]);`
	`223`	`+ return elements;`
	`224`	`+ }`
	`225`	`+`
`218`	`226`	`querySelector(selector) {`
`219`	`227`	`const element = this.#node.querySelector(selector);`
`220`	`228`