ABCDEFG

.gitmodules

@@ -0,0 +1,4 @@
+[submodule "experimental/CookingWithLitAndTailwind"]
+	path = experimental/CookingWithLitAndTailwind
+	url = https://github.com/issackjohn/CookingWithLitAndTailwind.git
+	branch = main

.prettierignore

@@ -46,3 +46,5 @@ package-lock.json
 /resources/perf.webkit.org
 
 /resources/react-stockcharts
+# Remove later when investigating npm run format issues
+/experimental/CookingWithLitAndTailwind

resources/benchmark-runner.mjs

@@ -70,6 +70,15 @@ class Page {
         return this._wrapElement(element);
     }
 
+    querySelectorInIframe(selector, path = []) {
+        const lookupStartNode = this._frame.contentDocument;
+        const element = getParent(lookupStartNode, path).querySelector(selector);
+
+        if (element === null)
+            return null;
+        return this._wrapElement(element.contentDocument);
+    }
+
     /**
      * Returns all elements within the document that matches the specified selector, or group of selectors.
      * If no matches are found, null is returned.
@@ -140,6 +149,10 @@ class PageElement {
         this.#node.click();
     }
 
+    setWidth(width) {
+        this.#node.width = width;
+    }
+
     focus() {
         this.#node.focus();
     }
@@ -189,6 +202,14 @@ class PageElement {
         this.#node.dispatchEvent(event);
     }
 
+    /**
+     * Scrolls the element into view.
+     *
+     */
+    scrollIntoView() {
+        this.#node.scrollIntoView();
+    }
+
     /**
      * Returns the first element found in a node of a PageElement that matches the specified selector, or group of selectors. If a shadow DOM is present in the node, the shadow DOM is used to query.
      * If no matches are found, null is returned.

resources/tests.mjs

@@ -1101,6 +1101,40 @@ Suites.push({
     ],
 });
 
+Suites.push({
+    name: "Responsive-design",
+    url: "experimental/CookingWithLitAndTailwind/dist/index.html",
+    tags: ["responsive-design", "webcomponents"],
+    async prepare(page) {
+        (await page.waitForElement("#content-iframe")).focus();
+        console.log("focused");
+    },
+    tests: [
+        new BenchmarkTestStep("Load chat", (page) => {
+            const iframeElement = page.querySelectorInIframe("#content-iframe");
+            const element = iframeElement.querySelectorInShadowRoot("#load-chat-btn", ["cooking-app", "chat-window"]);
+            element.click();
+            const seeMoreBtn = iframeElement.querySelectorInShadowRoot(".show-more-btn", ["cooking-app", "main-content", "recipe-grid", "recipe-card"]);
+            seeMoreBtn.click();
+        }),
+        new BenchmarkTestStep("Reduce size", (page) => {
+            page.querySelector("#content-iframe").setWidth("480px");
+        }),
+        new BenchmarkTestStep("Open chat and send message", (page) => {
+            const iframeElement = page.querySelectorInIframe("#content-iframe");
+            const element = iframeElement.querySelectorInShadowRoot("#chat-window", ["cooking-app", "chat-window"]);
+            element.scrollIntoView();
+            const chatInput = iframeElement.querySelectorInShadowRoot("#chat-input", ["cooking-app", "chat-window"]);
+            chatInput.setValue("Please generate an image of Beef Stroganoff.");
+            chatInput.dispatchEvent("input");
+            chatInput.enter("keypress");
+        }),
+        new BenchmarkTestStep("Resize to horizontal mobile layout", (page) => {
+            page.querySelector("#content-iframe").setWidth("768px");
+        }),
+    ],
+});
+
 Object.freeze(Suites);
 Suites.forEach((suite) => {
     if (!suite.tags)