From 5da01a1858c7a4f345cdb1c60cf82d22b926c0e0 Mon Sep 17 00:00:00 2001
From: Qingyu Wang <40660121+colinaaa@users.noreply.github.com>
Date: Sat, 5 Apr 2025 16:12:54 +0800
Subject: [PATCH 1/2] chore: bump dprint plugins

---
 .cargo/nextest.toml                           |  1 -
 .changeset/bitter-pumas-sort.md               |  1 +
 .changeset/bumpy-apples-stay.md               |  1 +
 .changeset/cold-doodles-matter.md             |  1 +
 .changeset/deep-swans-melt.md                 |  1 +
 .changeset/four-shoes-cry.md                  |  1 +
 .changeset/honest-chefs-mix.md                |  1 +
 .changeset/tame-moons-buy.md                  |  1 +
 .changeset/tender-pigs-brake.md               |  1 +
 .dprint.jsonc                                 | 18 ++--
 cspell.jsonc                                  |  2 +
 .../web-elements/src/XText/x-text.css         | 36 ++++----
 .../web-elements/src/common-css/linear.css    | 18 ++--
 packages/web-platform/web-explorer/index.html | 77 +++++++++--------
 .../src/elementAPI/event/eventFunctions.ts    |  3 +-
 .../filter-image/basic-placeholder.html       |  2 +-
 .../web-elements/filter-image/basic.html      |  2 +-
 .../filter-image/blur-radius.html             |  2 +-
 .../filter-image/drop-shadow.html             |  2 +-
 .../filter-image/event-error.html             | 16 ++--
 .../web-elements/filter-image/event-load.html | 18 ++--
 .../mode-aspectfill-placeholder.html          |  2 +-
 .../filter-image/mode-aspectfill.html         |  2 +-
 .../mode-aspectfit-placeholder.html           |  2 +-
 .../filter-image/mode-aspectfit.html          |  2 +-
 .../filter-image/mode-center-placeholder.html |  2 +-
 .../filter-image/mode-center.html             |  2 +-
 .../layout/flex-lynx-computed-direction.html  | 12 +--
 .../layout/flex-lynx-computed-grow.html       |  4 +-
 .../layout/flex-lynx-computed-shrink.html     |  8 +-
 .../lynx-display-do-not-use-flatten-tree.html |  8 +-
 .../percentage-cyclic-sibiling-linear.html    | 12 +--
 .../layout/percentage-cyclic-sibiling.html    | 12 +--
 .../layout/percentage-cyclic-text.html        |  4 +-
 .../layout/percentage-cyclic.html             |  9 +-
 .../performance/div-10000-fp.html             | 12 +--
 .../web-elements/performance/div-10000.html   | 12 +--
 .../web-elements/performance/p-10000.html     | 16 ++--
 .../react-10000-div-with-layouteffect.html    | 59 +++++++------
 .../performance/react-10000-div.html          | 18 ++--
 .../web-elements/performance/set-lycss.html   | 10 +--
 .../performance/simple-append-two-dom.html    |  6 +-
 .../performance/x-text-10000.html             | 16 ++--
 .../performance/x-view-10000-fp.html          | 12 +--
 .../performance/x-view-10000.html             | 12 +--
 .../tests/web-elements/scroll-view/basic.html | 20 ++---
 .../scroll-view/bounces-false.html            | 10 +--
 .../scroll-view/event-scroll.html             |  8 +-
 .../scroll-view/event-scrollend.html          |  8 +-
 .../scroll-view/event-scrolltolower.html      | 22 +++--
 .../scroll-view/fading-edge-length.html       | 10 +--
 .../scroll-view/method-auto-scroll.html       |  8 +-
 .../scroll-view/scroll-into-view-basic-x.html | 44 +++++-----
 .../scroll-view/scroll-into-view-basic.html   | 50 +++++------
 .../scroll-into-view-nested-scroll-view.html  | 22 ++---
 .../scroll-view/scroll-into-view-text-x.html  | 44 +++++-----
 .../scroll-view/scroll-into-view-text.html    | 50 +++++------
 .../web-elements/scroll-view/scroll-left.html | 18 ++--
 .../scroll-view/scroll-to-index.html          | 10 +--
 .../web-elements/scroll-view/scroll-to.html   | 18 ++--
 .../web-elements/scroll-view/scroll-top.html  | 18 ++--
 .../scroll-view/scroll-view-absolute-kid.html | 10 ++-
 .../scroll-view-item-percentage-size.html     | 12 +--
 .../scroll-view-linear-gravity-scroll.html    | 82 +++++++++----------
 .../scroll-view-linear-gravity.html           | 82 +++++++++----------
 .../scroll-view/scroll-view-must-linear.html  |  7 +-
 .../scroll-view-overwrite-direction.html      | 10 +--
 .../scroll-view/scroll-view-padding.html      | 10 +--
 .../scroll-view-size-in-flex-column.html      | 10 +--
 .../scroll-view-size-in-flex-row.html         | 10 +--
 ...rollable-even-inline-overflow-visible.html | 10 +--
 .../x-audio-tt/attribute-interval.html        | 12 +--
 .../x-audio-tt/attribute-loop-close.html      | 21 +++--
 .../x-audio-tt/attribute-loop.html            |  9 +-
 .../x-audio-tt/attribute-pause-on-hide.html   |  9 +-
 .../x-audio-tt/attribute-src-change.html      | 35 +++++---
 .../x-audio-tt/event-error-playback.html      | 15 ++--
 .../x-audio-tt/event-error-src-json.html      | 19 +++--
 .../x-audio-tt/event-error-src.html           | 15 ++--
 .../x-audio-tt/event-finished.html            | 15 ++--
 .../event-playbackstatechanged.html           | 33 +++++---
 .../web-elements/x-audio-tt/event-seek.html   | 26 ++++--
 .../event-srcloadingstatechanged.html         | 12 +--
 .../web-elements/x-audio-tt/method-mute.html  |  9 +-
 .../web-elements/x-audio-tt/method-pause.html | 18 ++--
 .../web-elements/x-audio-tt/method-play.html  |  9 +-
 .../x-audio-tt/method-player-info.html        | 18 ++--
 .../x-audio-tt/method-prepare.html            | 28 ++++---
 .../x-audio-tt/method-resume.html             | 27 ++++--
 .../web-elements/x-audio-tt/method-seek.html  | 20 +++--
 .../x-audio-tt/method-set-volume.html         | 22 +++--
 .../web-elements/x-audio-tt/method-stop.html  | 18 ++--
 .../tests/web-elements/x-blur-view/basic.html |  6 +-
 .../basic-with-lynx-wrapper.html              | 26 +++---
 .../web-elements/x-foldview-ng/basic.html     | 26 +++---
 .../event-offset-granularity.html             | 26 +++---
 ...e-controled-by-parent-flex-cross-axis.html | 10 +--
 .../size-header-could-from-children.html      | 28 +++----
 .../size-header-height-enough.html            | 28 +++----
 .../size-parent-grow-children-specific.html   | 28 +++----
 .../size-toolbar-could-from-children.html     | 30 +++----
 ...size-toolbar-slot-defines-parent-size.html | 28 +++----
 .../size-toolbar-slot-share-flex-parent.html  | 28 +++----
 .../x-foldview-ng/swipe-basic.html            | 26 +++---
 .../swipe-with-x-scroll-view.html             | 26 +++---
 .../x-foldview-ng/with-x-refresh-view.html    | 34 ++++----
 .../with-x-viewpager-ng-pan-both-x-and-y.html | 28 +++----
 .../x-foldview-ng/with-x-viewpager-ng.html    | 28 +++----
 .../web-elements/x-image/basic-inherit.html   |  2 +-
 .../x-image/basic-placeholder.html            |  2 +-
 .../tests/web-elements/x-image/basic.html     |  2 +-
 .../web-elements/x-image/blur-radius.html     |  2 +-
 .../web-elements/x-image/border-radius.html   |  2 +-
 .../web-elements/x-image/event-error.html     | 16 ++--
 .../web-elements/x-image/event-load.html      | 18 ++--
 .../x-image/mode-aspectfill-placeholder.html  |  2 +-
 .../web-elements/x-image/mode-aspectfill.html |  2 +-
 .../x-image/mode-aspectfit-placeholder.html   |  2 +-
 .../web-elements/x-image/mode-aspectfit.html  |  2 +-
 .../x-image/mode-center-placeholder.html      |  2 +-
 .../web-elements/x-image/mode-center.html     |  2 +-
 ...der-src-change-with-placeholder-exist.html |  2 +-
 .../x-image/placeholder-src-do-exist.html     |  2 +-
 .../x-image/placeholder-src-not-exist.html    |  2 +-
 .../web-elements/x-image/position-basic.html  |  6 +-
 .../tests/web-elements/x-image/position.html  |  6 +-
 .../x-input/attribute-confirm-type-done.html  |  2 +-
 .../x-input/attribute-confirm-type-go.html    |  2 +-
 .../x-input/attribute-confirm-type-next.html  |  2 +-
 .../attribute-confirm-type-search.html        |  2 +-
 .../x-input/attribute-confirm-type-send.html  |  2 +-
 .../x-input/attribute-disabled.html           |  2 +-
 ...-maxlength-change-do-not-change-value.html |  2 +-
 ...bute-maxlength-first-screen-cut-value.html |  2 +-
 .../x-input/attribute-readonly.html           |  2 +-
 .../x-input/attribute-spell-check.html        |  2 +-
 .../x-input/attribute-type-digit.html         |  2 +-
 .../x-input/attribute-type-email.html         |  2 +-
 .../x-input/attribute-type-number.html        |  2 +-
 .../x-input/attribute-type-tel.html           |  2 +-
 .../x-input/attribute-type-text.html          |  2 +-
 .../web-elements/x-input/attribute-value.html |  2 +-
 .../web-elements/x-input/event-confirm.html   |  2 +-
 .../x-input/event-focus-blur.html             |  2 +-
 .../web-elements/x-input/event-input.html     |  2 +-
 .../tests/web-elements/x-input/method.html    |  2 +-
 .../x-input/placeholder-color.html            |  2 +-
 .../x-input/placeholder-weight.html           |  2 +-
 .../web-elements/x-input/placeholder.html     |  2 +-
 .../press-enter-do-not-submit-value.html      |  2 +-
 .../x-input/style-background-color.html       |  8 +-
 .../x-input/style-inherit-color.html          |  8 +-
 .../x-input/style-inherit-margin.html         |  8 +-
 .../web-elements/x-input/type-password.html   |  2 +-
 .../x-input/type-value-do-not-show-input.html |  2 +-
 .../web-elements/x-list/auto-scroll.html      | 21 +++--
 .../web-elements/x-list/axis-gap-flow.html    |  2 +-
 .../tests/web-elements/x-list/axis-gap.html   |  2 +-
 .../tests/web-elements/x-list/basic-flow.html |  2 +-
 .../x-list/event-layoutcomplete.html          |  9 +-
 .../x-list/event-lower-load-more.html         | 25 +++---
 .../event-lower-threshold-item-count.html     | 18 ++--
 .../web-elements/x-list/event-scroll.html     | 18 ++--
 .../x-list/event-scrolltolower.html           |  9 +-
 .../event-scrolltoupper-tolower-flow.html     | 20 +++--
 .../x-list/event-scrolltoupper.html           |  9 +-
 .../tests/web-elements/x-list/event-snap.html |  4 +-
 .../tests/web-elements/x-list/full-span.html  |  2 +-
 .../x-list/scroll-orientation-flow.html       |  2 +-
 .../x-list/scroll-to-position.html            | 11 ++-
 .../web-elements/x-list/sticky-flow.html      |  2 +-
 .../x-overlay-ng/basic-z-index.html           | 11 +--
 .../web-elements/x-refresh-view/basic.html    | 11 ++-
 .../enable-auto-loadmore-false.html           | 20 +++--
 .../enable-auto-loadmore-true.html            | 20 +++--
 .../x-refresh-view/enable-loadmore-false.html | 32 ++++----
 .../x-refresh-view/enable-refresh-false.html  | 32 ++++----
 .../x-refresh-view/event-footerreleased.html  | 20 +++--
 .../x-refresh-view/event-headeroffset.html    | 20 +++--
 .../x-refresh-view/event-headerreleased.html  | 20 +++--
 .../x-refresh-view/event-headershow.html      | 20 +++--
 .../x-refresh-view/header-methods.html        | 32 ++++----
 .../web-elements/x-refresh-view/pull.html     | 32 ++++----
 .../x-swiper-basic-autoplay-interval.html     |  8 +-
 .../x-swiper/x-swiper-basic-autoplay.html     |  8 +-
 .../x-swiper-basic-circular-autoplay.html     |  8 +-
 .../x-swiper/x-swiper-basic-circular.html     |  8 +-
 ...ic-default-justify-content-flex-start.html | 10 +--
 .../web-elements/x-swiper/x-swiper-basic.html | 16 ++--
 .../x-swiper/x-swiper-circular-click.html     | 40 ++++-----
 .../x-swiper/x-swiper-circular-coverflow.html |  8 +-
 .../x-swiper/x-swiper-current-change.html     |  8 +-
 .../x-swiper-indicator-active-color.html      |  8 +-
 .../x-swiper/x-swiper-indicator-basic.html    |  8 +-
 .../x-swiper/x-swiper-indicator-color.html    |  8 +-
 .../x-swiper/x-swiper-initial-current.html    | 16 ++--
 .../x-swiper-mode-carousel-page-margin.html   |  8 +-
 .../x-swiper/x-swiper-mode-carousel.html      |  8 +-
 .../x-swiper/x-swiper-mode-carry.html         | 12 +--
 .../x-swiper-mode-coverflow-circular.html     | 12 +--
 .../x-swiper/x-swiper-mode-coverflow.html     | 12 +--
 .../x-swiper-mode-flat-coverflow.html         | 12 +--
 .../x-swiper-mode-normal-page-margin.html     |  8 +-
 .../x-swiper-set-curren-smooth-scroll.html    | 32 ++++----
 .../x-swiper/x-swiper-set-current.html        |  8 +-
 .../x-text/event-layoutchange.html            | 19 +++--
 .../inline-image-padding-and-margin.html      |  4 +-
 .../inline-image-with-lynx-wrapper.html       |  2 +-
 .../web-elements/x-text/inline-image.html     |  2 +-
 .../x-text/inline-text-with-lynx-wrapper.html |  4 +-
 .../web-elements/x-text/inline-text.html      |  4 +-
 .../inline-truncation-with-inline-image.html  |  4 +-
 .../x-text/nested-view-in-text.html           |  4 +-
 .../x-text/raw-text-with-lynx-wrapper.html    |  2 +-
 .../tests/web-elements/x-text/raw-text.html   |  2 +-
 .../x-text/text-baseline-alignment.html       | 12 +--
 .../text-clipped-display-important.html       |  4 +-
 .../x-text/text-in-text-fault-torrent.html    |  4 +-
 .../web-elements/x-text/text-in-text.html     |  4 +-
 .../x-text/text-is-block-element.html         |  2 +-
 .../x-text/text-maxlength-with-raw-text.html  |  7 +-
 ...xlength-with-tail-color-convert-false.html |  2 +-
 ...ext-maxlength-with-tail-color-convert.html | 10 +--
 .../web-elements/x-text/text-maxlength.html   |  2 +-
 .../x-text/text-maxline-1-instrict-size.html  |  4 +-
 .../text-maxline-basic-with-lynx-wrapper.html | 24 +++---
 .../x-text/text-maxline-basic.html            | 24 +++---
 ...ust-fit-do-not-show-custom-truncation.html |  4 +-
 .../text-maxline-with-custom-truncation.html  | 30 +++----
 .../x-text/text-maxline-with-padding.html     |  8 +-
 .../x-text/text-maxline-with-raw-text.html    |  6 +-
 ...maxline-with-tail-color-convert-false.html | 24 +++---
 .../text-not-resize-detect-new-line.html      | 12 +--
 .../x-text/text-overflow-inherit.html         |  4 +-
 .../x-text/text-sizing-in-flex-container.html |  6 +-
 .../truncation-first-element-is-image.html    | 10 +--
 .../x-text/view-flex-in-text.html             |  2 +-
 .../web-elements/x-text/view-in-text.html     |  2 +-
 .../attribute-confirm-type-done.html          |  2 +-
 .../x-textarea/attribute-confirm-type-go.html |  2 +-
 .../attribute-confirm-type-next.html          |  2 +-
 .../attribute-confirm-type-search.html        |  2 +-
 .../attribute-confirm-type-send.html          |  2 +-
 .../x-textarea/attribute-disabled.html        |  2 +-
 ...-maxlength-change-do-not-change-value.html |  2 +-
 ...bute-maxlength-first-screen-cut-value.html |  2 +-
 .../x-textarea/attribute-readonly.html        |  2 +-
 .../x-textarea/attribute-spell-check.html     |  6 +-
 .../x-textarea/attribute-value.html           |  2 +-
 .../x-textarea/background-color-inherit.html  |  2 +-
 .../x-textarea/event-confirm.html             |  2 +-
 .../x-textarea/event-focus-blur.html          |  2 +-
 .../web-elements/x-textarea/event-input.html  | 11 ++-
 .../tests/web-elements/x-textarea/method.html |  2 +-
 .../x-textarea/outline-color-inherit.html     |  2 +-
 .../x-textarea/placeholder-color.html         |  2 +-
 .../x-textarea/placeholder-weight.html        |  2 +-
 .../web-elements/x-textarea/placeholder.html  |  2 +-
 .../press-enter-do-not-submit-value.html      |  2 +-
 .../x-view/event-layoutchange.html            | 19 +++--
 .../basic-with-lynx-wrapper.html              | 31 ++++---
 .../web-elements/x-viewpager-ng/basic.html    | 28 ++++---
 .../web-elements/x-viewpager-ng/bounces.html  | 28 ++++---
 ...-response-to-select-index-on-dragging.html | 28 ++++---
 .../event-offsetchange-offset-value.html      | 28 ++++---
 .../x-viewpager-ng/method-selectTab.html      | 28 ++++---
 .../x-viewpager-ng/select-index-0.html        | 28 ++++---
 .../x-viewpager-ng/select-index.html          | 28 ++++---
 .../selecttab-method-default-smooth.html      | 28 ++++---
 .../selecttab-method-not-smooth.html          | 28 ++++---
 ...viewpager-size-cyclic-percentage-size.html | 21 +++--
 271 files changed, 1843 insertions(+), 1489 deletions(-)

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/bitter-pumas-sort.md b/.changeset/bitter-pumas-sort.md
index a845151cc8..853d812bb3 100644
--- a/.changeset/bitter-pumas-sort.md
+++ b/.changeset/bitter-pumas-sort.md
@@ -1,2 +1,3 @@
 ---
