diff --git a/.cargo/nextest.toml b/.cargo/nextest.toml
index 1b6b9d85ff..8f952573ae 100644
--- a/.cargo/nextest.toml
+++ b/.cargo/nextest.toml
@@ -93,7 +93,6 @@ leak-timeout = "100ms"
 # To address this, "archive.include" specifies additional paths that will be included in the archive.
 archive.include = [
 
-
   # Examples:
   #
   # { path = "application-data", relative-to = "target" },
diff --git a/.changeset/hip-seals-read.md b/.changeset/hip-seals-read.md
index a845151cc8..853d812bb3 100644
--- a/.changeset/hip-seals-read.md
+++ b/.changeset/hip-seals-read.md
@@ -1,2 +1,3 @@
 ---
+
 ---
diff --git a/.changeset/rude-pears-open.md b/.changeset/rude-pears-open.md
index a845151cc8..853d812bb3 100644
--- a/.changeset/rude-pears-open.md
+++ b/.changeset/rude-pears-open.md
@@ -1,2 +1,3 @@
 ---
+
 ---
diff --git a/.changeset/small-friends-grin.md b/.changeset/small-friends-grin.md
index a845151cc8..853d812bb3 100644
--- a/.changeset/small-friends-grin.md
+++ b/.changeset/small-friends-grin.md
@@ -1,2 +1,3 @@
 ---
+
 ---
diff --git a/.dprint.jsonc b/.dprint.jsonc
index 29a4073ebd..5e6b903786 100644
--- a/.dprint.jsonc
+++ b/.dprint.jsonc
@@ -22,6 +22,7 @@
   },
   "toml": {
   },
+  // cSpell:disable-next-line
   "malva": {
   },
   "markup": {
@@ -57,13 +58,14 @@
     "packages/**/test/**/hotCases/**",
   ],
   "plugins": [
-    "https://plugins.dprint.dev/exec-0.5.0.json@8d9972eee71fa1590e04873540421f3eda7674d0f1aae3d7c788615e7b7413d0",
-    "https://plugins.dprint.dev/typescript-0.91.3.wasm",
-    "https://plugins.dprint.dev/json-0.19.3.wasm",
-    "https://plugins.dprint.dev/markdown-0.17.1.wasm",
-    "https://plugins.dprint.dev/toml-0.6.2.wasm",
-    "https://plugins.dprint.dev/g-plane/malva-v0.5.1.wasm",
-    "https://plugins.dprint.dev/g-plane/markup_fmt-v0.10.0.wasm",
-    "https://plugins.dprint.dev/g-plane/pretty_yaml-v0.3.0.wasm",
+    "https://plugins.dprint.dev/dockerfile-0.3.2.wasm",
+    "https://plugins.dprint.dev/exec-0.5.1.json@492414e39dea4dccc07b4af796d2f4efdb89e84bae2bd4e1e924c0cc050855bf",
+    "https://plugins.dprint.dev/typescript-0.94.0.wasm",
+    "https://plugins.dprint.dev/json-0.20.0.wasm",
+    "https://plugins.dprint.dev/markdown-0.18.0.wasm",
+    "https://plugins.dprint.dev/toml-0.7.0.wasm",
+    "https://plugins.dprint.dev/g-plane/malva-v0.11.2.wasm",
+    "https://plugins.dprint.dev/g-plane/markup_fmt-v0.19.0.wasm",
+    "https://plugins.dprint.dev/g-plane/pretty_yaml-v0.5.0.wasm",
   ],
 }
diff --git a/cspell.jsonc b/cspell.jsonc
index e239b41a65..c656c84e0c 100644
--- a/cspell.jsonc
+++ b/cspell.jsonc
@@ -138,6 +138,8 @@
   ],
   // Glob
   "ignorePaths": [
+    // cSpell:disable-next-line
+    ".cargo/nextest.toml",
     ".gitignore",
     // Tests
     "coverage",
diff --git a/packages/web-platform/web-elements/src/common-css/linear.css b/packages/web-platform/web-elements/src/common-css/linear.css
index a0f8c69064..8f0f77976b 100644
--- a/packages/web-platform/web-elements/src/common-css/linear.css
+++ b/packages/web-platform/web-elements/src/common-css/linear.css
@@ -196,14 +196,16 @@ x-refresh-view,
 x-swiper-item,
 x-viewpager-item-ng,
 x-viewpager-ng {
-  flex-wrap: var(--lynx-display-linear, nowrap) var(
-    --lynx-display-flex,
-    var(--flex-wrap)
-  );
-  flex-direction: var(--lynx-display-linear, var(--linear-flex-direction)) var(
-    --lynx-display-flex,
-    var(--flex-direction)
-  );
+  flex-wrap: var(--lynx-display-linear, nowrap)
+    var(
+      --lynx-display-flex,
+      var(--flex-wrap)
+    );
+  flex-direction: var(--lynx-display-linear, var(--linear-flex-direction))
+    var(
+      --lynx-display-flex,
+      var(--flex-direction)
+    );
   justify-content: var(--lynx-display-linear, var(--linear-justify-content));
 }
 
diff --git a/packages/web-platform/web-explorer/index.html b/packages/web-platform/web-explorer/index.html
index ae99654830..c36042d4ec 100644
--- a/packages/web-platform/web-explorer/index.html
+++ b/packages/web-platform/web-explorer/index.html
@@ -8,9 +8,7 @@
     <link rel="icon" type="image/png" href="icons/icon-128x128.png">
     <link rel="stylesheet" href="dist/static/css/index.css">
     <title>Lynx Explorer on Web Platform</title>
-    <script
-      src="https://www.unpkg.com/@vant/touch-emulator@1.4.0/dist/index.js"
-    ></script>
+    <script src="https://www.unpkg.com/@vant/touch-emulator@1.4.0/dist/index.js"></script>
     <script type="module" src="./dist/static/js/index.js"></script>
     <style>
     #install-button {
@@ -48,15 +46,13 @@
     }
     </style>
   </head>
-  <body
-    style="margin: 0; display: flex; flex-direction: column; align-items: stretch; width:100vw; max-height: 100vh;"
-  >
-    <div style="display: flex; flex: 1 1 0;">
+  <body style="margin: 0; display: flex; flex-direction: column; align-items: stretch; width: 100vw; max-height: 100vh">
+    <div style="display: flex; flex: 1 1 0">
       <div
         id="nav"
-        style="display: none; width:100%; border-width: 0px 0px 2px 0px; border-style: solid;"
+        style="display: none; width: 100%; border-width: 0px 0px 2px 0px; border-style: solid"
       >
-        <div style="margin: 10px;" id="back-button" role="button">
+        <div style="margin: 10px" id="back-button" role="button">
           <svg
             viewBox="0 0 24 24"
             fill="none"
@@ -79,53 +75,54 @@
     </div>
     <lynx-view
       id="lynx-view"
-      style="flex: 0 1 100vh; height:100vh;"
+      style="flex: 0 1 100vh; height: 100vh"
     ></lynx-view>
     <video
       id="qr-scanner"
-      style="position: fixed; height: 100vh; width: 100vw;z-index:-1;"
+      style="position: fixed; height: 100vh; width: 100vw; z-index: -1"
     >
     </video>
-    <button id="install-button" style="display: none;"
-    >Install Lynx Explorer</button>
+    <button id="install-button" style="display: none">
+      Install Lynx Explorer
+    </button>
     <script>
     window.addEventListener('load', () => {
-      let deferredPrompt;
-      const addBtn = document.getElementById('install-button');
+        let deferredPrompt;
+        const addBtn = document.getElementById('install-button');
 
-      window.addEventListener('beforeinstallprompt', (e) => {
-        e.preventDefault();
-        deferredPrompt = e;
-        addBtn.style.display = 'block';
+        window.addEventListener('beforeinstallprompt', (e) => {
+          e.preventDefault();
+          deferredPrompt = e;
+          addBtn.style.display = 'block';
 
-        // Add timeout to hide the button
-        setTimeout(() => {
-          addBtn.classList.add('fade-out');
+          // Add timeout to hide the button
           setTimeout(() => {
-            addBtn.style.display = 'none';
-          }, 500);
-        }, 5000);
+            addBtn.classList.add('fade-out');
+            setTimeout(() => {
+              addBtn.style.display = 'none';
+            }, 500);
+          }, 5000);
 
-        addBtn.addEventListener('click', () => {
-          addBtn.style.display = 'none';
-          deferredPrompt.prompt();
-          deferredPrompt.userChoice.then((choiceResult) => {
-            if (choiceResult.outcome === 'accepted') {
-              console.log('User accepted the install prompt');
-            } else {
-              console.log('User dismissed the install prompt');
-            }
-            deferredPrompt = null;
+          addBtn.addEventListener('click', () => {
+            addBtn.style.display = 'none';
+            deferredPrompt.prompt();
+            deferredPrompt.userChoice.then((choiceResult) => {
+              if (choiceResult.outcome === 'accepted') {
+                console.log('User accepted the install prompt');
+              } else {
+                console.log('User dismissed the install prompt');
+              }
+              deferredPrompt = null;
+            });
           });
         });
-      });
 
-      if (window.matchMedia('(display-mode: standalone)').matches) {
-        console.log('PWA is installed');
-      } else {
-        console.log('PWA is not installed');
-      }
-    });
+        if (window.matchMedia('(display-mode: standalone)').matches) {
+          console.log('PWA is installed');
+        } else {
+          console.log('PWA is not installed');
+        }
+      });
     </script>
   </body>
 </html>
diff --git a/packages/web-platform/web-tests/tests/web-elements/filter-image/basic-placeholder.html b/packages/web-platform/web-tests/tests/web-elements/filter-image/basic-placeholder.html
index 64eab34ae8..8c658e8023 100644
--- a/packages/web-platform/web-tests/tests/web-elements/filter-image/basic-placeholder.html
+++ b/packages/web-platform/web-tests/tests/web-elements/filter-image/basic-placeholder.html
@@ -34,7 +34,7 @@
     <x-view class="page">
       <filter-image
         placeholder="../../resources/firefox-logo.png"
-        style="width:100px; height:400px; background-color: aquamarine;"
+        style="width: 100px; height: 400px; background-color: aquamarine"
       >
       </filter-image>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/filter-image/basic.html b/packages/web-platform/web-tests/tests/web-elements/filter-image/basic.html
index 2a48da0381..86c5a86a14 100644
--- a/packages/web-platform/web-tests/tests/web-elements/filter-image/basic.html
+++ b/packages/web-platform/web-tests/tests/web-elements/filter-image/basic.html
@@ -35,7 +35,7 @@
     <x-view class="page">
       <filter-image
         src="../../resources/firefox-logo.png"
-        style="width:100px; height:400px; background-color: aquamarine;"
+        style="width: 100px; height: 400px; background-color: aquamarine"
       >
       </filter-image>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/filter-image/blur-radius.html b/packages/web-platform/web-tests/tests/web-elements/filter-image/blur-radius.html
index a835ded3ff..3a1181a59e 100644
--- a/packages/web-platform/web-tests/tests/web-elements/filter-image/blur-radius.html
+++ b/packages/web-platform/web-tests/tests/web-elements/filter-image/blur-radius.html
@@ -35,7 +35,7 @@
       <filter-image
         src="../../resources/firefox-logo.png"
         blur-radius="20px"
-        style="width:100px; height:100px; background-color: aquamarine;"
+        style="width: 100px; height: 100px; background-color: aquamarine"
       ></filter-image>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/filter-image/drop-shadow.html b/packages/web-platform/web-tests/tests/web-elements/filter-image/drop-shadow.html
index eef059889c..c39c19ee09 100644
--- a/packages/web-platform/web-tests/tests/web-elements/filter-image/drop-shadow.html
+++ b/packages/web-platform/web-tests/tests/web-elements/filter-image/drop-shadow.html
@@ -35,7 +35,7 @@
     <x-view class="page">
       <filter-image
         src="../../resources/firefox-logo.png"
-        style="width:200px; height:200px;"
+        style="width: 200px; height: 200px"
         drop-shadow="30px 10px 4px #4444dd"
       ></filter-image>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/filter-image/event-error.html b/packages/web-platform/web-tests/tests/web-elements/filter-image/event-error.html
index 2fbeea23a3..946a5a141d 100644
--- a/packages/web-platform/web-tests/tests/web-elements/filter-image/event-error.html
+++ b/packages/web-platform/web-tests/tests/web-elements/filter-image/event-error.html
@@ -32,16 +32,22 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <script type="module">
-    document.querySelector('#target').addEventListener('error', (ev) => {
-      ev.target.style.setProperty('background-color', 'green');
-    });
-    document.querySelector('#target').setAttribute('src', '/unknown/path');
+    document.querySelector('#target').addEventListener(
+        'error',
+        (ev) => {
+          ev.target.style.setProperty('background-color', 'green');
+        },
+      );
+      document.querySelector('#target').setAttribute(
+        'src',
+        '/unknown/path',
+      );
     </script>
     <x-view class="page">
       <filter-image
         src="../../resources/firefox-logo.png"
         id="target"
-        style="width:100px; height:400px; background-color: aquamarine;"
+        style="width: 100px; height: 400px; background-color: aquamarine"
       >
       </filter-image>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/filter-image/event-load.html b/packages/web-platform/web-tests/tests/web-elements/filter-image/event-load.html
index 4d3a619674..add9771eba 100644
--- a/packages/web-platform/web-tests/tests/web-elements/filter-image/event-load.html
+++ b/packages/web-platform/web-tests/tests/web-elements/filter-image/event-load.html
@@ -33,19 +33,19 @@
     <script src="/web-elements.js" defer></script>
     <script type="module">
     document.querySelector('#target').addEventListener('load', (ev) => {
-      if (ev.detail.height === 984 && ev.detail.width === 953) {
-        ev.target.style.setProperty('background-color', 'green');
-      }
-    });
-    document.querySelector('#target').setAttribute(
-      'src',
-      '../../resources/firefox-logo.png',
-    );
+        if (ev.detail.height === 984 && ev.detail.width === 953) {
+          ev.target.style.setProperty('background-color', 'green');
+        }
+      });
+      document.querySelector('#target').setAttribute(
+        'src',
+        '../../resources/firefox-logo.png',
+      );
     </script>
     <x-view class="page">
       <filter-image
         id="target"
-        style="width:100px; height:400px; background-color: aquamarine;"
+        style="width: 100px; height: 400px; background-color: aquamarine"
       >
       </filter-image>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/filter-image/mode-aspectfill-placeholder.html b/packages/web-platform/web-tests/tests/web-elements/filter-image/mode-aspectfill-placeholder.html
index 8f13858f0f..860bf64ee0 100644
--- a/packages/web-platform/web-tests/tests/web-elements/filter-image/mode-aspectfill-placeholder.html
+++ b/packages/web-platform/web-tests/tests/web-elements/filter-image/mode-aspectfill-placeholder.html
@@ -35,7 +35,7 @@
       <filter-image
         mode="aspectFill"
         placeholder="../../resources/firefox-logo.png"
-        style="width:100px; height:400px; background-color: aquamarine;"
+        style="width: 100px; height: 400px; background-color: aquamarine"
       ></filter-image>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/filter-image/mode-aspectfill.html b/packages/web-platform/web-tests/tests/web-elements/filter-image/mode-aspectfill.html
index 310034f929..53d902c5e6 100644
--- a/packages/web-platform/web-tests/tests/web-elements/filter-image/mode-aspectfill.html
+++ b/packages/web-platform/web-tests/tests/web-elements/filter-image/mode-aspectfill.html
@@ -36,7 +36,7 @@
       <filter-image
         mode="aspectFill"
         src="../../resources/firefox-logo.png"
-        style="width:100px; height:400px; background-color: aquamarine;"
+        style="width: 100px; height: 400px; background-color: aquamarine"
       ></filter-image>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/filter-image/mode-aspectfit-placeholder.html b/packages/web-platform/web-tests/tests/web-elements/filter-image/mode-aspectfit-placeholder.html
index a9d10f527d..2f11b75ea7 100644
--- a/packages/web-platform/web-tests/tests/web-elements/filter-image/mode-aspectfit-placeholder.html
+++ b/packages/web-platform/web-tests/tests/web-elements/filter-image/mode-aspectfit-placeholder.html
@@ -35,7 +35,7 @@
       <filter-image
         mode="aspectFit"
         placeholder="../../resources/firefox-logo.png"
-        style="width:100px; height:400px; background-color: aquamarine;"
+        style="width: 100px; height: 400px; background-color: aquamarine"
       ></filter-image>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/filter-image/mode-aspectfit.html b/packages/web-platform/web-tests/tests/web-elements/filter-image/mode-aspectfit.html
index f96cac3cff..b1a3d625c5 100644
--- a/packages/web-platform/web-tests/tests/web-elements/filter-image/mode-aspectfit.html
+++ b/packages/web-platform/web-tests/tests/web-elements/filter-image/mode-aspectfit.html
@@ -36,7 +36,7 @@
       <filter-image
         mode="aspectFit"
         src="../../resources/firefox-logo.png"
-        style="width:100px; height:400px; background-color: aquamarine;"
+        style="width: 100px; height: 400px; background-color: aquamarine"
       ></filter-image>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/filter-image/mode-center-placeholder.html b/packages/web-platform/web-tests/tests/web-elements/filter-image/mode-center-placeholder.html
index f0ca99d439..85c4977d22 100644
--- a/packages/web-platform/web-tests/tests/web-elements/filter-image/mode-center-placeholder.html
+++ b/packages/web-platform/web-tests/tests/web-elements/filter-image/mode-center-placeholder.html
@@ -36,7 +36,7 @@
       <filter-image
         mode="center"
         placeholder="../../resources/firefox-logo.png"
-        style="width:100px; height:400px; background-color: aquamarine;"
+        style="width: 100px; height: 400px; background-color: aquamarine"
       ></filter-image>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/filter-image/mode-center.html b/packages/web-platform/web-tests/tests/web-elements/filter-image/mode-center.html
index 7a8088b812..7d1f4fea4e 100644
--- a/packages/web-platform/web-tests/tests/web-elements/filter-image/mode-center.html
+++ b/packages/web-platform/web-tests/tests/web-elements/filter-image/mode-center.html
@@ -36,7 +36,7 @@
       <filter-image
         mode="center"
         src="../../resources/firefox-logo.png"
-        style="width:100px; height:400px; background-color: aquamarine;"
+        style="width: 100px; height: 400px; background-color: aquamarine"
       ></filter-image>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/layout/flex-lynx-computed-direction.html b/packages/web-platform/web-tests/tests/web-elements/layout/flex-lynx-computed-direction.html
index c0f5450376..a6e9bf0263 100644
--- a/packages/web-platform/web-tests/tests/web-elements/layout/flex-lynx-computed-direction.html
+++ b/packages/web-platform/web-tests/tests/web-elements/layout/flex-lynx-computed-direction.html
@@ -41,17 +41,19 @@
 
   <body>
     <script src="/web-elements.js" defer></script>
-    <x-view style="--flex-direction:column">
+    <x-view style="--flex-direction: column">
       <x-view
         lynx-computed-display="flex"
-        style="display:flex;--lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex);width:100vw;height: 100vh;"
+        style="display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); width: 100vw; height: 100vh"
       >
-        <x-view style="width:100px;height:100px;background-color:red;"></x-view>
         <x-view
-          style="width:100px;height:100px;background-color:green;"
+          style="width: 100px; height: 100px; background-color: red"
         ></x-view>
         <x-view
-          style="width:100px;height:100px;background-color:yellow;"
+          style="width: 100px; height: 100px; background-color: green"
+        ></x-view>
+        <x-view
+          style="width: 100px; height: 100px; background-color: yellow"
         ></x-view>
       </x-view>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/layout/flex-lynx-computed-grow.html b/packages/web-platform/web-tests/tests/web-elements/layout/flex-lynx-computed-grow.html
index c2f070c6be..699826e4a1 100644
--- a/packages/web-platform/web-tests/tests/web-elements/layout/flex-lynx-computed-grow.html
+++ b/packages/web-platform/web-tests/tests/web-elements/layout/flex-lynx-computed-grow.html
@@ -41,10 +41,10 @@
 
   <body>
     <script src="/web-elements.js" defer></script>
-    <x-view style="--flex-grow:1;width:100vw;height:100vh">
+    <x-view style="--flex-grow: 1; width: 100vw; height: 100vh">
       <x-view
         lynx-computed-display="flex"
-        style="display:flex;--lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex);width: 50%;height:50%;background-color:red;flex-grow: var(--flex-grow)!important"
+        style="display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); width: 50%; height: 50%; background-color: red; flex-grow: var(--flex-grow) !important"
         can-use-linear-container
       >
       </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/layout/flex-lynx-computed-shrink.html b/packages/web-platform/web-tests/tests/web-elements/layout/flex-lynx-computed-shrink.html
index 2be2aa63c7..5ab0010efe 100644
--- a/packages/web-platform/web-tests/tests/web-elements/layout/flex-lynx-computed-shrink.html
+++ b/packages/web-platform/web-tests/tests/web-elements/layout/flex-lynx-computed-shrink.html
@@ -42,19 +42,19 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="display:linear;--lynx-display:linear;--lynx-display-toggle:var(--lynx-display-linear);"
+      style="display: linear; --lynx-display: linear; --lynx-display-toggle: var(--lynx-display-linear)"
     >
       <x-view
-        style="width:50vw;height:50vh;display:flex;--lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex);"
+        style="width: 50vw; height: 50vh; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex)"
       >
         <x-view
           lynx-computed-display="flex"
-          style="width:30vw;height:100%;background-color:red;flex-shrink: var(--flex-shrink)!important"
+          style="width: 30vw; height: 100%; background-color: red; flex-shrink: var(--flex-shrink) !important"
         >
         </x-view>
         <x-view
           lynx-computed-display="flex"
-          style="width:30vw;height:100%;background-color:blue;flex-shrink: var(--flex-shrink)!important"
+          style="width: 30vw; height: 100%; background-color: blue; flex-shrink: var(--flex-shrink) !important"
         >
         </x-view>
       </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/layout/lynx-display-do-not-use-flatten-tree.html b/packages/web-platform/web-tests/tests/web-elements/layout/lynx-display-do-not-use-flatten-tree.html
index 56318e8b61..7c45e81707 100644
--- a/packages/web-platform/web-tests/tests/web-elements/layout/lynx-display-do-not-use-flatten-tree.html
+++ b/packages/web-platform/web-tests/tests/web-elements/layout/lynx-display-do-not-use-flatten-tree.html
@@ -32,21 +32,21 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-list
-      style="display:flex;--lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex);"
+      style="display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex)"
     >
       <x-view
         id="x-list-child"
-        style="height:100px;width:100px;background: green;"
+        style="height: 100px; width: 100px; background: green"
       >
       </x-view>
     </x-list>
 
     <x-refresh-view
-      style="display:flex;--lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex);"
+      style="display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex)"
     >
       <x-view
         id="x-refresh-view-child"
-        style="height:100px;width:100px;background: orange;"
+        style="height: 100px; width: 100px; background: orange"
       >
       </x-view>
     </x-refresh-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/layout/percentage-cyclic-sibiling-linear.html b/packages/web-platform/web-tests/tests/web-elements/layout/percentage-cyclic-sibiling-linear.html
index 4ed8464467..6c32f6e654 100644
--- a/packages/web-platform/web-tests/tests/web-elements/layout/percentage-cyclic-sibiling-linear.html
+++ b/packages/web-platform/web-tests/tests/web-elements/layout/percentage-cyclic-sibiling-linear.html
@@ -32,25 +32,25 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="--lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex);height: 100vh; width:100vw;"
+      style="--lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); height: 100vh; width: 100vw"
     >
       <x-view
-        style="--lynx-display:linear; --lynx-display-toggle:var(--lynx-display-linear);flex-direction:column"
+        style="--lynx-display: linear; --lynx-display-toggle: var(--lynx-display-linear); flex-direction: column"
       >
         <!-- Editor's Node:
     If the display is linear, the result is different from lynx sdk. -->
         <x-view
-          style="--lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex);height:auto; width:100px; background-color: wheat;"
+          style="--lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); height: auto; width: 100px; background-color: wheat"
         >
           <x-view
-            style="--lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex);height: 50%; width:100px; background-color: sandybrown;"
+            style="--lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); height: 50%; width: 100px; background-color: sandybrown"
           >
             <x-view
-              style="height: 50%; width:100px; background-color: pink;"
+              style="height: 50%; width: 100px; background-color: pink"
             ></x-view>
           </x-view>
           <x-view
-            style="height: 30px; width:100px; background-color: yellow;"
+            style="height: 30px; width: 100px; background-color: yellow"
           ></x-view>
         </x-view>
       </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/layout/percentage-cyclic-sibiling.html b/packages/web-platform/web-tests/tests/web-elements/layout/percentage-cyclic-sibiling.html
index 43061eb769..eb81176ca0 100644
--- a/packages/web-platform/web-tests/tests/web-elements/layout/percentage-cyclic-sibiling.html
+++ b/packages/web-platform/web-tests/tests/web-elements/layout/percentage-cyclic-sibiling.html
@@ -32,23 +32,23 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="--lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex);height: 100vh; width:100vw;"
+      style="--lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); height: 100vh; width: 100vw"
     >
       <x-view
-        style="--lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex);flex-direction:column"
+        style="--lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column"
       >
         <x-view
-          style="--lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex);height:auto; width:100px; background-color: wheat;"
+          style="--lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); height: auto; width: 100px; background-color: wheat"
         >
           <x-view
-            style="--lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex);height: 50%; width:100px; background-color: sandybrown;"
+            style="--lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); height: 50%; width: 100px; background-color: sandybrown"
           >
             <x-view
-              style="height: 50%; width:100px; background-color: pink;"
+              style="height: 50%; width: 100px; background-color: pink"
             ></x-view>
           </x-view>
           <x-view
-            style="height: 30px; width:100px; background-color: yellow;"
+            style="height: 30px; width: 100px; background-color: yellow"
           ></x-view>
         </x-view>
       </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/layout/percentage-cyclic-text.html b/packages/web-platform/web-tests/tests/web-elements/layout/percentage-cyclic-text.html
index a8a5c899f6..a3c3e5db4c 100644
--- a/packages/web-platform/web-tests/tests/web-elements/layout/percentage-cyclic-text.html
+++ b/packages/web-platform/web-tests/tests/web-elements/layout/percentage-cyclic-text.html
@@ -33,12 +33,12 @@
     <script src="/web-elements.js" defer></script>
     <x-view
       id="middle"
-      style="--lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction:column; height:150px; width:fit-content; background:sandybrown"
+      style="--lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column; height: 150px; width: fit-content; background: sandybrown"
     >
       <!-- Editor's Node: the result is different from lynx sdk. -->
       <x-text
         id="inner"
-        style="--lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction:column; height:100px; width:50%;background:pink; overflow:hidden; overflow-wrap:normal;"
+        style="--lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column; height: 100px; width: 50%; background: pink; overflow: hidden; overflow-wrap: normal"
       >
         12345678901234567890
       </x-text>
diff --git a/packages/web-platform/web-tests/tests/web-elements/layout/percentage-cyclic.html b/packages/web-platform/web-tests/tests/web-elements/layout/percentage-cyclic.html
index 56e028b895..afeb49f4fc 100644
--- a/packages/web-platform/web-tests/tests/web-elements/layout/percentage-cyclic.html
+++ b/packages/web-platform/web-tests/tests/web-elements/layout/percentage-cyclic.html
@@ -33,13 +33,16 @@
     <script src="/web-elements.js" defer></script>
     <x-view
       id="outer"
-      style="--lynx-display:linear; --lynx-display-toggle:var(--lynx-display-linear); height:auto; width:200px; background:wheat;"
+      style="--lynx-display: linear; --lynx-display-toggle: var(--lynx-display-linear); height: auto; width: 200px; background: wheat"
     >
       <x-view
         id="middle"
-        style="--lynx-display:linear; --lynx-display-toggle:var(--lynx-display-linear); height:50%; width:150px; background:sandybrown"
+        style="--lynx-display: linear; --lynx-display-toggle: var(--lynx-display-linear); height: 50%; width: 150px; background: sandybrown"
       >
-        <x-view id="inner" style="height:100px; width:100px; background:pink">
+        <x-view
+          id="inner"
+          style="height: 100px; width: 100px; background: pink"
+        >
         </x-view>
       </x-view>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/performance/div-10000-fp.html b/packages/web-platform/web-tests/tests/web-elements/performance/div-10000-fp.html
index 67f06973f4..ce57a35000 100644
--- a/packages/web-platform/web-tests/tests/web-elements/performance/div-10000-fp.html
+++ b/packages/web-platform/web-tests/tests/web-elements/performance/div-10000-fp.html
@@ -25,12 +25,12 @@
     />
     <script type="module">
     const top = document.createElement('div');
-    queueMicrotask(() => {
-      for (let ii = 0; ii < 10000; ii++) {
-        top.append(document.createElement('div'));
-      }
-    });
-    document.body.append(top);
+      queueMicrotask(() => {
+        for (let ii = 0; ii < 10000; ii++) {
+          top.append(document.createElement('div'));
+        }
+      });
+      document.body.append(top);
     </script>
     <style>
     div {
diff --git a/packages/web-platform/web-tests/tests/web-elements/performance/div-10000.html b/packages/web-platform/web-tests/tests/web-elements/performance/div-10000.html
index 6103006695..ad5e3da2c0 100644
--- a/packages/web-platform/web-tests/tests/web-elements/performance/div-10000.html
+++ b/packages/web-platform/web-tests/tests/web-elements/performance/div-10000.html
@@ -26,12 +26,12 @@
     />
     <script type="module">
     const top = document.createElement('div');
-    queueMicrotask(() => {
-      for (let ii = 0; ii < 10000; ii++) {
-        top.append(document.createElement('div'));
-      }
-    });
-    document.body.append(top);
+      queueMicrotask(() => {
+        for (let ii = 0; ii < 10000; ii++) {
+          top.append(document.createElement('div'));
+        }
+      });
+      document.body.append(top);
     </script>
     <style>
     div {
diff --git a/packages/web-platform/web-tests/tests/web-elements/performance/p-10000.html b/packages/web-platform/web-tests/tests/web-elements/performance/p-10000.html
index 171b473e73..b2da2b4faf 100644
--- a/packages/web-platform/web-tests/tests/web-elements/performance/p-10000.html
+++ b/packages/web-platform/web-tests/tests/web-elements/performance/p-10000.html
@@ -26,14 +26,14 @@
     <script src="./performanceObserver.js"></script>
     <script type="module">
     const top = document.createElement('div');
-    queueMicrotask(() => {
-      for (let ii = 0; ii < 10000; ii++) {
-        const text = document.createElement('p');
-        text.innerText = 'hello lynx';
-        top.append(text);
-      }
-    });
-    document.body.append(top);
+      queueMicrotask(() => {
+        for (let ii = 0; ii < 10000; ii++) {
+          const text = document.createElement('p');
+          text.innerText = 'hello lynx';
+          top.append(text);
+        }
+      });
+      document.body.append(top);
     </script>
     <style>
     x-view {
diff --git a/packages/web-platform/web-tests/tests/web-elements/performance/raw-text-large.html b/packages/web-platform/web-tests/tests/web-elements/performance/raw-text-large.html
index 58d28926de..8c1f3be7ab 100644
--- a/packages/web-platform/web-tests/tests/web-elements/performance/raw-text-large.html
+++ b/packages/web-platform/web-tests/tests/web-elements/performance/raw-text-large.html
@@ -21,10 +21,12 @@
     />
     <script type="module">
     const htmlTokens = [];
-    for (let ii = 0; ii < 3000; ii++) {
-      htmlTokens.push('<x-text><raw-text text="hello lynx"></raw-text></x-text>');
-    }
-    document.body.innerHTML = htmlTokens.join('');
+      for (let ii = 0; ii < 3000; ii++) {
+        htmlTokens.push(
+          '<x-text><raw-text text="hello lynx"></raw-text></x-text>',
+        );
+      }
+      document.body.innerHTML = htmlTokens.join('');
     </script>
     <style>
     x-view {
diff --git a/packages/web-platform/web-tests/tests/web-elements/performance/react-10000-div-with-layouteffect.html b/packages/web-platform/web-tests/tests/web-elements/performance/react-10000-div-with-layouteffect.html
index d0a2974d1f..483fb31912 100644
--- a/packages/web-platform/web-tests/tests/web-elements/performance/react-10000-div-with-layouteffect.html
+++ b/packages/web-platform/web-tests/tests/web-elements/performance/react-10000-div-with-layouteffect.html
@@ -28,31 +28,40 @@
     <script src="./react-dom.production.min.js"></script>
     <script type="module">
     const top = document.createElement('div');
-    document.body.append(top);
-    queueMicrotask(() => {
-      const reactComp = () => {
-        const ref = React.useRef();
-        const [s, set] = React.useState();
-        React.useLayoutEffect(() => {
-          let val = getComputedStyle(ref.current).getPropertyValue(
-            '--lynx-display',
-          );
-          val = getComputedStyle(ref.current).getPropertyValue('--lynx-display1');
-          val = getComputedStyle(ref.current).getPropertyValue('--lynx-display2');
-          val = getComputedStyle(ref.current).getPropertyValue('--lynx-display3');
-          set('linear');
-        });
-        return React.createElement('div', { ref, 'computed-display': s });
-      };
-      const reactRoot = ReactDOM.createRoot(top);
-      reactRoot.render(React.createElement(() => {
-        const reactElements = [];
-        for (let ii = 0; ii < 10000; ii++) {
-          reactElements.push(React.createElement(reactComp));
-        }
-        return reactElements;
-      }));
-    });
+      document.body.append(top);
+      queueMicrotask(() => {
+        const reactComp = () => {
+          const ref = React.useRef();
+          const [s, set] = React.useState();
+          React.useLayoutEffect(() => {
+            let val = getComputedStyle(ref.current).getPropertyValue(
+              '--lynx-display',
+            );
+            val = getComputedStyle(ref.current).getPropertyValue(
+              '--lynx-display1',
+            );
+            val = getComputedStyle(ref.current).getPropertyValue(
+              '--lynx-display2',
+            );
+            val = getComputedStyle(ref.current).getPropertyValue(
+              '--lynx-display3',
+            );
+            set('linear');
+          });
+          return React.createElement('div', {
+            ref,
+            'computed-display': s,
+          });
+        };
+        const reactRoot = ReactDOM.createRoot(top);
+        reactRoot.render(React.createElement(() => {
+          const reactElements = [];
+          for (let ii = 0; ii < 10000; ii++) {
+            reactElements.push(React.createElement(reactComp));
+          }
+          return reactElements;
+        }));
+      });
     </script>
     <style>
     div > div {
diff --git a/packages/web-platform/web-tests/tests/web-elements/performance/react-10000-div.html b/packages/web-platform/web-tests/tests/web-elements/performance/react-10000-div.html
index 4336ff0e1d..00200c7ad6 100644
--- a/packages/web-platform/web-tests/tests/web-elements/performance/react-10000-div.html
+++ b/packages/web-platform/web-tests/tests/web-elements/performance/react-10000-div.html
@@ -28,15 +28,15 @@
     <script src="./react-dom.production.min.js"></script>
     <script type="module">
     const top = document.createElement('div');
-    document.body.append(top);
-    const reactRoot = ReactDOM.createRoot(top);
-    reactRoot.render(React.createElement(() => {
-      const reactElements = [];
-      for (let ii = 0; ii < 10000; ii++) {
-        reactElements.push(React.createElement('div'));
-      }
-      return reactElements;
-    }));
+      document.body.append(top);
+      const reactRoot = ReactDOM.createRoot(top);
+      reactRoot.render(React.createElement(() => {
+        const reactElements = [];
+        for (let ii = 0; ii < 10000; ii++) {
+          reactElements.push(React.createElement('div'));
+        }
+        return reactElements;
+      }));
     </script>
   </head>
 
diff --git a/packages/web-platform/web-tests/tests/web-elements/performance/set-lycss.html b/packages/web-platform/web-tests/tests/web-elements/performance/set-lycss.html
index e389bf3b62..d5636c1523 100644
--- a/packages/web-platform/web-tests/tests/web-elements/performance/set-lycss.html
+++ b/packages/web-platform/web-tests/tests/web-elements/performance/set-lycss.html
@@ -25,11 +25,11 @@
     />
     <script type="module">
     const target = document.createElement('x-view');
-    queueMicrotask(() => {
-      target.lycss = 'background-color:red';
-      document.body.append(target);
-      document.body.append(document.createElement('x-view'));
-    });
+      queueMicrotask(() => {
+        target.lycss = 'background-color:red';
+        document.body.append(target);
+        document.body.append(document.createElement('x-view'));
+      });
     </script>
   </head>
 
diff --git a/packages/web-platform/web-tests/tests/web-elements/performance/simple-append-two-dom.html b/packages/web-platform/web-tests/tests/web-elements/performance/simple-append-two-dom.html
index 013120c13e..f85639b5cc 100644
--- a/packages/web-platform/web-tests/tests/web-elements/performance/simple-append-two-dom.html
+++ b/packages/web-platform/web-tests/tests/web-elements/performance/simple-append-two-dom.html
@@ -25,9 +25,9 @@
     />
     <script type="module">
     queueMicrotask(() => {
-      document.body.append(document.createElement('x-view'));
-      document.body.append(document.createElement('x-view'));
-    });
+        document.body.append(document.createElement('x-view'));
+        document.body.append(document.createElement('x-view'));
+      });
     </script>
   </head>
 
diff --git a/packages/web-platform/web-tests/tests/web-elements/performance/x-list-waterfall-1000.html b/packages/web-platform/web-tests/tests/web-elements/performance/x-list-waterfall-1000.html
index d4f9d756e9..699c12075e 100644
--- a/packages/web-platform/web-tests/tests/web-elements/performance/x-list-waterfall-1000.html
+++ b/packages/web-platform/web-tests/tests/web-elements/performance/x-list-waterfall-1000.html
@@ -26,29 +26,29 @@
 
     <script type="module">
     const list = document.createElement('x-list');
-    list.setAttribute('list-type', 'waterfall');
-    list.setAttribute('span-count', '2');
+      list.setAttribute('list-type', 'waterfall');
+      list.setAttribute('span-count', '2');
 
-    function getRandomHeight() {
-      return Math.floor(Math.random() * 151) + 150; // Generates random height between 150 and 300 (inclusive)
-    }
-
-    queueMicrotask(() => {
-      for (let ii = 0; ii < 1000; ii++) {
-        const listItem = document.createElement('list-item');
-        listItem.setAttribute('item-key', ii);
-        listItem.setAttribute(
-          'style',
-          `--item-index: ${ii}; height: ${getRandomHeight()}px;`,
-        );
-        listItem.setAttribute('class', 'item');
-        const xview = document.createElement('x-view');
-        xview.innerHTML = ii;
-        listItem.append(xview);
-        list.append(listItem);
+      function getRandomHeight() {
+        return Math.floor(Math.random() * 151) + 150; // Generates random height between 150 and 300 (inclusive)
       }
-    });
-    document.querySelector('.page').appendChild(list);
+
+      queueMicrotask(() => {
+        for (let ii = 0; ii < 1000; ii++) {
+          const listItem = document.createElement('list-item');
+          listItem.setAttribute('item-key', ii);
+          listItem.setAttribute(
+            'style',
+            `--item-index: ${ii}; height: ${getRandomHeight()}px;`,
+          );
+          listItem.setAttribute('class', 'item');
+          const xview = document.createElement('x-view');
+          xview.innerHTML = ii;
+          listItem.append(xview);
+          list.append(listItem);
+        }
+      });
+      document.querySelector('.page').appendChild(list);
     </script>
     <style>
     @import url("../../common.css");
diff --git a/packages/web-platform/web-tests/tests/web-elements/performance/x-text-large.html b/packages/web-platform/web-tests/tests/web-elements/performance/x-text-large.html
index 07eeb9ec04..6e78696353 100644
--- a/packages/web-platform/web-tests/tests/web-elements/performance/x-text-large.html
+++ b/packages/web-platform/web-tests/tests/web-elements/performance/x-text-large.html
@@ -21,14 +21,14 @@
     />
     <script type="module">
     const top = document.createElement('div');
-    queueMicrotask(() => {
-      for (let ii = 0; ii < 3000; ii++) {
-        const text = document.createElement('x-text');
-        text.innerText = 'hello lynx';
-        top.append(text);
-      }
-    });
-    document.body.append(top);
+      queueMicrotask(() => {
+        for (let ii = 0; ii < 3000; ii++) {
+          const text = document.createElement('x-text');
+          text.innerText = 'hello lynx';
+          top.append(text);
+        }
+      });
+      document.body.append(top);
     </script>
     <style>
     x-view {
diff --git a/packages/web-platform/web-tests/tests/web-elements/performance/x-text-with-font.html b/packages/web-platform/web-tests/tests/web-elements/performance/x-text-with-font.html
index 1ee47fc9e8..42c8b12a63 100644
--- a/packages/web-platform/web-tests/tests/web-elements/performance/x-text-with-font.html
+++ b/packages/web-platform/web-tests/tests/web-elements/performance/x-text-with-font.html
@@ -25,10 +25,10 @@
     />
     <script type="module">
     const htmlTokens = [];
-    for (let ii = 0; ii < 3000; ii++) {
-      htmlTokens.push('<x-text>hello lynx</x-text>');
-    }
-    document.body.innerHTML = htmlTokens.join('');
+      for (let ii = 0; ii < 3000; ii++) {
+        htmlTokens.push('<x-text>hello lynx</x-text>');
+      }
+      document.body.innerHTML = htmlTokens.join('');
     </script>
     <style>
     x-view {
diff --git a/packages/web-platform/web-tests/tests/web-elements/performance/x-view-10000-fp.html b/packages/web-platform/web-tests/tests/web-elements/performance/x-view-10000-fp.html
index fe35682bc7..c5e9ac6ad8 100644
--- a/packages/web-platform/web-tests/tests/web-elements/performance/x-view-10000-fp.html
+++ b/packages/web-platform/web-tests/tests/web-elements/performance/x-view-10000-fp.html
@@ -26,12 +26,12 @@
     <script src="./performanceObserver.js"></script>
     <script type="module">
     const top = document.createElement('div');
-    queueMicrotask(() => {
-      for (let ii = 0; ii < 10000; ii++) {
-        top.append(document.createElement('x-view'));
-      }
-    });
-    document.body.append(top);
+      queueMicrotask(() => {
+        for (let ii = 0; ii < 10000; ii++) {
+          top.append(document.createElement('x-view'));
+        }
+      });
+      document.body.append(top);
     </script>
     <style>
     x-view {
diff --git a/packages/web-platform/web-tests/tests/web-elements/performance/x-view-10000.html b/packages/web-platform/web-tests/tests/web-elements/performance/x-view-10000.html
index 65e0abf0da..a0599b53b6 100644
--- a/packages/web-platform/web-tests/tests/web-elements/performance/x-view-10000.html
+++ b/packages/web-platform/web-tests/tests/web-elements/performance/x-view-10000.html
@@ -26,12 +26,12 @@
     <script src="./performanceObserver.js"></script>
     <script type="module">
     const top = document.createElement('div');
-    queueMicrotask(() => {
-      for (let ii = 0; ii < 10000; ii++) {
-        top.append(document.createElement('x-view'));
-      }
-    });
-    document.body.append(top);
+      queueMicrotask(() => {
+        for (let ii = 0; ii < 10000; ii++) {
+          top.append(document.createElement('x-view'));
+        }
+      });
+      document.body.append(top);
     </script>
   </head>
 
diff --git a/packages/web-platform/web-tests/tests/web-elements/scroll-view/basic.html b/packages/web-platform/web-tests/tests/web-elements/scroll-view/basic.html
index 80d76d0a04..2f428693bd 100644
--- a/packages/web-platform/web-tests/tests/web-elements/scroll-view/basic.html
+++ b/packages/web-platform/web-tests/tests/web-elements/scroll-view/basic.html
@@ -35,17 +35,17 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: row; background-color: blue;"
+      style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: row; background-color: blue"
     >
-      <scroll-view style="width:100%; height:400px;" scroll-y>
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:orange;"> </x-view>
-        <x-view style="background-color:orange;"> </x-view>
-        <x-view style="background-color:orange;"> </x-view>
-        <x-view style="background-color:orange;"> </x-view>
+      <scroll-view style="width: 100%; height: 400px" scroll-y>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: orange"> </x-view>
+        <x-view style="background-color: orange"> </x-view>
+        <x-view style="background-color: orange"> </x-view>
+        <x-view style="background-color: orange"> </x-view>
       </scroll-view>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/scroll-view/bounces-false.html b/packages/web-platform/web-tests/tests/web-elements/scroll-view/bounces-false.html
index c13014f898..e89036df73 100644
--- a/packages/web-platform/web-tests/tests/web-elements/scroll-view/bounces-false.html
+++ b/packages/web-platform/web-tests/tests/web-elements/scroll-view/bounces-false.html
@@ -36,12 +36,12 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: column; background-color: wheat;"
+      style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column; background-color: wheat"
     >
-      <scroll-view style="width:300px; height:300px;" scroll-y bounces="false">
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:slateblue;"> </x-view>
-        <x-view style="background-color:darkgoldenrod;"> </x-view>
+      <scroll-view style="width: 300px; height: 300px" scroll-y bounces="false">
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: slateblue"> </x-view>
+        <x-view style="background-color: darkgoldenrod"> </x-view>
       </scroll-view>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/scroll-view/event-scroll.html b/packages/web-platform/web-tests/tests/web-elements/scroll-view/event-scroll.html
index dd8d15dce0..577788537b 100644
--- a/packages/web-platform/web-tests/tests/web-elements/scroll-view/event-scroll.html
+++ b/packages/web-platform/web-tests/tests/web-elements/scroll-view/event-scroll.html
@@ -35,14 +35,14 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: row;"
+      style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: row"
     >
       <scroll-view
-        style="width:300px; height:400px; background-color: wheat;"
+        style="width: 300px; height: 400px; background-color: wheat"
         scroll-y
       >
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:orange;"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: orange"> </x-view>
       </scroll-view>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/scroll-view/event-scrollend.html b/packages/web-platform/web-tests/tests/web-elements/scroll-view/event-scrollend.html
index dd8d15dce0..577788537b 100644
--- a/packages/web-platform/web-tests/tests/web-elements/scroll-view/event-scrollend.html
+++ b/packages/web-platform/web-tests/tests/web-elements/scroll-view/event-scrollend.html
@@ -35,14 +35,14 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: row;"
+      style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: row"
     >
       <scroll-view
-        style="width:300px; height:400px; background-color: wheat;"
+        style="width: 300px; height: 400px; background-color: wheat"
         scroll-y
       >
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:orange;"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: orange"> </x-view>
       </scroll-view>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/scroll-view/event-scrolltolower.html b/packages/web-platform/web-tests/tests/web-elements/scroll-view/event-scrolltolower.html
index f18dfccf07..89e79f0a8a 100644
--- a/packages/web-platform/web-tests/tests/web-elements/scroll-view/event-scrolltolower.html
+++ b/packages/web-platform/web-tests/tests/web-elements/scroll-view/event-scrolltolower.html
@@ -34,22 +34,28 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <script type="module">
-    document.querySelector('scroll-view').addEventListener('scrolltolower', () => {
-      document.querySelector('div').style.setProperty('background-color', 'green');
-    });
+    document.querySelector('scroll-view').addEventListener(
+        'scrolltolower',
+        () => {
+          document.querySelector('div').style.setProperty(
+            'background-color',
+            'green',
+          );
+        },
+      );
     </script>
     <x-view
-      style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: column;"
+      style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column"
     >
       <scroll-view
-        style="width:300px; height:400px; background-color: wheat;"
+        style="width: 300px; height: 400px; background-color: wheat"
         scroll-y
         lower-threshold="100"
       >
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:orange;"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: orange"> </x-view>
       </scroll-view>
-      <div style="height:100px; width:100px; background-color: yellow;"></div>
+      <div style="height: 100px; width: 100px; background-color: yellow"></div>
     </x-view>
   </body>
 </html>
diff --git a/packages/web-platform/web-tests/tests/web-elements/scroll-view/fading-edge-length.html b/packages/web-platform/web-tests/tests/web-elements/scroll-view/fading-edge-length.html
index 1d1823ef17..4658070145 100644
--- a/packages/web-platform/web-tests/tests/web-elements/scroll-view/fading-edge-length.html
+++ b/packages/web-platform/web-tests/tests/web-elements/scroll-view/fading-edge-length.html
@@ -35,17 +35,17 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: column; "
+      style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column"
     >
       <scroll-view
         id="test"
-        style="width:300px; height:300px;background-color: wheat;"
+        style="width: 300px; height: 300px; background-color: wheat"
         scroll-y
         fading-edge-length="10px"
       >
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:slateblue;"> </x-view>
-        <x-view style="background-color:darkgoldenrod;"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: slateblue"> </x-view>
+        <x-view style="background-color: darkgoldenrod"> </x-view>
       </scroll-view>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/scroll-view/method-auto-scroll.html b/packages/web-platform/web-tests/tests/web-elements/scroll-view/method-auto-scroll.html
index bedb6cd492..c61463e2f0 100644
--- a/packages/web-platform/web-tests/tests/web-elements/scroll-view/method-auto-scroll.html
+++ b/packages/web-platform/web-tests/tests/web-elements/scroll-view/method-auto-scroll.html
@@ -35,11 +35,11 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: row;"
+      style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: row"
     >
-      <scroll-view style="width:300px; height:400px; background-color: wheat;">
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:orange;"> </x-view>
+      <scroll-view style="width: 300px; height: 400px; background-color: wheat">
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: orange"> </x-view>
       </scroll-view>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-into-view-basic-x.html b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-into-view-basic-x.html
index 1285bfdfdd..8044b42110 100644
--- a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-into-view-basic-x.html
+++ b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-into-view-basic-x.html
@@ -43,35 +43,35 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: column;"
+      style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column"
     >
       <scroll-view scroll-x id="start">
-        <x-view style="background-color:orange;"> </x-view>
-        <x-view style="background-color:tomato;"> </x-view>
-        <x-view style="background-color:thistle;"> </x-view>
-        <x-view style="background-color:forestgreen;"> </x-view>
-        <x-view style="background-color:firebrick;"> </x-view>
-        <x-view style="background-color:silver;"> </x-view>
-        <x-view style="background-color:seashell;"> </x-view>
+        <x-view style="background-color: orange"> </x-view>
+        <x-view style="background-color: tomato"> </x-view>
+        <x-view style="background-color: thistle"> </x-view>
+        <x-view style="background-color: forestgreen"> </x-view>
+        <x-view style="background-color: firebrick"> </x-view>
+        <x-view style="background-color: silver"> </x-view>
+        <x-view style="background-color: seashell"> </x-view>
       </scroll-view>
       <scroll-view scroll-x id="center">
-        <x-view style="background-color:orange;"> </x-view>
-        <x-view style="background-color:tomato;"> </x-view>
-        <x-view style="background-color:thistle;"> </x-view>
-        <x-view style="background-color:forestgreen;"> </x-view>
-        <x-view style="background-color:firebrick;"> </x-view>
-        <x-view style="background-color:silver;"> </x-view>
-        <x-view style="background-color:seashell;"> </x-view>
+        <x-view style="background-color: orange"> </x-view>
+        <x-view style="background-color: tomato"> </x-view>
+        <x-view style="background-color: thistle"> </x-view>
+        <x-view style="background-color: forestgreen"> </x-view>
+        <x-view style="background-color: firebrick"> </x-view>
+        <x-view style="background-color: silver"> </x-view>
+        <x-view style="background-color: seashell"> </x-view>
       </scroll-view>
 
       <scroll-view scroll-x id="end">
-        <x-view style="background-color:orange;"> </x-view>
-        <x-view style="background-color:tomato;"> </x-view>
-        <x-view style="background-color:thistle;"> </x-view>
-        <x-view style="background-color:forestgreen;"> </x-view>
-        <x-view style="background-color:firebrick;"> </x-view>
-        <x-view style="background-color:silver;"> </x-view>
-        <x-view style="background-color:seashell;"> </x-view>
+        <x-view style="background-color: orange"> </x-view>
+        <x-view style="background-color: tomato"> </x-view>
+        <x-view style="background-color: thistle"> </x-view>
+        <x-view style="background-color: forestgreen"> </x-view>
+        <x-view style="background-color: firebrick"> </x-view>
+        <x-view style="background-color: silver"> </x-view>
+        <x-view style="background-color: seashell"> </x-view>
       </scroll-view>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-into-view-basic.html b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-into-view-basic.html
index 28b5656c11..38c373b6b3 100644
--- a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-into-view-basic.html
+++ b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-into-view-basic.html
@@ -41,35 +41,35 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: row;"
+      style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: row"
     >
-      <scroll-view style="width:100px; height:400px;" scroll-y id="start">
-        <x-view style="background-color:orange;"> </x-view>
-        <x-view style="background-color:tomato;"> </x-view>
-        <x-view style="background-color:thistle;"> </x-view>
-        <x-view style="background-color:forestgreen;"> </x-view>
-        <x-view style="background-color:firebrick;"> </x-view>
-        <x-view style="background-color:silver;"> </x-view>
-        <x-view style="background-color:seashell;"> </x-view>
+      <scroll-view style="width: 100px; height: 400px" scroll-y id="start">
+        <x-view style="background-color: orange"> </x-view>
+        <x-view style="background-color: tomato"> </x-view>
+        <x-view style="background-color: thistle"> </x-view>
+        <x-view style="background-color: forestgreen"> </x-view>
+        <x-view style="background-color: firebrick"> </x-view>
+        <x-view style="background-color: silver"> </x-view>
+        <x-view style="background-color: seashell"> </x-view>
       </scroll-view>
-      <scroll-view style="width:100px; height:400px;" scroll-y id="center">
-        <x-view style="background-color:orange;"> </x-view>
-        <x-view style="background-color:tomato;"> </x-view>
-        <x-view style="background-color:thistle;"> </x-view>
-        <x-view style="background-color:forestgreen;"> </x-view>
-        <x-view style="background-color:firebrick;"> </x-view>
-        <x-view style="background-color:silver;"> </x-view>
-        <x-view style="background-color:seashell;"> </x-view>
+      <scroll-view style="width: 100px; height: 400px" scroll-y id="center">
+        <x-view style="background-color: orange"> </x-view>
+        <x-view style="background-color: tomato"> </x-view>
+        <x-view style="background-color: thistle"> </x-view>
+        <x-view style="background-color: forestgreen"> </x-view>
+        <x-view style="background-color: firebrick"> </x-view>
+        <x-view style="background-color: silver"> </x-view>
+        <x-view style="background-color: seashell"> </x-view>
       </scroll-view>
 
-      <scroll-view style="width:100px; height:400px;" scroll-y id="end">
-        <x-view style="background-color:orange;"> </x-view>
-        <x-view style="background-color:tomato;"> </x-view>
-        <x-view style="background-color:thistle;"> </x-view>
-        <x-view style="background-color:forestgreen;"> </x-view>
-        <x-view style="background-color:firebrick;"> </x-view>
-        <x-view style="background-color:silver;"> </x-view>
-        <x-view style="background-color:seashell;"> </x-view>
+      <scroll-view style="width: 100px; height: 400px" scroll-y id="end">
+        <x-view style="background-color: orange"> </x-view>
+        <x-view style="background-color: tomato"> </x-view>
+        <x-view style="background-color: thistle"> </x-view>
+        <x-view style="background-color: forestgreen"> </x-view>
+        <x-view style="background-color: firebrick"> </x-view>
+        <x-view style="background-color: silver"> </x-view>
+        <x-view style="background-color: seashell"> </x-view>
       </scroll-view>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-into-view-nested-scroll-view.html b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-into-view-nested-scroll-view.html
index 48b1cf8b04..d775f4fc75 100644
--- a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-into-view-nested-scroll-view.html
+++ b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-into-view-nested-scroll-view.html
@@ -43,21 +43,21 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: row;"
+      style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: row"
     >
-      <scroll-view style="width:100px; height:400px;" scroll-y id="outer">
+      <scroll-view style="width: 100px; height: 400px" scroll-y id="outer">
         <x-view
-          style="background-color:palegoldenrod; height: 100%; width:100%"
+          style="background-color: palegoldenrod; height: 100%; width: 100%"
         >
         </x-view>
-        <scroll-view style="width:100px; height:400px;" scroll-y id="target">
-          <x-view style="background-color:orange;"> </x-view>
-          <x-view style="background-color:tomato;"> </x-view>
-          <x-view style="background-color:thistle;"> </x-view>
-          <x-view style="background-color:forestgreen;"> </x-view>
-          <x-view style="background-color:firebrick;"> </x-view>
-          <x-view style="background-color:silver;"> </x-view>
-          <x-view style="background-color:seashell;"> </x-view>
+        <scroll-view style="width: 100px; height: 400px" scroll-y id="target">
+          <x-view style="background-color: orange"> </x-view>
+          <x-view style="background-color: tomato"> </x-view>
+          <x-view style="background-color: thistle"> </x-view>
+          <x-view style="background-color: forestgreen"> </x-view>
+          <x-view style="background-color: firebrick"> </x-view>
+          <x-view style="background-color: silver"> </x-view>
+          <x-view style="background-color: seashell"> </x-view>
         </scroll-view>
       </scroll-view>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-into-view-text-x.html b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-into-view-text-x.html
index ec87d35e11..052418dd01 100644
--- a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-into-view-text-x.html
+++ b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-into-view-text-x.html
@@ -51,38 +51,38 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: column;"
+      style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column"
     >
       <scroll-view scroll-x id="start">
-        <x-view style="background-color:orange;"> </x-view>
-        <x-view style="background-color:tomato;"> </x-view>
-        <x-view style="background-color:thistle;"> </x-view>
-        <x-view style="background-color:forestgreen;"> </x-view>
-        <x-view style="background-color:firebrick;"> </x-view>
+        <x-view style="background-color: orange"> </x-view>
+        <x-view style="background-color: tomato"> </x-view>
+        <x-view style="background-color: thistle"> </x-view>
+        <x-view style="background-color: forestgreen"> </x-view>
+        <x-view style="background-color: firebrick"> </x-view>
         <x-text><x-text>hello lynx</x-text></x-text>
-        <x-view style="background-color:silver;"> </x-view>
-        <x-view style="background-color:seashell;"> </x-view>
+        <x-view style="background-color: silver"> </x-view>
+        <x-view style="background-color: seashell"> </x-view>
       </scroll-view>
       <scroll-view scroll-x id="center">
-        <x-view style="background-color:orange;"> </x-view>
-        <x-view style="background-color:tomato;"> </x-view>
-        <x-view style="background-color:thistle;"> </x-view>
-        <x-view style="background-color:forestgreen;"> </x-view>
-        <x-view style="background-color:firebrick;"> </x-view>
+        <x-view style="background-color: orange"> </x-view>
+        <x-view style="background-color: tomato"> </x-view>
+        <x-view style="background-color: thistle"> </x-view>
+        <x-view style="background-color: forestgreen"> </x-view>
+        <x-view style="background-color: firebrick"> </x-view>
         <x-text><x-text>hello lynx</x-text></x-text>
-        <x-view style="background-color:silver;"> </x-view>
-        <x-view style="background-color:seashell;"> </x-view>
+        <x-view style="background-color: silver"> </x-view>
+        <x-view style="background-color: seashell"> </x-view>
       </scroll-view>
 
       <scroll-view scroll-x id="end">
-        <x-view style="background-color:orange;"> </x-view>
-        <x-view style="background-color:tomato;"> </x-view>
-        <x-view style="background-color:thistle;"> </x-view>
-        <x-view style="background-color:forestgreen;"> </x-view>
-        <x-view style="background-color:firebrick;"> </x-view>
+        <x-view style="background-color: orange"> </x-view>
+        <x-view style="background-color: tomato"> </x-view>
+        <x-view style="background-color: thistle"> </x-view>
+        <x-view style="background-color: forestgreen"> </x-view>
+        <x-view style="background-color: firebrick"> </x-view>
         <x-text><x-text>hello lynx</x-text></x-text>
-        <x-view style="background-color:silver;"> </x-view>
-        <x-view style="background-color:seashell;"> </x-view>
+        <x-view style="background-color: silver"> </x-view>
+        <x-view style="background-color: seashell"> </x-view>
       </scroll-view>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-into-view-text.html b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-into-view-text.html
index c22d191fd3..c9f154a602 100644
--- a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-into-view-text.html
+++ b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-into-view-text.html
@@ -49,38 +49,38 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: row;"
+      style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: row"
     >
-      <scroll-view style="width:100px; height:400px;" scroll-y id="start">
-        <x-view style="background-color:orange;"> </x-view>
-        <x-view style="background-color:tomato;"> </x-view>
-        <x-view style="background-color:thistle;"> </x-view>
-        <x-view style="background-color:forestgreen;"> </x-view>
-        <x-view style="background-color:firebrick;"> </x-view>
+      <scroll-view style="width: 100px; height: 400px" scroll-y id="start">
+        <x-view style="background-color: orange"> </x-view>
+        <x-view style="background-color: tomato"> </x-view>
+        <x-view style="background-color: thistle"> </x-view>
+        <x-view style="background-color: forestgreen"> </x-view>
+        <x-view style="background-color: firebrick"> </x-view>
         <x-text><x-text>hello lynx</x-text></x-text>
-        <x-view style="background-color:silver;"> </x-view>
-        <x-view style="background-color:seashell;"> </x-view>
+        <x-view style="background-color: silver"> </x-view>
+        <x-view style="background-color: seashell"> </x-view>
       </scroll-view>
-      <scroll-view style="width:100px; height:400px;" scroll-y id="center">
-        <x-view style="background-color:orange;"> </x-view>
-        <x-view style="background-color:tomato;"> </x-view>
-        <x-view style="background-color:thistle;"> </x-view>
-        <x-view style="background-color:forestgreen;"> </x-view>
-        <x-view style="background-color:firebrick;"> </x-view>
+      <scroll-view style="width: 100px; height: 400px" scroll-y id="center">
+        <x-view style="background-color: orange"> </x-view>
+        <x-view style="background-color: tomato"> </x-view>
+        <x-view style="background-color: thistle"> </x-view>
+        <x-view style="background-color: forestgreen"> </x-view>
+        <x-view style="background-color: firebrick"> </x-view>
         <x-text><x-text>hello lynx</x-text></x-text>
-        <x-view style="background-color:silver;"> </x-view>
-        <x-view style="background-color:seashell;"> </x-view>
+        <x-view style="background-color: silver"> </x-view>
+        <x-view style="background-color: seashell"> </x-view>
       </scroll-view>
 
-      <scroll-view style="width:100px; height:400px;" scroll-y id="end">
-        <x-view style="background-color:orange;"> </x-view>
-        <x-view style="background-color:tomato;"> </x-view>
-        <x-view style="background-color:thistle;"> </x-view>
-        <x-view style="background-color:forestgreen;"> </x-view>
-        <x-view style="background-color:firebrick;"> </x-view>
+      <scroll-view style="width: 100px; height: 400px" scroll-y id="end">
+        <x-view style="background-color: orange"> </x-view>
+        <x-view style="background-color: tomato"> </x-view>
+        <x-view style="background-color: thistle"> </x-view>
+        <x-view style="background-color: forestgreen"> </x-view>
+        <x-view style="background-color: firebrick"> </x-view>
         <x-text><x-text>hello lynx</x-text></x-text>
-        <x-view style="background-color:silver;"> </x-view>
-        <x-view style="background-color:seashell;"> </x-view>
+        <x-view style="background-color: silver"> </x-view>
+        <x-view style="background-color: seashell"> </x-view>
       </scroll-view>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-left.html b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-left.html
index 7310f64ab6..febf554bed 100644
--- a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-left.html
+++ b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-left.html
@@ -35,25 +35,25 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: column; background-color: wheat;"
+      style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column; background-color: wheat"
     >
       <scroll-view
-        style="width:300px; height:300px;"
+        style="width: 300px; height: 300px"
         scroll-y
         scroll-left="300px"
       >
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:slateblue;"> </x-view>
-        <x-view style="background-color:darkgoldenrod;"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: slateblue"> </x-view>
+        <x-view style="background-color: darkgoldenrod"> </x-view>
       </scroll-view>
       <scroll-view
-        style="width:300px; height:300px;--lynx-linear-orientation: horizontal; --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-horizontal);"
+        style="width: 300px; height: 300px; --lynx-linear-orientation: horizontal; --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-horizontal)"
         scroll-x
         scroll-left="300px"
       >
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:slateblue;"> </x-view>
-        <x-view style="background-color:darkgoldenrod;"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: slateblue"> </x-view>
+        <x-view style="background-color: darkgoldenrod"> </x-view>
       </scroll-view>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-to-index.html b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-to-index.html
index 22a332b5a8..add70bbfc1 100644
--- a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-to-index.html
+++ b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-to-index.html
@@ -35,17 +35,17 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: column; background-color: wheat;"
+      style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column; background-color: wheat"
     >
       <scroll-view
-        style="width:300px; height:300px;"
+        style="width: 300px; height: 300px"
         scroll-y
         scroll-top="300px"
         scroll-to-index="1"
       >
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:slateblue;"> </x-view>
-        <x-view style="background-color:darkgoldenrod;"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: slateblue"> </x-view>
+        <x-view style="background-color: darkgoldenrod"> </x-view>
       </scroll-view>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-to.html b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-to.html
index 2000056805..1570d64c75 100644
--- a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-to.html
+++ b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-to.html
@@ -35,16 +35,16 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: row; background-color: blue;"
+      style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: row; background-color: blue"
     >
-      <scroll-view style="width:100%; height:400px;" scroll-y>
-        <x-view style="background-color:orange;"> </x-view>
-        <x-view style="background-color:tomato;"> </x-view>
-        <x-view style="background-color:thistle;"> </x-view>
-        <x-view style="background-color:forestgreen;"> </x-view>
-        <x-view style="background-color:firebrick;"> </x-view>
-        <x-view style="background-color:silver;"> </x-view>
-        <x-view style="background-color:seashell;"> </x-view>
+      <scroll-view style="width: 100%; height: 400px" scroll-y>
+        <x-view style="background-color: orange"> </x-view>
+        <x-view style="background-color: tomato"> </x-view>
+        <x-view style="background-color: thistle"> </x-view>
+        <x-view style="background-color: forestgreen"> </x-view>
+        <x-view style="background-color: firebrick"> </x-view>
+        <x-view style="background-color: silver"> </x-view>
+        <x-view style="background-color: seashell"> </x-view>
       </scroll-view>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-top.html b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-top.html
index 484ea4901b..47e3f15f64 100644
--- a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-top.html
+++ b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-top.html
@@ -35,25 +35,25 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: column; background-color: wheat;"
+      style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column; background-color: wheat"
     >
       <scroll-view
-        style="width:300px; height:300px;"
+        style="width: 300px; height: 300px"
         scroll-y
         scroll-top="300px"
       >
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:slateblue;"> </x-view>
-        <x-view style="background-color:darkgoldenrod;"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: slateblue"> </x-view>
+        <x-view style="background-color: darkgoldenrod"> </x-view>
       </scroll-view>
       <scroll-view
-        style="width:300px; height:300px;--lynx-linear-orientation: horizontal; --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-horizontal);"
+        style="width: 300px; height: 300px; --lynx-linear-orientation: horizontal; --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-horizontal)"
         scroll-x
         scroll-top="300px"
       >
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:slateblue;"> </x-view>
-        <x-view style="background-color:darkgoldenrod;"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: slateblue"> </x-view>
+        <x-view style="background-color: darkgoldenrod"> </x-view>
       </scroll-view>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-absolute-kid.html b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-absolute-kid.html
index b4951ed411..7739f6de31 100644
--- a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-absolute-kid.html
+++ b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-absolute-kid.html
@@ -32,16 +32,18 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: row; "
+      style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: row"
     >
-      <x-view style="height:100px;width: 100px;background-color:wheat"></x-view>
+      <x-view
+        style="height: 100px; width: 100px; background-color: wheat"
+      ></x-view>
       <scroll-view
         bounces
         scroll-x
-        style="height:200px;width:200px;background-color:aqua;"
+        style="height: 200px; width: 200px; background-color: aqua"
       >
         <x-view
-          style="height:50px; width:50px; background-color: pink; position:absolute; left:50px; top:50px;"
+          style="height: 50px; width: 50px; background-color: pink; position: absolute; left: 50px; top: 50px"
         ></x-view>
       </scroll-view>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-item-percentage-size.html b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-item-percentage-size.html
index 1356934db4..8315b11136 100644
--- a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-item-percentage-size.html
+++ b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-item-percentage-size.html
@@ -35,13 +35,13 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: row; "
+      style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: row"
     >
-      <scroll-view style="width:100%; height:400px;" scroll-y>
-        <x-view style="background-color:green; height:50%;"> </x-view>
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:slateblue;"> </x-view>
-        <x-view style="background-color:darkgoldenrod;"> </x-view>
+      <scroll-view style="width: 100%; height: 400px" scroll-y>
+        <x-view style="background-color: green; height: 50%"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: slateblue"> </x-view>
+        <x-view style="background-color: darkgoldenrod"> </x-view>
       </scroll-view>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-linear-gravity-scroll.html b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-linear-gravity-scroll.html
index 7fbe577903..4da3c41e06 100644
--- a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-linear-gravity-scroll.html
+++ b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-linear-gravity-scroll.html
@@ -95,97 +95,97 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="height: 100vh;width: 450px;display: flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex);flex-direction: row; flex-wrap: wrap"
+      style="height: 100vh; width: 450px; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: row; flex-wrap: wrap"
     >
       <scroll-view
         class="linear-gravity-top"
-        style="width:100px; height:200px; --lynx-display:linear; --lynx-display-toggle:var(--lynx-display-linear); border-width:1px;"
+        style="width: 100px; height: 200px; --lynx-display: linear; --lynx-display-toggle: var(--lynx-display-linear); border-width: 1px"
         scroll-y
       >
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:slateblue;"> </x-view>
-        <x-view style="background-color:darkgoldenrod;"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: slateblue"> </x-view>
+        <x-view style="background-color: darkgoldenrod"> </x-view>
       </scroll-view>
       <scroll-view
         class="linear-gravity-bottom"
-        style="width:100px; height:200px; --lynx-display:linear; --lynx-display-toggle:var(--lynx-display-linear); border-width:1px;"
+        style="width: 100px; height: 200px; --lynx-display: linear; --lynx-display-toggle: var(--lynx-display-linear); border-width: 1px"
         scroll-y
       >
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:slateblue;"> </x-view>
-        <x-view style="background-color:darkgoldenrod;"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: slateblue"> </x-view>
+        <x-view style="background-color: darkgoldenrod"> </x-view>
       </scroll-view>
       <scroll-view
         class="linear-gravity-left"
-        style="width:100px; height:200px; --lynx-display:linear; --lynx-display-toggle:var(--lynx-display-linear); border-width:1px;"
+        style="width: 100px; height: 200px; --lynx-display: linear; --lynx-display-toggle: var(--lynx-display-linear); border-width: 1px"
         scroll-y
       >
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:slateblue;"> </x-view>
-        <x-view style="background-color:darkgoldenrod;"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: slateblue"> </x-view>
+        <x-view style="background-color: darkgoldenrod"> </x-view>
       </scroll-view>
       <scroll-view
         class="linear-gravity-right"
-        style="width:100px; height:200px; --lynx-display:linear; --lynx-display-toggle:var(--lynx-display-linear); border-width:1px;"
+        style="width: 100px; height: 200px; --lynx-display: linear; --lynx-display-toggle: var(--lynx-display-linear); border-width: 1px"
         scroll-y
       >
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:slateblue;"> </x-view>
-        <x-view style="background-color:darkgoldenrod;"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: slateblue"> </x-view>
+        <x-view style="background-color: darkgoldenrod"> </x-view>
       </scroll-view>
       <scroll-view
         class="linear-gravity-center-vertical"
-        style="width:100px; height:200px; --lynx-display:linear; --lynx-display-toggle:var(--lynx-display-linear); border-width:1px;"
+        style="width: 100px; height: 200px; --lynx-display: linear; --lynx-display-toggle: var(--lynx-display-linear); border-width: 1px"
         scroll-y
       >
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:slateblue;"> </x-view>
-        <x-view style="background-color:darkgoldenrod;"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: slateblue"> </x-view>
+        <x-view style="background-color: darkgoldenrod"> </x-view>
       </scroll-view>
       <scroll-view
         class="linear-gravity-center-horizontal"
-        style="width:100px; height:200px; --lynx-display:linear; --lynx-display-toggle:var(--lynx-display-linear); border-width:1px;"
+        style="width: 100px; height: 200px; --lynx-display: linear; --lynx-display-toggle: var(--lynx-display-linear); border-width: 1px"
         scroll-y
       >
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:slateblue;"> </x-view>
-        <x-view style="background-color:darkgoldenrod;"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: slateblue"> </x-view>
+        <x-view style="background-color: darkgoldenrod"> </x-view>
       </scroll-view>
       <scroll-view
         class="linear-gravity-start"
-        style="width:100px; height:200px; --lynx-display:linear; --lynx-display-toggle:var(--lynx-display-linear); border-width:1px;"
+        style="width: 100px; height: 200px; --lynx-display: linear; --lynx-display-toggle: var(--lynx-display-linear); border-width: 1px"
         scroll-y
       >
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:slateblue;"> </x-view>
-        <x-view style="background-color:darkgoldenrod;"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: slateblue"> </x-view>
+        <x-view style="background-color: darkgoldenrod"> </x-view>
       </scroll-view>
       <scroll-view
         class="linear-gravity-end"
-        style="width:100px; height:200px; --lynx-display:linear; --lynx-display-toggle:var(--lynx-display-linear); border-width:1px;"
+        style="width: 100px; height: 200px; --lynx-display: linear; --lynx-display-toggle: var(--lynx-display-linear); border-width: 1px"
         scroll-y
       >
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:slateblue;"> </x-view>
-        <x-view style="background-color:darkgoldenrod;"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: slateblue"> </x-view>
+        <x-view style="background-color: darkgoldenrod"> </x-view>
       </scroll-view>
       <scroll-view
         class="linear-gravity-center"
-        style="width:100px; height:200px; --lynx-display:linear; --lynx-display-toggle:var(--lynx-display-linear); border-width:1px;"
+        style="width: 100px; height: 200px; --lynx-display: linear; --lynx-display-toggle: var(--lynx-display-linear); border-width: 1px"
         scroll-y
       >
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:slateblue;"> </x-view>
-        <x-view style="background-color:darkgoldenrod;"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: slateblue"> </x-view>
+        <x-view style="background-color: darkgoldenrod"> </x-view>
       </scroll-view>
       <scroll-view
         class="linear-gravity-space-between"
-        style="width:100px; height:200px; --lynx-display:linear; --lynx-display-toggle:var(--lynx-display-linear); border-width:1px;"
+        style="width: 100px; height: 200px; --lynx-display: linear; --lynx-display-toggle: var(--lynx-display-linear); border-width: 1px"
         scroll-y
       >
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:slateblue;"> </x-view>
-        <x-view style="background-color:darkgoldenrod;"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: slateblue"> </x-view>
+        <x-view style="background-color: darkgoldenrod"> </x-view>
       </scroll-view>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-linear-gravity.html b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-linear-gravity.html
index 5b58e40ed4..4da3c41e06 100644
--- a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-linear-gravity.html
+++ b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-linear-gravity.html
@@ -95,97 +95,97 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="height: 100vh;width: 450px;display: flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex);flex-direction: row; flex-wrap: wrap"
+      style="height: 100vh; width: 450px; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: row; flex-wrap: wrap"
     >
       <scroll-view
         class="linear-gravity-top"
-        style="width:100px; height:200px; --lynx-display:linear; --lynx-display-toggle:var(--lynx-display-linear);  border-width:1px;"
+        style="width: 100px; height: 200px; --lynx-display: linear; --lynx-display-toggle: var(--lynx-display-linear); border-width: 1px"
         scroll-y
       >
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:slateblue;"> </x-view>
-        <x-view style="background-color:darkgoldenrod;"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: slateblue"> </x-view>
+        <x-view style="background-color: darkgoldenrod"> </x-view>
       </scroll-view>
       <scroll-view
         class="linear-gravity-bottom"
-        style="width:100px; height:200px; --lynx-display:linear; --lynx-display-toggle:var(--lynx-display-linear); border-width:1px;"
+        style="width: 100px; height: 200px; --lynx-display: linear; --lynx-display-toggle: var(--lynx-display-linear); border-width: 1px"
         scroll-y
       >
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:slateblue;"> </x-view>
-        <x-view style="background-color:darkgoldenrod;"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: slateblue"> </x-view>
+        <x-view style="background-color: darkgoldenrod"> </x-view>
       </scroll-view>
       <scroll-view
         class="linear-gravity-left"
-        style="width:100px; height:200px; --lynx-display:linear; --lynx-display-toggle:var(--lynx-display-linear); border-width:1px;"
+        style="width: 100px; height: 200px; --lynx-display: linear; --lynx-display-toggle: var(--lynx-display-linear); border-width: 1px"
         scroll-y
       >
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:slateblue;"> </x-view>
-        <x-view style="background-color:darkgoldenrod;"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: slateblue"> </x-view>
+        <x-view style="background-color: darkgoldenrod"> </x-view>
       </scroll-view>
       <scroll-view
         class="linear-gravity-right"
-        style="width:100px; height:200px; --lynx-display:linear; --lynx-display-toggle:var(--lynx-display-linear); border-width:1px;"
+        style="width: 100px; height: 200px; --lynx-display: linear; --lynx-display-toggle: var(--lynx-display-linear); border-width: 1px"
         scroll-y
       >
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:slateblue;"> </x-view>
-        <x-view style="background-color:darkgoldenrod;"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: slateblue"> </x-view>
+        <x-view style="background-color: darkgoldenrod"> </x-view>
       </scroll-view>
       <scroll-view
         class="linear-gravity-center-vertical"
-        style="width:100px; height:200px; --lynx-display:linear; --lynx-display-toggle:var(--lynx-display-linear); border-width:1px;"
+        style="width: 100px; height: 200px; --lynx-display: linear; --lynx-display-toggle: var(--lynx-display-linear); border-width: 1px"
         scroll-y
       >
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:slateblue;"> </x-view>
-        <x-view style="background-color:darkgoldenrod;"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: slateblue"> </x-view>
+        <x-view style="background-color: darkgoldenrod"> </x-view>
       </scroll-view>
       <scroll-view
         class="linear-gravity-center-horizontal"
-        style="width:100px; height:200px; --lynx-display:linear; --lynx-display-toggle:var(--lynx-display-linear); border-width:1px;"
+        style="width: 100px; height: 200px; --lynx-display: linear; --lynx-display-toggle: var(--lynx-display-linear); border-width: 1px"
         scroll-y
       >
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:slateblue;"> </x-view>
-        <x-view style="background-color:darkgoldenrod;"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: slateblue"> </x-view>
+        <x-view style="background-color: darkgoldenrod"> </x-view>
       </scroll-view>
       <scroll-view
         class="linear-gravity-start"
-        style="width:100px; height:200px; --lynx-display:linear; --lynx-display-toggle:var(--lynx-display-linear); border-width:1px;"
+        style="width: 100px; height: 200px; --lynx-display: linear; --lynx-display-toggle: var(--lynx-display-linear); border-width: 1px"
         scroll-y
       >
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:slateblue;"> </x-view>
-        <x-view style="background-color:darkgoldenrod;"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: slateblue"> </x-view>
+        <x-view style="background-color: darkgoldenrod"> </x-view>
       </scroll-view>
       <scroll-view
         class="linear-gravity-end"
-        style="width:100px; height:200px; --lynx-display:linear; --lynx-display-toggle:var(--lynx-display-linear); border-width:1px;"
+        style="width: 100px; height: 200px; --lynx-display: linear; --lynx-display-toggle: var(--lynx-display-linear); border-width: 1px"
         scroll-y
       >
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:slateblue;"> </x-view>
-        <x-view style="background-color:darkgoldenrod;"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: slateblue"> </x-view>
+        <x-view style="background-color: darkgoldenrod"> </x-view>
       </scroll-view>
       <scroll-view
         class="linear-gravity-center"
-        style="width:100px; height:200px; --lynx-display:linear; --lynx-display-toggle:var(--lynx-display-linear); border-width:1px;"
+        style="width: 100px; height: 200px; --lynx-display: linear; --lynx-display-toggle: var(--lynx-display-linear); border-width: 1px"
         scroll-y
       >
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:slateblue;"> </x-view>
-        <x-view style="background-color:darkgoldenrod;"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: slateblue"> </x-view>
+        <x-view style="background-color: darkgoldenrod"> </x-view>
       </scroll-view>
       <scroll-view
         class="linear-gravity-space-between"
-        style="width:100px; height:200px; --lynx-display:linear; --lynx-display-toggle:var(--lynx-display-linear); border-width:1px;"
+        style="width: 100px; height: 200px; --lynx-display: linear; --lynx-display-toggle: var(--lynx-display-linear); border-width: 1px"
         scroll-y
       >
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:slateblue;"> </x-view>
-        <x-view style="background-color:darkgoldenrod;"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: slateblue"> </x-view>
+        <x-view style="background-color: darkgoldenrod"> </x-view>
       </scroll-view>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-must-linear.html b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-must-linear.html
index dd716010e9..38eaa2703d 100644
--- a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-must-linear.html
+++ b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-must-linear.html
@@ -32,9 +32,12 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <scroll-view
-      style="display:flex;--lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex);"
+      style="display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex)"
     >
-      <x-view id="target" style="height:100px;width:100px;background: green;">
+      <x-view
+        id="target"
+        style="height: 100px; width: 100px; background: green"
+      >
       </x-view>
     </scroll-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-overwrite-direction.html b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-overwrite-direction.html
index abb20ef872..e7813589e5 100644
--- a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-overwrite-direction.html
+++ b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-overwrite-direction.html
@@ -35,15 +35,15 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: column; background-color: wheat;"
+      style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column; background-color: wheat"
     >
       <scroll-view
-        style="width:300px; height:300px; --lynx-display:linear; --lynx-display-toggle:var(--lynx-display-linear); --lynx-linear-orientation:horizontal; --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-horizontal);"
+        style="width: 300px; height: 300px; --lynx-display: linear; --lynx-display-toggle: var(--lynx-display-linear); --lynx-linear-orientation: horizontal; --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-horizontal)"
         scroll-y
       >
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:slateblue;"> </x-view>
-        <x-view style="background-color:darkgoldenrod;"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: slateblue"> </x-view>
+        <x-view style="background-color: darkgoldenrod"> </x-view>
       </scroll-view>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-padding.html b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-padding.html
index dfbefa59b8..6e787f3ef9 100644
--- a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-padding.html
+++ b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-padding.html
@@ -38,15 +38,15 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: row;"
+      style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: row"
     >
       <scroll-view
-        style="width:100%; height:400px; padding-top: 100px;"
+        style="width: 100%; height: 400px; padding-top: 100px"
         scroll-y
       >
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:orange;"> </x-view>
-        <x-view style="background-color:cadetblue;"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: orange"> </x-view>
+        <x-view style="background-color: cadetblue"> </x-view>
       </scroll-view>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-size-in-flex-column.html b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-size-in-flex-column.html
index 675c4c1e01..8779ef3e50 100644
--- a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-size-in-flex-column.html
+++ b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-size-in-flex-column.html
@@ -28,14 +28,14 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: column; background-color: blue;"
+      style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column; background-color: blue"
     >
-      <scroll-view style="width:100%; background-color: aqua;">
-        <x-view style="height:100px; width:100px;"></x-view>
+      <scroll-view style="width: 100%; background-color: aqua">
+        <x-view style="height: 100px; width: 100px"></x-view>
       </scroll-view>
-      <scroll-view style="height:100%; background-color: orange;">
+      <scroll-view style="height: 100%; background-color: orange">
         <!-- show orange-->
-        <x-view style="height:100px; width:100px;"></x-view>
+        <x-view style="height: 100px; width: 100px"></x-view>
       </scroll-view>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-size-in-flex-row.html b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-size-in-flex-row.html
index 53be1eee8f..cd45ecbe88 100644
--- a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-size-in-flex-row.html
+++ b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scroll-view-size-in-flex-row.html
@@ -28,14 +28,14 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: row; background-color: blue;"
+      style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: row; background-color: blue"
     >
-      <scroll-view style="width:100%; background-color: aqua;">
-        <x-view style="height:100px; width:100px;"></x-view>
+      <scroll-view style="width: 100%; background-color: aqua">
+        <x-view style="height: 100px; width: 100px"></x-view>
       </scroll-view>
-      <scroll-view style="height:100%; background-color: orange;">
+      <scroll-view style="height: 100%; background-color: orange">
         <!-- show orange-->
-        <x-view style="height:100px; width:100px;"></x-view>
+        <x-view style="height: 100px; width: 100px"></x-view>
       </scroll-view>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scrollable-even-inline-overflow-visible.html b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scrollable-even-inline-overflow-visible.html
index 9eae7c6e83..82240a0c0d 100644
--- a/packages/web-platform/web-tests/tests/web-elements/scroll-view/scrollable-even-inline-overflow-visible.html
+++ b/packages/web-platform/web-tests/tests/web-elements/scroll-view/scrollable-even-inline-overflow-visible.html
@@ -35,17 +35,17 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: column; background-color: wheat; overflow:visible"
+      style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column; background-color: wheat; overflow: visible"
     >
       <scroll-view
         id="target"
-        style="width:300px; height:300px;"
+        style="width: 300px; height: 300px"
         scroll-y
         bounces
       >
-        <x-view style="background-color:aqua;"> </x-view>
-        <x-view style="background-color:slateblue;"> </x-view>
-        <x-view style="background-color:darkgoldenrod;"> </x-view>
+        <x-view style="background-color: aqua"> </x-view>
+        <x-view style="background-color: slateblue"> </x-view>
+        <x-view style="background-color: darkgoldenrod"> </x-view>
       </scroll-view>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/attribute-interval.html b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/attribute-interval.html
index 88365a5d3e..4cbe8c3ffd 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/attribute-interval.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/attribute-interval.html
@@ -26,12 +26,12 @@
     />
     <script type="module">
     document.querySelector('#play').addEventListener('click', () => {
-      document.querySelector('x-audio-tt').play();
-    });
-    document.querySelector('x-audio-tt').addEventListener(
-      'timeupdate',
-      event => console.log(event),
-    );
+        document.querySelector('x-audio-tt').play();
+      });
+      document.querySelector('x-audio-tt').addEventListener(
+        'timeupdate',
+        event => console.log(event),
+      );
     </script>
     <style>
     @import url("../../common.css");
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/attribute-loop-close.html b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/attribute-loop-close.html
index defbbd88e6..96c8d63eec 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/attribute-loop-close.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/attribute-loop-close.html
@@ -25,12 +25,21 @@
       rel="stylesheet"
     />
     <script type="module">
-    document.querySelector('#play').addEventListener('click', function() {
-      document.querySelector('x-audio-tt').play();
-    });
-    document.querySelector('#close').addEventListener('click', function() {
-      document.querySelector('x-audio-tt').setAttribute('loop', false);
-    });
+    document.querySelector('#play').addEventListener(
+        'click',
+        function() {
+          document.querySelector('x-audio-tt').play();
+        },
+      );
+      document.querySelector('#close').addEventListener(
+        'click',
+        function() {
+          document.querySelector('x-audio-tt').setAttribute(
+            'loop',
+            false,
+          );
+        },
+      );
     </script>
     <style>
     @import url("../../common.css");
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/attribute-loop.html b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/attribute-loop.html
index 813d8a64e2..b8b19b16a1 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/attribute-loop.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/attribute-loop.html
@@ -25,9 +25,12 @@
       rel="stylesheet"
     />
     <script type="module">
-    document.querySelector('#play').addEventListener('click', function() {
-      document.querySelector('x-audio-tt').play();
-    });
+    document.querySelector('#play').addEventListener(
+        'click',
+        function() {
+          document.querySelector('x-audio-tt').play();
+        },
+      );
     </script>
     <style>
     @import url("../../common.css");
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/attribute-pause-on-hide.html b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/attribute-pause-on-hide.html
index 414a18a638..f709f70ea4 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/attribute-pause-on-hide.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/attribute-pause-on-hide.html
@@ -25,9 +25,12 @@
       rel="stylesheet"
     />
     <script type="module">
-    document.querySelector('#play').addEventListener('click', function() {
-      document.querySelector('x-audio-tt').play();
-    });
+    document.querySelector('#play').addEventListener(
+        'click',
+        function() {
+          document.querySelector('x-audio-tt').play();
+        },
+      );
     </script>
     <style>
     @import url("../../common.css");
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/attribute-src-change.html b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/attribute-src-change.html
index d2a144783a..d810312340 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/attribute-src-change.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/attribute-src-change.html
@@ -25,21 +25,30 @@
       rel="stylesheet"
     />
     <script type="module">
-    document.querySelector('#play').addEventListener('click', function() {
-      document.querySelector('x-audio-tt').play();
-    });
-    document.querySelector('#fail').addEventListener('click', function() {
-      document.querySelector('x-audio-tt').setAttribute(
-        'src',
-        '{"id":"1","play_url":"./fail.mp3"}',
+    document.querySelector('#play').addEventListener(
+        'click',
+        function() {
+          document.querySelector('x-audio-tt').play();
+        },
       );
-    });
-    document.querySelector('#success').addEventListener('click', function() {
-      document.querySelector('x-audio-tt').setAttribute(
-        'src',
-        '{"id":"1","play_url":"./source-horse.mp3"}',
+      document.querySelector('#fail').addEventListener(
+        'click',
+        function() {
+          document.querySelector('x-audio-tt').setAttribute(
+            'src',
+            '{"id":"1","play_url":"./fail.mp3"}',
+          );
+        },
+      );
+      document.querySelector('#success').addEventListener(
+        'click',
+        function() {
+          document.querySelector('x-audio-tt').setAttribute(
+            'src',
+            '{"id":"1","play_url":"./source-horse.mp3"}',
+          );
+        },
       );
-    });
     </script>
     <style>
     @import url("../../common.css");
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/event-error-playback.html b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/event-error-playback.html
index d3bb15b7e7..bd2079e5db 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/event-error-playback.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/event-error-playback.html
@@ -26,12 +26,15 @@
     />
     <script type="module">
     document.querySelector('x-audio-tt').addEventListener(
-      'error',
-      event => console.log(event, 'error'),
-    );
-    document.querySelector('#play').addEventListener('click', function() {
-      document.querySelector('x-audio-tt').play();
-    });
+        'error',
+        event => console.log(event, 'error'),
+      );
+      document.querySelector('#play').addEventListener(
+        'click',
+        function() {
+          document.querySelector('x-audio-tt').play();
+        },
+      );
     </script>
     <style>
     @import url("../../common.css");
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/event-error-src-json.html b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/event-error-src-json.html
index 42ca51232d..ef600acfab 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/event-error-src-json.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/event-error-src-json.html
@@ -26,15 +26,18 @@
     />
     <script type="module">
     document.querySelector('x-audio-tt').addEventListener(
-      'error',
-      event => console.log(event, 'error'),
-    );
-    document.querySelector('#change').addEventListener('click', function() {
-      document.querySelector('x-audio-tt').setAttribute(
-        'src',
-        '{&quot;id&quot;:&quot;1&quot;}',
+        'error',
+        event => console.log(event, 'error'),
+      );
+      document.querySelector('#change').addEventListener(
+        'click',
+        function() {
+          document.querySelector('x-audio-tt').setAttribute(
+            'src',
+            '{&quot;id&quot;:&quot;1&quot;}',
+          );
+        },
       );
-    });
     </script>
     <style>
     @import url("../../common.css");
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/event-error-src.html b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/event-error-src.html
index 4dcb501c6c..a8fcb219d0 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/event-error-src.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/event-error-src.html
@@ -26,12 +26,15 @@
     />
     <script type="module">
     document.querySelector('x-audio-tt').addEventListener(
-      'error',
-      event => console.log(event, 'error'),
-    );
-    document.querySelector('#change').addEventListener('click', function() {
-      document.querySelector('x-audio-tt').removeAttribute('src');
-    });
+        'error',
+        event => console.log(event, 'error'),
+      );
+      document.querySelector('#change').addEventListener(
+        'click',
+        function() {
+          document.querySelector('x-audio-tt').removeAttribute('src');
+        },
+      );
     </script>
     <style>
     @import url("../../common.css");
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/event-finished.html b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/event-finished.html
index 3702231372..024a1911b7 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/event-finished.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/event-finished.html
@@ -26,12 +26,15 @@
     />
     <script type="module">
     document.querySelector('x-audio-tt').addEventListener(
-      'finished',
-      event => console.log(event),
-    );
-    document.querySelector('#play').addEventListener('click', function() {
-      document.querySelector('x-audio-tt').play();
-    });
+        'finished',
+        event => console.log(event),
+      );
+      document.querySelector('#play').addEventListener(
+        'click',
+        function() {
+          document.querySelector('x-audio-tt').play();
+        },
+      );
     </script>
     <style>
     @import url("../../common.css");
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/event-playbackstatechanged.html b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/event-playbackstatechanged.html
index c5d78dac23..489acc3460 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/event-playbackstatechanged.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/event-playbackstatechanged.html
@@ -41,18 +41,27 @@
     <script src="/web-elements.js" defer></script>
     <script type="module">
     document.querySelector('x-audio-tt').addEventListener(
-      'playbackstatechanged',
-      event => console.log(event),
-    );
-    document.querySelector('#play').addEventListener('click', function() {
-      document.querySelector('x-audio-tt').play();
-    });
-    document.querySelector('#stop').addEventListener('click', function() {
-      document.querySelector('x-audio-tt').stop();
-    });
-    document.querySelector('#pause').addEventListener('click', function() {
-      document.querySelector('x-audio-tt').pause();
-    });
+        'playbackstatechanged',
+        event => console.log(event),
+      );
+      document.querySelector('#play').addEventListener(
+        'click',
+        function() {
+          document.querySelector('x-audio-tt').play();
+        },
+      );
+      document.querySelector('#stop').addEventListener(
+        'click',
+        function() {
+          document.querySelector('x-audio-tt').stop();
+        },
+      );
+      document.querySelector('#pause').addEventListener(
+        'click',
+        function() {
+          document.querySelector('x-audio-tt').pause();
+        },
+      );
     </script>
     <x-view class="page column">
       <x-audio-tt
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/event-seek.html b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/event-seek.html
index 57be319c2d..b6e97c004f 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/event-seek.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/event-seek.html
@@ -26,15 +26,23 @@
     />
     <script type="module">
     document.querySelector('x-audio-tt').addEventListener(
-      'seek',
-      event => console.log(event),
-    );
-    document.querySelector('#play').addEventListener('click', function() {
-      document.querySelector('x-audio-tt').play();
-    });
-    document.querySelector('#seek').addEventListener('click', function() {
-      document.querySelector('x-audio-tt').seek({ currentTime: 30000 });
-    });
+        'seek',
+        event => console.log(event),
+      );
+      document.querySelector('#play').addEventListener(
+        'click',
+        function() {
+          document.querySelector('x-audio-tt').play();
+        },
+      );
+      document.querySelector('#seek').addEventListener(
+        'click',
+        function() {
+          document.querySelector('x-audio-tt').seek({
+            currentTime: 30000,
+          });
+        },
+      );
     </script>
     <style>
     @import url("../../common.css");
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/event-srcloadingstatechanged.html b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/event-srcloadingstatechanged.html
index 76e789c238..adde048a04 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/event-srcloadingstatechanged.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/event-srcloadingstatechanged.html
@@ -26,12 +26,12 @@
     />
     <script type="module">
     document.querySelector('x-audio-tt').addEventListener(
-      'srcloadingstatechanged',
-      event => console.log(event),
-    );
-    document.querySelector('#play').addEventListener('click', () => {
-      document.querySelector('x-audio-tt').play();
-    });
+        'srcloadingstatechanged',
+        event => console.log(event),
+      );
+      document.querySelector('#play').addEventListener('click', () => {
+        document.querySelector('x-audio-tt').play();
+      });
     </script>
     <style>
     @import url("../../common.css");
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-mute.html b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-mute.html
index 67a9e200b6..78d56b6002 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-mute.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-mute.html
@@ -25,9 +25,12 @@
       rel="stylesheet"
     />
     <script type="module">
-    document.querySelector('#mute').addEventListener('click', function() {
-      document.querySelector('x-audio-tt').mute({ mute: true });
-    });
+    document.querySelector('#mute').addEventListener(
+        'click',
+        function() {
+          document.querySelector('x-audio-tt').mute({ mute: true });
+        },
+      );
     </script>
     <style>
     @import url("../../common.css");
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-pause.html b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-pause.html
index b33771073f..798c5f881b 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-pause.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-pause.html
@@ -25,12 +25,18 @@
       rel="stylesheet"
     />
     <script type="module">
-    document.querySelector('#play').addEventListener('click', function() {
-      document.querySelector('x-audio-tt').play();
-    });
-    document.querySelector('#pause').addEventListener('click', function() {
-      document.querySelector('x-audio-tt').pause();
-    });
+    document.querySelector('#play').addEventListener(
+        'click',
+        function() {
+          document.querySelector('x-audio-tt').play();
+        },
+      );
+      document.querySelector('#pause').addEventListener(
+        'click',
+        function() {
+          document.querySelector('x-audio-tt').pause();
+        },
+      );
     </script>
     <style>
     @import url("../../common.css");
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-play.html b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-play.html
index 8ad43a1809..ed9948691d 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-play.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-play.html
@@ -25,9 +25,12 @@
       rel="stylesheet"
     />
     <script type="module">
-    document.querySelector('#play').addEventListener('click', function() {
-      document.querySelector('x-audio-tt').play();
-    });
+    document.querySelector('#play').addEventListener(
+        'click',
+        function() {
+          document.querySelector('x-audio-tt').play();
+        },
+      );
     </script>
     <style>
     @import url("../../common.css");
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-player-info.html b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-player-info.html
index 3bc1352347..e5236d783b 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-player-info.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-player-info.html
@@ -25,12 +25,18 @@
       rel="stylesheet"
     />
     <script type="module">
-    document.querySelector('#play').addEventListener('click', function() {
-      document.querySelector('x-audio-tt').play();
-    });
-    document.querySelector('#playerInfo').addEventListener('click', function() {
-      console.log(document.querySelector('x-audio-tt').playerInfo());
-    });
+    document.querySelector('#play').addEventListener(
+        'click',
+        function() {
+          document.querySelector('x-audio-tt').play();
+        },
+      );
+      document.querySelector('#playerInfo').addEventListener(
+        'click',
+        function() {
+          console.log(document.querySelector('x-audio-tt').playerInfo());
+        },
+      );
     </script>
     <style>
     @import url("../../common.css");
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-prepare.html b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-prepare.html
index 6de76a6698..032f93a422 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-prepare.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-prepare.html
@@ -40,16 +40,24 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <script type="module">
-    document.querySelector('#play').addEventListener('click', function() {
-      document.querySelector('x-audio-tt').play();
-    });
-    document.querySelector('#prepare').addEventListener('click', function() {
-      document.querySelector('x-audio-tt').prepare();
-    });
-    document.querySelector('x-audio-tt').shadowRoot.querySelector('audio')
-      .addEventListener('canplaythrough', function() {
-        document.querySelector('#text').innerHTML = 'audio can play';
-      });
+    document.querySelector('#play').addEventListener(
+        'click',
+        function() {
+          document.querySelector('x-audio-tt').play();
+        },
+      );
+      document.querySelector('#prepare').addEventListener(
+        'click',
+        function() {
+          document.querySelector('x-audio-tt').prepare();
+        },
+      );
+      document.querySelector('x-audio-tt').shadowRoot.querySelector(
+        'audio',
+      )
+        .addEventListener('canplaythrough', function() {
+          document.querySelector('#text').innerHTML = 'audio can play';
+        });
     </script>
     <x-view class="page column">
       <x-audio-tt
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-resume.html b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-resume.html
index ee847ada28..eb424d80ed 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-resume.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-resume.html
@@ -25,15 +25,24 @@
       rel="stylesheet"
     />
     <script type="module">
-    document.querySelector('#play').addEventListener('click', function() {
-      document.querySelector('x-audio-tt').play();
-    });
-    document.querySelector('#pause').addEventListener('click', function() {
-      document.querySelector('x-audio-tt').pause();
-    });
-    document.querySelector('#resume').addEventListener('click', function() {
-      document.querySelector('x-audio-tt').resume();
-    });
+    document.querySelector('#play').addEventListener(
+        'click',
+        function() {
+          document.querySelector('x-audio-tt').play();
+        },
+      );
+      document.querySelector('#pause').addEventListener(
+        'click',
+        function() {
+          document.querySelector('x-audio-tt').pause();
+        },
+      );
+      document.querySelector('#resume').addEventListener(
+        'click',
+        function() {
+          document.querySelector('x-audio-tt').resume();
+        },
+      );
     </script>
     <style>
     @import url("../../common.css");
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-seek.html b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-seek.html
index 0a24e415a4..f3a513f2f2 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-seek.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-seek.html
@@ -25,12 +25,20 @@
       rel="stylesheet"
     />
     <script type="module">
-    document.querySelector('#play').addEventListener('click', function() {
-      document.querySelector('x-audio-tt').play();
-    });
-    document.querySelector('#seek').addEventListener('click', function() {
-      document.querySelector('x-audio-tt').seek({ currentTime: 30000 });
-    });
+    document.querySelector('#play').addEventListener(
+        'click',
+        function() {
+          document.querySelector('x-audio-tt').play();
+        },
+      );
+      document.querySelector('#seek').addEventListener(
+        'click',
+        function() {
+          document.querySelector('x-audio-tt').seek({
+            currentTime: 30000,
+          });
+        },
+      );
     </script>
     <style>
     @import url("../../common.css");
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-set-volume.html b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-set-volume.html
index 72ef5a77b5..f0a61346f4 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-set-volume.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-set-volume.html
@@ -25,12 +25,22 @@
       rel="stylesheet"
     />
     <script type="module">
-    document.querySelector('#play').addEventListener('click', function() {
-      document.querySelector('x-audio-tt').play();
-    });
-    document.querySelector('#setVolume').addEventListener('click', function() {
-      console.log(document.querySelector('x-audio-tt').setVolume({ volume: 0.5 }));
-    });
+    document.querySelector('#play').addEventListener(
+        'click',
+        function() {
+          document.querySelector('x-audio-tt').play();
+        },
+      );
+      document.querySelector('#setVolume').addEventListener(
+        'click',
+        function() {
+          console.log(
+            document.querySelector('x-audio-tt').setVolume({
+              volume: 0.5,
+            }),
+          );
+        },
+      );
     </script>
     <style>
     @import url("../../common.css");
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-stop.html b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-stop.html
index 461d14f4f0..1c711d6911 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-stop.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-audio-tt/method-stop.html
@@ -25,12 +25,18 @@
       rel="stylesheet"
     />
     <script type="module">
-    document.querySelector('#play').addEventListener('click', function() {
-      document.querySelector('x-audio-tt').play();
-    });
-    document.querySelector('#stop').addEventListener('click', function() {
-      document.querySelector('x-audio-tt').stop();
-    });
+    document.querySelector('#play').addEventListener(
+        'click',
+        function() {
+          document.querySelector('x-audio-tt').play();
+        },
+      );
+      document.querySelector('#stop').addEventListener(
+        'click',
+        function() {
+          document.querySelector('x-audio-tt').stop();
+        },
+      );
     </script>
     <style>
     @import url("../../common.css");
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-blur-view/basic.html b/packages/web-platform/web-tests/tests/web-elements/x-blur-view/basic.html
index cabbe0cadd..e4dd90ad35 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-blur-view/basic.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-blur-view/basic.html
@@ -31,14 +31,14 @@
 
   <body>
     <script src="/web-elements.js" defer></script>
-    <x-view style="height:100%;width: 100%;">
+    <x-view style="height: 100%; width: 100%">
       <x-view
         flatten="false"
-        style="overflow: hidden; width: 100%;height: 450px;background-color:grey;background-size:100% 100%;background:url(../../resources/firefox-logo.png)"
+        style="overflow: hidden; width: 100%; height: 450px; background-color: grey; background-size: 100% 100%; background: url(../../resources/firefox-logo.png)"
       >
         <x-blur-view
           blur-radius="25"
-          style="width: 100%;height: 100px;margin-top:200px"
+          style="width: 100%; height: 100px; margin-top: 200px"
         >
           <text>Backdrop-filter 25, with background</text>
         </x-blur-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/basic-fling.html b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/basic-fling.html
index 6259602a27..9d8f15f881 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/basic-fling.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/basic-fling.html
@@ -35,31 +35,31 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="width: 100vw; height:600px; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: column;"
+      style="width: 100vw; height: 600px; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column"
     >
       <x-foldview-ng
-        style="width:80%; height:600px; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); background-color: wheat;display:flex; flex-direction: column;"
+        style="width: 80%; height: 600px; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); background-color: wheat; display: flex; flex-direction: column"
       >
         <x-foldview-toolbar-ng
-          style="display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); height:200px; flex-shrink:0; width:70%; background-color: cadetblue;"
+          style="display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); height: 200px; flex-shrink: 0; width: 70%; background-color: cadetblue"
         >
         </x-foldview-toolbar-ng>
         <x-foldview-header-ng
-          style="position:absolute; width:80%; height:400px; background-color: pink;"
+          style="position: absolute; width: 80%; height: 400px; background-color: pink"
         >
-          <x-view style="background-color:aqua; width:95%;"></x-view>
+          <x-view style="background-color: aqua; width: 95%"></x-view>
         </x-foldview-header-ng>
         <x-foldview-slot-ng
-          style="display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); width:90%; height:400px; flex-shrink:0; flex-direction:column; background-color: salmon;"
+          style="display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); width: 90%; height: 400px; flex-shrink: 0; flex-direction: column; background-color: salmon"
         >
-          <scroll-view style="width:80%; height:300px;" scroll-y>
-            <x-view style="background-color:orange;"> </x-view>
-            <x-view style="background-color:tomato;"> </x-view>
-            <x-view style="background-color:thistle;"> </x-view>
-            <x-view style="background-color:forestgreen;"> </x-view>
-            <x-view style="background-color:firebrick;"> </x-view>
-            <x-view style="background-color:silver;"> </x-view>
-            <x-view style="background-color:seashell;"> </x-view>
+          <scroll-view style="width: 80%; height: 300px" scroll-y>
+            <x-view style="background-color: orange"> </x-view>
+            <x-view style="background-color: tomato"> </x-view>
+            <x-view style="background-color: thistle"> </x-view>
+            <x-view style="background-color: forestgreen"> </x-view>
+            <x-view style="background-color: firebrick"> </x-view>
+            <x-view style="background-color: silver"> </x-view>
+            <x-view style="background-color: seashell"> </x-view>
           </scroll-view>
         </x-foldview-slot-ng>
       </x-foldview-ng>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/basic-with-lynx-wrapper.html b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/basic-with-lynx-wrapper.html
index 5062bc792c..1ca88f96f3 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/basic-with-lynx-wrapper.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/basic-with-lynx-wrapper.html
@@ -35,28 +35,28 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: row;"
+      style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: row"
     >
       <x-foldview-ng
-        style="width:80%; height:400px; background-color: wheat;display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: column;"
+        style="width: 80%; height: 400px; background-color: wheat; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column"
       >
         <lynx-wrapper>
           <x-foldview-header-ng
-            style="position:absolute; width:100%; height:200px;"
+            style="position: absolute; width: 100%; height: 200px"
           >
             <x-view
-              style="background-color: aqua; width:100%; height:300px"
+              style="background-color: aqua; width: 100%; height: 300px"
             ></x-view>
           </x-foldview-header-ng>
-          <x-foldview-slot-ng style="width:100%; height:400px;">
-            <scroll-view style="width:80%; height:100%; " scroll-y>
-              <x-view style="background-color:orange;"> </x-view>
-              <x-view style="background-color:tomato;"> </x-view>
-              <x-view style="background-color:thistle;"> </x-view>
-              <x-view style="background-color:forestgreen;"> </x-view>
-              <x-view style="background-color:firebrick;"> </x-view>
-              <x-view style="background-color:silver;"> </x-view>
-              <x-view style="background-color:seashell;"> </x-view>
+          <x-foldview-slot-ng style="width: 100%; height: 400px">
+            <scroll-view style="width: 80%; height: 100%" scroll-y>
+              <x-view style="background-color: orange"> </x-view>
+              <x-view style="background-color: tomato"> </x-view>
+              <x-view style="background-color: thistle"> </x-view>
+              <x-view style="background-color: forestgreen"> </x-view>
+              <x-view style="background-color: firebrick"> </x-view>
+              <x-view style="background-color: silver"> </x-view>
+              <x-view style="background-color: seashell"> </x-view>
             </scroll-view>
           </x-foldview-slot-ng>
         </lynx-wrapper>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/basic.html b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/basic.html
index d7c19bd7c3..13af735092 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/basic.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/basic.html
@@ -35,27 +35,27 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: row;"
+      style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: row"
     >
       <x-foldview-ng
-        style="width:80%; height:400px; background-color: wheat;display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: column;"
+        style="width: 80%; height: 400px; background-color: wheat; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column"
       >
         <x-foldview-header-ng
-          style="position:absolute; width:100%; height:200px;"
+          style="position: absolute; width: 100%; height: 200px"
         >
           <x-view
-            style="background-color: aqua; width:100%; height:300px"
+            style="background-color: aqua; width: 100%; height: 300px"
           ></x-view>
         </x-foldview-header-ng>
-        <x-foldview-slot-ng style="width:100%; height:400px;">
-          <scroll-view style="width:80%; height:100%; " scroll-y>
-            <x-view style="background-color:orange;"> </x-view>
-            <x-view style="background-color:tomato;"> </x-view>
-            <x-view style="background-color:thistle;"> </x-view>
-            <x-view style="background-color:forestgreen;"> </x-view>
-            <x-view style="background-color:firebrick;"> </x-view>
-            <x-view style="background-color:silver;"> </x-view>
-            <x-view style="background-color:seashell;"> </x-view>
+        <x-foldview-slot-ng style="width: 100%; height: 400px">
+          <scroll-view style="width: 80%; height: 100%" scroll-y>
+            <x-view style="background-color: orange"> </x-view>
+            <x-view style="background-color: tomato"> </x-view>
+            <x-view style="background-color: thistle"> </x-view>
+            <x-view style="background-color: forestgreen"> </x-view>
+            <x-view style="background-color: firebrick"> </x-view>
+            <x-view style="background-color: silver"> </x-view>
+            <x-view style="background-color: seashell"> </x-view>
           </scroll-view>
         </x-foldview-slot-ng>
       </x-foldview-ng>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/event-offset-granularity.html b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/event-offset-granularity.html
index 51ae14cd2d..992ac81fd4 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/event-offset-granularity.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/event-offset-granularity.html
@@ -35,28 +35,28 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: row;"
+      style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: row"
     >
       <x-foldview-ng
-        style="width:80%; height:400px; background-color: wheat;display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: column;"
+        style="width: 80%; height: 400px; background-color: wheat; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column"
         granularity="100"
       >
         <x-foldview-header-ng
-          style="position:absolute; width:100%; height:200px;"
+          style="position: absolute; width: 100%; height: 200px"
         >
           <x-view
-            style="background-color: aqua; width:100%; height:300px"
+            style="background-color: aqua; width: 100%; height: 300px"
           ></x-view>
         </x-foldview-header-ng>
-        <x-foldview-slot-ng style="width:100%; height:400px;">
-          <scroll-view style="width:80%; height:100%; " scroll-y>
-            <x-view style="background-color:orange;"> </x-view>
-            <x-view style="background-color:tomato;"> </x-view>
-            <x-view style="background-color:thistle;"> </x-view>
-            <x-view style="background-color:forestgreen;"> </x-view>
-            <x-view style="background-color:firebrick;"> </x-view>
-            <x-view style="background-color:silver;"> </x-view>
-            <x-view style="background-color:seashell;"> </x-view>
+        <x-foldview-slot-ng style="width: 100%; height: 400px">
+          <scroll-view style="width: 80%; height: 100%" scroll-y>
+            <x-view style="background-color: orange"> </x-view>
+            <x-view style="background-color: tomato"> </x-view>
+            <x-view style="background-color: thistle"> </x-view>
+            <x-view style="background-color: forestgreen"> </x-view>
+            <x-view style="background-color: firebrick"> </x-view>
+            <x-view style="background-color: silver"> </x-view>
+            <x-view style="background-color: seashell"> </x-view>
           </scroll-view>
         </x-foldview-slot-ng>
       </x-foldview-ng>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/size-controled-by-parent-flex-cross-axis.html b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/size-controled-by-parent-flex-cross-axis.html
index 39eff37b5f..fb9b41758e 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/size-controled-by-parent-flex-cross-axis.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/size-controled-by-parent-flex-cross-axis.html
@@ -35,21 +35,21 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: row;"
+      style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: row"
     >
       <x-foldview-ng
-        style="width:80%; background-color: wheat;display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: column;"
+        style="width: 80%; background-color: wheat; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column"
       >
         <x-foldview-toolbar-ng
-          style="display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); width:100%; background-color: cadetblue;height:300px;"
+          style="display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); width: 100%; background-color: cadetblue; height: 300px"
         >
         </x-foldview-toolbar-ng>
         <x-foldview-header-ng
-          style="position:absolute; width:100%; height:300px; background-color: pink;"
+          style="position: absolute; width: 100%; height: 300px; background-color: pink"
         >
         </x-foldview-header-ng>
         <x-foldview-slot-ng
-          style="display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex:1; flex-direction:column; background-color: salmon; height:300px;"
+          style="display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex: 1; flex-direction: column; background-color: salmon; height: 300px"
         >
         </x-foldview-slot-ng>
       </x-foldview-ng>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/size-header-could-from-children.html b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/size-header-could-from-children.html
index 62161d40d3..2576fbb23b 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/size-header-could-from-children.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/size-header-could-from-children.html
@@ -35,33 +35,33 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="width: 100vw; height:600px; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: column;"
+      style="width: 100vw; height: 600px; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column"
     >
       <x-foldview-ng
-        style="width:80%; flex-grow:1; background-color: wheat;display:flex; flex-direction: column;"
+        style="width: 80%; flex-grow: 1; background-color: wheat; display: flex; flex-direction: column"
       >
         <x-foldview-toolbar-ng
-          style="display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); height:200px; width:70%; background-color: cadetblue;"
+          style="display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); height: 200px; width: 70%; background-color: cadetblue"
         >
         </x-foldview-toolbar-ng>
         <x-foldview-header-ng
-          style="position:absolute; width:80%; background-color: pink;"
+          style="position: absolute; width: 80%; background-color: pink"
         >
           <x-view
-            style="height:400px;width:100%;background-color:aqua;"
+            style="height: 400px; width: 100%; background-color: aqua"
           ></x-view>
         </x-foldview-header-ng>
         <x-foldview-slot-ng
-          style="display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); width:90%; height:400px; flex:1; flex-direction:column; background-color: salmon;"
+          style="display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); width: 90%; height: 400px; flex: 1; flex-direction: column; background-color: salmon"
         >
-          <scroll-view style="width:80%; height:300px;" scroll-y>
-            <x-view style="background-color:orange;"> </x-view>
-            <x-view style="background-color:tomato;"> </x-view>
-            <x-view style="background-color:thistle;"> </x-view>
-            <x-view style="background-color:forestgreen;"> </x-view>
-            <x-view style="background-color:firebrick;"> </x-view>
-            <x-view style="background-color:silver;"> </x-view>
-            <x-view style="background-color:seashell;"> </x-view>
+          <scroll-view style="width: 80%; height: 300px" scroll-y>
+            <x-view style="background-color: orange"> </x-view>
+            <x-view style="background-color: tomato"> </x-view>
+            <x-view style="background-color: thistle"> </x-view>
+            <x-view style="background-color: forestgreen"> </x-view>
+            <x-view style="background-color: firebrick"> </x-view>
+            <x-view style="background-color: silver"> </x-view>
+            <x-view style="background-color: seashell"> </x-view>
           </scroll-view>
         </x-foldview-slot-ng>
       </x-foldview-ng>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/size-header-height-enough.html b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/size-header-height-enough.html
index 0b0044ad5a..056535eade 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/size-header-height-enough.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/size-header-height-enough.html
@@ -35,31 +35,31 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="width: 100vw; height:600px; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: column;"
+      style="width: 100vw; height: 600px; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column"
     >
       <x-foldview-ng
-        style="width:80%; flex-grow:1; background-color: wheat;display:flex; flex-direction: column;"
+        style="width: 80%; flex-grow: 1; background-color: wheat; display: flex; flex-direction: column"
       >
         <x-foldview-toolbar-ng
-          style="display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); height:200px; width:70%; background-color: cadetblue;"
+          style="display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); height: 200px; width: 70%; background-color: cadetblue"
         >
         </x-foldview-toolbar-ng>
         <x-foldview-header-ng
-          style="position:absolute; width:80%; height:400px; background-color: pink;"
+          style="position: absolute; width: 80%; height: 400px; background-color: pink"
         >
-          <x-view style="background-color:aqua; width:95%;"></x-view>
+          <x-view style="background-color: aqua; width: 95%"></x-view>
         </x-foldview-header-ng>
         <x-foldview-slot-ng
-          style="display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); width:90%; height:400px; flex:1; flex-direction:column; background-color: salmon;"
+          style="display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); width: 90%; height: 400px; flex: 1; flex-direction: column; background-color: salmon"
         >
-          <scroll-view style="width:80%; height:300px;" scroll-y>
-            <x-view style="background-color:orange;"> </x-view>
-            <x-view style="background-color:tomato;"> </x-view>
-            <x-view style="background-color:thistle;"> </x-view>
-            <x-view style="background-color:forestgreen;"> </x-view>
-            <x-view style="background-color:firebrick;"> </x-view>
-            <x-view style="background-color:silver;"> </x-view>
-            <x-view style="background-color:seashell;"> </x-view>
+          <scroll-view style="width: 80%; height: 300px" scroll-y>
+            <x-view style="background-color: orange"> </x-view>
+            <x-view style="background-color: tomato"> </x-view>
+            <x-view style="background-color: thistle"> </x-view>
+            <x-view style="background-color: forestgreen"> </x-view>
+            <x-view style="background-color: firebrick"> </x-view>
+            <x-view style="background-color: silver"> </x-view>
+            <x-view style="background-color: seashell"> </x-view>
           </scroll-view>
         </x-foldview-slot-ng>
       </x-foldview-ng>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/size-parent-grow-children-specific.html b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/size-parent-grow-children-specific.html
index 5de419cb29..299bee5f16 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/size-parent-grow-children-specific.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/size-parent-grow-children-specific.html
@@ -35,31 +35,31 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="width: 100vw; height:600px; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: column;"
+      style="width: 100vw; height: 600px; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column"
     >
       <x-foldview-ng
-        style="width:80%; flex-grow:1; background-color: wheat;display:flex; flex-direction: column;"
+        style="width: 80%; flex-grow: 1; background-color: wheat; display: flex; flex-direction: column"
       >
         <x-foldview-toolbar-ng
-          style="display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); height:200px; width:70%; background-color: cadetblue;"
+          style="display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); height: 200px; width: 70%; background-color: cadetblue"
         >
         </x-foldview-toolbar-ng>
         <x-foldview-header-ng
-          style="position:absolute; width:80%; height:200px; background-color: pink;"
+          style="position: absolute; width: 80%; height: 200px; background-color: pink"
         >
-          <x-view style="background-color:aqua; width:95%;"></x-view>
+          <x-view style="background-color: aqua; width: 95%"></x-view>
         </x-foldview-header-ng>
         <x-foldview-slot-ng
-          style="display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); width:90%; height:400px; flex:1; flex-direction:column; background-color: salmon;"
+          style="display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); width: 90%; height: 400px; flex: 1; flex-direction: column; background-color: salmon"
         >
-          <scroll-view style="width:80%; height:300px;" scroll-y>
-            <x-view style="background-color:orange;"> </x-view>
-            <x-view style="background-color:tomato;"> </x-view>
-            <x-view style="background-color:thistle;"> </x-view>
-            <x-view style="background-color:forestgreen;"> </x-view>
-            <x-view style="background-color:firebrick;"> </x-view>
-            <x-view style="background-color:silver;"> </x-view>
-            <x-view style="background-color:seashell;"> </x-view>
+          <scroll-view style="width: 80%; height: 300px" scroll-y>
+            <x-view style="background-color: orange"> </x-view>
+            <x-view style="background-color: tomato"> </x-view>
+            <x-view style="background-color: thistle"> </x-view>
+            <x-view style="background-color: forestgreen"> </x-view>
+            <x-view style="background-color: firebrick"> </x-view>
+            <x-view style="background-color: silver"> </x-view>
+            <x-view style="background-color: seashell"> </x-view>
           </scroll-view>
         </x-foldview-slot-ng>
       </x-foldview-ng>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/size-toolbar-and-slot-size-lager.html b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/size-toolbar-and-slot-size-lager.html
index bed6fe41ad..a3d0183344 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/size-toolbar-and-slot-size-lager.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/size-toolbar-and-slot-size-lager.html
@@ -35,31 +35,31 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="width: 100vw; height:600px; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: column;"
+      style="width: 100vw; height: 600px; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column"
     >
       <x-foldview-ng
-        style="width:80%; height:600px; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); background-color: wheat;display:flex; flex-direction: column;"
+        style="width: 80%; height: 600px; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); background-color: wheat; display: flex; flex-direction: column"
       >
         <x-foldview-toolbar-ng
-          style="display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); height:200px; flex-shrink:0; width:70%; background-color: cadetblue;"
+          style="display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); height: 200px; flex-shrink: 0; width: 70%; background-color: cadetblue"
         >
         </x-foldview-toolbar-ng>
         <x-foldview-header-ng
-          style="position:absolute; width:80%; height:400px; background-color: pink;"
+          style="position: absolute; width: 80%; height: 400px; background-color: pink"
         >
-          <x-view style="background-color:aqua; width:95%;"></x-view>
+          <x-view style="background-color: aqua; width: 95%"></x-view>
         </x-foldview-header-ng>
         <x-foldview-slot-ng
-          style="display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); width:90%; height:500px; flex-shrink:0; flex-direction:column; background-color: salmon;"
+          style="display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); width: 90%; height: 500px; flex-shrink: 0; flex-direction: column; background-color: salmon"
         >
-          <scroll-view style="width:80%; height:300px;" scroll-y>
-            <x-view style="background-color:orange;"> </x-view>
-            <x-view style="background-color:tomato;"> </x-view>
-            <x-view style="background-color:thistle;"> </x-view>
-            <x-view style="background-color:forestgreen;"> </x-view>
-            <x-view style="background-color:firebrick;"> </x-view>
-            <x-view style="background-color:silver;"> </x-view>
-            <x-view style="background-color:seashell;"> </x-view>
+          <scroll-view style="width: 80%; height: 300px" scroll-y>
+            <x-view style="background-color: orange"> </x-view>
+            <x-view style="background-color: tomato"> </x-view>
+            <x-view style="background-color: thistle"> </x-view>
+            <x-view style="background-color: forestgreen"> </x-view>
+            <x-view style="background-color: firebrick"> </x-view>
+            <x-view style="background-color: silver"> </x-view>
+            <x-view style="background-color: seashell"> </x-view>
           </scroll-view>
         </x-foldview-slot-ng>
       </x-foldview-ng>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/size-toolbar-could-from-children.html b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/size-toolbar-could-from-children.html
index 1f9a78d7aa..d600c763e9 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/size-toolbar-could-from-children.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/size-toolbar-could-from-children.html
@@ -35,32 +35,32 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="width: 100vw; height:600px; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: column;"
+      style="width: 100vw; height: 600px; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column"
     >
       <x-foldview-ng
-        style="width:80%; height:600px; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); background-color: wheat;display:flex; flex-direction: column;"
+        style="width: 80%; height: 600px; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); background-color: wheat; display: flex; flex-direction: column"
       >
         <x-foldview-toolbar-ng
-          style="display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); width:70%; background-color: cadetblue;"
+          style="display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); width: 70%; background-color: cadetblue"
         >
-          <x-view style="height:200px;width:100%;"></x-view>
+          <x-view style="height: 200px; width: 100%"></x-view>
         </x-foldview-toolbar-ng>
         <x-foldview-header-ng
-          style="position:absolute; width:80%; height:400px; background-color: pink;"
+          style="position: absolute; width: 80%; height: 400px; background-color: pink"
         >
-          <x-view style="background-color:aqua; width:95%;"></x-view>
+          <x-view style="background-color: aqua; width: 95%"></x-view>
         </x-foldview-header-ng>
         <x-foldview-slot-ng
-          style="display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); width:90%; height:300px; flex-direction:column; background-color: salmon;"
+          style="display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); width: 90%; height: 300px; flex-direction: column; background-color: salmon"
         >
-          <scroll-view style="width:80%; height:300px;" scroll-y>
-            <x-view style="background-color:orange;"> </x-view>
-            <x-view style="background-color:tomato;"> </x-view>
-            <x-view style="background-color:thistle;"> </x-view>
-            <x-view style="background-color:forestgreen;"> </x-view>
-            <x-view style="background-color:firebrick;"> </x-view>
-            <x-view style="background-color:silver;"> </x-view>
-            <x-view style="background-color:seashell;"> </x-view>
+          <scroll-view style="width: 80%; height: 300px" scroll-y>
+            <x-view style="background-color: orange"> </x-view>
+            <x-view style="background-color: tomato"> </x-view>
+            <x-view style="background-color: thistle"> </x-view>
+            <x-view style="background-color: forestgreen"> </x-view>
+            <x-view style="background-color: firebrick"> </x-view>
+            <x-view style="background-color: silver"> </x-view>
+            <x-view style="background-color: seashell"> </x-view>
           </scroll-view>
         </x-foldview-slot-ng>
       </x-foldview-ng>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/size-toolbar-slot-defines-parent-size.html b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/size-toolbar-slot-defines-parent-size.html
index ae7c25bcb4..20a47048fb 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/size-toolbar-slot-defines-parent-size.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/size-toolbar-slot-defines-parent-size.html
@@ -35,31 +35,31 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="width: 100vw; height:600px; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: column;"
+      style="width: 100vw; height: 600px; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column"
     >
       <x-foldview-ng
-        style="width:80%; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); background-color: wheat;display:flex; flex-direction: column;"
+        style="width: 80%; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); background-color: wheat; display: flex; flex-direction: column"
       >
         <x-foldview-toolbar-ng
-          style="display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); height:200px; width:70%; background-color: cadetblue;"
+          style="display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); height: 200px; width: 70%; background-color: cadetblue"
         >
         </x-foldview-toolbar-ng>
         <x-foldview-header-ng
-          style="position:absolute; width:80%; height:400px; background-color: pink;"
+          style="position: absolute; width: 80%; height: 400px; background-color: pink"
         >
-          <x-view style="background-color:aqua; width:95%;"></x-view>
+          <x-view style="background-color: aqua; width: 95%"></x-view>
         </x-foldview-header-ng>
         <x-foldview-slot-ng
-          style="display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); width:90%; height:400px; flex-direction:column; background-color: salmon;"
+          style="display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); width: 90%; height: 400px; flex-direction: column; background-color: salmon"
         >
-          <scroll-view style="width:80%; height:300px;" scroll-y>
-            <x-view style="background-color:orange;"> </x-view>
-            <x-view style="background-color:tomato;"> </x-view>
-            <x-view style="background-color:thistle;"> </x-view>
-            <x-view style="background-color:forestgreen;"> </x-view>
-            <x-view style="background-color:firebrick;"> </x-view>
-            <x-view style="background-color:silver;"> </x-view>
-            <x-view style="background-color:seashell;"> </x-view>
+          <scroll-view style="width: 80%; height: 300px" scroll-y>
+            <x-view style="background-color: orange"> </x-view>
+            <x-view style="background-color: tomato"> </x-view>
+            <x-view style="background-color: thistle"> </x-view>
+            <x-view style="background-color: forestgreen"> </x-view>
+            <x-view style="background-color: firebrick"> </x-view>
+            <x-view style="background-color: silver"> </x-view>
+            <x-view style="background-color: seashell"> </x-view>
           </scroll-view>
         </x-foldview-slot-ng>
       </x-foldview-ng>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/size-toolbar-slot-share-flex-parent.html b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/size-toolbar-slot-share-flex-parent.html
index be6c590c0b..c41fa3b607 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/size-toolbar-slot-share-flex-parent.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/size-toolbar-slot-share-flex-parent.html
@@ -35,31 +35,31 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="width: 100vw; height:600px; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: column;"
+      style="width: 100vw; height: 600px; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column"
     >
       <x-foldview-ng
-        style="width:80%; height:600px; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); background-color: wheat;display:flex; flex-direction: column;"
+        style="width: 80%; height: 600px; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); background-color: wheat; display: flex; flex-direction: column"
       >
         <x-foldview-toolbar-ng
-          style="display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-grow:1; width:70%; background-color: cadetblue;"
+          style="display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-grow: 1; width: 70%; background-color: cadetblue"
         >
         </x-foldview-toolbar-ng>
         <x-foldview-header-ng
-          style="position:absolute; width:80%; height:400px; background-color: pink;"
+          style="position: absolute; width: 80%; height: 400px; background-color: pink"
         >
-          <x-view style="background-color:aqua; width:95%;"></x-view>
+          <x-view style="background-color: aqua; width: 95%"></x-view>
         </x-foldview-header-ng>
         <x-foldview-slot-ng
-          style="display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); width:90%; height:300px; flex-grow:2; flex-direction:column; background-color: salmon;"
+          style="display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); width: 90%; height: 300px; flex-grow: 2; flex-direction: column; background-color: salmon"
         >
-          <scroll-view style="width:80%; height:300px;" scroll-y>
-            <x-view style="background-color:orange;"> </x-view>
-            <x-view style="background-color:tomato;"> </x-view>
-            <x-view style="background-color:thistle;"> </x-view>
-            <x-view style="background-color:forestgreen;"> </x-view>
-            <x-view style="background-color:firebrick;"> </x-view>
-            <x-view style="background-color:silver;"> </x-view>
-            <x-view style="background-color:seashell;"> </x-view>
+          <scroll-view style="width: 80%; height: 300px" scroll-y>
+            <x-view style="background-color: orange"> </x-view>
+            <x-view style="background-color: tomato"> </x-view>
+            <x-view style="background-color: thistle"> </x-view>
+            <x-view style="background-color: forestgreen"> </x-view>
+            <x-view style="background-color: firebrick"> </x-view>
+            <x-view style="background-color: silver"> </x-view>
+            <x-view style="background-color: seashell"> </x-view>
           </scroll-view>
         </x-foldview-slot-ng>
       </x-foldview-ng>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/swipe-basic.html b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/swipe-basic.html
index d7c19bd7c3..13af735092 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/swipe-basic.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/swipe-basic.html
@@ -35,27 +35,27 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: row;"
+      style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: row"
     >
       <x-foldview-ng
-        style="width:80%; height:400px; background-color: wheat;display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: column;"
+        style="width: 80%; height: 400px; background-color: wheat; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column"
       >
         <x-foldview-header-ng
-          style="position:absolute; width:100%; height:200px;"
+          style="position: absolute; width: 100%; height: 200px"
         >
           <x-view
-            style="background-color: aqua; width:100%; height:300px"
+            style="background-color: aqua; width: 100%; height: 300px"
           ></x-view>
         </x-foldview-header-ng>
-        <x-foldview-slot-ng style="width:100%; height:400px;">
-          <scroll-view style="width:80%; height:100%; " scroll-y>
-            <x-view style="background-color:orange;"> </x-view>
-            <x-view style="background-color:tomato;"> </x-view>
-            <x-view style="background-color:thistle;"> </x-view>
-            <x-view style="background-color:forestgreen;"> </x-view>
-            <x-view style="background-color:firebrick;"> </x-view>
-            <x-view style="background-color:silver;"> </x-view>
-            <x-view style="background-color:seashell;"> </x-view>
+        <x-foldview-slot-ng style="width: 100%; height: 400px">
+          <scroll-view style="width: 80%; height: 100%" scroll-y>
+            <x-view style="background-color: orange"> </x-view>
+            <x-view style="background-color: tomato"> </x-view>
+            <x-view style="background-color: thistle"> </x-view>
+            <x-view style="background-color: forestgreen"> </x-view>
+            <x-view style="background-color: firebrick"> </x-view>
+            <x-view style="background-color: silver"> </x-view>
+            <x-view style="background-color: seashell"> </x-view>
           </scroll-view>
         </x-foldview-slot-ng>
       </x-foldview-ng>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/swipe-with-x-scroll-view.html b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/swipe-with-x-scroll-view.html
index 1ef7985265..69e3f54b0e 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/swipe-with-x-scroll-view.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/swipe-with-x-scroll-view.html
@@ -35,27 +35,27 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: row;"
+      style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: row"
     >
       <x-foldview-ng
-        style="width:80%; height:400px; background-color: wheat;display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: column;"
+        style="width: 80%; height: 400px; background-color: wheat; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column"
       >
         <x-foldview-header-ng
-          style="position:absolute; width:100%; height:200px;"
+          style="position: absolute; width: 100%; height: 200px"
         >
           <x-view
-            style="background-color: aqua; width:100%; height:300px"
+            style="background-color: aqua; width: 100%; height: 300px"
           ></x-view>
         </x-foldview-header-ng>
-        <x-foldview-slot-ng style="width:100%; height:400px;">
-          <scroll-view style="width:80%; height:100%; " scroll-x>
-            <x-view style="background-color:orange;"> </x-view>
-            <x-view style="background-color:tomato;"> </x-view>
-            <x-view style="background-color:thistle;"> </x-view>
-            <x-view style="background-color:forestgreen;"> </x-view>
-            <x-view style="background-color:firebrick;"> </x-view>
-            <x-view style="background-color:silver;"> </x-view>
-            <x-view style="background-color:seashell;"> </x-view>
+        <x-foldview-slot-ng style="width: 100%; height: 400px">
+          <scroll-view style="width: 80%; height: 100%" scroll-x>
+            <x-view style="background-color: orange"> </x-view>
+            <x-view style="background-color: tomato"> </x-view>
+            <x-view style="background-color: thistle"> </x-view>
+            <x-view style="background-color: forestgreen"> </x-view>
+            <x-view style="background-color: firebrick"> </x-view>
+            <x-view style="background-color: silver"> </x-view>
+            <x-view style="background-color: seashell"> </x-view>
           </scroll-view>
         </x-foldview-slot-ng>
       </x-foldview-ng>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/with-x-refresh-view.html b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/with-x-refresh-view.html
index aac4f76ea5..8e82389708 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/with-x-refresh-view.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/with-x-refresh-view.html
@@ -37,7 +37,9 @@
       background-color: green;
       --lynx-display: linear;
       --lynx-linear-orientation: vertical;
-      --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-vertical);
+      --lynx-linear-orientation-toggle: var(
+        --lynx-linear-orientation-vertical
+      );
     }
 
     .refresh-header {
@@ -54,7 +56,9 @@
       height: 100%;
       display: linear;
       --lynx-linear-orientation: vertical;
-      --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-vertical);
+      --lynx-linear-orientation-toggle: var(
+        --lynx-linear-orientation-vertical
+      );
       background-color: yellow;
     }
 
@@ -78,30 +82,30 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: row;"
+      style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: row"
     >
       <x-foldview-ng
-        style="width:80%; height:400px; background-color: wheat;display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: column;"
+        style="width: 80%; height: 400px; background-color: wheat; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column"
       >
         <x-foldview-header-ng
-          style="position:absolute; width:100%; height:200px;"
+          style="position: absolute; width: 100%; height: 200px"
         >
           <x-view
-            style="background-color: aqua; width:100%; height:300px"
+            style="background-color: aqua; width: 100%; height: 300px"
           ></x-view>
         </x-foldview-header-ng>
-        <x-foldview-slot-ng style="width:100%; height:400px;">
+        <x-foldview-slot-ng style="width: 100%; height: 400px">
           <x-refresh-view class="refresh-view" id="refresh-view">
             <x-refresh-header class="refresh-header"> </x-refresh-header>
 
-            <scroll-view style="width:80%; height:100%; " scroll-y>
-              <x-view style="background-color:orange;"> </x-view>
-              <x-view style="background-color:tomato;"> </x-view>
-              <x-view style="background-color:thistle;"> </x-view>
-              <x-view style="background-color:forestgreen;"> </x-view>
-              <x-view style="background-color:firebrick;"> </x-view>
-              <x-view style="background-color:silver;"> </x-view>
-              <x-view style="background-color:seashell;"> </x-view>
+            <scroll-view style="width: 80%; height: 100%" scroll-y>
+              <x-view style="background-color: orange"> </x-view>
+              <x-view style="background-color: tomato"> </x-view>
+              <x-view style="background-color: thistle"> </x-view>
+              <x-view style="background-color: forestgreen"> </x-view>
+              <x-view style="background-color: firebrick"> </x-view>
+              <x-view style="background-color: silver"> </x-view>
+              <x-view style="background-color: seashell"> </x-view>
             </scroll-view>
 
             <x-refresh-footer class="refresh-footer"> </x-refresh-footer>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/with-x-viewpager-ng-pan-both-x-and-y.html b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/with-x-viewpager-ng-pan-both-x-and-y.html
index bf63cba0dd..80c94c1f9e 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/with-x-viewpager-ng-pan-both-x-and-y.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/with-x-viewpager-ng-pan-both-x-and-y.html
@@ -35,38 +35,38 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: row;"
+      style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: row"
     >
       <x-foldview-ng
-        style="width:80%; height:400px; background-color: wheat;display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: column;"
+        style="width: 80%; height: 400px; background-color: wheat; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column"
       >
         <x-foldview-header-ng
-          style="position:absolute; width:100%; height:200px;"
+          style="position: absolute; width: 100%; height: 200px"
         >
           <x-view
-            style="background-color: aqua; width:100%; height:300px"
+            style="background-color: aqua; width: 100%; height: 300px"
           ></x-view>
         </x-foldview-header-ng>
-        <x-foldview-slot-ng style="width:100%; height:400px;">
-          <x-viewpager-ng style="width:200px;height:200px;">
-            <x-viewpager-item-ng style="background:wheat;">
+        <x-foldview-slot-ng style="width: 100%; height: 400px">
+          <x-viewpager-ng style="width: 200px; height: 200px">
+            <x-viewpager-item-ng style="background: wheat">
               <x-view
-                style="height:100px; width:100px; background: pink;"
+                style="height: 100px; width: 100px; background: pink"
               ></x-view>
             </x-viewpager-item-ng>
-            <x-viewpager-item-ng style="background:sandybrown;">
+            <x-viewpager-item-ng style="background: sandybrown">
               <x-view
-                style="height:100px; width:100px; background:pink;"
+                style="height: 100px; width: 100px; background: pink"
               ></x-view>
             </x-viewpager-item-ng>
-            <x-viewpager-item-ng style="background-color: rosybrown;">
+            <x-viewpager-item-ng style="background-color: rosybrown">
               <x-view
-                style="height:100px; width:100px; background:pink;"
+                style="height: 100px; width: 100px; background: pink"
               ></x-view>
             </x-viewpager-item-ng>
-            <x-viewpager-item-ng style="background-color:fuchsia;">
+            <x-viewpager-item-ng style="background-color: fuchsia">
               <x-view
-                style="height:100px; width:100px; background:pink;"
+                style="height: 100px; width: 100px; background: pink"
               ></x-view>
             </x-viewpager-item-ng>
           </x-viewpager-ng>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/with-x-viewpager-ng.html b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/with-x-viewpager-ng.html
index bf63cba0dd..80c94c1f9e 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/with-x-viewpager-ng.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-foldview-ng/with-x-viewpager-ng.html
@@ -35,38 +35,38 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: row;"
+      style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: row"
     >
       <x-foldview-ng
-        style="width:80%; height:400px; background-color: wheat;display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: column;"
+        style="width: 80%; height: 400px; background-color: wheat; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column"
       >
         <x-foldview-header-ng
-          style="position:absolute; width:100%; height:200px;"
+          style="position: absolute; width: 100%; height: 200px"
         >
           <x-view
-            style="background-color: aqua; width:100%; height:300px"
+            style="background-color: aqua; width: 100%; height: 300px"
           ></x-view>
         </x-foldview-header-ng>
-        <x-foldview-slot-ng style="width:100%; height:400px;">
-          <x-viewpager-ng style="width:200px;height:200px;">
-            <x-viewpager-item-ng style="background:wheat;">
+        <x-foldview-slot-ng style="width: 100%; height: 400px">
+          <x-viewpager-ng style="width: 200px; height: 200px">
+            <x-viewpager-item-ng style="background: wheat">
               <x-view
-                style="height:100px; width:100px; background: pink;"
+                style="height: 100px; width: 100px; background: pink"
               ></x-view>
             </x-viewpager-item-ng>
-            <x-viewpager-item-ng style="background:sandybrown;">
+            <x-viewpager-item-ng style="background: sandybrown">
               <x-view
-                style="height:100px; width:100px; background:pink;"
+                style="height: 100px; width: 100px; background: pink"
               ></x-view>
             </x-viewpager-item-ng>
-            <x-viewpager-item-ng style="background-color: rosybrown;">
+            <x-viewpager-item-ng style="background-color: rosybrown">
               <x-view
-                style="height:100px; width:100px; background:pink;"
+                style="height: 100px; width: 100px; background: pink"
               ></x-view>
             </x-viewpager-item-ng>
-            <x-viewpager-item-ng style="background-color:fuchsia;">
+            <x-viewpager-item-ng style="background-color: fuchsia">
               <x-view
-                style="height:100px; width:100px; background:pink;"
+                style="height: 100px; width: 100px; background: pink"
               ></x-view>
             </x-viewpager-item-ng>
           </x-viewpager-ng>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-image/basic-inherit.html b/packages/web-platform/web-tests/tests/web-elements/x-image/basic-inherit.html
index 4c84595d55..d9b347c030 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-image/basic-inherit.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-image/basic-inherit.html
@@ -35,7 +35,7 @@
       <x-image
         placeholder="../../resources/firefox-logo.png"
         auto-size
-        style="width:400px; height:400px;opacity:0.33;transform: translateX(-50%);filter: grayscale(0.5) blur(2px);"
+        style="width: 400px; height: 400px; opacity: 0.33; transform: translateX(-50%); filter: grayscale(0.5) blur(2px)"
       >
       </x-image>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-image/basic-placeholder.html b/packages/web-platform/web-tests/tests/web-elements/x-image/basic-placeholder.html
index 335fbf1ecb..e2dae98d62 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-image/basic-placeholder.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-image/basic-placeholder.html
@@ -34,7 +34,7 @@
     <x-view class="page">
       <x-image
         placeholder="../../resources/firefox-logo.png"
-        style="width:100px; height:400px; background-color: aquamarine;"
+        style="width: 100px; height: 400px; background-color: aquamarine"
       >
       </x-image>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-image/basic.html b/packages/web-platform/web-tests/tests/web-elements/x-image/basic.html
index 89b91297fe..b5df204f63 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-image/basic.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-image/basic.html
@@ -35,7 +35,7 @@
     <x-view class="page">
       <x-image
         src="../../resources/firefox-logo.png"
-        style="width:100px; height:400px; background-color: aquamarine;"
+        style="width: 100px; height: 400px; background-color: aquamarine"
       ></x-image>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-image/blur-radius.html b/packages/web-platform/web-tests/tests/web-elements/x-image/blur-radius.html
index dbc25830ef..aa5ddc78fd 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-image/blur-radius.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-image/blur-radius.html
@@ -35,7 +35,7 @@
       <x-image
         src="../../resources/firefox-logo.png"
         blur-radius="20px"
-        style="width:100px; height:100px; background-color: aquamarine;"
+        style="width: 100px; height: 100px; background-color: aquamarine"
       ></x-image>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-image/border-radius.html b/packages/web-platform/web-tests/tests/web-elements/x-image/border-radius.html
index 1d9c7fecf3..4ca24c1bf9 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-image/border-radius.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-image/border-radius.html
@@ -35,7 +35,7 @@
     <x-view class="page">
       <x-image
         src="../../resources/inline-image.png"
-        style="width:100px; height:100px; background-color: aquamarine;border-radius: 50%;"
+        style="width: 100px; height: 100px; background-color: aquamarine; border-radius: 50%"
       ></x-image>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-image/event-error.html b/packages/web-platform/web-tests/tests/web-elements/x-image/event-error.html
index 7c667d969b..8016deadbe 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-image/event-error.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-image/event-error.html
@@ -32,16 +32,22 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <script type="module">
-    document.querySelector('#target').addEventListener('error', (ev) => {
-      ev.target.style.setProperty('background-color', 'green');
-    });
-    document.querySelector('#target').setAttribute('src', '/unknown/path');
+    document.querySelector('#target').addEventListener(
+        'error',
+        (ev) => {
+          ev.target.style.setProperty('background-color', 'green');
+        },
+      );
+      document.querySelector('#target').setAttribute(
+        'src',
+        '/unknown/path',
+      );
     </script>
     <x-view class="page">
       <x-image
         src="../../resources/firefox-logo.png"
         id="target"
-        style="width:100px; height:400px; background-color: aquamarine;"
+        style="width: 100px; height: 400px; background-color: aquamarine"
       >
       </x-image>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-image/event-load.html b/packages/web-platform/web-tests/tests/web-elements/x-image/event-load.html
index 5d70563b4b..3d3906c44c 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-image/event-load.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-image/event-load.html
@@ -33,19 +33,19 @@
     <script src="/web-elements.js" defer></script>
     <script type="module">
     document.querySelector('#target').addEventListener('load', (ev) => {
-      if (ev.detail.height === 984 && ev.detail.width === 953) {
-        ev.target.style.setProperty('background-color', 'green');
-      }
-    });
-    document.querySelector('#target').setAttribute(
-      'src',
-      '../../resources/firefox-logo.png',
-    );
+        if (ev.detail.height === 984 && ev.detail.width === 953) {
+          ev.target.style.setProperty('background-color', 'green');
+        }
+      });
+      document.querySelector('#target').setAttribute(
+        'src',
+        '../../resources/firefox-logo.png',
+      );
     </script>
     <x-view class="page">
       <x-image
         id="target"
-        style="width:100px; height:400px; background-color: aquamarine;"
+        style="width: 100px; height: 400px; background-color: aquamarine"
       >
       </x-image>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-image/mode-aspectfill-placeholder.html b/packages/web-platform/web-tests/tests/web-elements/x-image/mode-aspectfill-placeholder.html
index 8c07b7e671..451ed0ce5b 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-image/mode-aspectfill-placeholder.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-image/mode-aspectfill-placeholder.html
@@ -36,7 +36,7 @@
       <x-image
         mode="aspectFill"
         placeholder="../../resources/firefox-logo.png"
-        style="width:100px; height:400px; background-color: aquamarine;"
+        style="width: 100px; height: 400px; background-color: aquamarine"
       ></x-image>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-image/mode-aspectfill.html b/packages/web-platform/web-tests/tests/web-elements/x-image/mode-aspectfill.html
index c2b8f67722..323d09df53 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-image/mode-aspectfill.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-image/mode-aspectfill.html
@@ -35,7 +35,7 @@
       <x-image
         mode="aspectFill"
         src="../../resources/firefox-logo.png"
-        style="width:100px; height:400px; background-color: aquamarine;"
+        style="width: 100px; height: 400px; background-color: aquamarine"
       ></x-image>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-image/mode-aspectfit-placeholder.html b/packages/web-platform/web-tests/tests/web-elements/x-image/mode-aspectfit-placeholder.html
index 5232b402ac..343ca2373d 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-image/mode-aspectfit-placeholder.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-image/mode-aspectfit-placeholder.html
@@ -36,7 +36,7 @@
       <x-image
         mode="aspectFit"
         src="../../resources/firefox-logo.png"
-        style="width:100px; height:400px; background-color: aquamarine;"
+        style="width: 100px; height: 400px; background-color: aquamarine"
       ></x-image>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-image/mode-aspectfit.html b/packages/web-platform/web-tests/tests/web-elements/x-image/mode-aspectfit.html
index 0d0a277588..a009fe5a14 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-image/mode-aspectfit.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-image/mode-aspectfit.html
@@ -35,7 +35,7 @@
       <x-image
         mode="aspectFit"
         placeholder="../../resources/firefox-logo.png"
-        style="width:100px; height:400px; background-color: aquamarine;"
+        style="width: 100px; height: 400px; background-color: aquamarine"
       ></x-image>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-image/mode-center-placeholder.html b/packages/web-platform/web-tests/tests/web-elements/x-image/mode-center-placeholder.html
index a05b53b56e..b0e66c1151 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-image/mode-center-placeholder.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-image/mode-center-placeholder.html
@@ -35,7 +35,7 @@
       <x-image
         mode="center"
         placeholder="../../resources/firefox-logo.png"
-        style="width:100px; height:400px; background-color: aquamarine;"
+        style="width: 100px; height: 400px; background-color: aquamarine"
       >
       </x-image>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-image/mode-center.html b/packages/web-platform/web-tests/tests/web-elements/x-image/mode-center.html
index 6b68600039..a56de8b1c3 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-image/mode-center.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-image/mode-center.html
@@ -35,7 +35,7 @@
       <x-image
         mode="center"
         src="../../resources/firefox-logo.png"
-        style="width:100px; height:400px; background-color: aquamarine;"
+        style="width: 100px; height: 400px; background-color: aquamarine"
       ></x-image>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-image/placeholder-src-change-with-placeholder-exist.html b/packages/web-platform/web-tests/tests/web-elements/x-image/placeholder-src-change-with-placeholder-exist.html
index 50415b73d3..aa6c4ecb74 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-image/placeholder-src-change-with-placeholder-exist.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-image/placeholder-src-change-with-placeholder-exist.html
@@ -36,7 +36,7 @@
         id="target"
         src="../../resources/chromium-logo.png"
         placeholder="../../resources/firefox-logo.png"
-        style="width:100px; height:400px; background-color: aquamarine;"
+        style="width: 100px; height: 400px; background-color: aquamarine"
       >
       </x-image>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-image/placeholder-src-do-exist.html b/packages/web-platform/web-tests/tests/web-elements/x-image/placeholder-src-do-exist.html
index ce7f35d235..f07e236bb6 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-image/placeholder-src-do-exist.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-image/placeholder-src-do-exist.html
@@ -35,7 +35,7 @@
       <x-image
         src="../../resources/chromium-logo.png"
         placeholder="../../resources/firefox-logo.png"
-        style="width:100px; height:400px; background-color: aquamarine;"
+        style="width: 100px; height: 400px; background-color: aquamarine"
       >
       </x-image>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-image/placeholder-src-not-exist.html b/packages/web-platform/web-tests/tests/web-elements/x-image/placeholder-src-not-exist.html
index 761dea2511..e34eeeb1cf 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-image/placeholder-src-not-exist.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-image/placeholder-src-not-exist.html
@@ -35,7 +35,7 @@
       <x-image
         src="path/not/exist"
         placeholder="../../resources/firefox-logo.png"
-        style="width:100px; height:400px; background-color: aquamarine;"
+        style="width: 100px; height: 400px; background-color: aquamarine"
       >
       </x-image>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-image/position-basic.html b/packages/web-platform/web-tests/tests/web-elements/x-image/position-basic.html
index d2f805de0b..68133fa0e3 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-image/position-basic.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-image/position-basic.html
@@ -39,9 +39,11 @@
     <x-view class="page">
       <x-image
         src="../../resources/firefox-logo.png"
-        style="width:100px; height:100px; background-color: aquamarine;position: absolute; top: 0; right: 45px"
+        style="width: 100px; height: 100px; background-color: aquamarine; position: absolute; top: 0; right: 45px"
       ></x-image>
-      <x-view style="width:200px;height:200px;background-color:pink"></x-view>
+      <x-view
+        style="width: 200px; height: 200px; background-color: pink"
+      ></x-view>
     </x-view>
   </body>
 </html>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-image/position.html b/packages/web-platform/web-tests/tests/web-elements/x-image/position.html
index 8bee0b267a..5e4b4da1cc 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-image/position.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-image/position.html
@@ -40,9 +40,11 @@
       <x-image
         auto-size
         src="../../resources/firefox-logo.png"
-        style="width:100px; height:100px; background-color: aquamarine;position: absolute; top: 0; right: 45px"
+        style="width: 100px; height: 100px; background-color: aquamarine; position: absolute; top: 0; right: 45px"
       ></x-image>
-      <x-view style="width:200px;height:200px;background-color:pink"></x-view>
+      <x-view
+        style="width: 200px; height: 200px; background-color: pink"
+      ></x-view>
     </x-view>
   </body>
 </html>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-confirm-type-done.html b/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-confirm-type-done.html
index d0a2b23289..34c21aba20 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-confirm-type-done.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-confirm-type-done.html
@@ -34,7 +34,7 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-input
-        style="height:50px; width:200px;border-width:1px;"
+        style="height: 50px; width: 200px; border-width: 1px"
         confirm-type="done"
       ></x-input>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-confirm-type-go.html b/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-confirm-type-go.html
index 00fa7eec76..2a12e63d68 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-confirm-type-go.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-confirm-type-go.html
@@ -34,7 +34,7 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-input
-        style="height:50px; width:200px;border-width:1px;"
+        style="height: 50px; width: 200px; border-width: 1px"
         confirm-type="go"
       ></x-input>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-confirm-type-next.html b/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-confirm-type-next.html
index 91974476db..419ce6b240 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-confirm-type-next.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-confirm-type-next.html
@@ -34,7 +34,7 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-input
-        style="height:50px; width:200px;border-width:1px;"
+        style="height: 50px; width: 200px; border-width: 1px"
         confirm-type="next"
       ></x-input>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-confirm-type-search.html b/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-confirm-type-search.html
index e097614622..1182fd4dde 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-confirm-type-search.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-confirm-type-search.html
@@ -34,7 +34,7 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-input
-        style="height:50px; width:200px;border-width:1px;"
+        style="height: 50px; width: 200px; border-width: 1px"
         confirm-type="search"
       ></x-input>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-confirm-type-send.html b/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-confirm-type-send.html
index c504b6ebba..6208aa0af0 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-confirm-type-send.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-confirm-type-send.html
@@ -34,7 +34,7 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-input
-        style="height:50px; width:200px;border-width:1px;"
+        style="height: 50px; width: 200px; border-width: 1px"
         confirm-type="send"
       ></x-input>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-disabled.html b/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-disabled.html
index c08b9c38c7..762f8f820c 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-disabled.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-disabled.html
@@ -38,7 +38,7 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-input
-        style="height:50px; width:200px;border-width:1px;"
+        style="height: 50px; width: 200px; border-width: 1px"
         value="123"
         disabled
       ></x-input>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-maxlength-change-do-not-change-value.html b/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-maxlength-change-do-not-change-value.html
index a47233cc03..b3c446b906 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-maxlength-change-do-not-change-value.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-maxlength-change-do-not-change-value.html
@@ -37,7 +37,7 @@
         id="target"
         value="1234567890"
         maxlength="10"
-        style="height:50px; width:200px;"
+        style="height: 50px; width: 200px"
       ></x-input>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-maxlength-first-screen-cut-value.html b/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-maxlength-first-screen-cut-value.html
index d9d83a8451..ef8b850864 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-maxlength-first-screen-cut-value.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-maxlength-first-screen-cut-value.html
@@ -37,7 +37,7 @@
         id="target"
         value="hello world"
         maxlength="5"
-        style="height:50px; width:200px;"
+        style="height: 50px; width: 200px"
       ></x-input>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-readonly.html b/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-readonly.html
index 624088a142..9d0aee76f7 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-readonly.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-readonly.html
@@ -34,7 +34,7 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-input
-        style="height:50px; width:200px;border-width:1px;"
+        style="height: 50px; width: 200px; border-width: 1px"
         value="123"
         readonly
       ></x-input>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-spell-check.html b/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-spell-check.html
index 02ab7c9465..d47007174f 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-spell-check.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-spell-check.html
@@ -33,7 +33,7 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
-      <x-input style="height:50px; width:200px;" spell-check></x-input>
+      <x-input style="height: 50px; width: 200px" spell-check></x-input>
     </x-view>
   </body>
 </html>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-type-digit.html b/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-type-digit.html
index 6bfd1ca890..d5ea46ea52 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-type-digit.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-type-digit.html
@@ -34,7 +34,7 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-input
-        style="height:50px; width:200px;border-width:1px;"
+        style="height: 50px; width: 200px; border-width: 1px"
         type="digit"
       ></x-input>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-type-email.html b/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-type-email.html
index ae0de42313..61dd76d526 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-type-email.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-type-email.html
@@ -33,7 +33,7 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
-      <x-input style="height:50px; width:200px;" type="email"></x-input>
+      <x-input style="height: 50px; width: 200px" type="email"></x-input>
     </x-view>
   </body>
 </html>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-type-number.html b/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-type-number.html
index 8c4c9eb805..a5d1337b35 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-type-number.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-type-number.html
@@ -33,7 +33,7 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
-      <x-input style="height:50px; width:200px;" type="number"></x-input>
+      <x-input style="height: 50px; width: 200px" type="number"></x-input>
     </x-view>
   </body>
 </html>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-type-tel.html b/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-type-tel.html
index dcae373ff2..cd9f9e04c7 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-type-tel.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-type-tel.html
@@ -33,7 +33,7 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
-      <x-input style="height:50px; width:200px;" type="tel"></x-input>
+      <x-input style="height: 50px; width: 200px" type="tel"></x-input>
     </x-view>
   </body>
 </html>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-type-text.html b/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-type-text.html
index 7966fe3412..5439a238ec 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-type-text.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-type-text.html
@@ -33,7 +33,7 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
-      <x-input style="height:50px; width:200px;" type="text"></x-input>
+      <x-input style="height: 50px; width: 200px" type="text"></x-input>
     </x-view>
   </body>
 </html>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-value.html b/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-value.html
index 08a3939c13..2d01b074c8 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-value.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-input/attribute-value.html
@@ -33,7 +33,7 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
-      <x-input value="hello world" style="height:50px; width:200px;"></x-input>
+      <x-input value="hello world" style="height: 50px; width: 200px"></x-input>
     </x-view>
   </body>
 </html>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-input/event-confirm.html b/packages/web-platform/web-tests/tests/web-elements/x-input/event-confirm.html
index aaef7a179a..7a6754d4c4 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-input/event-confirm.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-input/event-confirm.html
@@ -35,7 +35,7 @@
     <x-view class="page">
       <x-input
         id="target"
-        style="height:50px; width:200px;border: 1px;"
+        style="height: 50px; width: 200px; border: 1px"
       ></x-input>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-input/event-focus-blur.html b/packages/web-platform/web-tests/tests/web-elements/x-input/event-focus-blur.html
index b2467327d7..6d7f7312da 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-input/event-focus-blur.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-input/event-focus-blur.html
@@ -36,7 +36,7 @@
       <x-input
         id="target"
         value="hello"
-        style="height:50px; width:200px;border: 1px;"
+        style="height: 50px; width: 200px; border: 1px"
       ></x-input>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-input/event-input-number-dot.html b/packages/web-platform/web-tests/tests/web-elements/x-input/event-input-number-dot.html
index bd17a601a4..689851c8f4 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-input/event-input-number-dot.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-input/event-input-number-dot.html
@@ -35,7 +35,7 @@
     <x-view class="page">
       <x-input
         id="target"
-        style="height:50px; width:200px;border-width: 1px;"
+        style="height: 50px; width: 200px; border-width: 1px"
         type="number"
       ></x-input>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-input/event-input.html b/packages/web-platform/web-tests/tests/web-elements/x-input/event-input.html
index b2467327d7..6d7f7312da 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-input/event-input.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-input/event-input.html
@@ -36,7 +36,7 @@
       <x-input
         id="target"
         value="hello"
-        style="height:50px; width:200px;border: 1px;"
+        style="height: 50px; width: 200px; border: 1px"
       ></x-input>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-input/method.html b/packages/web-platform/web-tests/tests/web-elements/x-input/method.html
index c5b7901a57..65d3f706a1 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-input/method.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-input/method.html
@@ -35,7 +35,7 @@
     <x-view class="page">
       <x-input
         id="target"
-        style="height:50px; width:200px;border: 1px;"
+        style="height: 50px; width: 200px; border: 1px"
         value="hello"
       ></x-input>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-input/placeholder-color.html b/packages/web-platform/web-tests/tests/web-elements/x-input/placeholder-color.html
index 8cde92a5e4..abb159f769 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-input/placeholder-color.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-input/placeholder-color.html
@@ -36,7 +36,7 @@
       <x-input
         placeholder="hello world"
         placeholder-color="#FF0000"
-        style="height:50px; width:200px;"
+        style="height: 50px; width: 200px"
       ></x-input>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-input/placeholder-weight.html b/packages/web-platform/web-tests/tests/web-elements/x-input/placeholder-weight.html
index 11da6eb75f..94754e7db5 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-input/placeholder-weight.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-input/placeholder-weight.html
@@ -36,7 +36,7 @@
       <x-input
         placeholder="hello world"
         placeholder-font-weight="bold"
-        style="height:50px; width:200px;"
+        style="height: 50px; width: 200px"
       ></x-input>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-input/placeholder.html b/packages/web-platform/web-tests/tests/web-elements/x-input/placeholder.html
index 572c56157f..3c474e2de3 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-input/placeholder.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-input/placeholder.html
@@ -35,7 +35,7 @@
     <x-view class="page">
       <x-input
         placeholder="hello world"
-        style="height:50px; width:200px;"
+        style="height: 50px; width: 200px"
       ></x-input>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-input/press-enter-do-not-submit-value.html b/packages/web-platform/web-tests/tests/web-elements/x-input/press-enter-do-not-submit-value.html
index aaef7a179a..7a6754d4c4 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-input/press-enter-do-not-submit-value.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-input/press-enter-do-not-submit-value.html
@@ -35,7 +35,7 @@
     <x-view class="page">
       <x-input
         id="target"
-        style="height:50px; width:200px;border: 1px;"
+        style="height: 50px; width: 200px; border: 1px"
       ></x-input>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-input/style-background-color.html b/packages/web-platform/web-tests/tests/web-elements/x-input/style-background-color.html
index 8f285c3111..8dcec69d00 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-input/style-background-color.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-input/style-background-color.html
@@ -34,18 +34,18 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-view
-        style="height:36px;border-radius: 6px;border: 0.5px solid;padding: 0 12px;overflow: visible;"
+        style="height: 36px; border-radius: 6px; border: 0.5px solid; padding: 0 12px; overflow: visible"
       >
         <x-input
-          style="height:40px;z-index: -1;"
+          style="height: 40px; z-index: -1"
           confirm-type="done"
         ></x-input>
       </x-view>
       <x-view
-        style="height:36px;border-radius: 6px;border: 0.5px solid;padding: 0 12px;overflow: visible;"
+        style="height: 36px; border-radius: 6px; border: 0.5px solid; padding: 0 12px; overflow: visible"
       >
         <x-input
-          style="height:40px;background-color: red;z-index: -1;"
+          style="height: 40px; background-color: red; z-index: -1"
           confirm-type="done"
         ></x-input>
       </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-input/style-inherit-color.html b/packages/web-platform/web-tests/tests/web-elements/x-input/style-inherit-color.html
index f9a86914d4..1a34e36bf6 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-input/style-inherit-color.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-input/style-inherit-color.html
@@ -34,19 +34,19 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-view
-        style="height:36px;border-radius: 6px;border: 0.5px solid;padding: 0 12px;overflow: visible;"
+        style="height: 36px; border-radius: 6px; border: 0.5px solid; padding: 0 12px; overflow: visible"
       >
         <x-input
-          style="height:40px;z-index: -1;"
+          style="height: 40px; z-index: -1"
           confirm-type="done"
           value="hello"
         ></x-input>
       </x-view>
       <x-view
-        style="height:36px;border-radius: 6px;border: 0.5px solid;padding: 0 12px;overflow: visible;"
+        style="height: 36px; border-radius: 6px; border: 0.5px solid; padding: 0 12px; overflow: visible"
       >
         <x-input
-          style="height:40px;color: red;z-index: -1;"
+          style="height: 40px; color: red; z-index: -1"
           confirm-type="done"
           value="hello"
         ></x-input>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-input/style-inherit-margin.html b/packages/web-platform/web-tests/tests/web-elements/x-input/style-inherit-margin.html
index 79f849ac10..bd29c6e471 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-input/style-inherit-margin.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-input/style-inherit-margin.html
@@ -34,18 +34,18 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-view
-        style="height:36px;border-radius: 6px;border: 0.5px solid;padding: 0 12px;overflow: visible;"
+        style="height: 36px; border-radius: 6px; border: 0.5px solid; padding: 0 12px; overflow: visible"
       >
         <x-input
-          style="height:40px;z-index: -1;"
+          style="height: 40px; z-index: -1"
           confirm-type="done"
         ></x-input>
       </x-view>
       <x-view
-        style="height:36px;border-radius: 6px;border: 0.5px solid;padding: 0 12px;overflow: visible;"
+        style="height: 36px; border-radius: 6px; border: 0.5px solid; padding: 0 12px; overflow: visible"
       >
         <x-input
-          style="height:40px;background-color: red;z-index: -1;margin-top:20px;"
+          style="height: 40px; background-color: red; z-index: -1; margin-top: 20px"
           confirm-type="done"
         ></x-input>
       </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-input/type-password.html b/packages/web-platform/web-tests/tests/web-elements/x-input/type-password.html
index 27f5646993..5c2889663f 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-input/type-password.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-input/type-password.html
@@ -37,7 +37,7 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
-      <x-input style="height:50px; width:200px;" type="password"></x-input>
+      <x-input style="height: 50px; width: 200px" type="password"></x-input>
     </x-view>
   </body>
 </html>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-input/type-value-do-not-show-input.html b/packages/web-platform/web-tests/tests/web-elements/x-input/type-value-do-not-show-input.html
index a7feff1709..baefffc921 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-input/type-value-do-not-show-input.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-input/type-value-do-not-show-input.html
@@ -37,7 +37,7 @@
         id="target"
         placeholder="hello world"
         placeholder-color="#FF0000"
-        style="height:50px; width:200px;"
+        style="height: 50px; width: 200px"
       ></x-input>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/auto-scroll.html b/packages/web-platform/web-tests/tests/web-elements/x-list/auto-scroll.html
index 891ad2f7af..17428752de 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-list/auto-scroll.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/auto-scroll.html
@@ -43,73 +43,82 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <script type="module">
-    document.querySelector('#autoScroll').addEventListener('click', () => {
-      document.querySelector('x-list').autoScroll({ rate: 100, start: true });
-    });
-    document.querySelector('x-list').addEventListener('lynxscroll', (e) => {
-      console.log(e);
-    });
+    document.querySelector('#autoScroll').addEventListener(
+        'click',
+        () => {
+          document.querySelector('x-list').autoScroll({
+            rate: 100,
+            start: true,
+          });
+        },
+      );
+      document.querySelector('x-list').addEventListener(
+        'lynxscroll',
+        (e) => {
+          console.log(e);
+        },
+      );
     </script>
     <x-view class="page">
       <x-list list-type="single" scroll-event-throttle="1000">
-        <list-item item-key="0" class="item" style="--item-index: 0;">
+        <list-item item-key="0" class="item" style="--item-index: 0">
           <x-view></x-view>
         </list-item>
-        <list-item item-key="1" class="item" style="--item-index: 1;">
+        <list-item item-key="1" class="item" style="--item-index: 1">
           <x-view></x-view>
         </list-item>
-        <list-item item-key="2" class="item" style="--item-index: 2;">
+        <list-item item-key="2" class="item" style="--item-index: 2">
           <x-view></x-view>
         </list-item>
-        <list-item item-key="3" class="item" style="--item-index: 3;">
+        <list-item item-key="3" class="item" style="--item-index: 3">
           <x-view></x-view>
         </list-item>
-        <list-item item-key="4" class="item" style="--item-index: 4;">
+        <list-item item-key="4" class="item" style="--item-index: 4">
           <x-view></x-view>
         </list-item>
-        <list-item item-key="5" class="item" style="--item-index: 5;">
+        <list-item item-key="5" class="item" style="--item-index: 5">
           <x-view></x-view>
         </list-item>
-        <list-item item-key="6" class="item" style="--item-index: 6;">
+        <list-item item-key="6" class="item" style="--item-index: 6">
           <x-view></x-view>
         </list-item>
-        <list-item item-key="7" class="item" style="--item-index: 7;">
+        <list-item item-key="7" class="item" style="--item-index: 7">
           <x-view></x-view>
         </list-item>
-        <list-item item-key="8" class="item" style="--item-index: 8;">
+        <list-item item-key="8" class="item" style="--item-index: 8">
           <x-view> </x-view>
         </list-item>
-        <list-item item-key="9" class="item" style="--item-index: 9;">
+        <list-item item-key="9" class="item" style="--item-index: 9">
           <x-view> </x-view>
         </list-item>
-        <list-item item-key="10" class="item" style="--item-index: 10;">
+        <list-item item-key="10" class="item" style="--item-index: 10">
           <x-view> </x-view>
         </list-item>
-        <list-item item-key="11" class="item" style="--item-index: 11;">
+        <list-item item-key="11" class="item" style="--item-index: 11">
           <x-view> </x-view>
         </list-item>
-        <list-item item-key="12" class="item" style="--item-index: 12;">
+        <list-item item-key="12" class="item" style="--item-index: 12">
           <x-view> </x-view>
         </list-item>
-        <list-item item-key="13" class="item" style="--item-index: 13;">
+        <list-item item-key="13" class="item" style="--item-index: 13">
           <x-view> </x-view>
         </list-item>
-        <list-item item-key="14" class="item" style="--item-index: 14;">
+        <list-item item-key="14" class="item" style="--item-index: 14">
           <x-view> </x-view>
         </list-item>
-        <list-item item-key="15" class="item" style="--item-index: 15;">
+        <list-item item-key="15" class="item" style="--item-index: 15">
           <x-view> </x-view>
         </list-item>
-        <list-item item-key="16" class="item" style="--item-index: 16;">
+        <list-item item-key="16" class="item" style="--item-index: 16">
           <x-view> </x-view>
         </list-item>
-        <list-item item-key="17" class="item" style="--item-index: 17;">
+        <list-item item-key="17" class="item" style="--item-index: 17">
           <x-view> </x-view>
         </list-item>
-        <list-item item-key="18" class="item" style="--item-index: 18;">
+        <list-item item-key="18" class="item" style="--item-index: 18">
           <x-view> </x-view>
         </list-item>
-        <list-item item-key="19" class="item" style="--item-index: 19;">
+        <list-item item-key="19" class="item" style="--item-index: 19">
           <x-view> </x-view>
         </list-item>
       </x-list>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/axios-gap-waterfall.html b/packages/web-platform/web-tests/tests/web-elements/x-list/axios-gap-waterfall.html
index 6c10b26845..e20b649c1f 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-list/axios-gap-waterfall.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/axios-gap-waterfall.html
@@ -41,7 +41,7 @@
 
   <body>
     <script src="/web-elements.js" defer></script>
-    <x-view class="page" style="flex-direction: column;">
+    <x-view class="page" style="flex-direction: column">
       <x-list
         list-type="waterfall"
         span-count="2"
@@ -107,84 +107,84 @@
         <list-item
           item-key="8"
           class="item"
-          style="--item-index: 8; height: 203px;"
+          style="--item-index: 8; height: 203px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="9"
           class="item"
-          style="--item-index: 9; height: 339px;"
+          style="--item-index: 9; height: 339px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="10"
           class="item"
-          style="--item-index: 10; height: 291px;"
+          style="--item-index: 10; height: 291px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="11"
           class="item"
-          style="--item-index: 11; height: 165px;"
+          style="--item-index: 11; height: 165px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="12"
           class="item"
-          style="--item-index: 12; height: 267px;"
+          style="--item-index: 12; height: 267px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="13"
           class="item"
-          style="--item-index: 13; height: 281px;"
+          style="--item-index: 13; height: 281px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="14"
           class="item"
-          style="--item-index: 14; height: 294px;"
+          style="--item-index: 14; height: 294px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="15"
           class="item"
-          style="--item-index: 15; height: 239px;"
+          style="--item-index: 15; height: 239px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="16"
           class="item"
-          style="--item-index: 16; height: 173px;"
+          style="--item-index: 16; height: 173px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="17"
           class="item"
-          style="--item-index: 17; height: 185px;"
+          style="--item-index: 17; height: 185px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="18"
           class="item"
-          style="--item-index: 18; height: 220px;"
+          style="--item-index: 18; height: 220px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="19"
           class="item"
-          style="--item-index: 19; height: 180px;"
+          style="--item-index: 19; height: 180px"
         >
           <x-view> </x-view>
         </list-item>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/axis-gap-flow.html b/packages/web-platform/web-tests/tests/web-elements/x-list/axis-gap-flow.html
index d847ff1699..224298ed57 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-list/axis-gap-flow.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/axis-gap-flow.html
@@ -61,7 +61,7 @@
 
   <body>
     <script src="/web-elements.js" defer></script>
-    <x-view class="page" style="flex-direction: column;">
+    <x-view class="page" style="flex-direction: column">
       <x-list
         list-type="flow"
         span-count="2"
@@ -71,112 +71,112 @@
         <list-item
           class="left item"
           item-key="0"
-          style="--item-index: 0;"
+          style="--item-index: 0"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="1"
-          style="--item-index: 1;"
+          style="--item-index: 1"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="2"
-          style="--item-index: 2;"
+          style="--item-index: 2"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="3"
-          style="--item-index: 3;"
+          style="--item-index: 3"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="4"
-          style="--item-index: 4;"
+          style="--item-index: 4"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="5"
-          style="--item-index: 5;"
+          style="--item-index: 5"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="6"
-          style="--item-index: 6;"
+          style="--item-index: 6"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="7"
-          style="--item-index: 7;"
+          style="--item-index: 7"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="8"
-          style="--item-index: 8;"
+          style="--item-index: 8"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="9"
-          style="--item-index: 9;"
+          style="--item-index: 9"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="10"
-          style="--item-index: 10;"
+          style="--item-index: 10"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="11"
-          style="--item-index: 11;"
+          style="--item-index: 11"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="12"
-          style="--item-index: 12;"
+          style="--item-index: 12"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="13"
-          style="--item-index: 13;"
+          style="--item-index: 13"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="14"
-          style="--item-index: 14;"
+          style="--item-index: 14"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="14"
-          style="--item-index: 14;"
+          style="--item-index: 14"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="15"
-          style="--item-index: 15;"
+          style="--item-index: 15"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="15"
-          style="--item-index: 15;"
+          style="--item-index: 15"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="16"
-          style="--item-index: 16;"
+          style="--item-index: 16"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="17"
-          style="--item-index: 17;"
+          style="--item-index: 17"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="18"
-          style="--item-index: 18;"
+          style="--item-index: 18"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="19"
-          style="--item-index: 19;"
+          style="--item-index: 19"
         ><x-view></x-view></list-item>
       </x-list>
 
@@ -190,112 +190,112 @@
         <list-item
           class="left item"
           item-key="0"
-          style="--item-index: 0;"
+          style="--item-index: 0"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="1"
-          style="--item-index: 1;"
+          style="--item-index: 1"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="2"
-          style="--item-index: 2;"
+          style="--item-index: 2"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="3"
-          style="--item-index: 3;"
+          style="--item-index: 3"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="4"
-          style="--item-index: 4;"
+          style="--item-index: 4"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="5"
-          style="--item-index: 5;"
+          style="--item-index: 5"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="6"
-          style="--item-index: 6;"
+          style="--item-index: 6"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="7"
-          style="--item-index: 7;"
+          style="--item-index: 7"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="8"
-          style="--item-index: 8;"
+          style="--item-index: 8"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="9"
-          style="--item-index: 9;"
+          style="--item-index: 9"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="10"
-          style="--item-index: 10;"
+          style="--item-index: 10"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="11"
-          style="--item-index: 11;"
+          style="--item-index: 11"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="12"
-          style="--item-index: 12;"
+          style="--item-index: 12"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="13"
-          style="--item-index: 13;"
+          style="--item-index: 13"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="14"
-          style="--item-index: 14;"
+          style="--item-index: 14"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="14"
-          style="--item-index: 14;"
+          style="--item-index: 14"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="15"
-          style="--item-index: 15;"
+          style="--item-index: 15"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="15"
-          style="--item-index: 15;"
+          style="--item-index: 15"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="16"
-          style="--item-index: 16;"
+          style="--item-index: 16"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="17"
-          style="--item-index: 17;"
+          style="--item-index: 17"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="18"
-          style="--item-index: 18;"
+          style="--item-index: 18"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="19"
-          style="--item-index: 19;"
+          style="--item-index: 19"
         ><x-view></x-view></list-item>
       </x-list>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/axis-gap.html b/packages/web-platform/web-tests/tests/web-elements/x-list/axis-gap.html
index 0b9e3ca6ba..b002ad70cb 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-list/axis-gap.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/axis-gap.html
@@ -53,7 +53,7 @@
 
   <body>
     <script src="/web-elements.js" defer></script>
-    <x-view class="page" style="flex-direction: column;">
+    <x-view class="page" style="flex-direction: column">
       <x-list
         list-type="single"
         id="vertical"
@@ -62,112 +62,112 @@
         <list-item
           class="item"
           item-key="0"
-          style="--item-index: 0;"
+          style="--item-index: 0"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="1"
-          style="--item-index: 1;"
+          style="--item-index: 1"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="2"
-          style="--item-index: 2;"
+          style="--item-index: 2"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="3"
-          style="--item-index: 3;"
+          style="--item-index: 3"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="4"
-          style="--item-index: 4;"
+          style="--item-index: 4"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="5"
-          style="--item-index: 5;"
+          style="--item-index: 5"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="6"
-          style="--item-index: 6;"
+          style="--item-index: 6"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="7"
-          style="--item-index: 7;"
+          style="--item-index: 7"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="8"
-          style="--item-index: 8;"
+          style="--item-index: 8"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="9"
-          style="--item-index: 9;"
+          style="--item-index: 9"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="10"
-          style="--item-index: 10;"
+          style="--item-index: 10"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="11"
-          style="--item-index: 11;"
+          style="--item-index: 11"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="12"
-          style="--item-index: 12;"
+          style="--item-index: 12"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="13"
-          style="--item-index: 13;"
+          style="--item-index: 13"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="14"
-          style="--item-index: 14;"
+          style="--item-index: 14"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="14"
-          style="--item-index: 14;"
+          style="--item-index: 14"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="15"
-          style="--item-index: 15;"
+          style="--item-index: 15"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="15"
-          style="--item-index: 15;"
+          style="--item-index: 15"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="16"
-          style="--item-index: 16;"
+          style="--item-index: 16"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="17"
-          style="--item-index: 17;"
+          style="--item-index: 17"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="18"
-          style="--item-index: 18;"
+          style="--item-index: 18"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="19"
-          style="--item-index: 19;"
+          style="--item-index: 19"
         ><x-view></x-view></list-item>
       </x-list>
 
@@ -180,112 +180,112 @@
         <list-item
           class="item"
           item-key="0"
-          style="--item-index: 0;"
+          style="--item-index: 0"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="1"
-          style="--item-index: 1;"
+          style="--item-index: 1"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="2"
-          style="--item-index: 2;"
+          style="--item-index: 2"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="3"
-          style="--item-index: 3;"
+          style="--item-index: 3"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="4"
-          style="--item-index: 4;"
+          style="--item-index: 4"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="5"
-          style="--item-index: 5;"
+          style="--item-index: 5"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="6"
-          style="--item-index: 6;"
+          style="--item-index: 6"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="7"
-          style="--item-index: 7;"
+          style="--item-index: 7"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="8"
-          style="--item-index: 8;"
+          style="--item-index: 8"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="9"
-          style="--item-index: 9;"
+          style="--item-index: 9"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="10"
-          style="--item-index: 10;"
+          style="--item-index: 10"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="11"
-          style="--item-index: 11;"
+          style="--item-index: 11"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="12"
-          style="--item-index: 12;"
+          style="--item-index: 12"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="13"
-          style="--item-index: 13;"
+          style="--item-index: 13"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="14"
-          style="--item-index: 14;"
+          style="--item-index: 14"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="14"
-          style="--item-index: 14;"
+          style="--item-index: 14"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="15"
-          style="--item-index: 15;"
+          style="--item-index: 15"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="15"
-          style="--item-index: 15;"
+          style="--item-index: 15"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="16"
-          style="--item-index: 16;"
+          style="--item-index: 16"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="17"
-          style="--item-index: 17;"
+          style="--item-index: 17"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="18"
-          style="--item-index: 18;"
+          style="--item-index: 18"
         ><x-view></x-view></list-item>
         <list-item
           class="item"
           item-key="19"
-          style="--item-index: 19;"
+          style="--item-index: 19"
         ><x-view></x-view></list-item>
       </x-list>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/basic-flow.html b/packages/web-platform/web-tests/tests/web-elements/x-list/basic-flow.html
index 46f8d335ad..616669926b 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-list/basic-flow.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/basic-flow.html
@@ -50,117 +50,117 @@
 
   <body>
     <script src="/web-elements.js" defer></script>
-    <x-view class="page" style="flex-direction: column;">
+    <x-view class="page" style="flex-direction: column">
       <x-list list-type="flow" span-count="2">
         <list-item
           class="left item"
           item-key="0"
-          style="--item-index: 0;"
+          style="--item-index: 0"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="1"
-          style="--item-index: 1;"
+          style="--item-index: 1"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="2"
-          style="--item-index: 2;"
+          style="--item-index: 2"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="3"
-          style="--item-index: 3;"
+          style="--item-index: 3"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="4"
-          style="--item-index: 4;"
+          style="--item-index: 4"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="5"
-          style="--item-index: 5;"
+          style="--item-index: 5"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="6"
-          style="--item-index: 6;"
+          style="--item-index: 6"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="7"
-          style="--item-index: 7;"
+          style="--item-index: 7"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="8"
-          style="--item-index: 8;"
+          style="--item-index: 8"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="9"
-          style="--item-index: 9;"
+          style="--item-index: 9"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="10"
-          style="--item-index: 10;"
+          style="--item-index: 10"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="11"
-          style="--item-index: 11;"
+          style="--item-index: 11"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="12"
-          style="--item-index: 12;"
+          style="--item-index: 12"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="13"
-          style="--item-index: 13;"
+          style="--item-index: 13"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="14"
-          style="--item-index: 14;"
+          style="--item-index: 14"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="14"
-          style="--item-index: 14;"
+          style="--item-index: 14"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="15"
-          style="--item-index: 15;"
+          style="--item-index: 15"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="15"
-          style="--item-index: 15;"
+          style="--item-index: 15"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="16"
-          style="--item-index: 16;"
+          style="--item-index: 16"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="17"
-          style="--item-index: 17;"
+          style="--item-index: 17"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="18"
-          style="--item-index: 18;"
+          style="--item-index: 18"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="19"
-          style="--item-index: 19;"
+          style="--item-index: 19"
         ><x-view></x-view></list-item>
       </x-list>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/basic-waterfall.html b/packages/web-platform/web-tests/tests/web-elements/x-list/basic-waterfall.html
index e077f2ff4c..440fef4fdb 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-list/basic-waterfall.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/basic-waterfall.html
@@ -41,7 +41,7 @@
 
   <body>
     <script src="/web-elements.js" defer></script>
-    <x-view class="page" style="flex-direction: column;">
+    <x-view class="page" style="flex-direction: column">
       <x-list list-type="waterfall" span-count="2">
         <list-item
           item-key="0"
@@ -102,84 +102,84 @@
         <list-item
           item-key="8"
           class="item"
-          style="--item-index: 8; height: 203px;"
+          style="--item-index: 8; height: 203px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="9"
           class="item"
-          style="--item-index: 9; height: 339px;"
+          style="--item-index: 9; height: 339px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="10"
           class="item"
-          style="--item-index: 10; height: 291px;"
+          style="--item-index: 10; height: 291px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="11"
           class="item"
-          style="--item-index: 11; height: 165px;"
+          style="--item-index: 11; height: 165px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="12"
           class="item"
-          style="--item-index: 12; height: 267px;"
+          style="--item-index: 12; height: 267px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="13"
           class="item"
-          style="--item-index: 13; height: 281px;"
+          style="--item-index: 13; height: 281px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="14"
           class="item"
-          style="--item-index: 14; height: 294px;"
+          style="--item-index: 14; height: 294px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="15"
           class="item"
-          style="--item-index: 15; height: 239px;"
+          style="--item-index: 15; height: 239px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="16"
           class="item"
-          style="--item-index: 16; height: 173px;"
+          style="--item-index: 16; height: 173px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="17"
           class="item"
-          style="--item-index: 17; height: 185px;"
+          style="--item-index: 17; height: 185px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="18"
           class="item"
-          style="--item-index: 18; height: 220px;"
+          style="--item-index: 18; height: 220px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="19"
           class="item"
-          style="--item-index: 19; height: 180px;"
+          style="--item-index: 19; height: 180px"
         >
           <x-view> </x-view>
         </list-item>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/basic.html b/packages/web-platform/web-tests/tests/web-elements/x-list/basic.html
index ba0abb3e26..42ef2121e3 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-list/basic.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/basic.html
@@ -44,45 +44,45 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-list>
-        <list-item class="item" style="--item-index: 0;" item-key="0"><x-view
+        <list-item class="item" style="--item-index: 0" item-key="0"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 1;" item-key="1"><x-view
+        <list-item class="item" style="--item-index: 1" item-key="1"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 2;" item-key="2"><x-view
+        <list-item class="item" style="--item-index: 2" item-key="2"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 3;" item-key="3"><x-view
+        <list-item class="item" style="--item-index: 3" item-key="3"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 4;" item-key="4"><x-view
+        <list-item class="item" style="--item-index: 4" item-key="4"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 5;" item-key="5"><x-view
+        <list-item class="item" style="--item-index: 5" item-key="5"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 6;" item-key="6"><x-view
+        <list-item class="item" style="--item-index: 6" item-key="6"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 7;" item-key="7"><x-view
+        <list-item class="item" style="--item-index: 7" item-key="7"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 8;" item-key="8"><x-view
+        <list-item class="item" style="--item-index: 8" item-key="8"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 9;" item-key="9"><x-view
+        <list-item class="item" style="--item-index: 9" item-key="9"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 10;" item-key="10"><x-view
+        <list-item class="item" style="--item-index: 10" item-key="10"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 11;" item-key="11"><x-view
+        <list-item class="item" style="--item-index: 11" item-key="11"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 12;" item-key="12"><x-view
+        <list-item class="item" style="--item-index: 12" item-key="12"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 13;" item-key="13"><x-view
+        <list-item class="item" style="--item-index: 13" item-key="13"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 14;" item-key="14"><x-view
+        <list-item class="item" style="--item-index: 14" item-key="14"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 15;" item-key="15"><x-view
+        <list-item class="item" style="--item-index: 15" item-key="15"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 16;" item-key="16"><x-view
+        <list-item class="item" style="--item-index: 16" item-key="16"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 17;" item-key="17"><x-view
+        <list-item class="item" style="--item-index: 17" item-key="17"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 18;" item-key="18"><x-view
+        <list-item class="item" style="--item-index: 18" item-key="18"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 19;" item-key="19"><x-view
+        <list-item class="item" style="--item-index: 19" item-key="19"><x-view
           ></x-view></list-item>
       </x-list>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/enable-scroll.html b/packages/web-platform/web-tests/tests/web-elements/x-list/enable-scroll.html
index c2580157c9..1feb406ffd 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-list/enable-scroll.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/enable-scroll.html
@@ -44,45 +44,45 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-list list-type="single" enable-scroll="false">
-        <list-item class="item" style="--item-index: 0;" item-key="0"><x-view
+        <list-item class="item" style="--item-index: 0" item-key="0"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 1;" item-key="1"><x-view
+        <list-item class="item" style="--item-index: 1" item-key="1"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 2;" item-key="2"><x-view
+        <list-item class="item" style="--item-index: 2" item-key="2"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 3;" item-key="3"><x-view
+        <list-item class="item" style="--item-index: 3" item-key="3"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 4;" item-key="4"><x-view
+        <list-item class="item" style="--item-index: 4" item-key="4"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 5;" item-key="5"><x-view
+        <list-item class="item" style="--item-index: 5" item-key="5"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 6;" item-key="6"><x-view
+        <list-item class="item" style="--item-index: 6" item-key="6"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 7;" item-key="7"><x-view
+        <list-item class="item" style="--item-index: 7" item-key="7"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 8;" item-key="8"><x-view
+        <list-item class="item" style="--item-index: 8" item-key="8"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 9;" item-key="9"><x-view
+        <list-item class="item" style="--item-index: 9" item-key="9"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 10;" item-key="10"><x-view
+        <list-item class="item" style="--item-index: 10" item-key="10"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 11;" item-key="11"><x-view
+        <list-item class="item" style="--item-index: 11" item-key="11"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 12;" item-key="12"><x-view
+        <list-item class="item" style="--item-index: 12" item-key="12"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 13;" item-key="13"><x-view
+        <list-item class="item" style="--item-index: 13" item-key="13"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 14;" item-key="14"><x-view
+        <list-item class="item" style="--item-index: 14" item-key="14"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 15;" item-key="15"><x-view
+        <list-item class="item" style="--item-index: 15" item-key="15"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 16;" item-key="16"><x-view
+        <list-item class="item" style="--item-index: 16" item-key="16"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 17;" item-key="17"><x-view
+        <list-item class="item" style="--item-index: 17" item-key="17"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 18;" item-key="18"><x-view
+        <list-item class="item" style="--item-index: 18" item-key="18"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 19;" item-key="19"><x-view
+        <list-item class="item" style="--item-index: 19" item-key="19"><x-view
           ></x-view></list-item>
       </x-list>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/event-layoutcomplete.html b/packages/web-platform/web-tests/tests/web-elements/x-list/event-layoutcomplete.html
index 9aaba46307..e3ba0a0f53 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-list/event-layoutcomplete.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/event-layoutcomplete.html
@@ -43,51 +43,54 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <script type="module">
-    document.querySelector('x-list').addEventListener('layoutcomplete', (e) => {
-      console.log(e);
-    });
+    document.querySelector('x-list').addEventListener(
+        'layoutcomplete',
+        (e) => {
+          console.log(e);
+        },
+      );
     </script>
     <x-view class="page">
       <x-list list-type="single">
-        <list-item class="item" style="--item-index: 0;" item-key="0"><x-view
+        <list-item class="item" style="--item-index: 0" item-key="0"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 1;" item-key="1"><x-view
+        <list-item class="item" style="--item-index: 1" item-key="1"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 2;" item-key="2"><x-view
+        <list-item class="item" style="--item-index: 2" item-key="2"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 3;" item-key="3"><x-view
+        <list-item class="item" style="--item-index: 3" item-key="3"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 4;" item-key="4"><x-view
+        <list-item class="item" style="--item-index: 4" item-key="4"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 5;" item-key="5"><x-view
+        <list-item class="item" style="--item-index: 5" item-key="5"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 6;" item-key="6"><x-view
+        <list-item class="item" style="--item-index: 6" item-key="6"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 7;" item-key="7"><x-view
+        <list-item class="item" style="--item-index: 7" item-key="7"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 8;" item-key="8"><x-view
+        <list-item class="item" style="--item-index: 8" item-key="8"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 9;" item-key="9"><x-view
+        <list-item class="item" style="--item-index: 9" item-key="9"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 10;" item-key="10"><x-view
+        <list-item class="item" style="--item-index: 10" item-key="10"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 11;" item-key="11"><x-view
+        <list-item class="item" style="--item-index: 11" item-key="11"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 12;" item-key="12"><x-view
+        <list-item class="item" style="--item-index: 12" item-key="12"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 13;" item-key="13"><x-view
+        <list-item class="item" style="--item-index: 13" item-key="13"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 14;" item-key="14"><x-view
+        <list-item class="item" style="--item-index: 14" item-key="14"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 15;" item-key="15"><x-view
+        <list-item class="item" style="--item-index: 15" item-key="15"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 16;" item-key="16"><x-view
+        <list-item class="item" style="--item-index: 16" item-key="16"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 17;" item-key="17"><x-view
+        <list-item class="item" style="--item-index: 17" item-key="17"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 18;" item-key="18"><x-view
+        <list-item class="item" style="--item-index: 18" item-key="18"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 19;" item-key="19"><x-view
+        <list-item class="item" style="--item-index: 19" item-key="19"><x-view
           ></x-view></list-item>
       </x-list>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/event-lower-load-more.html b/packages/web-platform/web-tests/tests/web-elements/x-list/event-lower-load-more.html
index 1db492daaf..f09ce460fc 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-list/event-lower-load-more.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/event-lower-load-more.html
@@ -44,18 +44,21 @@
     <script src="/web-elements.js" defer></script>
     <script type="module">
     document.querySelector('#target').addEventListener('click', () => {
-      const newItem = document.createElement('list-item');
-      newItem.setAttribute('item-key', 21);
-      newItem.setAttribute('id', 21);
-      const textElement = document.createElement('x-text');
-      textElement.textContent = 21;
-      newItem.appendChild(textElement);
+        const newItem = document.createElement('list-item');
+        newItem.setAttribute('item-key', 21);
+        newItem.setAttribute('id', 21);
+        const textElement = document.createElement('x-text');
+        textElement.textContent = 21;
+        newItem.appendChild(textElement);
 
-      document.querySelector('x-list').appendChild(newItem);
-    });
-    document.querySelector('x-list').addEventListener('scrolltolower', (e) => {
-      console.log(e);
-    });
+        document.querySelector('x-list').appendChild(newItem);
+      });
+      document.querySelector('x-list').addEventListener(
+        'scrolltolower',
+        (e) => {
+          console.log(e);
+        },
+      );
     </script>
     <x-view class="page">
       <x-text id="target">添加 list-item</x-text>
@@ -63,45 +66,45 @@
         list-type="single"
         lower-threshold-item-count="2"
       >
-        <list-item class="item" style="--item-index: 0;" item-key="0"><x-view
+        <list-item class="item" style="--item-index: 0" item-key="0"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 1;" item-key="1"><x-view
+        <list-item class="item" style="--item-index: 1" item-key="1"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 2;" item-key="2"><x-view
+        <list-item class="item" style="--item-index: 2" item-key="2"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 3;" item-key="3"><x-view
+        <list-item class="item" style="--item-index: 3" item-key="3"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 4;" item-key="4"><x-view
+        <list-item class="item" style="--item-index: 4" item-key="4"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 5;" item-key="5"><x-view
+        <list-item class="item" style="--item-index: 5" item-key="5"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 6;" item-key="6"><x-view
+        <list-item class="item" style="--item-index: 6" item-key="6"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 7;" item-key="7"><x-view
+        <list-item class="item" style="--item-index: 7" item-key="7"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 8;" item-key="8"><x-view
+        <list-item class="item" style="--item-index: 8" item-key="8"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 9;" item-key="9"><x-view
+        <list-item class="item" style="--item-index: 9" item-key="9"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 10;" item-key="10"><x-view
+        <list-item class="item" style="--item-index: 10" item-key="10"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 11;" item-key="11"><x-view
+        <list-item class="item" style="--item-index: 11" item-key="11"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 12;" item-key="12"><x-view
+        <list-item class="item" style="--item-index: 12" item-key="12"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 13;" item-key="13"><x-view
+        <list-item class="item" style="--item-index: 13" item-key="13"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 14;" item-key="14"><x-view
+        <list-item class="item" style="--item-index: 14" item-key="14"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 15;" item-key="15"><x-view
+        <list-item class="item" style="--item-index: 15" item-key="15"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 16;" item-key="16"><x-view
+        <list-item class="item" style="--item-index: 16" item-key="16"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 17;" item-key="17"><x-view
+        <list-item class="item" style="--item-index: 17" item-key="17"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 18;" item-key="18"><x-view
+        <list-item class="item" style="--item-index: 18" item-key="18"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 19;" item-key="19"><x-view
+        <list-item class="item" style="--item-index: 19" item-key="19"><x-view
           ></x-view></list-item>
       </x-list>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/event-lower-threshold-item-count.html b/packages/web-platform/web-tests/tests/web-elements/x-list/event-lower-threshold-item-count.html
index 2231871632..48581b5d64 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-list/event-lower-threshold-item-count.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/event-lower-threshold-item-count.html
@@ -42,57 +42,63 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <script type="module">
-    document.querySelector('x-list').addEventListener('scrolltoupper', (e) => {
-      console.log(e);
-    });
-    document.querySelector('x-list').addEventListener('scrolltolower', (e) => {
-      console.log(e);
-    });
+    document.querySelector('x-list').addEventListener(
+        'scrolltoupper',
+        (e) => {
+          console.log(e);
+        },
+      );
+      document.querySelector('x-list').addEventListener(
+        'scrolltolower',
+        (e) => {
+          console.log(e);
+        },
+      );
     </script>
     <x-view class="page">
       <x-list
         list-type="single"
         lower-threshold-item-count="10"
       >
-        <list-item class="item" style="--item-index: 0;" item-key="0"><x-view
+        <list-item class="item" style="--item-index: 0" item-key="0"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 1;" item-key="1"><x-view
+        <list-item class="item" style="--item-index: 1" item-key="1"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 2;" item-key="2"><x-view
+        <list-item class="item" style="--item-index: 2" item-key="2"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 3;" item-key="3"><x-view
+        <list-item class="item" style="--item-index: 3" item-key="3"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 4;" item-key="4"><x-view
+        <list-item class="item" style="--item-index: 4" item-key="4"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 5;" item-key="5"><x-view
+        <list-item class="item" style="--item-index: 5" item-key="5"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 6;" item-key="6"><x-view
+        <list-item class="item" style="--item-index: 6" item-key="6"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 7;" item-key="7"><x-view
+        <list-item class="item" style="--item-index: 7" item-key="7"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 8;" item-key="8"><x-view
+        <list-item class="item" style="--item-index: 8" item-key="8"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 9;" item-key="9"><x-view
+        <list-item class="item" style="--item-index: 9" item-key="9"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 10;" item-key="10"><x-view
+        <list-item class="item" style="--item-index: 10" item-key="10"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 11;" item-key="11"><x-view
+        <list-item class="item" style="--item-index: 11" item-key="11"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 12;" item-key="12"><x-view
+        <list-item class="item" style="--item-index: 12" item-key="12"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 13;" item-key="13"><x-view
+        <list-item class="item" style="--item-index: 13" item-key="13"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 14;" item-key="14"><x-view
+        <list-item class="item" style="--item-index: 14" item-key="14"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 15;" item-key="15"><x-view
+        <list-item class="item" style="--item-index: 15" item-key="15"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 16;" item-key="16"><x-view
+        <list-item class="item" style="--item-index: 16" item-key="16"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 17;" item-key="17"><x-view
+        <list-item class="item" style="--item-index: 17" item-key="17"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 18;" item-key="18"><x-view
+        <list-item class="item" style="--item-index: 18" item-key="18"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 19;" item-key="19"><x-view
+        <list-item class="item" style="--item-index: 19" item-key="19"><x-view
           ></x-view></list-item>
       </x-list>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/event-scroll.html b/packages/web-platform/web-tests/tests/web-elements/x-list/event-scroll.html
index 4ffd6c8fff..07ae6d8303 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-list/event-scroll.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/event-scroll.html
@@ -42,54 +42,60 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <script type="module">
-    document.querySelector('x-list').addEventListener('lynxscroll', (e) => {
-      console.log(e);
-    });
-    document.querySelector('x-list').addEventListener('lynxscrollend', (e) => {
-      console.log(e);
-    });
+    document.querySelector('x-list').addEventListener(
+        'lynxscroll',
+        (e) => {
+          console.log(e);
+        },
+      );
+      document.querySelector('x-list').addEventListener(
+        'lynxscrollend',
+        (e) => {
+          console.log(e);
+        },
+      );
     </script>
     <x-view class="page">
       <x-list list-type="single">
-        <list-item class="item" style="--item-index: 0;" item-key="0"><x-view
+        <list-item class="item" style="--item-index: 0" item-key="0"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 1;" item-key="1"><x-view
+        <list-item class="item" style="--item-index: 1" item-key="1"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 2;" item-key="2"><x-view
+        <list-item class="item" style="--item-index: 2" item-key="2"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 3;" item-key="3"><x-view
+        <list-item class="item" style="--item-index: 3" item-key="3"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 4;" item-key="4"><x-view
+        <list-item class="item" style="--item-index: 4" item-key="4"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 5;" item-key="5"><x-view
+        <list-item class="item" style="--item-index: 5" item-key="5"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 6;" item-key="6"><x-view
+        <list-item class="item" style="--item-index: 6" item-key="6"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 7;" item-key="7"><x-view
+        <list-item class="item" style="--item-index: 7" item-key="7"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 8;" item-key="8"><x-view
+        <list-item class="item" style="--item-index: 8" item-key="8"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 9;" item-key="9"><x-view
+        <list-item class="item" style="--item-index: 9" item-key="9"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 10;" item-key="10"><x-view
+        <list-item class="item" style="--item-index: 10" item-key="10"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 11;" item-key="11"><x-view
+        <list-item class="item" style="--item-index: 11" item-key="11"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 12;" item-key="12"><x-view
+        <list-item class="item" style="--item-index: 12" item-key="12"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 13;" item-key="13"><x-view
+        <list-item class="item" style="--item-index: 13" item-key="13"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 14;" item-key="14"><x-view
+        <list-item class="item" style="--item-index: 14" item-key="14"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 15;" item-key="15"><x-view
+        <list-item class="item" style="--item-index: 15" item-key="15"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 16;" item-key="16"><x-view
+        <list-item class="item" style="--item-index: 16" item-key="16"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 17;" item-key="17"><x-view
+        <list-item class="item" style="--item-index: 17" item-key="17"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 18;" item-key="18"><x-view
+        <list-item class="item" style="--item-index: 18" item-key="18"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 19;" item-key="19"><x-view
+        <list-item class="item" style="--item-index: 19" item-key="19"><x-view
           ></x-view></list-item>
       </x-list>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/event-scrolltolower.html b/packages/web-platform/web-tests/tests/web-elements/x-list/event-scrolltolower.html
index 472fe5dc60..d6f675a789 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-list/event-scrolltolower.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/event-scrolltolower.html
@@ -42,51 +42,54 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <script type="module">
-    document.querySelector('x-list').addEventListener('scrolltolower', (e) => {
-      console.log(e);
-    });
+    document.querySelector('x-list').addEventListener(
+        'scrolltolower',
+        (e) => {
+          console.log(e);
+        },
+      );
     </script>
     <x-view class="page">
       <x-list list-type="single">
-        <list-item class="item" style="--item-index: 0;" item-key="0"><x-view
+        <list-item class="item" style="--item-index: 0" item-key="0"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 1;" item-key="1"><x-view
+        <list-item class="item" style="--item-index: 1" item-key="1"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 2;" item-key="2"><x-view
+        <list-item class="item" style="--item-index: 2" item-key="2"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 3;" item-key="3"><x-view
+        <list-item class="item" style="--item-index: 3" item-key="3"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 4;" item-key="4"><x-view
+        <list-item class="item" style="--item-index: 4" item-key="4"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 5;" item-key="5"><x-view
+        <list-item class="item" style="--item-index: 5" item-key="5"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 6;" item-key="6"><x-view
+        <list-item class="item" style="--item-index: 6" item-key="6"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 7;" item-key="7"><x-view
+        <list-item class="item" style="--item-index: 7" item-key="7"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 8;" item-key="8"><x-view
+        <list-item class="item" style="--item-index: 8" item-key="8"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 9;" item-key="9"><x-view
+        <list-item class="item" style="--item-index: 9" item-key="9"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 10;" item-key="10"><x-view
+        <list-item class="item" style="--item-index: 10" item-key="10"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 11;" item-key="11"><x-view
+        <list-item class="item" style="--item-index: 11" item-key="11"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 12;" item-key="12"><x-view
+        <list-item class="item" style="--item-index: 12" item-key="12"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 13;" item-key="13"><x-view
+        <list-item class="item" style="--item-index: 13" item-key="13"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 14;" item-key="14"><x-view
+        <list-item class="item" style="--item-index: 14" item-key="14"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 15;" item-key="15"><x-view
+        <list-item class="item" style="--item-index: 15" item-key="15"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 16;" item-key="16"><x-view
+        <list-item class="item" style="--item-index: 16" item-key="16"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 17;" item-key="17"><x-view
+        <list-item class="item" style="--item-index: 17" item-key="17"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 18;" item-key="18"><x-view
+        <list-item class="item" style="--item-index: 18" item-key="18"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 19;" item-key="19"><x-view
+        <list-item class="item" style="--item-index: 19" item-key="19"><x-view
           ></x-view></list-item>
       </x-list>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/event-scrolltoupper-tolower-flow.html b/packages/web-platform/web-tests/tests/web-elements/x-list/event-scrolltoupper-tolower-flow.html
index c79ba053c6..0cb80f34e3 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-list/event-scrolltoupper-tolower-flow.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/event-scrolltoupper-tolower-flow.html
@@ -50,14 +50,20 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <script type="module">
-    document.querySelector('x-list').addEventListener('scrolltoupper', (e) => {
-      console.log(e);
-    });
-    document.querySelector('x-list').addEventListener('scrolltolower', (e) => {
-      console.log(e);
-    });
+    document.querySelector('x-list').addEventListener(
+        'scrolltoupper',
+        (e) => {
+          console.log(e);
+        },
+      );
+      document.querySelector('x-list').addEventListener(
+        'scrolltolower',
+        (e) => {
+          console.log(e);
+        },
+      );
     </script>
-    <x-view class="page" style="flex-direction: column;">
+    <x-view class="page" style="flex-direction: column">
       <x-list
         list-type="flow"
         span-count="2"
@@ -67,112 +73,112 @@
         <list-item
           class="left item"
           item-key="0"
-          style="--item-index: 0;"
+          style="--item-index: 0"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="1"
-          style="--item-index: 1;"
+          style="--item-index: 1"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="2"
-          style="--item-index: 2;"
+          style="--item-index: 2"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="3"
-          style="--item-index: 3;"
+          style="--item-index: 3"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="4"
-          style="--item-index: 4;"
+          style="--item-index: 4"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="5"
-          style="--item-index: 5;"
+          style="--item-index: 5"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="6"
-          style="--item-index: 6;"
+          style="--item-index: 6"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="7"
-          style="--item-index: 7;"
+          style="--item-index: 7"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="8"
-          style="--item-index: 8;"
+          style="--item-index: 8"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="9"
-          style="--item-index: 9;"
+          style="--item-index: 9"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="10"
-          style="--item-index: 10;"
+          style="--item-index: 10"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="11"
-          style="--item-index: 11;"
+          style="--item-index: 11"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="12"
-          style="--item-index: 12;"
+          style="--item-index: 12"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="13"
-          style="--item-index: 13;"
+          style="--item-index: 13"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="14"
-          style="--item-index: 14;"
+          style="--item-index: 14"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="14"
-          style="--item-index: 14;"
+          style="--item-index: 14"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="15"
-          style="--item-index: 15;"
+          style="--item-index: 15"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="15"
-          style="--item-index: 15;"
+          style="--item-index: 15"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="16"
-          style="--item-index: 16;"
+          style="--item-index: 16"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="17"
-          style="--item-index: 17;"
+          style="--item-index: 17"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="18"
-          style="--item-index: 18;"
+          style="--item-index: 18"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="19"
-          style="--item-index: 19;"
+          style="--item-index: 19"
         ><x-view></x-view></list-item>
       </x-list>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/event-scrolltoupper-tolower-waterfall.html b/packages/web-platform/web-tests/tests/web-elements/x-list/event-scrolltoupper-tolower-waterfall.html
index f4bbb89152..b4a1e5d368 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-list/event-scrolltoupper-tolower-waterfall.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/event-scrolltoupper-tolower-waterfall.html
@@ -42,14 +42,20 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <script type="module">
-    document.querySelector('x-list').addEventListener('scrolltoupper', (e) => {
-      console.log(e);
-    });
-    document.querySelector('x-list').addEventListener('scrolltolower', (e) => {
-      console.log(e);
-    });
+    document.querySelector('x-list').addEventListener(
+        'scrolltoupper',
+        (e) => {
+          console.log(e);
+        },
+      );
+      document.querySelector('x-list').addEventListener(
+        'scrolltolower',
+        (e) => {
+          console.log(e);
+        },
+      );
     </script>
-    <x-view class="page" style="flex-direction: column;">
+    <x-view class="page" style="flex-direction: column">
       <x-list list-type="waterfall" span-count="2">
         <list-item
           item-key="0"
@@ -110,84 +116,84 @@
         <list-item
           item-key="8"
           class="item"
-          style="--item-index: 8; height: 203px;"
+          style="--item-index: 8; height: 203px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="9"
           class="item"
-          style="--item-index: 9; height: 339px;"
+          style="--item-index: 9; height: 339px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="10"
           class="item"
-          style="--item-index: 10; height: 291px;"
+          style="--item-index: 10; height: 291px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="11"
           class="item"
-          style="--item-index: 11; height: 165px;"
+          style="--item-index: 11; height: 165px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="12"
           class="item"
-          style="--item-index: 12; height: 267px;"
+          style="--item-index: 12; height: 267px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="13"
           class="item"
-          style="--item-index: 13; height: 281px;"
+          style="--item-index: 13; height: 281px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="14"
           class="item"
-          style="--item-index: 14; height: 294px;"
+          style="--item-index: 14; height: 294px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="15"
           class="item"
-          style="--item-index: 15; height: 239px;"
+          style="--item-index: 15; height: 239px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="16"
           class="item"
-          style="--item-index: 16; height: 173px;"
+          style="--item-index: 16; height: 173px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="17"
           class="item"
-          style="--item-index: 17; height: 185px;"
+          style="--item-index: 17; height: 185px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="18"
           class="item"
-          style="--item-index: 18; height: 220px;"
+          style="--item-index: 18; height: 220px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="19"
           class="item"
-          style="--item-index: 19; height: 180px;"
+          style="--item-index: 19; height: 180px"
         >
           <x-view> </x-view>
         </list-item>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/event-scrolltoupper.html b/packages/web-platform/web-tests/tests/web-elements/x-list/event-scrolltoupper.html
index b3045e0d92..6ca9f0dab7 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-list/event-scrolltoupper.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/event-scrolltoupper.html
@@ -42,51 +42,54 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <script type="module">
-    document.querySelector('x-list').addEventListener('scrolltoupper', (e) => {
-      console.log(e);
-    });
+    document.querySelector('x-list').addEventListener(
+        'scrolltoupper',
+        (e) => {
+          console.log(e);
+        },
+      );
     </script>
     <x-view class="page">
       <x-list list-type="single">
-        <list-item class="item" style="--item-index: 0;" item-key="0"><x-view
+        <list-item class="item" style="--item-index: 0" item-key="0"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 1;" item-key="1"><x-view
+        <list-item class="item" style="--item-index: 1" item-key="1"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 2;" item-key="2"><x-view
+        <list-item class="item" style="--item-index: 2" item-key="2"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 3;" item-key="3"><x-view
+        <list-item class="item" style="--item-index: 3" item-key="3"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 4;" item-key="4"><x-view
+        <list-item class="item" style="--item-index: 4" item-key="4"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 5;" item-key="5"><x-view
+        <list-item class="item" style="--item-index: 5" item-key="5"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 6;" item-key="6"><x-view
+        <list-item class="item" style="--item-index: 6" item-key="6"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 7;" item-key="7"><x-view
+        <list-item class="item" style="--item-index: 7" item-key="7"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 8;" item-key="8"><x-view
+        <list-item class="item" style="--item-index: 8" item-key="8"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 9;" item-key="9"><x-view
+        <list-item class="item" style="--item-index: 9" item-key="9"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 10;" item-key="10"><x-view
+        <list-item class="item" style="--item-index: 10" item-key="10"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 11;" item-key="11"><x-view
+        <list-item class="item" style="--item-index: 11" item-key="11"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 12;" item-key="12"><x-view
+        <list-item class="item" style="--item-index: 12" item-key="12"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 13;" item-key="13"><x-view
+        <list-item class="item" style="--item-index: 13" item-key="13"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 14;" item-key="14"><x-view
+        <list-item class="item" style="--item-index: 14" item-key="14"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 15;" item-key="15"><x-view
+        <list-item class="item" style="--item-index: 15" item-key="15"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 16;" item-key="16"><x-view
+        <list-item class="item" style="--item-index: 16" item-key="16"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 17;" item-key="17"><x-view
+        <list-item class="item" style="--item-index: 17" item-key="17"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 18;" item-key="18"><x-view
+        <list-item class="item" style="--item-index: 18" item-key="18"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 19;" item-key="19"><x-view
+        <list-item class="item" style="--item-index: 19" item-key="19"><x-view
           ></x-view></list-item>
       </x-list>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/event-snap.html b/packages/web-platform/web-tests/tests/web-elements/x-list/event-snap.html
index 9f570ffbc4..e7f0924652 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-list/event-snap.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/event-snap.html
@@ -44,50 +44,50 @@
     <script src="/web-elements.js" defer></script>
     <script type="module">
     document.querySelector('x-list').addEventListener('snap', (e) => {
-      console.log(e);
-    });
+        console.log(e);
+      });
     </script>
     <x-view class="page">
       <x-list list-type="single" item-snap>
-        <list-item class="item" style="--item-index: 0;" item-key="0"><x-view
+        <list-item class="item" style="--item-index: 0" item-key="0"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 1;" item-key="1"><x-view
+        <list-item class="item" style="--item-index: 1" item-key="1"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 2;" item-key="2"><x-view
+        <list-item class="item" style="--item-index: 2" item-key="2"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 3;" item-key="3"><x-view
+        <list-item class="item" style="--item-index: 3" item-key="3"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 4;" item-key="4"><x-view
+        <list-item class="item" style="--item-index: 4" item-key="4"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 5;" item-key="5"><x-view
+        <list-item class="item" style="--item-index: 5" item-key="5"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 6;" item-key="6"><x-view
+        <list-item class="item" style="--item-index: 6" item-key="6"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 7;" item-key="7"><x-view
+        <list-item class="item" style="--item-index: 7" item-key="7"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 8;" item-key="8"><x-view
+        <list-item class="item" style="--item-index: 8" item-key="8"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 9;" item-key="9"><x-view
+        <list-item class="item" style="--item-index: 9" item-key="9"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 10;" item-key="10"><x-view
+        <list-item class="item" style="--item-index: 10" item-key="10"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 11;" item-key="11"><x-view
+        <list-item class="item" style="--item-index: 11" item-key="11"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 12;" item-key="12"><x-view
+        <list-item class="item" style="--item-index: 12" item-key="12"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 13;" item-key="13"><x-view
+        <list-item class="item" style="--item-index: 13" item-key="13"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 14;" item-key="14"><x-view
+        <list-item class="item" style="--item-index: 14" item-key="14"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 15;" item-key="15"><x-view
+        <list-item class="item" style="--item-index: 15" item-key="15"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 16;" item-key="16"><x-view
+        <list-item class="item" style="--item-index: 16" item-key="16"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 17;" item-key="17"><x-view
+        <list-item class="item" style="--item-index: 17" item-key="17"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 18;" item-key="18"><x-view
+        <list-item class="item" style="--item-index: 18" item-key="18"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 19;" item-key="19"><x-view
+        <list-item class="item" style="--item-index: 19" item-key="19"><x-view
           ></x-view></list-item>
       </x-list>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/full-span-waterfall.html b/packages/web-platform/web-tests/tests/web-elements/x-list/full-span-waterfall.html
index 00e5376031..69252d8901 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-list/full-span-waterfall.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/full-span-waterfall.html
@@ -41,7 +41,7 @@
 
   <body>
     <script src="/web-elements.js" defer></script>
-    <x-view class="page" style="flex-direction: column;">
+    <x-view class="page" style="flex-direction: column">
       <x-list
         list-type="waterfall"
         span-count="2"
@@ -107,84 +107,84 @@
         <list-item
           item-key="8"
           class="item"
-          style="--item-index: 8; height: 203px;"
+          style="--item-index: 8; height: 203px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="9"
           class="item"
-          style="--item-index: 9; height: 339px;"
+          style="--item-index: 9; height: 339px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="10"
           class="item"
-          style="--item-index: 10; height: 291px;"
+          style="--item-index: 10; height: 291px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="11"
           class="item"
-          style="--item-index: 11; height: 165px;"
+          style="--item-index: 11; height: 165px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="12"
           class="item"
-          style="--item-index: 12; height: 267px;"
+          style="--item-index: 12; height: 267px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="13"
           class="item"
-          style="--item-index: 13; height: 281px;"
+          style="--item-index: 13; height: 281px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="14"
           class="item"
-          style="--item-index: 14; height: 294px;"
+          style="--item-index: 14; height: 294px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="15"
           class="item"
-          style="--item-index: 15; height: 239px;"
+          style="--item-index: 15; height: 239px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="16"
           class="item"
-          style="--item-index: 16; height: 173px;"
+          style="--item-index: 16; height: 173px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="17"
           class="item"
-          style="--item-index: 17; height: 185px;"
+          style="--item-index: 17; height: 185px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="18"
           class="item"
-          style="--item-index: 18; height: 220px;"
+          style="--item-index: 18; height: 220px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="19"
           class="item"
-          style="--item-index: 19; height: 180px;"
+          style="--item-index: 19; height: 180px"
         >
           <x-view> </x-view>
         </list-item>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/full-span.html b/packages/web-platform/web-tests/tests/web-elements/x-list/full-span.html
index eb22a88322..24479a2408 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-list/full-span.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/full-span.html
@@ -62,118 +62,118 @@
 
   <body>
     <script src="/web-elements.js" defer></script>
-    <x-view class="page" style="flex-direction: column;">
+    <x-view class="page" style="flex-direction: column">
       <x-list list-type="flow" span-count="2" id="vertical">
         <list-item
           class="left item"
           item-key="0"
-          style="--item-index: 0;"
+          style="--item-index: 0"
           full-span
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="1"
-          style="--item-index: 1;"
+          style="--item-index: 1"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="2"
-          style="--item-index: 2;"
+          style="--item-index: 2"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="3"
-          style="--item-index: 3;"
+          style="--item-index: 3"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="4"
-          style="--item-index: 4;"
+          style="--item-index: 4"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="5"
-          style="--item-index: 5;"
+          style="--item-index: 5"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="6"
-          style="--item-index: 6;"
+          style="--item-index: 6"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="7"
-          style="--item-index: 7;"
+          style="--item-index: 7"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="8"
-          style="--item-index: 8;"
+          style="--item-index: 8"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="9"
-          style="--item-index: 9;"
+          style="--item-index: 9"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="10"
-          style="--item-index: 10;"
+          style="--item-index: 10"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="11"
-          style="--item-index: 11;"
+          style="--item-index: 11"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="12"
-          style="--item-index: 12;"
+          style="--item-index: 12"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="13"
-          style="--item-index: 13;"
+          style="--item-index: 13"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="14"
-          style="--item-index: 14;"
+          style="--item-index: 14"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="14"
-          style="--item-index: 14;"
+          style="--item-index: 14"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="15"
-          style="--item-index: 15;"
+          style="--item-index: 15"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="15"
-          style="--item-index: 15;"
+          style="--item-index: 15"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="16"
-          style="--item-index: 16;"
+          style="--item-index: 16"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="17"
-          style="--item-index: 17;"
+          style="--item-index: 17"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="18"
-          style="--item-index: 18;"
+          style="--item-index: 18"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="19"
-          style="--item-index: 19;"
+          style="--item-index: 19"
         ><x-view></x-view></list-item>
       </x-list>
 
@@ -186,113 +186,113 @@
         <list-item
           class="left item"
           item-key="0"
-          style="--item-index: 0;"
+          style="--item-index: 0"
           full-span
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="1"
-          style="--item-index: 1;"
+          style="--item-index: 1"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="2"
-          style="--item-index: 2;"
+          style="--item-index: 2"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="3"
-          style="--item-index: 3;"
+          style="--item-index: 3"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="4"
-          style="--item-index: 4;"
+          style="--item-index: 4"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="5"
-          style="--item-index: 5;"
+          style="--item-index: 5"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="6"
-          style="--item-index: 6;"
+          style="--item-index: 6"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="7"
-          style="--item-index: 7;"
+          style="--item-index: 7"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="8"
-          style="--item-index: 8;"
+          style="--item-index: 8"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="9"
-          style="--item-index: 9;"
+          style="--item-index: 9"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="10"
-          style="--item-index: 10;"
+          style="--item-index: 10"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="11"
-          style="--item-index: 11;"
+          style="--item-index: 11"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="12"
-          style="--item-index: 12;"
+          style="--item-index: 12"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="13"
-          style="--item-index: 13;"
+          style="--item-index: 13"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="14"
-          style="--item-index: 14;"
+          style="--item-index: 14"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="14"
-          style="--item-index: 14;"
+          style="--item-index: 14"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="15"
-          style="--item-index: 15;"
+          style="--item-index: 15"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="15"
-          style="--item-index: 15;"
+          style="--item-index: 15"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="16"
-          style="--item-index: 16;"
+          style="--item-index: 16"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="17"
-          style="--item-index: 17;"
+          style="--item-index: 17"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="18"
-          style="--item-index: 18;"
+          style="--item-index: 18"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="19"
-          style="--item-index: 19;"
+          style="--item-index: 19"
         ><x-view></x-view></list-item>
       </x-list>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/get-scroll-container-info.html b/packages/web-platform/web-tests/tests/web-elements/x-list/get-scroll-container-info.html
index 5c9b80a57e..30cce95b08 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-list/get-scroll-container-info.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/get-scroll-container-info.html
@@ -44,45 +44,45 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-list list-type="single">
-        <list-item class="item" style="--item-index: 0;" item-key="0"><x-view
+        <list-item class="item" style="--item-index: 0" item-key="0"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 1;" item-key="1"><x-view
+        <list-item class="item" style="--item-index: 1" item-key="1"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 2;" item-key="2"><x-view
+        <list-item class="item" style="--item-index: 2" item-key="2"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 3;" item-key="3"><x-view
+        <list-item class="item" style="--item-index: 3" item-key="3"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 4;" item-key="4"><x-view
+        <list-item class="item" style="--item-index: 4" item-key="4"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 5;" item-key="5"><x-view
+        <list-item class="item" style="--item-index: 5" item-key="5"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 6;" item-key="6"><x-view
+        <list-item class="item" style="--item-index: 6" item-key="6"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 7;" item-key="7"><x-view
+        <list-item class="item" style="--item-index: 7" item-key="7"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 8;" item-key="8"><x-view
+        <list-item class="item" style="--item-index: 8" item-key="8"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 9;" item-key="9"><x-view
+        <list-item class="item" style="--item-index: 9" item-key="9"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 10;" item-key="10"><x-view
+        <list-item class="item" style="--item-index: 10" item-key="10"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 11;" item-key="11"><x-view
+        <list-item class="item" style="--item-index: 11" item-key="11"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 12;" item-key="12"><x-view
+        <list-item class="item" style="--item-index: 12" item-key="12"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 13;" item-key="13"><x-view
+        <list-item class="item" style="--item-index: 13" item-key="13"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 14;" item-key="14"><x-view
+        <list-item class="item" style="--item-index: 14" item-key="14"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 15;" item-key="15"><x-view
+        <list-item class="item" style="--item-index: 15" item-key="15"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 16;" item-key="16"><x-view
+        <list-item class="item" style="--item-index: 16" item-key="16"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 17;" item-key="17"><x-view
+        <list-item class="item" style="--item-index: 17" item-key="17"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 18;" item-key="18"><x-view
+        <list-item class="item" style="--item-index: 18" item-key="18"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 19;" item-key="19"><x-view
+        <list-item class="item" style="--item-index: 19" item-key="19"><x-view
           ></x-view></list-item>
       </x-list>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/get-visible-cells.html b/packages/web-platform/web-tests/tests/web-elements/x-list/get-visible-cells.html
index 5c9b80a57e..30cce95b08 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-list/get-visible-cells.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/get-visible-cells.html
@@ -44,45 +44,45 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-list list-type="single">
-        <list-item class="item" style="--item-index: 0;" item-key="0"><x-view
+        <list-item class="item" style="--item-index: 0" item-key="0"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 1;" item-key="1"><x-view
+        <list-item class="item" style="--item-index: 1" item-key="1"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 2;" item-key="2"><x-view
+        <list-item class="item" style="--item-index: 2" item-key="2"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 3;" item-key="3"><x-view
+        <list-item class="item" style="--item-index: 3" item-key="3"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 4;" item-key="4"><x-view
+        <list-item class="item" style="--item-index: 4" item-key="4"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 5;" item-key="5"><x-view
+        <list-item class="item" style="--item-index: 5" item-key="5"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 6;" item-key="6"><x-view
+        <list-item class="item" style="--item-index: 6" item-key="6"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 7;" item-key="7"><x-view
+        <list-item class="item" style="--item-index: 7" item-key="7"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 8;" item-key="8"><x-view
+        <list-item class="item" style="--item-index: 8" item-key="8"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 9;" item-key="9"><x-view
+        <list-item class="item" style="--item-index: 9" item-key="9"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 10;" item-key="10"><x-view
+        <list-item class="item" style="--item-index: 10" item-key="10"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 11;" item-key="11"><x-view
+        <list-item class="item" style="--item-index: 11" item-key="11"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 12;" item-key="12"><x-view
+        <list-item class="item" style="--item-index: 12" item-key="12"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 13;" item-key="13"><x-view
+        <list-item class="item" style="--item-index: 13" item-key="13"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 14;" item-key="14"><x-view
+        <list-item class="item" style="--item-index: 14" item-key="14"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 15;" item-key="15"><x-view
+        <list-item class="item" style="--item-index: 15" item-key="15"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 16;" item-key="16"><x-view
+        <list-item class="item" style="--item-index: 16" item-key="16"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 17;" item-key="17"><x-view
+        <list-item class="item" style="--item-index: 17" item-key="17"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 18;" item-key="18"><x-view
+        <list-item class="item" style="--item-index: 18" item-key="18"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 19;" item-key="19"><x-view
+        <list-item class="item" style="--item-index: 19" item-key="19"><x-view
           ></x-view></list-item>
       </x-list>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/initial-scroll-index.html b/packages/web-platform/web-tests/tests/web-elements/x-list/initial-scroll-index.html
index 0245f371d3..0a86a95550 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-list/initial-scroll-index.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/initial-scroll-index.html
@@ -44,45 +44,45 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-list list-type="single" initial-scroll-index="10">
-        <list-item class="item" style="--item-index: 0;" item-key="0"><x-view
+        <list-item class="item" style="--item-index: 0" item-key="0"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 1;" item-key="1"><x-view
+        <list-item class="item" style="--item-index: 1" item-key="1"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 2;" item-key="2"><x-view
+        <list-item class="item" style="--item-index: 2" item-key="2"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 3;" item-key="3"><x-view
+        <list-item class="item" style="--item-index: 3" item-key="3"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 4;" item-key="4"><x-view
+        <list-item class="item" style="--item-index: 4" item-key="4"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 5;" item-key="5"><x-view
+        <list-item class="item" style="--item-index: 5" item-key="5"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 6;" item-key="6"><x-view
+        <list-item class="item" style="--item-index: 6" item-key="6"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 7;" item-key="7"><x-view
+        <list-item class="item" style="--item-index: 7" item-key="7"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 8;" item-key="8"><x-view
+        <list-item class="item" style="--item-index: 8" item-key="8"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 9;" item-key="9"><x-view
+        <list-item class="item" style="--item-index: 9" item-key="9"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 10;" item-key="10"><x-view
+        <list-item class="item" style="--item-index: 10" item-key="10"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 11;" item-key="11"><x-view
+        <list-item class="item" style="--item-index: 11" item-key="11"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 12;" item-key="12"><x-view
+        <list-item class="item" style="--item-index: 12" item-key="12"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 13;" item-key="13"><x-view
+        <list-item class="item" style="--item-index: 13" item-key="13"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 14;" item-key="14"><x-view
+        <list-item class="item" style="--item-index: 14" item-key="14"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 15;" item-key="15"><x-view
+        <list-item class="item" style="--item-index: 15" item-key="15"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 16;" item-key="16"><x-view
+        <list-item class="item" style="--item-index: 16" item-key="16"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 17;" item-key="17"><x-view
+        <list-item class="item" style="--item-index: 17" item-key="17"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 18;" item-key="18"><x-view
+        <list-item class="item" style="--item-index: 18" item-key="18"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 19;" item-key="19"><x-view
+        <list-item class="item" style="--item-index: 19" item-key="19"><x-view
           ></x-view></list-item>
       </x-list>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/item-snap.html b/packages/web-platform/web-tests/tests/web-elements/x-list/item-snap.html
index d23ee3ddaf..7bd80eae2c 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-list/item-snap.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/item-snap.html
@@ -44,45 +44,45 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-list list-type="single" item-snap>
-        <list-item class="item" style="--item-index: 0;" item-key="0"><x-view
+        <list-item class="item" style="--item-index: 0" item-key="0"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 1;" item-key="1"><x-view
+        <list-item class="item" style="--item-index: 1" item-key="1"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 2;" item-key="2"><x-view
+        <list-item class="item" style="--item-index: 2" item-key="2"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 3;" item-key="3"><x-view
+        <list-item class="item" style="--item-index: 3" item-key="3"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 4;" item-key="4"><x-view
+        <list-item class="item" style="--item-index: 4" item-key="4"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 5;" item-key="5"><x-view
+        <list-item class="item" style="--item-index: 5" item-key="5"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 6;" item-key="6"><x-view
+        <list-item class="item" style="--item-index: 6" item-key="6"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 7;" item-key="7"><x-view
+        <list-item class="item" style="--item-index: 7" item-key="7"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 8;" item-key="8"><x-view
+        <list-item class="item" style="--item-index: 8" item-key="8"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 9;" item-key="9"><x-view
+        <list-item class="item" style="--item-index: 9" item-key="9"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 10;" item-key="10"><x-view
+        <list-item class="item" style="--item-index: 10" item-key="10"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 11;" item-key="11"><x-view
+        <list-item class="item" style="--item-index: 11" item-key="11"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 12;" item-key="12"><x-view
+        <list-item class="item" style="--item-index: 12" item-key="12"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 13;" item-key="13"><x-view
+        <list-item class="item" style="--item-index: 13" item-key="13"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 14;" item-key="14"><x-view
+        <list-item class="item" style="--item-index: 14" item-key="14"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 15;" item-key="15"><x-view
+        <list-item class="item" style="--item-index: 15" item-key="15"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 16;" item-key="16"><x-view
+        <list-item class="item" style="--item-index: 16" item-key="16"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 17;" item-key="17"><x-view
+        <list-item class="item" style="--item-index: 17" item-key="17"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 18;" item-key="18"><x-view
+        <list-item class="item" style="--item-index: 18" item-key="18"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 19;" item-key="19"><x-view
+        <list-item class="item" style="--item-index: 19" item-key="19"><x-view
           ></x-view></list-item>
       </x-list>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/need-visible-item-info.html b/packages/web-platform/web-tests/tests/web-elements/x-list/need-visible-item-info.html
index 81f7234565..c610150c19 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-list/need-visible-item-info.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/need-visible-item-info.html
@@ -43,57 +43,66 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <script type="module">
-    document.querySelector('x-list').addEventListener('lynxscroll', (e) => {
-      console.log(e);
-    });
-    document.querySelector('x-list').addEventListener('scrolltoupper', (e) => {
-      console.log(e);
-    });
-    document.querySelector('x-list').addEventListener('scrolltolower', (e) => {
-      console.log(e);
-    });
+    document.querySelector('x-list').addEventListener(
+        'lynxscroll',
+        (e) => {
+          console.log(e);
+        },
+      );
+      document.querySelector('x-list').addEventListener(
+        'scrolltoupper',
+        (e) => {
+          console.log(e);
+        },
+      );
+      document.querySelector('x-list').addEventListener(
+        'scrolltolower',
+        (e) => {
+          console.log(e);
+        },
+      );
     </script>
     <x-view class="page">
       <x-list need-visible-item-info>
-        <list-item class="item" style="--item-index: 0;" item-key="0"><x-view
+        <list-item class="item" style="--item-index: 0" item-key="0"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 1;" item-key="1"><x-view
+        <list-item class="item" style="--item-index: 1" item-key="1"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 2;" item-key="2"><x-view
+        <list-item class="item" style="--item-index: 2" item-key="2"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 3;" item-key="3"><x-view
+        <list-item class="item" style="--item-index: 3" item-key="3"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 4;" item-key="4"><x-view
+        <list-item class="item" style="--item-index: 4" item-key="4"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 5;" item-key="5"><x-view
+        <list-item class="item" style="--item-index: 5" item-key="5"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 6;" item-key="6"><x-view
+        <list-item class="item" style="--item-index: 6" item-key="6"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 7;" item-key="7"><x-view
+        <list-item class="item" style="--item-index: 7" item-key="7"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 8;" item-key="8"><x-view
+        <list-item class="item" style="--item-index: 8" item-key="8"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 9;" item-key="9"><x-view
+        <list-item class="item" style="--item-index: 9" item-key="9"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 10;" item-key="10"><x-view
+        <list-item class="item" style="--item-index: 10" item-key="10"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 11;" item-key="11"><x-view
+        <list-item class="item" style="--item-index: 11" item-key="11"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 12;" item-key="12"><x-view
+        <list-item class="item" style="--item-index: 12" item-key="12"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 13;" item-key="13"><x-view
+        <list-item class="item" style="--item-index: 13" item-key="13"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 14;" item-key="14"><x-view
+        <list-item class="item" style="--item-index: 14" item-key="14"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 15;" item-key="15"><x-view
+        <list-item class="item" style="--item-index: 15" item-key="15"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 16;" item-key="16"><x-view
+        <list-item class="item" style="--item-index: 16" item-key="16"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 17;" item-key="17"><x-view
+        <list-item class="item" style="--item-index: 17" item-key="17"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 18;" item-key="18"><x-view
+        <list-item class="item" style="--item-index: 18" item-key="18"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 19;" item-key="19"><x-view
+        <list-item class="item" style="--item-index: 19" item-key="19"><x-view
           ></x-view></list-item>
       </x-list>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/scroll-orientation-flow.html b/packages/web-platform/web-tests/tests/web-elements/x-list/scroll-orientation-flow.html
index 16d46e308a..c0c77b2413 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-list/scroll-orientation-flow.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/scroll-orientation-flow.html
@@ -49,117 +49,117 @@
 
   <body>
     <script src="/web-elements.js" defer></script>
-    <x-view class="page" style="flex-direction: column;">
+    <x-view class="page" style="flex-direction: column">
       <x-list list-type="flow" span-count="2" scroll-orientation="horizontal">
         <list-item
           class="left item"
           item-key="0"
-          style="--item-index: 0;"
+          style="--item-index: 0"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="1"
-          style="--item-index: 1;"
+          style="--item-index: 1"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="2"
-          style="--item-index: 2;"
+          style="--item-index: 2"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="3"
-          style="--item-index: 3;"
+          style="--item-index: 3"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="4"
-          style="--item-index: 4;"
+          style="--item-index: 4"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="5"
-          style="--item-index: 5;"
+          style="--item-index: 5"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="6"
-          style="--item-index: 6;"
+          style="--item-index: 6"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="7"
-          style="--item-index: 7;"
+          style="--item-index: 7"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="8"
-          style="--item-index: 8;"
+          style="--item-index: 8"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="9"
-          style="--item-index: 9;"
+          style="--item-index: 9"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="10"
-          style="--item-index: 10;"
+          style="--item-index: 10"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="11"
-          style="--item-index: 11;"
+          style="--item-index: 11"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="12"
-          style="--item-index: 12;"
+          style="--item-index: 12"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="13"
-          style="--item-index: 13;"
+          style="--item-index: 13"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="14"
-          style="--item-index: 14;"
+          style="--item-index: 14"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="14"
-          style="--item-index: 14;"
+          style="--item-index: 14"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="15"
-          style="--item-index: 15;"
+          style="--item-index: 15"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="15"
-          style="--item-index: 15;"
+          style="--item-index: 15"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="16"
-          style="--item-index: 16;"
+          style="--item-index: 16"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="17"
-          style="--item-index: 17;"
+          style="--item-index: 17"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="18"
-          style="--item-index: 18;"
+          style="--item-index: 18"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="19"
-          style="--item-index: 19;"
+          style="--item-index: 19"
         ><x-view></x-view></list-item>
       </x-list>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/scroll-orientation-waterfall.html b/packages/web-platform/web-tests/tests/web-elements/x-list/scroll-orientation-waterfall.html
index 0863e134d9..04fd7cc2d0 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-list/scroll-orientation-waterfall.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/scroll-orientation-waterfall.html
@@ -41,7 +41,7 @@
 
   <body>
     <script src="/web-elements.js" defer></script>
-    <x-view class="page" style="flex-direction: column;">
+    <x-view class="page" style="flex-direction: column">
       <x-list
         list-type="waterfall"
         span-count="2"
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/scroll-orientation.html b/packages/web-platform/web-tests/tests/web-elements/x-list/scroll-orientation.html
index 2d71596077..61feffb909 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-list/scroll-orientation.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/scroll-orientation.html
@@ -49,47 +49,47 @@
 
   <body>
     <script src="/web-elements.js" defer></script>
-    <x-view class="page" style="flex-direction: column;">
+    <x-view class="page" style="flex-direction: column">
       <x-list list-type="single" id="vertical">
-        <list-item class="item" style="--item-index: 0;" item-key="0"><x-view
+        <list-item class="item" style="--item-index: 0" item-key="0"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 1;" item-key="1"><x-view
+        <list-item class="item" style="--item-index: 1" item-key="1"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 2;" item-key="2"><x-view
+        <list-item class="item" style="--item-index: 2" item-key="2"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 3;" item-key="3"><x-view
+        <list-item class="item" style="--item-index: 3" item-key="3"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 4;" item-key="4"><x-view
+        <list-item class="item" style="--item-index: 4" item-key="4"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 5;" item-key="5"><x-view
+        <list-item class="item" style="--item-index: 5" item-key="5"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 6;" item-key="6"><x-view
+        <list-item class="item" style="--item-index: 6" item-key="6"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 7;" item-key="7"><x-view
+        <list-item class="item" style="--item-index: 7" item-key="7"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 8;" item-key="8"><x-view
+        <list-item class="item" style="--item-index: 8" item-key="8"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 9;" item-key="9"><x-view
+        <list-item class="item" style="--item-index: 9" item-key="9"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 10;" item-key="10"><x-view
+        <list-item class="item" style="--item-index: 10" item-key="10"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 11;" item-key="11"><x-view
+        <list-item class="item" style="--item-index: 11" item-key="11"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 12;" item-key="12"><x-view
+        <list-item class="item" style="--item-index: 12" item-key="12"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 13;" item-key="13"><x-view
+        <list-item class="item" style="--item-index: 13" item-key="13"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 14;" item-key="14"><x-view
+        <list-item class="item" style="--item-index: 14" item-key="14"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 15;" item-key="15"><x-view
+        <list-item class="item" style="--item-index: 15" item-key="15"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 16;" item-key="16"><x-view
+        <list-item class="item" style="--item-index: 16" item-key="16"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 17;" item-key="17"><x-view
+        <list-item class="item" style="--item-index: 17" item-key="17"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 18;" item-key="18"><x-view
+        <list-item class="item" style="--item-index: 18" item-key="18"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 19;" item-key="19"><x-view
+        <list-item class="item" style="--item-index: 19" item-key="19"><x-view
           ></x-view></list-item>
       </x-list>
       <x-list
@@ -97,45 +97,45 @@
         scroll-orientation="horizontal"
         id="horizontal"
       >
-        <list-item class="item" style="--item-index: 0;" item-key="0"><x-view
+        <list-item class="item" style="--item-index: 0" item-key="0"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 1;" item-key="1"><x-view
+        <list-item class="item" style="--item-index: 1" item-key="1"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 2;" item-key="2"><x-view
+        <list-item class="item" style="--item-index: 2" item-key="2"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 3;" item-key="3"><x-view
+        <list-item class="item" style="--item-index: 3" item-key="3"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 4;" item-key="4"><x-view
+        <list-item class="item" style="--item-index: 4" item-key="4"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 5;" item-key="5"><x-view
+        <list-item class="item" style="--item-index: 5" item-key="5"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 6;" item-key="6"><x-view
+        <list-item class="item" style="--item-index: 6" item-key="6"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 7;" item-key="7"><x-view
+        <list-item class="item" style="--item-index: 7" item-key="7"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 8;" item-key="8"><x-view
+        <list-item class="item" style="--item-index: 8" item-key="8"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 9;" item-key="9"><x-view
+        <list-item class="item" style="--item-index: 9" item-key="9"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 10;" item-key="10"><x-view
+        <list-item class="item" style="--item-index: 10" item-key="10"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 11;" item-key="11"><x-view
+        <list-item class="item" style="--item-index: 11" item-key="11"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 12;" item-key="12"><x-view
+        <list-item class="item" style="--item-index: 12" item-key="12"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 13;" item-key="13"><x-view
+        <list-item class="item" style="--item-index: 13" item-key="13"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 14;" item-key="14"><x-view
+        <list-item class="item" style="--item-index: 14" item-key="14"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 15;" item-key="15"><x-view
+        <list-item class="item" style="--item-index: 15" item-key="15"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 16;" item-key="16"><x-view
+        <list-item class="item" style="--item-index: 16" item-key="16"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 17;" item-key="17"><x-view
+        <list-item class="item" style="--item-index: 17" item-key="17"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 18;" item-key="18"><x-view
+        <list-item class="item" style="--item-index: 18" item-key="18"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 19;" item-key="19"><x-view
+        <list-item class="item" style="--item-index: 19" item-key="19"><x-view
           ></x-view></list-item>
       </x-list>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/scroll-to-position.html b/packages/web-platform/web-tests/tests/web-elements/x-list/scroll-to-position.html
index 1f8fa88ac3..07e3a576e1 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-list/scroll-to-position.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/scroll-to-position.html
@@ -25,9 +25,14 @@
     />
 
     <script type="module">
-    document.querySelector('#scrollToPosition').addEventListener('click', () => {
-      document.querySelector('x-list').scrollToPosition({ index: 10 });
-    });
+    document.querySelector('#scrollToPosition').addEventListener(
+        'click',
+        () => {
+          document.querySelector('x-list').scrollToPosition({
+            index: 10,
+          });
+        },
+      );
     </script>
     <style>
     @import url("../../common.css");
@@ -49,45 +54,45 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-list list-type="single">
-        <list-item class="item" style="--item-index: 0;" item-key="0"><x-view
+        <list-item class="item" style="--item-index: 0" item-key="0"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 1;" item-key="1"><x-view
+        <list-item class="item" style="--item-index: 1" item-key="1"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 2;" item-key="2"><x-view
+        <list-item class="item" style="--item-index: 2" item-key="2"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 3;" item-key="3"><x-view
+        <list-item class="item" style="--item-index: 3" item-key="3"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 4;" item-key="4"><x-view
+        <list-item class="item" style="--item-index: 4" item-key="4"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 5;" item-key="5"><x-view
+        <list-item class="item" style="--item-index: 5" item-key="5"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 6;" item-key="6"><x-view
+        <list-item class="item" style="--item-index: 6" item-key="6"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 7;" item-key="7"><x-view
+        <list-item class="item" style="--item-index: 7" item-key="7"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 8;" item-key="8"><x-view
+        <list-item class="item" style="--item-index: 8" item-key="8"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 9;" item-key="9"><x-view
+        <list-item class="item" style="--item-index: 9" item-key="9"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 10;" item-key="10"><x-view
+        <list-item class="item" style="--item-index: 10" item-key="10"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 11;" item-key="11"><x-view
+        <list-item class="item" style="--item-index: 11" item-key="11"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 12;" item-key="12"><x-view
+        <list-item class="item" style="--item-index: 12" item-key="12"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 13;" item-key="13"><x-view
+        <list-item class="item" style="--item-index: 13" item-key="13"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 14;" item-key="14"><x-view
+        <list-item class="item" style="--item-index: 14" item-key="14"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 15;" item-key="15"><x-view
+        <list-item class="item" style="--item-index: 15" item-key="15"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 16;" item-key="16"><x-view
+        <list-item class="item" style="--item-index: 16" item-key="16"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 17;" item-key="17"><x-view
+        <list-item class="item" style="--item-index: 17" item-key="17"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 18;" item-key="18"><x-view
+        <list-item class="item" style="--item-index: 18" item-key="18"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 19;" item-key="19"><x-view
+        <list-item class="item" style="--item-index: 19" item-key="19"><x-view
           ></x-view></list-item>
       </x-list>
       <x-text id="scrollToPosition">scrollToPosition</x-text>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/sticky-flow.html b/packages/web-platform/web-tests/tests/web-elements/x-list/sticky-flow.html
index 396e40e8c9..22bcfd7d4c 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-list/sticky-flow.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/sticky-flow.html
@@ -49,118 +49,118 @@
 
   <body>
     <script src="/web-elements.js" defer></script>
-    <x-view class="page" style="flex-direction: column;">
+    <x-view class="page" style="flex-direction: column">
       <x-list list-type="flow" span-count="2" sticky="true">
         <list-item
           class="left item"
           item-key="0"
-          style="--item-index: 0;"
+          style="--item-index: 0"
           sticky-top
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="1"
-          style="--item-index: 1;"
+          style="--item-index: 1"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="2"
-          style="--item-index: 2;"
+          style="--item-index: 2"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="3"
-          style="--item-index: 3;"
+          style="--item-index: 3"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="4"
-          style="--item-index: 4;"
+          style="--item-index: 4"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="5"
-          style="--item-index: 5;"
+          style="--item-index: 5"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="6"
-          style="--item-index: 6;"
+          style="--item-index: 6"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="7"
-          style="--item-index: 7;"
+          style="--item-index: 7"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="8"
-          style="--item-index: 8;"
+          style="--item-index: 8"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="9"
-          style="--item-index: 9;"
+          style="--item-index: 9"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="10"
-          style="--item-index: 10;"
+          style="--item-index: 10"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="11"
-          style="--item-index: 11;"
+          style="--item-index: 11"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="12"
-          style="--item-index: 12;"
+          style="--item-index: 12"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="13"
-          style="--item-index: 13;"
+          style="--item-index: 13"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="14"
-          style="--item-index: 14;"
+          style="--item-index: 14"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="14"
-          style="--item-index: 14;"
+          style="--item-index: 14"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="15"
-          style="--item-index: 15;"
+          style="--item-index: 15"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="15"
-          style="--item-index: 15;"
+          style="--item-index: 15"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="16"
-          style="--item-index: 16;"
+          style="--item-index: 16"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="17"
-          style="--item-index: 17;"
+          style="--item-index: 17"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="18"
-          style="--item-index: 18;"
+          style="--item-index: 18"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="19"
-          style="--item-index: 19;"
+          style="--item-index: 19"
           sticky-bottom
         ><x-view></x-view></list-item>
       </x-list>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/sticky-offset.html b/packages/web-platform/web-tests/tests/web-elements/x-list/sticky-offset.html
index a46cd94ebb..99ed64c94a 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-list/sticky-offset.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/sticky-offset.html
@@ -54,113 +54,113 @@
         <list-item
           class="left item"
           item-key="0"
-          style="--item-index: 0;"
+          style="--item-index: 0"
           sticky-top
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="1"
-          style="--item-index: 1;"
+          style="--item-index: 1"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="2"
-          style="--item-index: 2;"
+          style="--item-index: 2"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="3"
-          style="--item-index: 3;"
+          style="--item-index: 3"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="4"
-          style="--item-index: 4;"
+          style="--item-index: 4"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="5"
-          style="--item-index: 5;"
+          style="--item-index: 5"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="6"
-          style="--item-index: 6;"
+          style="--item-index: 6"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="7"
-          style="--item-index: 7;"
+          style="--item-index: 7"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="8"
-          style="--item-index: 8;"
+          style="--item-index: 8"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="9"
-          style="--item-index: 9;"
+          style="--item-index: 9"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="10"
-          style="--item-index: 10;"
+          style="--item-index: 10"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="11"
-          style="--item-index: 11;"
+          style="--item-index: 11"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="12"
-          style="--item-index: 12;"
+          style="--item-index: 12"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="13"
-          style="--item-index: 13;"
+          style="--item-index: 13"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="14"
-          style="--item-index: 14;"
+          style="--item-index: 14"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="14"
-          style="--item-index: 14;"
+          style="--item-index: 14"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="15"
-          style="--item-index: 15;"
+          style="--item-index: 15"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="15"
-          style="--item-index: 15;"
+          style="--item-index: 15"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="16"
-          style="--item-index: 16;"
+          style="--item-index: 16"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="17"
-          style="--item-index: 17;"
+          style="--item-index: 17"
         ><x-view></x-view></list-item>
         <list-item
           class="left item"
           item-key="18"
-          style="--item-index: 18;"
+          style="--item-index: 18"
         ><x-view></x-view></list-item>
         <list-item
           class="right item"
           item-key="19"
-          style="--item-index: 19;"
+          style="--item-index: 19"
           sticky-bottom
         ><x-view></x-view></list-item>
       </x-list>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/sticky-waterfall.html b/packages/web-platform/web-tests/tests/web-elements/x-list/sticky-waterfall.html
index c20a8597ba..134e6be533 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-list/sticky-waterfall.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/sticky-waterfall.html
@@ -41,7 +41,7 @@
 
   <body>
     <script src="/web-elements.js" defer></script>
-    <x-view class="page" style="flex-direction: column;">
+    <x-view class="page" style="flex-direction: column">
       <x-list list-type="waterfall" span-count="2" sticky="true">
         <list-item
           item-key="0"
@@ -103,84 +103,84 @@
         <list-item
           item-key="8"
           class="item"
-          style="--item-index: 8; height: 203px;"
+          style="--item-index: 8; height: 203px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="9"
           class="item"
-          style="--item-index: 9; height: 339px;"
+          style="--item-index: 9; height: 339px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="10"
           class="item"
-          style="--item-index: 10; height: 291px;"
+          style="--item-index: 10; height: 291px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="11"
           class="item"
-          style="--item-index: 11; height: 165px;"
+          style="--item-index: 11; height: 165px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="12"
           class="item"
-          style="--item-index: 12; height: 267px;"
+          style="--item-index: 12; height: 267px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="13"
           class="item"
-          style="--item-index: 13; height: 281px;"
+          style="--item-index: 13; height: 281px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="14"
           class="item"
-          style="--item-index: 14; height: 294px;"
+          style="--item-index: 14; height: 294px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="15"
           class="item"
-          style="--item-index: 15; height: 239px;"
+          style="--item-index: 15; height: 239px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="16"
           class="item"
-          style="--item-index: 16; height: 173px;"
+          style="--item-index: 16; height: 173px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="17"
           class="item"
-          style="--item-index: 17; height: 185px;"
+          style="--item-index: 17; height: 185px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="18"
           class="item"
-          style="--item-index: 18; height: 220px;"
+          style="--item-index: 18; height: 220px"
         >
           <x-view> </x-view>
         </list-item>
         <list-item
           item-key="19"
           class="item"
-          style="--item-index: 19; height: 180px;"
+          style="--item-index: 19; height: 180px"
         >
           <x-view> </x-view>
         </list-item>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-list/sticky.html b/packages/web-platform/web-tests/tests/web-elements/x-list/sticky.html
index cdb685ede5..5466002396 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-list/sticky.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-list/sticky.html
@@ -46,49 +46,49 @@
       <x-list list-type="single" sticky="true">
         <list-item
           class="item"
-          style="--item-index: 0;"
+          style="--item-index: 0"
           item-key="0"
           sticky-top
         ><x-view></x-view></list-item>
-        <list-item class="item" style="--item-index: 1;" item-key="1"><x-view
+        <list-item class="item" style="--item-index: 1" item-key="1"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 2;" item-key="2"><x-view
+        <list-item class="item" style="--item-index: 2" item-key="2"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 3;" item-key="3"><x-view
+        <list-item class="item" style="--item-index: 3" item-key="3"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 4;" item-key="4"><x-view
+        <list-item class="item" style="--item-index: 4" item-key="4"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 5;" item-key="5"><x-view
+        <list-item class="item" style="--item-index: 5" item-key="5"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 6;" item-key="6"><x-view
+        <list-item class="item" style="--item-index: 6" item-key="6"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 7;" item-key="7"><x-view
+        <list-item class="item" style="--item-index: 7" item-key="7"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 8;" item-key="8"><x-view
+        <list-item class="item" style="--item-index: 8" item-key="8"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 9;" item-key="9"><x-view
+        <list-item class="item" style="--item-index: 9" item-key="9"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 10;" item-key="10"><x-view
+        <list-item class="item" style="--item-index: 10" item-key="10"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 11;" item-key="11"><x-view
+        <list-item class="item" style="--item-index: 11" item-key="11"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 12;" item-key="12"><x-view
+        <list-item class="item" style="--item-index: 12" item-key="12"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 13;" item-key="13"><x-view
+        <list-item class="item" style="--item-index: 13" item-key="13"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 14;" item-key="14"><x-view
+        <list-item class="item" style="--item-index: 14" item-key="14"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 15;" item-key="15"><x-view
+        <list-item class="item" style="--item-index: 15" item-key="15"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 16;" item-key="16"><x-view
+        <list-item class="item" style="--item-index: 16" item-key="16"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 17;" item-key="17"><x-view
+        <list-item class="item" style="--item-index: 17" item-key="17"><x-view
           ></x-view></list-item>
-        <list-item class="item" style="--item-index: 18;" item-key="18"><x-view
+        <list-item class="item" style="--item-index: 18" item-key="18"><x-view
           ></x-view></list-item>
         <list-item
           class="item"
-          style="--item-index: 19;"
+          style="--item-index: 19"
           item-key="19"
           sticky-bottom
         ><x-view></x-view></list-item>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-overlay-ng/basic-z-index.html b/packages/web-platform/web-tests/tests/web-elements/x-overlay-ng/basic-z-index.html
index 5408a888b9..8e5bb5b16a 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-overlay-ng/basic-z-index.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-overlay-ng/basic-z-index.html
@@ -36,18 +36,19 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="--lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); display:flex;flex-direction: column; align-items: center; width:100%; height:100%;"
+      style="--lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%"
     >
-      <x-view class="btn" style="z-index:100;"></x-view>
-      <x-view style="z-index:1;">
+      <x-view class="btn" style="z-index: 100"></x-view>
+      <x-view style="z-index: 1">
         <x-overlay-ng
           visible="true"
           events-pass-through="{true}"
           android-lazy-init-context="{false}"
           custom-layout="{true}"
-          style="overflow:visible"
+          style="overflow: visible"
         >
-          <x-view style="background:red; height:400px;width:200px;"> </x-view>
+          <x-view style="background: red; height: 400px; width: 200px">
+          </x-view>
         </x-overlay-ng>
       </x-view>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-overlay-ng/event-layoutchange.html b/packages/web-platform/web-tests/tests/web-elements/x-overlay-ng/event-layoutchange.html
index 768f3ee937..40ed3d8391 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-overlay-ng/event-layoutchange.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-overlay-ng/event-layoutchange.html
@@ -32,15 +32,18 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <script type="module">
-    document.querySelector('#target').addEventListener('layoutchange', (ev) => {
-      console.log('layoutchange', ev.detail);
-      Object.assign(globalThis, { detail: ev.detail });
-    });
+    document.querySelector('#target').addEventListener(
+        'layoutchange',
+        (ev) => {
+          console.log('layoutchange', ev.detail);
+          Object.assign(globalThis, { detail: ev.detail });
+        },
+      );
     </script>
     <x-view class="page">
       <x-overlay-ng
         id="target"
-        style="width:100px; height:400px; background-color: aquamarine;"
+        style="width: 100px; height: 400px; background-color: aquamarine"
       >
       </x-overlay-ng>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/basic.html b/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/basic.html
index 52b777a8dd..ad9f8dc668 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/basic.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/basic.html
@@ -31,7 +31,9 @@
       background-color: green;
       --lynx-display: linear;
       --lynx-linear-orientation: vertical;
-      --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-vertical);
+      --lynx-linear-orientation-toggle: var(
+        --lynx-linear-orientation-vertical
+      );
     }
 
     .refresh-header {
@@ -48,7 +50,9 @@
       height: 100%;
       display: linear;
       --lynx-linear-orientation: vertical;
-      --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-vertical);
+      --lynx-linear-orientation-toggle: var(
+        --lynx-linear-orientation-vertical
+      );
       background-color: yellow;
     }
 
@@ -74,7 +78,8 @@
     <x-refresh-view class="refresh-view" id="refresh-view">
       <x-refresh-header class="refresh-header"> </x-refresh-header>
 
-      <x-view style="height:500px; width:100%;background-color:pink"> </x-view>
+      <x-view style="height: 500px; width: 100%; background-color: pink">
+      </x-view>
 
       <x-refresh-footer class="refresh-footer"> </x-refresh-footer>
     </x-refresh-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/enable-auto-loadmore-false.html b/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/enable-auto-loadmore-false.html
index c2a0c88e63..aed54ecaab 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/enable-auto-loadmore-false.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/enable-auto-loadmore-false.html
@@ -30,7 +30,9 @@
       background-color: green;
       --lynx-display: linear;
       --lynx-linear-orientation: vertical;
-      --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-vertical);
+      --lynx-linear-orientation-toggle: var(
+        --lynx-linear-orientation-vertical
+      );
     }
 
     .refresh-header {
@@ -47,7 +49,9 @@
       height: 100%;
       display: linear;
       --lynx-linear-orientation: vertical;
-      --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-vertical);
+      --lynx-linear-orientation-toggle: var(
+        --lynx-linear-orientation-vertical
+      );
       background-color: yellow;
     }
 
@@ -72,11 +76,11 @@
     <script src="/web-elements.js" defer></script>
     <script type="module">
     const content = document.getElementById('content');
-    const refreshView = document.querySelector('x-refresh-view');
-    const refreshFooter = document.querySelector('x-refresh-footer');
-    refreshView.addEventListener('startloadmore', () => {
-      content.style.backgroundColor = 'chartreuse';
-    });
+      const refreshView = document.querySelector('x-refresh-view');
+      const refreshFooter = document.querySelector('x-refresh-footer');
+      refreshView.addEventListener('startloadmore', () => {
+        content.style.backgroundColor = 'chartreuse';
+      });
     </script>
     <x-refresh-view
       class="refresh-view"
@@ -86,7 +90,7 @@
       <x-refresh-header class="refresh-header"> </x-refresh-header>
 
       <x-view
-        style="height:500px; width:100%;background-color:pink"
+        style="height: 500px; width: 100%; background-color: pink"
         id="content"
       >
       </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/enable-auto-loadmore-true.html b/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/enable-auto-loadmore-true.html
index a8f26ea110..6011c72b0b 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/enable-auto-loadmore-true.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/enable-auto-loadmore-true.html
@@ -30,7 +30,9 @@
       background-color: green;
       --lynx-display: linear;
       --lynx-linear-orientation: vertical;
-      --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-vertical);
+      --lynx-linear-orientation-toggle: var(
+        --lynx-linear-orientation-vertical
+      );
     }
 
     .refresh-header {
@@ -47,7 +49,9 @@
       height: 100%;
       display: linear;
       --lynx-linear-orientation: vertical;
-      --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-vertical);
+      --lynx-linear-orientation-toggle: var(
+        --lynx-linear-orientation-vertical
+      );
       background-color: yellow;
     }
 
@@ -72,11 +76,11 @@
     <script src="/web-elements.js" defer></script>
     <script type="module">
     const content = document.getElementById('content');
-    const refreshView = document.querySelector('x-refresh-view');
-    const refreshFooter = document.querySelector('x-refresh-footer');
-    refreshView.addEventListener('startloadmore', () => {
-      content.style.backgroundColor = 'chartreuse';
-    });
+      const refreshView = document.querySelector('x-refresh-view');
+      const refreshFooter = document.querySelector('x-refresh-footer');
+      refreshView.addEventListener('startloadmore', () => {
+        content.style.backgroundColor = 'chartreuse';
+      });
     </script>
     <x-refresh-view
       class="refresh-view"
@@ -86,7 +90,7 @@
       <x-refresh-header class="refresh-header"> </x-refresh-header>
 
       <x-view
-        style="height:500px; width:100%;background-color:pink"
+        style="height: 500px; width: 100%; background-color: pink"
         id="content"
       >
       </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/enable-loadmore-false.html b/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/enable-loadmore-false.html
index 5383e897bf..c0dcadf7f7 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/enable-loadmore-false.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/enable-loadmore-false.html
@@ -30,7 +30,9 @@
       background-color: green;
       --lynx-display: linear;
       --lynx-linear-orientation: vertical;
-      --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-vertical);
+      --lynx-linear-orientation-toggle: var(
+        --lynx-linear-orientation-vertical
+      );
     }
 
     .refresh-header {
@@ -47,7 +49,9 @@
       height: 100%;
       display: linear;
       --lynx-linear-orientation: vertical;
-      --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-vertical);
+      --lynx-linear-orientation-toggle: var(
+        --lynx-linear-orientation-vertical
+      );
       background-color: yellow;
     }
 
@@ -72,17 +76,17 @@
     <script src="/web-elements.js" defer></script>
     <script type="module">
     const content = document.getElementById('content');
-    const refreshView = document.querySelector('x-refresh-view');
-    const refreshFooter = document.querySelector('x-refresh-footer');
-    const observer = new IntersectionObserver((e) => {
-      if (e[0].isIntersecting) {
-        content.style.backgroundColor = 'chartreuse';
-      }
-    }, {
-      root: refreshView,
-      threshold: 1,
-    });
-    observer.observe(refreshFooter);
+      const refreshView = document.querySelector('x-refresh-view');
+      const refreshFooter = document.querySelector('x-refresh-footer');
+      const observer = new IntersectionObserver((e) => {
+        if (e[0].isIntersecting) {
+          content.style.backgroundColor = 'chartreuse';
+        }
+      }, {
+        root: refreshView,
+        threshold: 1,
+      });
+      observer.observe(refreshFooter);
     </script>
     <x-refresh-view
       class="refresh-view"
@@ -92,7 +96,7 @@
       <x-refresh-header class="refresh-header"> </x-refresh-header>
 
       <x-view
-        style="height:500px; width:100%;background-color:pink"
+        style="height: 500px; width: 100%; background-color: pink"
         id="content"
       >
       </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/enable-refresh-false.html b/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/enable-refresh-false.html
index 9a70bd44b4..70029c0fac 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/enable-refresh-false.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/enable-refresh-false.html
@@ -30,7 +30,9 @@
       background-color: green;
       --lynx-display: linear;
       --lynx-linear-orientation: vertical;
-      --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-vertical);
+      --lynx-linear-orientation-toggle: var(
+        --lynx-linear-orientation-vertical
+      );
     }
 
     .refresh-header {
@@ -47,7 +49,9 @@
       height: 100%;
       display: linear;
       --lynx-linear-orientation: vertical;
-      --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-vertical);
+      --lynx-linear-orientation-toggle: var(
+        --lynx-linear-orientation-vertical
+      );
       background-color: yellow;
     }
 
@@ -72,17 +76,17 @@
     <script src="/web-elements.js" defer></script>
     <script type="module">
     const content = document.getElementById('content');
-    const refreshView = document.querySelector('x-refresh-view');
-    const refreshFooter = document.querySelector('x-refresh-footer');
-    const observer = new IntersectionObserver((e) => {
-      if (e[0].isIntersecting) {
-        content.style.backgroundColor = 'chartreuse';
-      }
-    }, {
-      root: refreshView,
-      threshold: 1,
-    });
-    observer.observe(refreshFooter);
+      const refreshView = document.querySelector('x-refresh-view');
+      const refreshFooter = document.querySelector('x-refresh-footer');
+      const observer = new IntersectionObserver((e) => {
+        if (e[0].isIntersecting) {
+          content.style.backgroundColor = 'chartreuse';
+        }
+      }, {
+        root: refreshView,
+        threshold: 1,
+      });
+      observer.observe(refreshFooter);
     </script>
     <x-refresh-view
       class="refresh-view"
@@ -92,7 +96,7 @@
       <x-refresh-header class="refresh-header"> </x-refresh-header>
 
       <x-view
-        style="height:500px; width:100%;background-color:pink"
+        style="height: 500px; width: 100%; background-color: pink"
         id="content"
       >
       </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/event-footerreleased.html b/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/event-footerreleased.html
index b5b66580aa..93277cf9bf 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/event-footerreleased.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/event-footerreleased.html
@@ -30,7 +30,9 @@
       background-color: green;
       --lynx-display: linear;
       --lynx-linear-orientation: vertical;
-      --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-vertical);
+      --lynx-linear-orientation-toggle: var(
+        --lynx-linear-orientation-vertical
+      );
     }
 
     .refresh-header {
@@ -47,7 +49,9 @@
       height: 100%;
       display: linear;
       --lynx-linear-orientation: vertical;
-      --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-vertical);
+      --lynx-linear-orientation-toggle: var(
+        --lynx-linear-orientation-vertical
+      );
       background-color: yellow;
     }
 
@@ -72,11 +76,11 @@
     <script src="/web-elements.js" defer></script>
     <script type="module">
     const content = document.getElementById('content');
-    const refreshView = document.querySelector('x-refresh-view');
-    const refreshFooter = document.querySelector('x-refresh-footer');
-    refreshView.addEventListener('footerreleased', () => {
-      content.style.backgroundColor = 'chartreuse';
-    });
+      const refreshView = document.querySelector('x-refresh-view');
+      const refreshFooter = document.querySelector('x-refresh-footer');
+      refreshView.addEventListener('footerreleased', () => {
+        content.style.backgroundColor = 'chartreuse';
+      });
     </script>
     <x-refresh-view
       class="refresh-view"
@@ -85,7 +89,7 @@
       <x-refresh-header class="refresh-header"> </x-refresh-header>
 
       <x-view
-        style="height:500px; width:100%;background-color:pink"
+        style="height: 500px; width: 100%; background-color: pink"
         id="content"
       >
       </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/event-headeroffset.html b/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/event-headeroffset.html
index 9d479f6089..343dd1e4f9 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/event-headeroffset.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/event-headeroffset.html
@@ -30,7 +30,9 @@
       background-color: green;
       --lynx-display: linear;
       --lynx-linear-orientation: vertical;
-      --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-vertical);
+      --lynx-linear-orientation-toggle: var(
+        --lynx-linear-orientation-vertical
+      );
     }
 
     .refresh-header {
@@ -47,7 +49,9 @@
       height: 100%;
       display: linear;
       --lynx-linear-orientation: vertical;
-      --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-vertical);
+      --lynx-linear-orientation-toggle: var(
+        --lynx-linear-orientation-vertical
+      );
       background-color: yellow;
     }
 
@@ -72,11 +76,11 @@
     <script src="/web-elements.js" defer></script>
     <script type="module">
     const content = document.getElementById('content');
-    const refreshView = document.querySelector('x-refresh-view');
-    const refreshFooter = document.querySelector('x-refresh-footer');
-    refreshView.addEventListener('headeroffset', () => {
-      content.style.backgroundColor = 'chartreuse';
-    });
+      const refreshView = document.querySelector('x-refresh-view');
+      const refreshFooter = document.querySelector('x-refresh-footer');
+      refreshView.addEventListener('headeroffset', () => {
+        content.style.backgroundColor = 'chartreuse';
+      });
     </script>
     <x-refresh-view
       class="refresh-view"
@@ -85,7 +89,7 @@
       <x-refresh-header class="refresh-header"> </x-refresh-header>
 
       <x-view
-        style="height:500px; width:100%;background-color:pink"
+        style="height: 500px; width: 100%; background-color: pink"
         id="content"
       >
       </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/event-headerreleased.html b/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/event-headerreleased.html
index 1d19a81971..7ea7de8b63 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/event-headerreleased.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/event-headerreleased.html
@@ -30,7 +30,9 @@
       background-color: green;
       --lynx-display: linear;
       --lynx-linear-orientation: vertical;
-      --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-vertical);
+      --lynx-linear-orientation-toggle: var(
+        --lynx-linear-orientation-vertical
+      );
     }
 
     .refresh-header {
@@ -47,7 +49,9 @@
       height: 100%;
       display: linear;
       --lynx-linear-orientation: vertical;
-      --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-vertical);
+      --lynx-linear-orientation-toggle: var(
+        --lynx-linear-orientation-vertical
+      );
       background-color: yellow;
     }
 
@@ -72,11 +76,11 @@
     <script src="/web-elements.js" defer></script>
     <script type="module">
     const content = document.getElementById('content');
-    const refreshView = document.querySelector('x-refresh-view');
-    const refreshFooter = document.querySelector('x-refresh-footer');
-    refreshView.addEventListener('headerreleased', () => {
-      content.style.backgroundColor = 'chartreuse';
-    });
+      const refreshView = document.querySelector('x-refresh-view');
+      const refreshFooter = document.querySelector('x-refresh-footer');
+      refreshView.addEventListener('headerreleased', () => {
+        content.style.backgroundColor = 'chartreuse';
+      });
     </script>
     <x-refresh-view
       class="refresh-view"
@@ -85,7 +89,7 @@
       <x-refresh-header class="refresh-header"> </x-refresh-header>
 
       <x-view
-        style="height:500px; width:100%;background-color:pink"
+        style="height: 500px; width: 100%; background-color: pink"
         id="content"
       >
       </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/event-headershow.html b/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/event-headershow.html
index 566078df24..c4108e961e 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/event-headershow.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/event-headershow.html
@@ -30,7 +30,9 @@
       background-color: green;
       --lynx-display: linear;
       --lynx-linear-orientation: vertical;
-      --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-vertical);
+      --lynx-linear-orientation-toggle: var(
+        --lynx-linear-orientation-vertical
+      );
     }
 
     .refresh-header {
@@ -47,7 +49,9 @@
       height: 100%;
       display: linear;
       --lynx-linear-orientation: vertical;
-      --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-vertical);
+      --lynx-linear-orientation-toggle: var(
+        --lynx-linear-orientation-vertical
+      );
       background-color: yellow;
     }
 
@@ -72,11 +76,11 @@
     <script src="/web-elements.js" defer></script>
     <script type="module">
     const content = document.getElementById('content');
-    const refreshView = document.querySelector('x-refresh-view');
-    const refreshFooter = document.querySelector('x-refresh-footer');
-    refreshView.addEventListener('headershow', () => {
-      content.style.backgroundColor = 'chartreuse';
-    });
+      const refreshView = document.querySelector('x-refresh-view');
+      const refreshFooter = document.querySelector('x-refresh-footer');
+      refreshView.addEventListener('headershow', () => {
+        content.style.backgroundColor = 'chartreuse';
+      });
     </script>
     <x-refresh-view
       class="refresh-view"
@@ -85,7 +89,7 @@
       <x-refresh-header class="refresh-header"> </x-refresh-header>
 
       <x-view
-        style="height:500px; width:100%;background-color:pink"
+        style="height: 500px; width: 100%; background-color: pink"
         id="content"
       >
       </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/header-methods.html b/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/header-methods.html
index 173350bbda..789d8b29d5 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/header-methods.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/header-methods.html
@@ -25,17 +25,17 @@
     />
     <script type="module">
     const content = document.getElementById('content');
-    const refreshView = document.querySelector('x-refresh-view');
-    const refreshFooter = document.querySelector('x-refresh-footer');
-    const observer = new IntersectionObserver((e) => {
-      if (e[0].isIntersecting) {
-        content.style.backgroundColor = 'chartreuse';
-      }
-    }, {
-      root: refreshView,
-      threshold: 1,
-    });
-    observer.observe(refreshFooter);
+      const refreshView = document.querySelector('x-refresh-view');
+      const refreshFooter = document.querySelector('x-refresh-footer');
+      const observer = new IntersectionObserver((e) => {
+        if (e[0].isIntersecting) {
+          content.style.backgroundColor = 'chartreuse';
+        }
+      }, {
+        root: refreshView,
+        threshold: 1,
+      });
+      observer.observe(refreshFooter);
     </script>
     <style>
     .refresh-view {
@@ -44,7 +44,9 @@
       background-color: green;
       --lynx-display: linear;
       --lynx-linear-orientation: vertical;
-      --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-vertical);
+      --lynx-linear-orientation-toggle: var(
+        --lynx-linear-orientation-vertical
+      );
     }
 
     .refresh-header {
@@ -61,7 +63,9 @@
       height: 100%;
       display: linear;
       --lynx-linear-orientation: vertical;
-      --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-vertical);
+      --lynx-linear-orientation-toggle: var(
+        --lynx-linear-orientation-vertical
+      );
       background-color: yellow;
     }
 
@@ -92,7 +96,7 @@
       <x-refresh-header class="refresh-header"> </x-refresh-header>
 
       <x-view
-        style="height:500px; width:100%;background-color:pink"
+        style="height: 500px; width: 100%; background-color: pink"
         id="content"
       >
       </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/pull.html b/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/pull.html
index 591586190d..4ce829a3c4 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/pull.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-refresh-view/pull.html
@@ -25,17 +25,17 @@
     />
     <script type="module">
     const content = document.getElementById('content');
-    const refreshView = document.querySelector('x-refresh-view');
-    const refreshFooter = document.querySelector('x-refresh-footer');
-    const observer = new IntersectionObserver((e) => {
-      if (e[0].isIntersecting) {
-        content.style.backgroundColor = 'chartreuse';
-      }
-    }, {
-      root: refreshView,
-      threshold: 1,
-    });
-    observer.observe(refreshFooter);
+      const refreshView = document.querySelector('x-refresh-view');
+      const refreshFooter = document.querySelector('x-refresh-footer');
+      const observer = new IntersectionObserver((e) => {
+        if (e[0].isIntersecting) {
+          content.style.backgroundColor = 'chartreuse';
+        }
+      }, {
+        root: refreshView,
+        threshold: 1,
+      });
+      observer.observe(refreshFooter);
     </script>
     <style>
     .refresh-view {
@@ -44,7 +44,9 @@
       background-color: green;
       --lynx-display: linear;
       --lynx-linear-orientation: vertical;
-      --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-vertical);
+      --lynx-linear-orientation-toggle: var(
+        --lynx-linear-orientation-vertical
+      );
     }
 
     .refresh-header {
@@ -61,7 +63,9 @@
       height: 100%;
       display: linear;
       --lynx-linear-orientation: vertical;
-      --lynx-linear-orientation-toggle: var(--lynx-linear-orientation-vertical);
+      --lynx-linear-orientation-toggle: var(
+        --lynx-linear-orientation-vertical
+      );
       background-color: yellow;
     }
 
@@ -88,7 +92,7 @@
       <x-refresh-header class="refresh-header"> </x-refresh-header>
 
       <x-view
-        style="height:500px; width:100%;background-color:pink"
+        style="height: 500px; width: 100%; background-color: pink"
         id="content"
       >
       </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-basic-autoplay-interval.html b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-basic-autoplay-interval.html
index 835724fb50..d6d24a5827 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-basic-autoplay-interval.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-basic-autoplay-interval.html
@@ -43,13 +43,13 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-swiper
-        style="display:flex; --lynx-display:linear;"
+        style="display: flex; --lynx-display: linear"
         autoplay
         interval="2000"
       >
-        <x-swiper-item style="background-color:red;"> </x-swiper-item>
-        <x-swiper-item style="background-color:green;"> </x-swiper-item>
-        <x-swiper-item style="background-color:blue;"> </x-swiper-item>
+        <x-swiper-item style="background-color: red"> </x-swiper-item>
+        <x-swiper-item style="background-color: green"> </x-swiper-item>
+        <x-swiper-item style="background-color: blue"> </x-swiper-item>
       </x-swiper>
     </x-view>
     <div class="container">
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-basic-autoplay.html b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-basic-autoplay.html
index dfd5225c26..c4824fb0b7 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-basic-autoplay.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-basic-autoplay.html
@@ -43,13 +43,13 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-swiper
-        style="display:flex; --lynx-display:linear;"
+        style="display: flex; --lynx-display: linear"
         autoplay
         interval="1000"
       >
-        <x-swiper-item style="background-color:red;"> </x-swiper-item>
-        <x-swiper-item style="background-color:green;"> </x-swiper-item>
-        <x-swiper-item style="background-color:blue;"> </x-swiper-item>
+        <x-swiper-item style="background-color: red"> </x-swiper-item>
+        <x-swiper-item style="background-color: green"> </x-swiper-item>
+        <x-swiper-item style="background-color: blue"> </x-swiper-item>
       </x-swiper>
     </x-view>
     <div class="container">
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-basic-circular-autoplay.html b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-basic-circular-autoplay.html
index e8c44f8470..897e5017cc 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-basic-circular-autoplay.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-basic-circular-autoplay.html
@@ -43,14 +43,14 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-swiper
-        style="display:flex; --lynx-display:linear;"
+        style="display: flex; --lynx-display: linear"
         circular
         autoplay
         interval="1000"
       >
-        <x-swiper-item style="background-color:red;"> </x-swiper-item>
-        <x-swiper-item style="background-color:green;"> </x-swiper-item>
-        <x-swiper-item style="background-color:blue;"> </x-swiper-item>
+        <x-swiper-item style="background-color: red"> </x-swiper-item>
+        <x-swiper-item style="background-color: green"> </x-swiper-item>
+        <x-swiper-item style="background-color: blue"> </x-swiper-item>
       </x-swiper>
     </x-view>
     <div class="container">
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-basic-circular.html b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-basic-circular.html
index 7f65c9e240..23cb12115a 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-basic-circular.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-basic-circular.html
@@ -42,10 +42,10 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
-      <x-swiper style="display:flex; --lynx-display:linear;" circular>
-        <x-swiper-item style="background-color:red;"> </x-swiper-item>
-        <x-swiper-item style="background-color:green;"> </x-swiper-item>
-        <x-swiper-item style="background-color:blue;"> </x-swiper-item>
+      <x-swiper style="display: flex; --lynx-display: linear" circular>
+        <x-swiper-item style="background-color: red"> </x-swiper-item>
+        <x-swiper-item style="background-color: green"> </x-swiper-item>
+        <x-swiper-item style="background-color: blue"> </x-swiper-item>
       </x-swiper>
     </x-view>
     <div class="container">
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-basic-default-justify-content-flex-start.html b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-basic-default-justify-content-flex-start.html
index 40ef91f4cc..cde6935cac 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-basic-default-justify-content-flex-start.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-basic-default-justify-content-flex-start.html
@@ -43,15 +43,15 @@
     <script src="/web-elements.js" defer></script>
     <x-view
       class="page"
-      style="display:flex; --lynx-display:linear;--lynx-display-toggle: var(--lynx-display-linear);--justify-content-row:center;--justify-content-column:center;"
+      style="display: flex; --lynx-display: linear; --lynx-display-toggle: var(--lynx-display-linear); --justify-content-row: center; --justify-content-column: center"
     >
       <x-swiper
-        style="display:flex; --lynx-display:linear;--lynx-display-toggle: var(--lynx-display-linear);"
+        style="display: flex; --lynx-display: linear; --lynx-display-toggle: var(--lynx-display-linear)"
         id="target"
       >
-        <x-swiper-item style="background-color:red;"> </x-swiper-item>
-        <x-swiper-item style="background-color:green;"> </x-swiper-item>
-        <x-swiper-item style="background-color:blue;"> </x-swiper-item>
+        <x-swiper-item style="background-color: red"> </x-swiper-item>
+        <x-swiper-item style="background-color: green"> </x-swiper-item>
+        <x-swiper-item style="background-color: blue"> </x-swiper-item>
       </x-swiper>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-basic.html b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-basic.html
index 79ac5f44ea..d9c4f8e7be 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-basic.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-basic.html
@@ -42,16 +42,16 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
-      <x-swiper style="display:flex; --lynx-display:linear;">
-        <x-swiper-item style="background-color:red;"> </x-swiper-item>
-        <x-swiper-item style="background-color:green;"> </x-swiper-item>
-        <x-swiper-item style="background-color:blue;"> </x-swiper-item>
+      <x-swiper style="display: flex; --lynx-display: linear">
+        <x-swiper-item style="background-color: red"> </x-swiper-item>
+        <x-swiper-item style="background-color: green"> </x-swiper-item>
+        <x-swiper-item style="background-color: blue"> </x-swiper-item>
       </x-swiper>
 
-      <x-swiper style="display:flex; --lynx-display:linear;" vertical>
-        <x-swiper-item style="background-color:red;"> </x-swiper-item>
-        <x-swiper-item style="background-color:green;"> </x-swiper-item>
-        <x-swiper-item style="background-color:blue;"> </x-swiper-item>
+      <x-swiper style="display: flex; --lynx-display: linear" vertical>
+        <x-swiper-item style="background-color: red"> </x-swiper-item>
+        <x-swiper-item style="background-color: green"> </x-swiper-item>
+        <x-swiper-item style="background-color: blue"> </x-swiper-item>
       </x-swiper>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-circular-click.html b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-circular-click.html
index cc2d2aac90..e34b3b5319 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-circular-click.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-circular-click.html
@@ -45,36 +45,36 @@
     </style>
     <script type="module">
     let counter = 0;
-    let current = 0;
+      let current = 0;
 
-    const text = document.querySelector('x-text');
-    text.innerHTML = `${counter}`;
+      const text = document.querySelector('x-text');
+      text.innerHTML = `${counter}`;
 
-    const swiper = document.querySelector('x-swiper');
-    swiper.setAttribute('current', current);
+      const swiper = document.querySelector('x-swiper');
+      swiper.setAttribute('current', current);
 
-    const swiperItems = document.getElementsByTagName('x-swiper-item');
-    for (const item of swiperItems) {
-      const currentIndex = ++counter;
-      item.addEventListener('click', function() {
-        text.innerHTML = `${currentIndex}`;
-      });
-    }
+      const swiperItems = document.getElementsByTagName('x-swiper-item');
+      for (const item of swiperItems) {
+        const currentIndex = ++counter;
+        item.addEventListener('click', function() {
+          text.innerHTML = `${currentIndex}`;
+        });
+      }
 
-    const btn = document.querySelector('.btn');
-    btn.addEventListener('click', function() {
-      swiper.setAttribute('current', (++current) % 3);
-    });
+      const btn = document.querySelector('.btn');
+      btn.addEventListener('click', function() {
+        swiper.setAttribute('current', (++current) % 3);
+      });
     </script>
   </head>
 
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view class="page column">
-      <x-swiper style="display:flex; --lynx-display:linear;" circular>
-        <x-swiper-item style="background-color:red;"> </x-swiper-item>
-        <x-swiper-item style="background-color:green;"> </x-swiper-item>
-        <x-swiper-item style="background-color:blue;"> </x-swiper-item>
+      <x-swiper style="display: flex; --lynx-display: linear" circular>
+        <x-swiper-item style="background-color: red"> </x-swiper-item>
+        <x-swiper-item style="background-color: green"> </x-swiper-item>
+        <x-swiper-item style="background-color: blue"> </x-swiper-item>
       </x-swiper>
 
       <x-text></x-text>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-circular-coverflow.html b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-circular-coverflow.html
index ce3dc796fc..d32dc3c12d 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-circular-coverflow.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-circular-coverflow.html
@@ -43,13 +43,13 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-swiper
-        style="display:flex; --lynx-display:linear;"
+        style="display: flex; --lynx-display: linear"
         circular
         mode="coverflow"
       >
-        <x-swiper-item style="background-color:red;"> </x-swiper-item>
-        <x-swiper-item style="background-color:green;"> </x-swiper-item>
-        <x-swiper-item style="background-color:blue;"> </x-swiper-item>
+        <x-swiper-item style="background-color: red"> </x-swiper-item>
+        <x-swiper-item style="background-color: green"> </x-swiper-item>
+        <x-swiper-item style="background-color: blue"> </x-swiper-item>
       </x-swiper>
     </x-view>
     <div class="container">
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-current-change.html b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-current-change.html
index 139606a1f7..cc5c04aef3 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-current-change.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-current-change.html
@@ -43,12 +43,12 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-swiper
-        style="display:flex; --lynx-display:linear;"
+        style="display: flex; --lynx-display: linear"
         smooth-scroll="false"
       >
-        <x-swiper-item style="background-color:red;"> </x-swiper-item>
-        <x-swiper-item style="background-color:green;"> </x-swiper-item>
-        <x-swiper-item style="background-color:blue;"> </x-swiper-item>
+        <x-swiper-item style="background-color: red"> </x-swiper-item>
+        <x-swiper-item style="background-color: green"> </x-swiper-item>
+        <x-swiper-item style="background-color: blue"> </x-swiper-item>
       </x-swiper>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-indicator-active-color.html b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-indicator-active-color.html
index 0d2698139b..9d74bd90fd 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-indicator-active-color.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-indicator-active-color.html
@@ -43,12 +43,12 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-swiper
-        style="display:flex; --lynx-display:linear;"
+        style="display: flex; --lynx-display: linear"
         indicator-active-color="rgba(0, 255, 0, 1)"
       >
-        <x-swiper-item style="background-color:red;"> </x-swiper-item>
-        <x-swiper-item style="background-color:green;"> </x-swiper-item>
-        <x-swiper-item style="background-color:blue;"> </x-swiper-item>
+        <x-swiper-item style="background-color: red"> </x-swiper-item>
+        <x-swiper-item style="background-color: green"> </x-swiper-item>
+        <x-swiper-item style="background-color: blue"> </x-swiper-item>
       </x-swiper>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-indicator-basic.html b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-indicator-basic.html
index 373fe1ab54..35ed0a75bb 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-indicator-basic.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-indicator-basic.html
@@ -43,12 +43,12 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-swiper
-        style="display:flex; --lynx-display:linear;"
+        style="display: flex; --lynx-display: linear"
         smooth-scroll="false"
       >
-        <x-swiper-item style="background-color:red;"> </x-swiper-item>
-        <x-swiper-item style="background-color:green;"> </x-swiper-item>
-        <x-swiper-item style="background-color:blue;"> </x-swiper-item>
+        <x-swiper-item style="background-color: red"> </x-swiper-item>
+        <x-swiper-item style="background-color: green"> </x-swiper-item>
+        <x-swiper-item style="background-color: blue"> </x-swiper-item>
       </x-swiper>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-indicator-color.html b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-indicator-color.html
index d2bf509869..1420e8e48c 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-indicator-color.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-indicator-color.html
@@ -43,12 +43,12 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-swiper
-        style="display:flex; --lynx-display:linear;"
+        style="display: flex; --lynx-display: linear"
         indicator-color="rgba(0, 255, 0, 1)"
       >
-        <x-swiper-item style="background-color:red;"> </x-swiper-item>
-        <x-swiper-item style="background-color:green;"> </x-swiper-item>
-        <x-swiper-item style="background-color:blue;"> </x-swiper-item>
+        <x-swiper-item style="background-color: red"> </x-swiper-item>
+        <x-swiper-item style="background-color: green"> </x-swiper-item>
+        <x-swiper-item style="background-color: blue"> </x-swiper-item>
       </x-swiper>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-initial-current.html b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-initial-current.html
index 19c166d55f..87cd2f580b 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-initial-current.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-initial-current.html
@@ -43,24 +43,24 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-swiper
-        style="display:flex; --lynx-display:linear;"
+        style="display: flex; --lynx-display: linear"
         current="1"
         indicator-dots="false"
       >
-        <x-swiper-item style="background-color:red;"> </x-swiper-item>
-        <x-swiper-item style="background-color:green;"> </x-swiper-item>
-        <x-swiper-item style="background-color:blue;"> </x-swiper-item>
+        <x-swiper-item style="background-color: red"> </x-swiper-item>
+        <x-swiper-item style="background-color: green"> </x-swiper-item>
+        <x-swiper-item style="background-color: blue"> </x-swiper-item>
       </x-swiper>
 
       <x-swiper
-        style="display:flex; --lynx-display:linear;"
+        style="display: flex; --lynx-display: linear"
         vertical
         current="1"
         indicator-dots="false"
       >
-        <x-swiper-item style="background-color:red;"> </x-swiper-item>
-        <x-swiper-item style="background-color:green;"> </x-swiper-item>
-        <x-swiper-item style="background-color:blue;"> </x-swiper-item>
+        <x-swiper-item style="background-color: red"> </x-swiper-item>
+        <x-swiper-item style="background-color: green"> </x-swiper-item>
+        <x-swiper-item style="background-color: blue"> </x-swiper-item>
       </x-swiper>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-mode-carousel-page-margin.html b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-mode-carousel-page-margin.html
index 3ef6d443d6..f4798556e5 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-mode-carousel-page-margin.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-mode-carousel-page-margin.html
@@ -42,10 +42,10 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
-      <x-swiper style="display:flex; --lynx-display:linear;" mode="carousel">
-        <x-swiper-item style="background-color:red;"> </x-swiper-item>
-        <x-swiper-item style="background-color:green;"> </x-swiper-item>
-        <x-swiper-item style="background-color:blue;"> </x-swiper-item>
+      <x-swiper style="display: flex; --lynx-display: linear" mode="carousel">
+        <x-swiper-item style="background-color: red"> </x-swiper-item>
+        <x-swiper-item style="background-color: green"> </x-swiper-item>
+        <x-swiper-item style="background-color: blue"> </x-swiper-item>
       </x-swiper>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-mode-carousel.html b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-mode-carousel.html
index 3ef6d443d6..f4798556e5 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-mode-carousel.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-mode-carousel.html
@@ -42,10 +42,10 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
-      <x-swiper style="display:flex; --lynx-display:linear;" mode="carousel">
-        <x-swiper-item style="background-color:red;"> </x-swiper-item>
-        <x-swiper-item style="background-color:green;"> </x-swiper-item>
-        <x-swiper-item style="background-color:blue;"> </x-swiper-item>
+      <x-swiper style="display: flex; --lynx-display: linear" mode="carousel">
+        <x-swiper-item style="background-color: red"> </x-swiper-item>
+        <x-swiper-item style="background-color: green"> </x-swiper-item>
+        <x-swiper-item style="background-color: blue"> </x-swiper-item>
       </x-swiper>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-mode-carry.html b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-mode-carry.html
index 7ba00ab9bf..2c2cb5320c 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-mode-carry.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-mode-carry.html
@@ -42,13 +42,13 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
-      <x-swiper style="display:flex; --lynx-display:linear;" mode="carry">
-        <x-swiper-item style="background-color:red;"> </x-swiper-item>
-        <x-swiper-item style="background-color:green;"> </x-swiper-item>
-        <x-swiper-item style="background-color:blue;"> </x-swiper-item>
+      <x-swiper style="display: flex; --lynx-display: linear" mode="carry">
+        <x-swiper-item style="background-color: red"> </x-swiper-item>
+        <x-swiper-item style="background-color: green"> </x-swiper-item>
+        <x-swiper-item style="background-color: blue"> </x-swiper-item>
 
-        <x-swiper-item style="background-color:aqua;"> </x-swiper-item>
-        <x-swiper-item style="background-color:yellowgreen;"> </x-swiper-item>
+        <x-swiper-item style="background-color: aqua"> </x-swiper-item>
+        <x-swiper-item style="background-color: yellowgreen"> </x-swiper-item>
       </x-swiper>
     </x-view>
     <div class="container">
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-mode-coverflow-circular.html b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-mode-coverflow-circular.html
index a3a08fea9f..b0dd5e1b66 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-mode-coverflow-circular.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-mode-coverflow-circular.html
@@ -43,16 +43,16 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-swiper
-        style="display:flex; --lynx-display:linear;"
+        style="display: flex; --lynx-display: linear"
         mode="coverflow"
         circular
       >
-        <x-swiper-item style="background-color:red;"> </x-swiper-item>
-        <x-swiper-item style="background-color:green;"> </x-swiper-item>
-        <x-swiper-item style="background-color:blue;"> </x-swiper-item>
+        <x-swiper-item style="background-color: red"> </x-swiper-item>
+        <x-swiper-item style="background-color: green"> </x-swiper-item>
+        <x-swiper-item style="background-color: blue"> </x-swiper-item>
 
-        <x-swiper-item style="background-color:aqua;"> </x-swiper-item>
-        <x-swiper-item style="background-color:yellowgreen;"> </x-swiper-item>
+        <x-swiper-item style="background-color: aqua"> </x-swiper-item>
+        <x-swiper-item style="background-color: yellowgreen"> </x-swiper-item>
       </x-swiper>
     </x-view>
     <div class="container">
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-mode-coverflow.html b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-mode-coverflow.html
index 510a6e183c..e39495ab79 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-mode-coverflow.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-mode-coverflow.html
@@ -42,13 +42,13 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
-      <x-swiper style="display:flex; --lynx-display:linear;" mode="coverflow">
-        <x-swiper-item style="background-color:red;"> </x-swiper-item>
-        <x-swiper-item style="background-color:green;"> </x-swiper-item>
-        <x-swiper-item style="background-color:blue;"> </x-swiper-item>
+      <x-swiper style="display: flex; --lynx-display: linear" mode="coverflow">
+        <x-swiper-item style="background-color: red"> </x-swiper-item>
+        <x-swiper-item style="background-color: green"> </x-swiper-item>
+        <x-swiper-item style="background-color: blue"> </x-swiper-item>
 
-        <x-swiper-item style="background-color:aqua;"> </x-swiper-item>
-        <x-swiper-item style="background-color:yellowgreen;"> </x-swiper-item>
+        <x-swiper-item style="background-color: aqua"> </x-swiper-item>
+        <x-swiper-item style="background-color: yellowgreen"> </x-swiper-item>
       </x-swiper>
     </x-view>
     <div class="container">
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-mode-flat-coverflow.html b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-mode-flat-coverflow.html
index b64c64cc68..3e8cb7758c 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-mode-flat-coverflow.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-mode-flat-coverflow.html
@@ -43,15 +43,15 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-swiper
-        style="display:flex; --lynx-display:linear;"
+        style="display: flex; --lynx-display: linear"
         mode="flat-coverflow"
       >
-        <x-swiper-item style="background-color:red;"> </x-swiper-item>
-        <x-swiper-item style="background-color:green;"> </x-swiper-item>
-        <x-swiper-item style="background-color:blue;"> </x-swiper-item>
+        <x-swiper-item style="background-color: red"> </x-swiper-item>
+        <x-swiper-item style="background-color: green"> </x-swiper-item>
+        <x-swiper-item style="background-color: blue"> </x-swiper-item>
 
-        <x-swiper-item style="background-color:aqua;"> </x-swiper-item>
-        <x-swiper-item style="background-color:yellowgreen;"> </x-swiper-item>
+        <x-swiper-item style="background-color: aqua"> </x-swiper-item>
+        <x-swiper-item style="background-color: yellowgreen"> </x-swiper-item>
       </x-swiper>
     </x-view>
     <div class="container">
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-mode-normal-page-margin.html b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-mode-normal-page-margin.html
index 3824ad6b21..fb7b84bbef 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-mode-normal-page-margin.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-mode-normal-page-margin.html
@@ -42,10 +42,10 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
-      <x-swiper style="display:flex; --lynx-display:linear;" mode="normal">
-        <x-swiper-item style="background-color:red;"> </x-swiper-item>
-        <x-swiper-item style="background-color:green;"> </x-swiper-item>
-        <x-swiper-item style="background-color:blue;"> </x-swiper-item>
+      <x-swiper style="display: flex; --lynx-display: linear" mode="normal">
+        <x-swiper-item style="background-color: red"> </x-swiper-item>
+        <x-swiper-item style="background-color: green"> </x-swiper-item>
+        <x-swiper-item style="background-color: blue"> </x-swiper-item>
       </x-swiper>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-set-curren-smooth-scroll.html b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-set-curren-smooth-scroll.html
index 9163308443..afd559a9e6 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-set-curren-smooth-scroll.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-set-curren-smooth-scroll.html
@@ -44,24 +44,24 @@
     <x-view class="page">
       <x-swiper
         id="target"
-        style="display:flex; --lynx-display:linear;"
+        style="display: flex; --lynx-display: linear"
         indicator-dots="false"
       >
-        <x-swiper-item style="background-color:red;"> </x-swiper-item>
-        <x-swiper-item style="background-color:green;"> </x-swiper-item>
-        <x-swiper-item style="background-color:blue;"> </x-swiper-item>
-        <x-swiper-item style="background-color:red;"> </x-swiper-item>
-        <x-swiper-item style="background-color:green;"> </x-swiper-item>
-        <x-swiper-item style="background-color:blue;"> </x-swiper-item>
-        <x-swiper-item style="background-color:red;"> </x-swiper-item>
-        <x-swiper-item style="background-color:green;"> </x-swiper-item>
-        <x-swiper-item style="background-color:blue;"> </x-swiper-item>
-        <x-swiper-item style="background-color:red;"> </x-swiper-item>
-        <x-swiper-item style="background-color:green;"> </x-swiper-item>
-        <x-swiper-item style="background-color:blue;"> </x-swiper-item>
-        <x-swiper-item style="background-color:red;"> </x-swiper-item>
-        <x-swiper-item style="background-color:green;"> </x-swiper-item>
-        <x-swiper-item style="background-color:blue;"> </x-swiper-item>
+        <x-swiper-item style="background-color: red"> </x-swiper-item>
+        <x-swiper-item style="background-color: green"> </x-swiper-item>
+        <x-swiper-item style="background-color: blue"> </x-swiper-item>
+        <x-swiper-item style="background-color: red"> </x-swiper-item>
+        <x-swiper-item style="background-color: green"> </x-swiper-item>
+        <x-swiper-item style="background-color: blue"> </x-swiper-item>
+        <x-swiper-item style="background-color: red"> </x-swiper-item>
+        <x-swiper-item style="background-color: green"> </x-swiper-item>
+        <x-swiper-item style="background-color: blue"> </x-swiper-item>
+        <x-swiper-item style="background-color: red"> </x-swiper-item>
+        <x-swiper-item style="background-color: green"> </x-swiper-item>
+        <x-swiper-item style="background-color: blue"> </x-swiper-item>
+        <x-swiper-item style="background-color: red"> </x-swiper-item>
+        <x-swiper-item style="background-color: green"> </x-swiper-item>
+        <x-swiper-item style="background-color: blue"> </x-swiper-item>
       </x-swiper>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-set-current.html b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-set-current.html
index cd8a4d34da..73f5955bb5 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-set-current.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-swiper/x-swiper-set-current.html
@@ -44,13 +44,13 @@
     <x-view class="page">
       <x-swiper
         id="target"
-        style="display:flex; --lynx-display:linear;"
+        style="display: flex; --lynx-display: linear"
         indicator-dots="false"
         smooth-scroll="false"
       >
-        <x-swiper-item style="background-color:red;"> </x-swiper-item>
-        <x-swiper-item style="background-color:green;"> </x-swiper-item>
-        <x-swiper-item style="background-color:blue;"> </x-swiper-item>
+        <x-swiper-item style="background-color: red"> </x-swiper-item>
+        <x-swiper-item style="background-color: green"> </x-swiper-item>
+        <x-swiper-item style="background-color: blue"> </x-swiper-item>
       </x-swiper>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-text/event-layoutchange.html b/packages/web-platform/web-tests/tests/web-elements/x-text/event-layoutchange.html
index b15a242bac..010870de91 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-text/event-layoutchange.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-text/event-layoutchange.html
@@ -32,18 +32,21 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <script type="module">
-    document.querySelector('#target').addEventListener('layoutchange', (ev) => {
-      console.log('layoutchange', ev.detail);
-      Object.assign(globalThis, { detail: ev.detail });
-    });
-    document.querySelector('#target').addEventListener('click', () => {
-      document.querySelector('#target').style.width = '200px';
-    });
+    document.querySelector('#target').addEventListener(
+        'layoutchange',
+        (ev) => {
+          console.log('layoutchange', ev.detail);
+          Object.assign(globalThis, { detail: ev.detail });
+        },
+      );
+      document.querySelector('#target').addEventListener('click', () => {
+        document.querySelector('#target').style.width = '200px';
+      });
     </script>
     <x-view class="page">
       <x-text
         id="target"
-        style="width:100px; height:400px; background-color: aquamarine;"
+        style="width: 100px; height: 400px; background-color: aquamarine"
       >
       </x-text>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-text/inline-image-padding-and-margin.html b/packages/web-platform/web-tests/tests/web-elements/x-text/inline-image-padding-and-margin.html
index fc75877fc8..702f5ac09e 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-text/inline-image-padding-and-margin.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-text/inline-image-padding-and-margin.html
@@ -37,14 +37,14 @@
     <x-text style="font-size: 24px; color: blue">图文混排
       <x-image
         src="../../resources/inline-image.png"
-        style="width: 22px; height: 22px; margin-left: 50px;"
+        style="width: 22px; height: 22px; margin-left: 50px"
       >
       </x-image>
     </x-text>
     <x-text style="font-size: 24px; color: blue">图文混排
       <x-image
         src="../../resources/inline-image.png"
-        style="width: 22px; height: 22px; padding-left: 50px;"
+        style="width: 22px; height: 22px; padding-left: 50px"
       >
       </x-image>
     </x-text>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-text/inline-image-with-lynx-wrapper.html b/packages/web-platform/web-tests/tests/web-elements/x-text/inline-image-with-lynx-wrapper.html
index b44f6c7789..5bc82c3994 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-text/inline-image-with-lynx-wrapper.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-text/inline-image-with-lynx-wrapper.html
@@ -37,7 +37,7 @@
     <x-text style="font-size: 24px; color: blue">图文混排
       <x-image
         src="../../resources/inline-image.png"
-        style="width: 22px; height: 22px;"
+        style="width: 22px; height: 22px"
       ></x-image>
     </x-text>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-text/inline-image.html b/packages/web-platform/web-tests/tests/web-elements/x-text/inline-image.html
index b44f6c7789..5bc82c3994 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-text/inline-image.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-text/inline-image.html
@@ -37,7 +37,7 @@
     <x-text style="font-size: 24px; color: blue">图文混排
       <x-image
         src="../../resources/inline-image.png"
-        style="width: 22px; height: 22px;"
+        style="width: 22px; height: 22px"
       ></x-image>
     </x-text>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-text/inline-text-with-lynx-wrapper.html b/packages/web-platform/web-tests/tests/web-elements/x-text/inline-text-with-lynx-wrapper.html
index 2fca33da68..46f65791ff 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-text/inline-text-with-lynx-wrapper.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-text/inline-text-with-lynx-wrapper.html
@@ -34,9 +34,9 @@
 
   <body>
     <script src="/web-elements.js" defer></script>
-    <x-text style="font-size: 24px;font-weight: bold">
+    <x-text style="font-size: 24px; font-weight: bold">
       I am bold
-      <x-text style="font-size: 24px;color: red">and red</x-text>
+      <x-text style="font-size: 24px; color: red">and red</x-text>
     </x-text>
   </body>
 </html>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-text/inline-text.html b/packages/web-platform/web-tests/tests/web-elements/x-text/inline-text.html
index fd97e0275e..0a4839031e 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-text/inline-text.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-text/inline-text.html
@@ -34,9 +34,9 @@
 
   <body>
     <script src="/web-elements.js" defer></script>
-    <x-text style="font-size: 24px;font-weight: bold" id="target">
+    <x-text style="font-size: 24px; font-weight: bold" id="target">
       I am bold
-      <x-text style="font-size: 24px;color: red">and red</x-text>
+      <x-text style="font-size: 24px; color: red">and red</x-text>
     </x-text>
     <!-- <script>
       const dom = document.getElementById('target');
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-text/inline-truncation-with-inline-image.html b/packages/web-platform/web-tests/tests/web-elements/x-text/inline-truncation-with-inline-image.html
index 38884d64ce..4553309b1b 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-text/inline-truncation-with-inline-image.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-text/inline-truncation-with-inline-image.html
@@ -72,7 +72,7 @@
     <x-text
       class="abstract-text"
       text-maxline="1"
-      style="text-overflow:ellipsis;font-size:13px;font-weight:400;line-height:20px;"
+      style="text-overflow: ellipsis; font-size: 13px; font-weight: 400; line-height: 20px"
       tag-v="9754d"
       tag-e="dnd"
       data-tag="x-text"
@@ -90,7 +90,7 @@
           tag-e="dnd"
           data-tag="x-inline-image"
           ly-css="width:12px;height:12px;"
-          style="width:12px;height:12px;"
+          style="width: 12px; height: 12px"
         ></x-image></inline-truncation></x-text>
   </body>
 </html>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-text/nested-view-in-text.html b/packages/web-platform/web-tests/tests/web-elements/x-text/nested-view-in-text.html
index 719058d26e..6931d5e1b4 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-text/nested-view-in-text.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-text/nested-view-in-text.html
@@ -42,10 +42,10 @@
     <script src="/web-elements.js" defer></script>
     <x-text>
       <x-view
-        style="width:200px;height:200px;background-color:green;--lynx-display:linear; --lynx-display-toggle:var(--lynx-display-linear);"
+        style="width: 200px; height: 200px; background-color: green; --lynx-display: linear; --lynx-display-toggle: var(--lynx-display-linear)"
       >
         <x-view
-          style="--lynx-display:linear; --lynx-display-toggle:var(--lynx-display-linear);"
+          style="--lynx-display: linear; --lynx-display-toggle: var(--lynx-display-linear)"
         >
           <x-view class="atom"></x-view>
           <x-view class="atom"></x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-text/raw-text-with-lynx-wrapper.html b/packages/web-platform/web-tests/tests/web-elements/x-text/raw-text-with-lynx-wrapper.html
index 91346a55bc..36ef1dd39a 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-text/raw-text-with-lynx-wrapper.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-text/raw-text-with-lynx-wrapper.html
@@ -40,7 +40,7 @@
       </lynx-wrapper>
       <x-image
         src="../../resources/inline-image.png"
-        style="width: 22px; height: 22px;"
+        style="width: 22px; height: 22px"
       ></x-image>
     </x-text>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-text/raw-text.html b/packages/web-platform/web-tests/tests/web-elements/x-text/raw-text.html
index 5422984fad..a1700c80ec 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-text/raw-text.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-text/raw-text.html
@@ -38,7 +38,7 @@
       <raw-text text="图文混排"></raw-text>
       <x-image
         src="../../resources/inline-image.png"
-        style="width: 22px; height: 22px;"
+        style="width: 22px; height: 22px"
       ></x-image>
     </x-text>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-text/text-baseline-alignment.html b/packages/web-platform/web-tests/tests/web-elements/x-text/text-baseline-alignment.html
index 5b3b83f257..9ecddff470 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-text/text-baseline-alignment.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-text/text-baseline-alignment.html
@@ -35,27 +35,27 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: column;"
+      style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column"
     >
       <x-view>
-        <x-text style="font-size: 20px;">hello world</x-text>
+        <x-text style="font-size: 20px">hello world</x-text>
         <x-text style="font-size: 30px">111</x-text>
       </x-view>
       <x-view
-        style="display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex);flex-direction:row;"
+        style="display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: row"
       >
-        <x-text style="font-size: 20px;">hello world</x-text>
+        <x-text style="font-size: 20px">hello world</x-text>
         <x-text style="font-size: 30px">111</x-text>
       </x-view>
       <x-view>
         <x-text>
-          <x-text style="font-size: 20px;">hello world</x-text>
+          <x-text style="font-size: 20px">hello world</x-text>
           <x-text style="font-size: 30px">111</x-text>
         </x-text>
       </x-view>
       <x-view>
         <x-text>
-          <x-text style="font-size: 20px;">hello world</x-text>
+          <x-text style="font-size: 20px">hello world</x-text>
           <x-text style="font-size: 30px">111</x-text>
         </x-text>
       </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-text/text-clipped-display-important.html b/packages/web-platform/web-tests/tests/web-elements/x-text/text-clipped-display-important.html
index ce3d80e698..50028ba932 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-text/text-clipped-display-important.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-text/text-clipped-display-important.html
@@ -42,9 +42,9 @@
 
   <body>
     <script src="/web-elements.js" defer></script>
-    <x-text style="width:100px" text-maxline="2">
+    <x-text style="width: 100px" text-maxline="2">
       this is text I know you your past your future<x-view
-        style="display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: row;"
+        style="display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: row"
       >
         <x-view class="atom"></x-view>
         <x-view class="atom"></x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-text/text-in-text-fault-torrent.html b/packages/web-platform/web-tests/tests/web-elements/x-text/text-in-text-fault-torrent.html
index 15a890ac79..6062296f1a 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-text/text-in-text-fault-torrent.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-text/text-in-text-fault-torrent.html
@@ -40,9 +40,9 @@
 
   <body>
     <script src="/web-elements.js" defer></script>
-    <x-text style="font-size: 24px;font-weight: bold">
+    <x-text style="font-size: 24px; font-weight: bold">
       I am bold
-      <x-text style="font-size: 24px;color: red;" text-maxline="1"
+      <x-text style="font-size: 24px; color: red" text-maxline="1"
       >and red</x-text>
     </x-text>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-text/text-in-text.html b/packages/web-platform/web-tests/tests/web-elements/x-text/text-in-text.html
index fc10e33f0f..753402bbbb 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-text/text-in-text.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-text/text-in-text.html
@@ -40,9 +40,9 @@
 
   <body>
     <script src="/web-elements.js" defer></script>
-    <x-text style="font-size: 24px;font-weight: bold">
+    <x-text style="font-size: 24px; font-weight: bold">
       I am bold
-      <x-text style="font-size: 24px;color: red">and red</x-text>
+      <x-text style="font-size: 24px; color: red">and red</x-text>
     </x-text>
   </body>
 </html>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-text/text-is-block-element.html b/packages/web-platform/web-tests/tests/web-elements/x-text/text-is-block-element.html
index d727390242..cf123a1ba7 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-text/text-is-block-element.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-text/text-is-block-element.html
@@ -36,7 +36,7 @@
       background-color: pink;
     }
     </style>
-    <x-view style="display:flex; flex-direction: column;"><x-text>Hello,
+    <x-view style="display: flex; flex-direction: column"><x-text>Hello,
         web!</x-text><x-text>Hello, Speedy!</x-text></x-view>
   </body>
 </html>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxlength-with-raw-text.html b/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxlength-with-raw-text.html
index 519ef850bc..7999505797 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxlength-with-raw-text.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxlength-with-raw-text.html
@@ -42,10 +42,11 @@
     </style>
     <div>
       <x-view
-        style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: column;"
+        style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column"
       >
-        <x-text id="a" text-maxlength="5"><raw-text text="12345678"></raw-text
-          ></x-text>
+        <x-text id="a" text-maxlength="5"><raw-text
+            text="12345678"
+          ></raw-text></x-text>
       </x-view>
     </div>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxlength-with-tail-color-convert-false.html b/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxlength-with-tail-color-convert-false.html
index a1365f3602..170600f6f9 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxlength-with-tail-color-convert-false.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxlength-with-tail-color-convert-false.html
@@ -42,7 +42,7 @@
     </style>
     <div>
       <x-view
-        style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: column;"
+        style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column"
       >
         <x-text id="a" text-maxlength="1" tail-color-convert="false">1</x-text>
         <x-text id="b" text-maxlength="1" tail-color-convert="false">12</x-text>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxlength-with-tail-color-convert.html b/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxlength-with-tail-color-convert.html
index 07944a705b..212fe52566 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxlength-with-tail-color-convert.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxlength-with-tail-color-convert.html
@@ -42,20 +42,20 @@
     </style>
     <div>
       <x-view
-        style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: column;"
+        style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column"
       >
         <x-text
           id="red"
           text-maxlength="2"
-          style=" color: green;"
+          style="color: green"
           tail-color-convert="false"
-        >1<x-text style="color:red">2</x-text>3</x-text>
+        >1<x-text style="color: red">2</x-text>3</x-text>
         <x-text
           id="green"
           text-maxlength="2"
-          style=" color: green;"
+          style="color: green"
           tail-color-convert
-        >1<x-text style="color:red">2</x-text>3</x-text>
+        >1<x-text style="color: red">2</x-text>3</x-text>
       </x-view>
     </div>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxlength.html b/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxlength.html
index 2155b67c0f..da03785ea2 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxlength.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxlength.html
@@ -42,7 +42,7 @@
     </style>
     <div>
       <x-view
-        style="height:100vh;width: 100vw; display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: column;"
+        style="height: 100vh; width: 100vw; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column"
       >
         <x-text id="a" text-maxlength="1">1</x-text>
         <x-text id="b" text-maxlength="1">12</x-text>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxline-1-instrict-size.html b/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxline-1-instrict-size.html
index 3613e0d4d2..2199d768e1 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxline-1-instrict-size.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxline-1-instrict-size.html
@@ -38,11 +38,11 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="width: 88px;flex-direction: column; align-items: center; display: flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); background-color: pink"
+      style="width: 88px; flex-direction: column; align-items: center; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); background-color: pink"
     >
       <x-text
         text-maxline="1"
-        style="text-overflow: ellipsis; color: rgb(22, 24, 35);"
+        style="text-overflow: ellipsis; color: rgb(22, 24, 35)"
       >文字文字文字文字文字
       </x-text>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxline-basic-with-lynx-wrapper.html b/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxline-basic-with-lynx-wrapper.html
index beb6adf513..6e3a68ffbe 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxline-basic-with-lynx-wrapper.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxline-basic-with-lynx-wrapper.html
@@ -45,36 +45,36 @@
     <x-text class="text" text-maxline="1">
       1hello, this is a long enough text any limition.
       <lynx-wrapper>
-        <x-text style="color: pink;"
+        <x-text style="color: pink"
         >we could use inline-text to set color of some text</x-text>
-        <x-text style="font-weight: 500; font-size: 3em;"
+        <x-text style="font-weight: 500; font-size: 3em"
         >also, font-size could be different</x-text>
       </lynx-wrapper>
-      <x-text style="font-weight: 500; letter-spacing: 7px;"
+      <x-text style="font-weight: 500; letter-spacing: 7px"
       >additionally, letter-space could be different</x-text>
     </x-text>
 
     <x-text class="text" text-maxline="2">
       2hello world, this is a long enough text without any limition.
       <lynx-wrapper>
-        <x-text style="color: pink;"
+        <x-text style="color: pink"
         >we could use inline-text to set color of some text</x-text>
-        <x-text style="font-weight: 500; font-size: 3em;"
+        <x-text style="font-weight: 500; font-size: 3em"
         >also, font-size could be different</x-text>
       </lynx-wrapper>
-      <x-text style="font-weight: 500; letter-spacing: 7px;"
+      <x-text style="font-weight: 500; letter-spacing: 7px"
       >additionally, letter-space could be different</x-text>
     </x-text>
 
     <x-text class="text" text-maxline="4">
       4hello world, this is a long enough text without any limition.
       <lynx-wrapper>
-        <x-text style="color: pink;"
+        <x-text style="color: pink"
         >we could use inline-text to set color of some text</x-text>
-        <x-text style="font-weight: 500; font-size: 3em;"
+        <x-text style="font-weight: 500; font-size: 3em"
         >also, font-size could be different</x-text>
       </lynx-wrapper>
-      <x-text style="font-weight: 500; letter-spacing: 7px;"
+      <x-text style="font-weight: 500; letter-spacing: 7px"
       >additionally, letter-space could be different</x-text>
     </x-text>
 
@@ -82,12 +82,12 @@
       6hello world, this is a long enough text without any limition.
 
       <lynx-wrapper>
-        <x-text style="color: pink;"
+        <x-text style="color: pink"
         >we could use inline-text to set color of some text</x-text>
-        <x-text style="font-weight: 500; font-size: 3em;"
+        <x-text style="font-weight: 500; font-size: 3em"
         >also, font-size could be different</x-text>
       </lynx-wrapper>
-      <x-text style="font-weight: 500; letter-spacing: 7px;"
+      <x-text style="font-weight: 500; letter-spacing: 7px"
       >additionally, letter-space could be different</x-text>
     </x-text>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxline-basic.html b/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxline-basic.html
index 2136de9f06..8b7cb98b0f 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxline-basic.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxline-basic.html
@@ -44,41 +44,41 @@
 
     <x-text class="text" text-maxline="1">
       1hello, this is a long enough text any limition.
-      <x-text style="color: pink;"
+      <x-text style="color: pink"
       >we could use inline-text to set color of some text</x-text>
-      <x-text style="font-weight: 500; font-size: 3em;"
+      <x-text style="font-weight: 500; font-size: 3em"
       >also, font-size could be different</x-text>
-      <x-text style="font-weight: 500; letter-spacing: 7px;"
+      <x-text style="font-weight: 500; letter-spacing: 7px"
       >additionally, letter-space could be different</x-text>
     </x-text>
 
     <x-text class="text" text-maxline="2">
       2hello world, this is a long enough text without any limition.
-      <x-text style="color: pink;"
+      <x-text style="color: pink"
       >we could use inline-text to set color of some text</x-text>
-      <x-text style="font-weight: 500; font-size: 3em;"
+      <x-text style="font-weight: 500; font-size: 3em"
       >also, font-size could be different</x-text>
-      <x-text style="font-weight: 500; letter-spacing: 7px;"
+      <x-text style="font-weight: 500; letter-spacing: 7px"
       >additionally, letter-space could be different</x-text>
     </x-text>
 
     <x-text class="text" text-maxline="4">
       4hello world, this is a long enough text without any limition.
-      <x-text style="color: pink;"
+      <x-text style="color: pink"
       >we could use inline-text to set color of some text</x-text>
-      <x-text style="font-weight: 500; font-size: 3em;"
+      <x-text style="font-weight: 500; font-size: 3em"
       >also, font-size could be different</x-text>
-      <x-text style="font-weight: 500; letter-spacing: 7px;"
+      <x-text style="font-weight: 500; letter-spacing: 7px"
       >additionally, letter-space could be different</x-text>
     </x-text>
 
     <x-text class="text" text-maxline="6">
       6hello world, this is a long enough text without any limition.
-      <x-text style="color: pink;"
+      <x-text style="color: pink"
       >we could use inline-text to set color of some text</x-text>
-      <x-text style="font-weight: 500; font-size: 3em;"
+      <x-text style="font-weight: 500; font-size: 3em"
       >also, font-size could be different</x-text>
-      <x-text style="font-weight: 500; letter-spacing: 7px;"
+      <x-text style="font-weight: 500; letter-spacing: 7px"
       >additionally, letter-space could be different</x-text>
     </x-text>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxline-just-fit-do-not-show-custom-truncation.html b/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxline-just-fit-do-not-show-custom-truncation.html
index 1bfd4d9e39..5532d134d0 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxline-just-fit-do-not-show-custom-truncation.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxline-just-fit-do-not-show-custom-truncation.html
@@ -72,7 +72,7 @@
     <x-text
       class="abstract-text"
       text-maxline="2"
-      style="text-overflow:ellipsis;font-size:13px;font-weight:400;line-height:20px;"
+      style="text-overflow: ellipsis; font-size: 13px; font-weight: 400; line-height: 20px"
       tag-v="9754d"
       tag-e="dnd"
       data-tag="x-text"
@@ -90,7 +90,7 @@
           tag-e="dnd"
           data-tag="x-inline-image"
           ly-css="width:12px;height:12px;"
-          style="width:12px;height:12px;"
+          style="width: 12px; height: 12px"
         ></x-image></inline-truncation></x-text>
   </body>
 </html>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxline-with-custom-truncation.html b/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxline-with-custom-truncation.html
index e2786e5565..655652e8d0 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxline-with-custom-truncation.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxline-with-custom-truncation.html
@@ -43,55 +43,55 @@
     </style>
     <x-text class="text">
       hello world, this is a long enough text without any limition.
-      <x-text style="color: pink;"
+      <x-text style="color: pink"
       >we could use inline-text to set color of some text</x-text>
-      <x-text style="font-weight: 500; font-size: 3em;"
+      <x-text style="font-weight: 500; font-size: 3em"
       >also, font-size could be different</x-text>
-      <x-text style="font-weight: 500; letter-spacing: 7px;"
+      <x-text style="font-weight: 500; letter-spacing: 7px"
       >additionally, letter-space could be different</x-text>
       <inline-truncation>inline-truncation</inline-truncation>
     </x-text>
 
     <x-text class="text" text-maxline="1">
       1hello world, this is a long enough text without any limition.
-      <x-text style="color: pink;"
+      <x-text style="color: pink"
       >we could use inline-text to set color of some text</x-text>
-      <x-text style="font-weight: 500; font-size: 3em;"
+      <x-text style="font-weight: 500; font-size: 3em"
       >also, font-size could be different</x-text>
-      <x-text style="font-weight: 500; letter-spacing: 7px;"
+      <x-text style="font-weight: 500; letter-spacing: 7px"
       >additionally, letter-space could be different</x-text>
       <inline-truncation>inline-truncation</inline-truncation>
     </x-text>
 
     <x-text class="text" text-maxline="2">
       2hello world, this is a long enough text without any limition.
-      <x-text style="color: pink;"
+      <x-text style="color: pink"
       >we could use inline-text to set color of some text</x-text>
-      <x-text style="font-weight: 500; font-size: 3em;"
+      <x-text style="font-weight: 500; font-size: 3em"
       >also, font-size could be different</x-text>
-      <x-text style="font-weight: 500; letter-spacing: 7px;"
+      <x-text style="font-weight: 500; letter-spacing: 7px"
       >additionally, letter-space could be different</x-text>
       <inline-truncation>inline-truncation</inline-truncation>
     </x-text>
 
     <x-text class="text" text-maxline="4">
       4hello world, this is a long enough text without any limition.
-      <x-text style="color: pink;"
+      <x-text style="color: pink"
       >we could use inline-text to set color of some text</x-text>
-      <x-text style="font-weight: 500; font-size: 3em;"
+      <x-text style="font-weight: 500; font-size: 3em"
       >also, font-size could be different</x-text>
-      <x-text style="font-weight: 500; letter-spacing: 7px;"
+      <x-text style="font-weight: 500; letter-spacing: 7px"
       >additionally, letter-space could be different</x-text>
       <inline-truncation>inline-truncation</inline-truncation>
     </x-text>
 
     <x-text class="text" text-maxline="6">
       6hello world, this is a long enough text without any limition.
-      <x-text style="color: pink;"
+      <x-text style="color: pink"
       >we could use inline-text to set color of some text</x-text>
-      <x-text style="font-weight: 500; font-size: 3em;"
+      <x-text style="font-weight: 500; font-size: 3em"
       >also, font-size could be different</x-text>
-      <x-text style="font-weight: 500; letter-spacing: 7px;"
+      <x-text style="font-weight: 500; letter-spacing: 7px"
       >additionally, letter-space could be different</x-text>
       <inline-truncation>inline-truncation</inline-truncation>
     </x-text>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxline-with-padding.html b/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxline-with-padding.html
index f9584f2889..91e4ca8435 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxline-with-padding.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxline-with-padding.html
@@ -43,13 +43,13 @@
     }
     </style>
 
-    <x-text class="text" text-maxline="4" style="padding: 50px;">
+    <x-text class="text" text-maxline="4" style="padding: 50px">
       4hello world, this is a long enough text without any limition.
-      <x-text style="color: pink;"
+      <x-text style="color: pink"
       >we could use inline-text to set color of some text</x-text>
-      <x-text style="font-weight: 500; font-size: 3em;"
+      <x-text style="font-weight: 500; font-size: 3em"
       >also, font-size could be different</x-text>
-      <x-text style="font-weight: 500; letter-spacing: 7px;"
+      <x-text style="font-weight: 500; letter-spacing: 7px"
       >additionally, letter-space could be different</x-text>
     </x-text>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxline-with-raw-text.html b/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxline-with-raw-text.html
index c303d8d0ad..bed583d015 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxline-with-raw-text.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxline-with-raw-text.html
@@ -46,13 +46,13 @@
       <raw-text
         text="4hello world, this is a long enough text without any limition."
       ></raw-text>
-      <x-text style="color: pink;"><raw-text
+      <x-text style="color: pink"><raw-text
           text="we could use inline-text to set color of some text"
         ></raw-text></x-text>
-      <x-text style="font-weight: 500; font-size: 3em;"><raw-text
+      <x-text style="font-weight: 500; font-size: 3em"><raw-text
           text="also, font-size could be different"
         ></raw-text></x-text>
-      <x-text style="font-weight: 500; letter-spacing: 7px;"><raw-text
+      <x-text style="font-weight: 500; letter-spacing: 7px"><raw-text
           text="additionally, letter-space could be different"
         ></raw-text></x-text>
     </x-text>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxline-with-tail-color-convert-false.html b/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxline-with-tail-color-convert-false.html
index c653620b2d..28edb79e77 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxline-with-tail-color-convert-false.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-text/text-maxline-with-tail-color-convert-false.html
@@ -44,41 +44,41 @@
 
     <x-text class="text" text-maxline="1" tail-color-convert="false">
       1hello, this is a long enough text any limition.
-      <x-text style="color: pink;"
+      <x-text style="color: pink"
       >we could use inline-text to set color of some text</x-text>
-      <x-text style="font-weight: 500; font-size: 3em;"
+      <x-text style="font-weight: 500; font-size: 3em"
       >also, font-size could be different</x-text>
-      <x-text style="font-weight: 500; letter-spacing: 7px;"
+      <x-text style="font-weight: 500; letter-spacing: 7px"
       >additionally, letter-space could be different</x-text>
     </x-text>
 
     <x-text class="text" text-maxline="2" tail-color-convert="false">
       2hello world, this is a long enough text without any limition.
-      <x-text style="color: pink;"
+      <x-text style="color: pink"
       >we could use inline-text to set color of some text</x-text>
-      <x-text style="font-weight: 500; font-size: 3em;"
+      <x-text style="font-weight: 500; font-size: 3em"
       >also, font-size could be different</x-text>
-      <x-text style="font-weight: 500; letter-spacing: 7px;"
+      <x-text style="font-weight: 500; letter-spacing: 7px"
       >additionally, letter-space could be different</x-text>
     </x-text>
 
     <x-text class="text" text-maxline="4" tail-color-convert="false">
       4hello world, this is a long enough text without any limition.
-      <x-text style="color: pink;"
+      <x-text style="color: pink"
       >we could use inline-text to set color of some text</x-text>
-      <x-text style="font-weight: 500; font-size: 3em;"
+      <x-text style="font-weight: 500; font-size: 3em"
       >also, font-size could be different</x-text>
-      <x-text style="font-weight: 500; letter-spacing: 7px;"
+      <x-text style="font-weight: 500; letter-spacing: 7px"
       >additionally, letter-space could be different</x-text>
     </x-text>
 
     <x-text class="text" text-maxline="6" tail-color-convert="false">
       6hello world, this is a long enough text without any limition.
-      <x-text style="color: pink;"
+      <x-text style="color: pink"
       >we could use inline-text to set color of some text</x-text>
-      <x-text style="font-weight: 500; font-size: 3em;"
+      <x-text style="font-weight: 500; font-size: 3em"
       >also, font-size could be different</x-text>
-      <x-text style="font-weight: 500; letter-spacing: 7px;"
+      <x-text style="font-weight: 500; letter-spacing: 7px"
       >additionally, letter-space could be different</x-text>
     </x-text>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-text/text-not-resize-detect-new-line.html b/packages/web-platform/web-tests/tests/web-elements/x-text/text-not-resize-detect-new-line.html
index c5ae09e43c..68dae14cb6 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-text/text-not-resize-detect-new-line.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-text/text-not-resize-detect-new-line.html
@@ -25,10 +25,10 @@
     />
     <script type="module">
     setTimeout(() => {
-      const testTarget = document.querySelector('#test-target');
-      testTarget.style.left = '200px';
-      testTarget.setAttribute('text-maxline', '2');
-    }, 100);
+        const testTarget = document.querySelector('#test-target');
+        testTarget.style.left = '200px';
+        testTarget.setAttribute('text-maxline', '2');
+      }, 100);
     </script>
     <style>
     @import url("../../common.css");
@@ -40,7 +40,7 @@
 
   <body>
     <script src="/web-elements.js" defer></script>
-    <x-view style="width:500px;">
+    <x-view style="width: 500px">
       <x-text
         id="test-target"
         class="description-desc"
@@ -48,7 +48,7 @@
         tag-v="4b715"
         tag-e="dnd"
         data-tag="text"
-        style="width:100%;font-size:35px;"
+        style="width: 100%; font-size: 35px"
         lynx-linear-cross-gravity="stretch"
       >“已经过去19年了，放眼望去依旧是华语乐坛无法超越的天花板级别作品”#周杰伦
         #以父之名 #完整版
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-text/text-overflow-inherit.html b/packages/web-platform/web-tests/tests/web-elements/x-text/text-overflow-inherit.html
index d94e309acd..2560dcaf0e 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-text/text-overflow-inherit.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-text/text-overflow-inherit.html
@@ -34,9 +34,9 @@
 
   <body>
     <script src="/web-elements.js" defer></script>
-    <x-view style="width:100px;--lynx-display:linear">
+    <x-view style="width: 100px; --lynx-display: linear">
       <x-text
-        style="font-size: 15px; text-overflow: ellipsis; line-height: 36px; white-space: nowrap; color: rgb(22, 24, 35);"
+        style="font-size: 15px; text-overflow: ellipsis; line-height: 36px; white-space: nowrap; color: rgb(22, 24, 35)"
       >曼联积分榜最新排行榜
       </x-text>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-text/text-sizing-in-flex-container.html b/packages/web-platform/web-tests/tests/web-elements/x-text/text-sizing-in-flex-container.html
index 43d51c2535..44736a3f45 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-text/text-sizing-in-flex-container.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-text/text-sizing-in-flex-container.html
@@ -79,9 +79,9 @@
       tag-v="2133a"
       tag-e="wzzuuu742dc0"
       data-tag="x-block-touch"
-      style="background-color:#ffffff;background-color: rgb(255, 255, 255); flex-direction: row;"
+      style="background-color: #ffffff; background-color: rgb(255, 255, 255); flex-direction: row"
     ><x-view
-        style="border-radius:6px;margin-left:16px;margin-right:16px;height:44px;width:100%;margin-top:12px;margin-bottom:12px;justify-content:center;align-items:center;display:flex;--lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex);background-color:rgba(22,24,35,0.05);border-radius: 6px; margin: 12px 16px; height: 44px; width: 100%; justify-content: center; align-items: center; display: flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); background-color: rgba(22, 24, 35, 0.05);"
+        style="border-radius: 6px; margin-left: 16px; margin-right: 16px; height: 44px; width: 100%; margin-top: 12px; margin-bottom: 12px; justify-content: center; align-items: center; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); background-color: rgba(22, 24, 35, 0.05); border-radius: 6px; margin: 12px 16px; height: 44px; width: 100%; justify-content: center; align-items: center; display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); background-color: rgba(22, 24, 35, 0.05)"
         class="bottom-gray"
         tag-v="2133a"
         tag-e="wzzuuu742dc0"
@@ -93,7 +93,7 @@
           tag-e="wzzuuu742dc0"
           data-tag="text"
           ly-css="font-style:normal;font-size:15px;line-height:21px;font-weight:500;color:#161823;"
-          style="font-style:normal;font-size:15px;line-height:21px;font-weight:500;color:#161823;font-style: normal; font-size: 15px; line-height: 21px; font-weight: 500; color: rgb(22, 24, 35);"
+          style="font-style: normal; font-size: 15px; line-height: 21px; font-weight: 500; color: #161823; font-style: normal; font-size: 15px; line-height: 21px; font-weight: 500; color: rgb(22, 24, 35)"
         >查看全部商品
         </x-text></x-view></x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-text/truncation-first-element-is-image.html b/packages/web-platform/web-tests/tests/web-elements/x-text/truncation-first-element-is-image.html
index 5878e68442..86c4db451b 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-text/truncation-first-element-is-image.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-text/truncation-first-element-is-image.html
@@ -36,28 +36,28 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view
-      style="width:300px;margin-top: 12px; margin-left: 16px; margin-right: 16px;"
+      style="width: 300px; margin-top: 12px; margin-left: 16px; margin-right: 16px"
     >
       <x-text
         text-maxline="3"
-        style="font-size: 24px; line-height: 32px; color: rgb(22, 24, 35); text-overflow: ellipsis; width: 100%;"
+        style="font-size: 24px; line-height: 32px; color: rgb(22, 24, 35); text-overflow: ellipsis; width: 100%"
         lynx-linear-cross-gravity="stretch"
       >
         <x-image
           src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAAA2CAMAAAAPkWzgAAAAYFBMVEUKmesAAAAJleQJluUKluUJluYKmucJl+cJleMJmOYJk+MHleoKluUNlusKm+wJlugKluMJluUKl+YKleUKluUIluULleUIluULl+cHmuUKluYKluMLluUIlucIluMKluRrh3oQAAAAH3RSTlMZAIzjqW81NsZSUwvFJxYR8beamn5E1H5gRNTUYWGbmOXFWAAAAfZJREFUWMPVmG1zoyAQgPdYxFhFUfPa9G7//7+85YBix2uNDfuhz0wmWZR91CU4AL8i7dBDMfqhTXmjYIDiDAtB24MAfZsELQjhDSCTPxtY0IMYvRcMIMjAApCE07cgSgsDiDJAD5I8l96+zSMsqBHxN3zJC24Q+9v67aKRmNNSwHG1IaANfH+FLjcon/hcFRVMOXSaG2okmh4U1GqJ5g6z+oB/IhVFLgY8R2JeTRLs4ModYI29VDfr77WBQIMcoNkvUHxh8AlZwNSv/wy7BR3RuCFIaA6PuwUunb8tAEUKHhRcdWTk8w86c4TAtDw4QaR5uMiKPuEAAaQFCGC1AUZMYM+EzV6BXuGyYIoxjfz9B0Zi1E4BrOiiIIHvRbY6GMoKKmJGs3ioU1kBhgKYqHPeUFJQUcBdQ3xzLCsoqMMNnPlzjIazgYICLqv2Re7S+Cn3P0jzM754gUX+9VGg57F5VnDzFxrmotpRrLM9VXMXzjs+IUgFwDTZNQr49Tx3jjLzAwKz4v4uuPvUQZAHVAbH6ski83ENWXDKqQ9lRtGJ0C4ElsjdtaqMLTZMOwMLAVwNBIoJ7OqNVlgABQRqBZYU/JcfJsAV3xf0skXu10soa4wB2Gzl2AKz0TaILwKll7HiC3HprQTxzRDx7Rz5DSn5LTXxTcG/jrdiPv0S5VsAAAAASUVORK5CYII="
-          style="width: 32px; height: 18px; margin-right: 4px;"
+          style="width: 32px; height: 18px; margin-right: 4px"
         >
         </x-image>大学大学大学大学大学
         大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学大学
         <inline-truncation>
           <x-text
-            style="font-size: 14px; line-height: 22px; color: rgba(22, 24, 35, 0.6);"
+            style="font-size: 14px; line-height: 22px; color: rgba(22, 24, 35, 0.6)"
           >
             更多
           </x-text>
           <x-image
             src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkBAMAAAATLoWrAAAAG1BMVEUAAAAWFyMVFyQSEiMVFyMVFyIVGCMTFyIUFCJrmzu/AAAACXRSTlMAmY8cTIZfQyZyacCZAAAANUlEQVQoz2MYONAUjCGUKGSALlQoqIwuxCKIqcxx8CjDFBIlrBFhPP0VIQKacHSYwhXRHwAASGkKbxONMg0AAAAASUVORK5CYII="
-            style="width: 12px; height: 12px;"
+            style="width: 12px; height: 12px"
           >
           </x-image>
         </inline-truncation>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-text/view-flex-in-text.html b/packages/web-platform/web-tests/tests/web-elements/x-text/view-flex-in-text.html
index 98d5dabade..cfaf484c69 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-text/view-flex-in-text.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-text/view-flex-in-text.html
@@ -44,7 +44,7 @@
     <script src="/web-elements.js" defer></script>
     <x-text>
       this is text <x-view
-        style="display:flex; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: row;"
+        style="display: flex; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: row"
       >
         <x-view class="atom"></x-view>
         <x-view class="atom"></x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-text/view-in-text.html b/packages/web-platform/web-tests/tests/web-elements/x-text/view-in-text.html
index b8834f71ca..8d067f30d0 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-text/view-in-text.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-text/view-in-text.html
@@ -42,7 +42,7 @@
     <script src="/web-elements.js" defer></script>
     <x-text>
       <x-view
-        style="width:200px;height:200px;background-color:green;--lynx-display:linear"
+        style="width: 200px; height: 200px; background-color: green; --lynx-display: linear"
       >
         <x-view class="atom"></x-view>
         <x-view class="atom"></x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-confirm-type-done.html b/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-confirm-type-done.html
index eaec26bd13..ee160cac34 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-confirm-type-done.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-confirm-type-done.html
@@ -34,7 +34,7 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-textarea
-        style="height:50px; width:200px;border-width:1px;"
+        style="height: 50px; width: 200px; border-width: 1px"
         confirm-type="done"
       ></x-textarea>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-confirm-type-go.html b/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-confirm-type-go.html
index d714f4d421..777b300a74 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-confirm-type-go.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-confirm-type-go.html
@@ -34,7 +34,7 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-textarea
-        style="height:50px; width:200px;border-width:1px;"
+        style="height: 50px; width: 200px; border-width: 1px"
         confirm-type="go"
       ></x-textarea>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-confirm-type-next.html b/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-confirm-type-next.html
index 22ca242345..12dc972bab 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-confirm-type-next.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-confirm-type-next.html
@@ -34,7 +34,7 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-textarea
-        style="height:50px; width:200px;border-width:1px;"
+        style="height: 50px; width: 200px; border-width: 1px"
         confirm-type="next"
       ></x-textarea>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-confirm-type-search.html b/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-confirm-type-search.html
index 07ff9a4ca4..9e15a3697e 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-confirm-type-search.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-confirm-type-search.html
@@ -34,7 +34,7 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-textarea
-        style="height:50px; width:200px;border-width:1px;"
+        style="height: 50px; width: 200px; border-width: 1px"
         confirm-type="search"
       ></x-textarea>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-confirm-type-send.html b/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-confirm-type-send.html
index 0a3f9ae04e..0df60d0f76 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-confirm-type-send.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-confirm-type-send.html
@@ -34,7 +34,7 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-textarea
-        style="height:50px; width:200px;border-width:1px;"
+        style="height: 50px; width: 200px; border-width: 1px"
         confirm-type="send"
       ></x-textarea>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-disabled.html b/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-disabled.html
index 724cd41757..7fe052374e 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-disabled.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-disabled.html
@@ -34,7 +34,7 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-textarea
-        style="height:50px; width:200px;border-width:1px;"
+        style="height: 50px; width: 200px; border-width: 1px"
         value="123"
         disabled
       ></x-textarea>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-maxlength-change-do-not-change-value.html b/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-maxlength-change-do-not-change-value.html
index 8a6f9bec46..7fae2e247a 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-maxlength-change-do-not-change-value.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-maxlength-change-do-not-change-value.html
@@ -37,7 +37,7 @@
         id="target"
         value="1234567890"
         maxlength="10"
-        style="height:50px; width:200px;"
+        style="height: 50px; width: 200px"
       ></x-textarea>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-maxlength-first-screen-cut-value.html b/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-maxlength-first-screen-cut-value.html
index 36b7e4c960..ee340d5f90 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-maxlength-first-screen-cut-value.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-maxlength-first-screen-cut-value.html
@@ -37,7 +37,7 @@
         id="target"
         value="hello world"
         maxlength="5"
-        style="height:50px; width:200px;"
+        style="height: 50px; width: 200px"
       ></x-textarea>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-readonly.html b/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-readonly.html
index 6da6bc579a..a6abd5334b 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-readonly.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-readonly.html
@@ -34,7 +34,7 @@
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
       <x-textarea
-        style="height:50px; width:200px;border-width:1px;"
+        style="height: 50px; width: 200px; border-width: 1px"
         value="123"
         readonly
       ></x-textarea>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-spell-check.html b/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-spell-check.html
index e1480f920d..16b102d80c 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-spell-check.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-spell-check.html
@@ -33,8 +33,10 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <x-view class="page">
-      <x-textarea style="height:50px; width:200px;" ios-spell-check></x-textarea
-      >
+      <x-textarea
+        style="height: 50px; width: 200px"
+        ios-spell-check
+      ></x-textarea>
     </x-view>
   </body>
 </html>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-value.html b/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-value.html
index 9a367e09de..d413c50bb2 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-value.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-textarea/attribute-value.html
@@ -35,7 +35,7 @@
     <x-view class="page">
       <x-textarea
         value="hello world"
-        style="height:50px; width:200px;"
+        style="height: 50px; width: 200px"
       ></x-textarea>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-textarea/background-color-inherit.html b/packages/web-platform/web-tests/tests/web-elements/x-textarea/background-color-inherit.html
index 50e5694930..b4cb149e0f 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-textarea/background-color-inherit.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-textarea/background-color-inherit.html
@@ -35,7 +35,7 @@
     <x-view class="page">
       <x-textarea
         placeholder="hello world"
-        style="height:50px; width:200px; background-color: red;"
+        style="height: 50px; width: 200px; background-color: red"
       ></x-textarea>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-textarea/event-confirm.html b/packages/web-platform/web-tests/tests/web-elements/x-textarea/event-confirm.html
index d3104b6229..0234690de7 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-textarea/event-confirm.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-textarea/event-confirm.html
@@ -35,7 +35,7 @@
     <x-view class="page">
       <x-textarea
         id="target"
-        style="height:50px; width:200px;border: 1px;"
+        style="height: 50px; width: 200px; border: 1px"
         confirm-enter
       ></x-textarea>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-textarea/event-focus-blur.html b/packages/web-platform/web-tests/tests/web-elements/x-textarea/event-focus-blur.html
index 2e00a7dd15..407d7581a3 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-textarea/event-focus-blur.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-textarea/event-focus-blur.html
@@ -36,7 +36,7 @@
       <x-textarea
         id="target"
         value="hello"
-        style="height:50px; width:200px;border: 1px;"
+        style="height: 50px; width: 200px; border: 1px"
       ></x-textarea>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-textarea/event-input.html b/packages/web-platform/web-tests/tests/web-elements/x-textarea/event-input.html
index 9ac8d72eb1..6ff456629e 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-textarea/event-input.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-textarea/event-input.html
@@ -33,14 +33,17 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <script type="module">
-    document.querySelector('x-textarea').addEventListener('input', (e) => {
-      document.querySelector('.result').innerHTML = e.detail.value;
-    });
+    document.querySelector('x-textarea').addEventListener(
+        'input',
+        (e) => {
+          document.querySelector('.result').innerHTML = e.detail.value;
+        },
+      );
     </script>
     <x-view class="page">
       <x-textarea
         id="target"
-        style="height:50px; width:200px;border: 1px;"
+        style="height: 50px; width: 200px; border: 1px"
       ></x-textarea>
       <text class="result"></text>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-textarea/method.html b/packages/web-platform/web-tests/tests/web-elements/x-textarea/method.html
index 8ddb3d36d6..6bff72d104 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-textarea/method.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-textarea/method.html
@@ -35,7 +35,7 @@
     <x-view class="page">
       <x-textarea
         id="target"
-        style="height:50px; width:200px;border: 1px;"
+        style="height: 50px; width: 200px; border: 1px"
         value="hello"
       ></x-textarea>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-textarea/outline-color-inherit.html b/packages/web-platform/web-tests/tests/web-elements/x-textarea/outline-color-inherit.html
index 4293827f00..e7219f6101 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-textarea/outline-color-inherit.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-textarea/outline-color-inherit.html
@@ -35,7 +35,7 @@
     <x-view class="page">
       <x-textarea
         placeholder="hello world"
-        style="height:50px; width:200px; outline: red solid;"
+        style="height: 50px; width: 200px; outline: red solid"
       ></x-textarea>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-textarea/placeholder-color.html b/packages/web-platform/web-tests/tests/web-elements/x-textarea/placeholder-color.html
index e86abf353c..3b30d92b06 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-textarea/placeholder-color.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-textarea/placeholder-color.html
@@ -36,7 +36,7 @@
       <x-textarea
         placeholder="hello world"
         placeholder-color="#FF0000"
-        style="height:50px; width:200px;"
+        style="height: 50px; width: 200px"
       ></x-textarea>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-textarea/placeholder-weight.html b/packages/web-platform/web-tests/tests/web-elements/x-textarea/placeholder-weight.html
index 65f993b9cc..5841e7106d 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-textarea/placeholder-weight.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-textarea/placeholder-weight.html
@@ -36,7 +36,7 @@
       <x-textarea
         placeholder="hello world"
         placeholder-font-weight="bold"
-        style="height:50px; width:200px;"
+        style="height: 50px; width: 200px"
       ></x-textarea>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-textarea/placeholder.html b/packages/web-platform/web-tests/tests/web-elements/x-textarea/placeholder.html
index e9b20927c9..4e0d281e3c 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-textarea/placeholder.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-textarea/placeholder.html
@@ -35,7 +35,7 @@
     <x-view class="page">
       <x-textarea
         placeholder="hello world"
-        style="height:50px; width:200px;"
+        style="height: 50px; width: 200px"
       ></x-textarea>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-textarea/press-enter-do-not-submit-value.html b/packages/web-platform/web-tests/tests/web-elements/x-textarea/press-enter-do-not-submit-value.html
index c3f02f65bf..510512142a 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-textarea/press-enter-do-not-submit-value.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-textarea/press-enter-do-not-submit-value.html
@@ -35,7 +35,7 @@
     <x-view class="page">
       <x-textarea
         id="target"
-        style="height:50px; width:200px;border: 1px;"
+        style="height: 50px; width: 200px; border: 1px"
       ></x-textarea>
     </x-view>
   </body>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-view/event-layoutchange.html b/packages/web-platform/web-tests/tests/web-elements/x-view/event-layoutchange.html
index 87fa0b7f49..74e9aef4cf 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-view/event-layoutchange.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-view/event-layoutchange.html
@@ -32,18 +32,21 @@
   <body>
     <script src="/web-elements.js" defer></script>
     <script type="module">
-    document.querySelector('#target').addEventListener('layoutchange', (ev) => {
-      console.log('layoutchange', ev.detail);
-      Object.assign(globalThis, { detail: ev.detail });
-    });
-    document.querySelector('#target').addEventListener('click', () => {
-      document.querySelector('#target').style.width = '200px';
-    });
+    document.querySelector('#target').addEventListener(
+        'layoutchange',
+        (ev) => {
+          console.log('layoutchange', ev.detail);
+          Object.assign(globalThis, { detail: ev.detail });
+        },
+      );
+      document.querySelector('#target').addEventListener('click', () => {
+        document.querySelector('#target').style.width = '200px';
+      });
     </script>
     <x-view class="page">
       <x-view
         id="target"
-        style="width:100px; height:400px; background-color: aquamarine;"
+        style="width: 100px; height: 400px; background-color: aquamarine"
       >
       </x-view>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/basic-with-lynx-wrapper.html b/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/basic-with-lynx-wrapper.html
index 074bd8a992..3ea4550d17 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/basic-with-lynx-wrapper.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/basic-with-lynx-wrapper.html
@@ -31,23 +31,28 @@
 
   <body>
     <script src="/web-elements.js" defer></script>
-    <x-view style="width:100vw;height:100vh">
-      <x-viewpager-ng style="width:200px;height:200px;">
-        <x-viewpager-item-ng style="background:wheat;">
-          <x-view style="height:100px; width:100px; background: pink;"></x-view>
+    <x-view style="width: 100vw; height: 100vh">
+      <x-viewpager-ng style="width: 200px; height: 200px">
+        <x-viewpager-item-ng style="background: wheat">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
         <lynx-wrapper>
-          <x-viewpager-item-ng style="background:sandybrown;">
-            <x-view style="height:100px; width:100px; background:pink;"></x-view
-            >
+          <x-viewpager-item-ng style="background: sandybrown">
+            <x-view
+              style="height: 100px; width: 100px; background: pink"
+            ></x-view>
           </x-viewpager-item-ng>
-          <x-viewpager-item-ng style="background-color: rosybrown;">
-            <x-view style="height:100px; width:100px; background:pink;"></x-view
-            >
+          <x-viewpager-item-ng style="background-color: rosybrown">
+            <x-view
+              style="height: 100px; width: 100px; background: pink"
+            ></x-view>
           </x-viewpager-item-ng>
-          <x-viewpager-item-ng style="background-color:fuchsia;">
-            <x-view style="height:100px; width:100px; background:pink;"></x-view
-            >
+          <x-viewpager-item-ng style="background-color: fuchsia">
+            <x-view
+              style="height: 100px; width: 100px; background: pink"
+            ></x-view>
           </x-viewpager-item-ng>
         </lynx-wrapper>
       </x-viewpager-ng>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/basic.html b/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/basic.html
index 3d62d722b4..bf429a4490 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/basic.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/basic.html
@@ -31,19 +31,27 @@
 
   <body>
     <script src="/web-elements.js" defer></script>
-    <x-view style="width:100vw;height:100vh">
-      <x-viewpager-ng style="width:200px;height:200px;">
-        <x-viewpager-item-ng style="background:wheat;">
-          <x-view style="height:100px; width:100px; background: pink;"></x-view>
+    <x-view style="width: 100vw; height: 100vh">
+      <x-viewpager-ng style="width: 200px; height: 200px">
+        <x-viewpager-item-ng style="background: wheat">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
-        <x-viewpager-item-ng style="background:sandybrown;">
-          <x-view style="height:100px; width:100px; background:pink;"></x-view>
+        <x-viewpager-item-ng style="background: sandybrown">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
-        <x-viewpager-item-ng style="background-color: rosybrown;">
-          <x-view style="height:100px; width:100px; background:pink;"></x-view>
+        <x-viewpager-item-ng style="background-color: rosybrown">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
-        <x-viewpager-item-ng style="background-color:fuchsia;">
-          <x-view style="height:100px; width:100px; background:pink;"></x-view>
+        <x-viewpager-item-ng style="background-color: fuchsia">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
       </x-viewpager-ng>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/bounces.html b/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/bounces.html
index c030b5418c..ca7e2a7b6c 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/bounces.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/bounces.html
@@ -31,19 +31,27 @@
 
   <body>
     <script src="/web-elements.js" defer></script>
-    <x-view style="width:100vw;height:100vh">
-      <x-viewpager-ng style="width:200px;height:200px;" bounces>
-        <x-viewpager-item-ng style="background:wheat;">
-          <x-view style="height:100px; width:100px; background: pink;"></x-view>
+    <x-view style="width: 100vw; height: 100vh">
+      <x-viewpager-ng style="width: 200px; height: 200px" bounces>
+        <x-viewpager-item-ng style="background: wheat">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
-        <x-viewpager-item-ng style="background:sandybrown;">
-          <x-view style="height:100px; width:100px; background:pink;"></x-view>
+        <x-viewpager-item-ng style="background: sandybrown">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
-        <x-viewpager-item-ng style="background-color: rosybrown;">
-          <x-view style="height:100px; width:100px; background:pink;"></x-view>
+        <x-viewpager-item-ng style="background-color: rosybrown">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
-        <x-viewpager-item-ng style="background-color:fuchsia;">
-          <x-view style="height:100px; width:100px; background:pink;"></x-view>
+        <x-viewpager-item-ng style="background-color: fuchsia">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
       </x-viewpager-ng>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/do-not-response-to-select-index-on-dragging.html b/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/do-not-response-to-select-index-on-dragging.html
index 6c8c6c7625..0c6f6db50e 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/do-not-response-to-select-index-on-dragging.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/do-not-response-to-select-index-on-dragging.html
@@ -31,19 +31,27 @@
 
   <body>
     <script src="/web-elements.js" defer></script>
-    <x-view style="width:100vw;height:100vh">
-      <x-viewpager-ng style="width:200px;height:200px;" id="target">
-        <x-viewpager-item-ng style="background:wheat;">
-          <x-view style="height:100px; width:100px; background: pink;"></x-view>
+    <x-view style="width: 100vw; height: 100vh">
+      <x-viewpager-ng style="width: 200px; height: 200px" id="target">
+        <x-viewpager-item-ng style="background: wheat">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
-        <x-viewpager-item-ng style="background:sandybrown;">
-          <x-view style="height:100px; width:100px; background:pink;"></x-view>
+        <x-viewpager-item-ng style="background: sandybrown">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
-        <x-viewpager-item-ng style="background-color: rosybrown;">
-          <x-view style="height:100px; width:100px; background:pink;"></x-view>
+        <x-viewpager-item-ng style="background-color: rosybrown">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
-        <x-viewpager-item-ng style="background-color:fuchsia;">
-          <x-view style="height:100px; width:100px; background:pink;"></x-view>
+        <x-viewpager-item-ng style="background-color: fuchsia">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
       </x-viewpager-ng>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/event-offsetchange-offset-value.html b/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/event-offsetchange-offset-value.html
index 5a555dd1fe..a3e90dedd5 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/event-offsetchange-offset-value.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/event-offsetchange-offset-value.html
@@ -31,22 +31,30 @@
 
   <body>
     <script src="/web-elements.js" defer></script>
-    <x-view style="width:100vw;height:100vh">
+    <x-view style="width: 100vw; height: 100vh">
       <x-viewpager-ng
-        style="width:200px;height:200px;"
+        style="width: 200px; height: 200px"
         id="target"
       >
-        <x-viewpager-item-ng style="background:wheat;">
-          <x-view style="height:100px; width:100px; background: pink;"></x-view>
+        <x-viewpager-item-ng style="background: wheat">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
-        <x-viewpager-item-ng style="background:sandybrown;">
-          <x-view style="height:100px; width:100px; background:pink;"></x-view>
+        <x-viewpager-item-ng style="background: sandybrown">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
-        <x-viewpager-item-ng style="background-color: rosybrown;">
-          <x-view style="height:100px; width:100px; background:pink;"></x-view>
+        <x-viewpager-item-ng style="background-color: rosybrown">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
-        <x-viewpager-item-ng style="background-color:fuchsia;">
-          <x-view style="height:100px; width:100px; background:pink;"></x-view>
+        <x-viewpager-item-ng style="background-color: fuchsia">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
       </x-viewpager-ng>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/method-selectTab.html b/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/method-selectTab.html
index 6c8c6c7625..0c6f6db50e 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/method-selectTab.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/method-selectTab.html
@@ -31,19 +31,27 @@
 
   <body>
     <script src="/web-elements.js" defer></script>
-    <x-view style="width:100vw;height:100vh">
-      <x-viewpager-ng style="width:200px;height:200px;" id="target">
-        <x-viewpager-item-ng style="background:wheat;">
-          <x-view style="height:100px; width:100px; background: pink;"></x-view>
+    <x-view style="width: 100vw; height: 100vh">
+      <x-viewpager-ng style="width: 200px; height: 200px" id="target">
+        <x-viewpager-item-ng style="background: wheat">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
-        <x-viewpager-item-ng style="background:sandybrown;">
-          <x-view style="height:100px; width:100px; background:pink;"></x-view>
+        <x-viewpager-item-ng style="background: sandybrown">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
-        <x-viewpager-item-ng style="background-color: rosybrown;">
-          <x-view style="height:100px; width:100px; background:pink;"></x-view>
+        <x-viewpager-item-ng style="background-color: rosybrown">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
-        <x-viewpager-item-ng style="background-color:fuchsia;">
-          <x-view style="height:100px; width:100px; background:pink;"></x-view>
+        <x-viewpager-item-ng style="background-color: fuchsia">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
       </x-viewpager-ng>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/select-index-0.html b/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/select-index-0.html
index 4344ed3311..487a5653dc 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/select-index-0.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/select-index-0.html
@@ -31,23 +31,31 @@
 
   <body>
     <script src="/web-elements.js" defer></script>
-    <x-view style="width:100vw;height:100vh">
+    <x-view style="width: 100vw; height: 100vh">
       <x-viewpager-ng
-        style="width:200px;height:200px;"
+        style="width: 200px; height: 200px"
         select-index="3"
         id="target"
       >
-        <x-viewpager-item-ng style="background:wheat;">
-          <x-view style="height:100px; width:100px; background: pink;"></x-view>
+        <x-viewpager-item-ng style="background: wheat">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
-        <x-viewpager-item-ng style="background:sandybrown;">
-          <x-view style="height:100px; width:100px; background:pink;"></x-view>
+        <x-viewpager-item-ng style="background: sandybrown">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
-        <x-viewpager-item-ng style="background-color: rosybrown;">
-          <x-view style="height:100px; width:100px; background:pink;"></x-view>
+        <x-viewpager-item-ng style="background-color: rosybrown">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
-        <x-viewpager-item-ng style="background-color:fuchsia;">
-          <x-view style="height:100px; width:100px; background:pink;"></x-view>
+        <x-viewpager-item-ng style="background-color: fuchsia">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
       </x-viewpager-ng>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/select-index.html b/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/select-index.html
index 7bbe620feb..bd966514ec 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/select-index.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/select-index.html
@@ -31,19 +31,27 @@
 
   <body>
     <script src="/web-elements.js" defer></script>
-    <x-view style="width:100vw;height:100vh">
-      <x-viewpager-ng style="width:200px;height:200px;" select-index="1">
-        <x-viewpager-item-ng style="background:wheat;">
-          <x-view style="height:100px; width:100px; background: pink;"></x-view>
+    <x-view style="width: 100vw; height: 100vh">
+      <x-viewpager-ng style="width: 200px; height: 200px" select-index="1">
+        <x-viewpager-item-ng style="background: wheat">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
-        <x-viewpager-item-ng style="background:sandybrown;">
-          <x-view style="height:100px; width:100px; background:pink;"></x-view>
+        <x-viewpager-item-ng style="background: sandybrown">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
-        <x-viewpager-item-ng style="background-color: rosybrown;">
-          <x-view style="height:100px; width:100px; background:pink;"></x-view>
+        <x-viewpager-item-ng style="background-color: rosybrown">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
-        <x-viewpager-item-ng style="background-color:fuchsia;">
-          <x-view style="height:100px; width:100px; background:pink;"></x-view>
+        <x-viewpager-item-ng style="background-color: fuchsia">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
       </x-viewpager-ng>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/selecttab-method-default-smooth.html b/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/selecttab-method-default-smooth.html
index 5a555dd1fe..a3e90dedd5 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/selecttab-method-default-smooth.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/selecttab-method-default-smooth.html
@@ -31,22 +31,30 @@
 
   <body>
     <script src="/web-elements.js" defer></script>
-    <x-view style="width:100vw;height:100vh">
+    <x-view style="width: 100vw; height: 100vh">
       <x-viewpager-ng
-        style="width:200px;height:200px;"
+        style="width: 200px; height: 200px"
         id="target"
       >
-        <x-viewpager-item-ng style="background:wheat;">
-          <x-view style="height:100px; width:100px; background: pink;"></x-view>
+        <x-viewpager-item-ng style="background: wheat">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
-        <x-viewpager-item-ng style="background:sandybrown;">
-          <x-view style="height:100px; width:100px; background:pink;"></x-view>
+        <x-viewpager-item-ng style="background: sandybrown">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
-        <x-viewpager-item-ng style="background-color: rosybrown;">
-          <x-view style="height:100px; width:100px; background:pink;"></x-view>
+        <x-viewpager-item-ng style="background-color: rosybrown">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
-        <x-viewpager-item-ng style="background-color:fuchsia;">
-          <x-view style="height:100px; width:100px; background:pink;"></x-view>
+        <x-viewpager-item-ng style="background-color: fuchsia">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
       </x-viewpager-ng>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/selecttab-method-not-smooth.html b/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/selecttab-method-not-smooth.html
index 5a555dd1fe..a3e90dedd5 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/selecttab-method-not-smooth.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/selecttab-method-not-smooth.html
@@ -31,22 +31,30 @@
 
   <body>
     <script src="/web-elements.js" defer></script>
-    <x-view style="width:100vw;height:100vh">
+    <x-view style="width: 100vw; height: 100vh">
       <x-viewpager-ng
-        style="width:200px;height:200px;"
+        style="width: 200px; height: 200px"
         id="target"
       >
-        <x-viewpager-item-ng style="background:wheat;">
-          <x-view style="height:100px; width:100px; background: pink;"></x-view>
+        <x-viewpager-item-ng style="background: wheat">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
-        <x-viewpager-item-ng style="background:sandybrown;">
-          <x-view style="height:100px; width:100px; background:pink;"></x-view>
+        <x-viewpager-item-ng style="background: sandybrown">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
-        <x-viewpager-item-ng style="background-color: rosybrown;">
-          <x-view style="height:100px; width:100px; background:pink;"></x-view>
+        <x-viewpager-item-ng style="background-color: rosybrown">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
-        <x-viewpager-item-ng style="background-color:fuchsia;">
-          <x-view style="height:100px; width:100px; background:pink;"></x-view>
+        <x-viewpager-item-ng style="background-color: fuchsia">
+          <x-view
+            style="height: 100px; width: 100px; background: pink"
+          ></x-view>
         </x-viewpager-item-ng>
       </x-viewpager-ng>
     </x-view>
diff --git a/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/viewpager-size-cyclic-percentage-size.html b/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/viewpager-size-cyclic-percentage-size.html
index 0a9b93d6d5..bde3548031 100644
--- a/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/viewpager-size-cyclic-percentage-size.html
+++ b/packages/web-platform/web-tests/tests/web-elements/x-viewpager-ng/viewpager-size-cyclic-percentage-size.html
@@ -31,22 +31,25 @@
 
   <body>
     <script src="/web-elements.js" defer></script>
-    <x-view style="width:100vw;height:100vh">
+    <x-view style="width: 100vw; height: 100vh">
       <x-view
-        style="width:100vw; --lynx-display:flex;--lynx-display-toggle:var(--lynx-display-flex); flex-direction: column;"
+        style="width: 100vw; --lynx-display: flex; --lynx-display-toggle: var(--lynx-display-flex); flex-direction: column"
       >
-        <x-viewpager-ng style="width:50%;height:50%;">
-          <x-viewpager-item-ng style="background:wheat;">
-            <x-view style="height:100%; width:100px; background: pink;"></x-view
-            >
+        <x-viewpager-ng style="width: 50%; height: 50%">
+          <x-viewpager-item-ng style="background: wheat">
+            <x-view
+              style="height: 100%; width: 100px; background: pink"
+            ></x-view>
           </x-viewpager-item-ng>
-          <x-viewpager-item-ng style="background:sandybrown;">
+          <x-viewpager-item-ng style="background: sandybrown">
             <x-view
-              style="height:100px; width:100px; background:green;"
+              style="height: 100px; width: 100px; background: green"
             ></x-view>
           </x-viewpager-item-ng>
         </x-viewpager-ng>
-        <x-view style="height:100px; width:100px; background:yellow;"></x-view>
+        <x-view
+          style="height: 100px; width: 100px; background: yellow"
+        ></x-view>
       </x-view>
     </x-view>
   </body>