+
 ---
diff --git a/.changeset/bumpy-apples-stay.md b/.changeset/bumpy-apples-stay.md
index a845151cc8..853d812bb3 100644
--- a/.changeset/bumpy-apples-stay.md
+++ b/.changeset/bumpy-apples-stay.md
@@ -1,2 +1,3 @@
 ---
+
 ---
diff --git a/.changeset/cold-doodles-matter.md b/.changeset/cold-doodles-matter.md
index a845151cc8..853d812bb3 100644
--- a/.changeset/cold-doodles-matter.md
+++ b/.changeset/cold-doodles-matter.md
@@ -1,2 +1,3 @@
 ---
+
 ---
diff --git a/.changeset/deep-swans-melt.md b/.changeset/deep-swans-melt.md
index a845151cc8..853d812bb3 100644
--- a/.changeset/deep-swans-melt.md
+++ b/.changeset/deep-swans-melt.md
@@ -1,2 +1,3 @@
 ---
+
 ---
diff --git a/.changeset/four-shoes-cry.md b/.changeset/four-shoes-cry.md
index a845151cc8..853d812bb3 100644
--- a/.changeset/four-shoes-cry.md
+++ b/.changeset/four-shoes-cry.md
@@ -1,2 +1,3 @@
 ---
+
 ---
diff --git a/.changeset/honest-chefs-mix.md b/.changeset/honest-chefs-mix.md
index a845151cc8..853d812bb3 100644
--- a/.changeset/honest-chefs-mix.md
+++ b/.changeset/honest-chefs-mix.md
@@ -1,2 +1,3 @@
 ---
+
 ---
diff --git a/.changeset/tame-moons-buy.md b/.changeset/tame-moons-buy.md
index a845151cc8..853d812bb3 100644
--- a/.changeset/tame-moons-buy.md
+++ b/.changeset/tame-moons-buy.md
@@ -1,2 +1,3 @@
 ---
+
 ---
diff --git a/.changeset/tender-pigs-brake.md b/.changeset/tender-pigs-brake.md
index a845151cc8..853d812bb3 100644
--- a/.changeset/tender-pigs-brake.md
+++ b/.changeset/tender-pigs-brake.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 41eefee93c..77f39593c1 100644
--- a/cspell.jsonc
+++ b/cspell.jsonc
@@ -116,6 +116,8 @@
   ],
   // Glob
   "ignorePaths": [
+    // cSpell:disable-next-line
+    ".cargo/nextest.toml",
     ".gitignore",
     // Tests
     "coverage",
diff --git a/packages/web-platform/web-elements/src/XText/x-text.css b/packages/web-platform/web-elements/src/XText/x-text.css
index 9f9fc0d040..31dba4a6e0 100644
--- a/packages/web-platform/web-elements/src/XText/x-text.css
+++ b/packages/web-platform/web-elements/src/XText/x-text.css
@@ -48,24 +48,28 @@ x-text, inline-text {
 /* autoprefixer: ignore next */
 @supports (text-emphasis: none) {
   x-text::part(inner-box), inline-text {
-    background: var(--lynx-color-gradient, var(--lynx-color)) var(
-      --lynx-color-normal,
-      initial
-    );
-    -webkit-text-fill-color: var(--lynx-color-gradient, transparent) var(
-      --lynx-color-normal,
-      initial
-    );
-    background-clip: var(--lynx-color-gradient, text) var(
-      --lynx-color-normal,
-      initial
-    );
+    background: var(--lynx-color-gradient, var(--lynx-color))
+      var(
+        --lynx-color-normal,
+        initial
+      );
+    -webkit-text-fill-color: var(--lynx-color-gradient, transparent)
+      var(
+        --lynx-color-normal,
+        initial
+      );
+    background-clip: var(--lynx-color-gradient, text)
+      var(
+        --lynx-color-normal,
+        initial
+      );
     /* exist issue: https://github.com/facebook/react/issues/14200 */
     /* import flag is essential on chromium */
-    -webkit-background-clip: var(--lynx-color-gradient, text) var(
-      --lynx-color-normal,
-      initial
-    );
+    -webkit-background-clip: var(--lynx-color-gradient, text)
+      var(
+        --lynx-color-normal,
+        initial
+      );
   }
 }
 inline-text, inline-image, inline-truncation {
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 0bf78e7dd2..68083223dd 100644
--- a/packages/web-platform/web-explorer/index.html
+++ b/packages/web-platform/web-explorer/index.html
@@ -45,15 +45,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"
@@ -76,53 +74,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-mainthread-apis/src/elementAPI/event/eventFunctions.ts b/packages/web-platform/web-mainthread-apis/src/elementAPI/event/eventFunctions.ts
index 1d3300ed2d..a18bdeba1f 100644
--- a/packages/web-platform/web-mainthread-apis/src/elementAPI/event/eventFunctions.ts
+++ b/packages/web-platform/web-mainthread-apis/src/elementAPI/event/eventFunctions.ts
@@ -69,8 +69,7 @@ export function createEventFunctions(runtime: MainThreadRuntime) {
     element: HTMLElement,
     eventType: LynxEventType,
     eventName: string,
-    newEventHandler: string | undefined // | ((ev: LynxCrossThreadEvent) => void) | undefined,
-    ,
+    newEventHandler: string | undefined, // | ((ev: LynxCrossThreadEvent) => void) | undefined,
   ) {
     eventName = eventName.toLowerCase();
     const isCatch = eventType === 'catchEvent' || eventType === 'capture-catch';
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/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-text-10000.html b/packages/web-platform/web-tests/tests/web-elements/performance/x-text-10000.html
index 5c74eff7a2..69c83658f2 100644
--- a/packages/web-platform/web-tests/tests/web-elements/performance/x-text-10000.html
+++ b/packages/web-platform/web-tests/tests/web-elements/performance/x-text-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('x-text');
-        text.innerText = 'hello lynx';
-        top.append(text);
-      }
-    });
-    document.body.append(top);
+      queueMicrotask(() => {
+        for (let ii = 0; ii < 10000; 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-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-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-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.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 f89bcf1c3a..db54279b73 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
@@ -44,12 +44,21 @@
   <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
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 217029d65c..b273b74260 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
@@ -63,7 +63,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"
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 ce31e9fe52..5b373ddb25 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
@@ -63,7 +63,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"
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 5575832f35..a94d51f05a 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
@@ -52,7 +52,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">
         <list-item class="left" item-key="1" id="1"><x-view class="item"
           >1</x-view></list-item>
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 f7d7c3ce76..741b2e42ad 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
@@ -44,9 +44,12 @@
   <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">
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 4acfa4e954..73b0d9e17a 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
@@ -45,18 +45,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>
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 8a189911a3..fc88d7acf6 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
@@ -43,12 +43,18 @@
   <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
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 ce7996a1d3..e3b139e4d4 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
@@ -43,12 +43,18 @@
   <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">
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 438cc2cebe..36a3811d02 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
@@ -43,9 +43,12 @@
   <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">
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 38e13cce6f..9a909a86ff 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
@@ -53,14 +53,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"
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 680b6ad0a7..8b8e0edd2c 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
@@ -43,9 +43,12 @@
   <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">
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 6acbdd8e27..9072954c03 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
@@ -45,8 +45,8 @@
     <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>
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 28de4cdecb..7b5dc39509 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
@@ -64,7 +64,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" id="vertical">
         <list-item
           class="left"
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 921d8e5a5a..a5679fe0d8 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
@@ -52,7 +52,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" scroll-orientation="horizontal">
         <list-item class="left" item-key="1" id="1"><x-view class="item"
           >1</x-view></list-item>
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 687087666e..343c56ba7d 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");
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 958d79b437..403eb7fbcb 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
@@ -52,7 +52,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" sticky="true">
         <list-item
           class="left"
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-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>

From b652f1f9ee9bbc402e397ac08c0b0ce392b9bc22 Mon Sep 17 00:00:00 2001
From: Qingyu Wang <40660121+colinaaa@users.noreply.github.com>
Date: Sun, 27 Apr 2025 14:33:15 +0800
Subject: [PATCH 2/2] Retry