diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index c25a9c68dc..419a06b700 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -55,6 +55,33 @@ jobs:
       - run: sudo apt-get update && sudo apt-get install -y libfontconfig1-dev
       - run: cargo build --workspace
 
+  # The text backend features: Parley (the default), winkin alone, both (Parley wins),
+  # and neither, which must fail to compile.
+  check-text-backends:
+    name: "Check text backends"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: dtolnay/rust-toolchain@stable
+      - run: sudo apt-get update && sudo apt-get install -y libfontconfig1-dev
+      - name: Parley (default)
+        run: cargo check -p blitz-dom -p blitz-paint -p blitz -p wpt
+      - name: winkin alone
+        run: |
+          cargo check -p blitz-dom --no-default-features --features winkin,system-fonts,svg
+          cargo check -p blitz-paint --no-default-features --features winkin,svg
+          cargo check -p blitz --no-default-features --features winkin,net
+          cargo check -p browser --no-default-features --features winkin,hybrid
+          cargo check -p wpt --no-default-features --features winkin,cpu
+      - name: Both (Parley is used)
+        run: cargo test -p blitz-dom --features winkin --lib text::tests
+      - name: Neither fails to compile
+        run: |
+          if cargo check -p blitz-dom --no-default-features --features svg 2> neither.log; then
+            echo "blitz-dom built without a text backend"; exit 1
+          fi
+          grep -q "Enable one of the \`parley\` or \`winkin\` features" neither.log
+
   # wasm_hello is a standalone workspace; seven_guis and todomvc are workspace
   # members with a [lib] crate-type = ["cdylib"] target for wasm.
   build-wasm-examples:
@@ -70,9 +97,9 @@ jobs:
         run: cargo build --target wasm32-unknown-unknown
         working-directory: examples/wasm_hello
       - name: Build seven_guis (wasm)
-        run: cargo build -p seven_guis --lib --target wasm32-unknown-unknown --no-default-features --features hybrid
+        run: cargo build -p seven_guis --lib --target wasm32-unknown-unknown --no-default-features --features hybrid,parley
       - name: Build todomvc (wasm)
-        run: cargo build -p todomvc --lib --target wasm32-unknown-unknown --no-default-features --features hybrid
+        run: cargo build -p todomvc --lib --target wasm32-unknown-unknown --no-default-features --features hybrid,parley
 
   fmt:
     name: Rustfmt
@@ -96,7 +123,7 @@ jobs:
           components: clippy
       - run: sudo apt-get update && sudo apt-get install -y libfontconfig1-dev
       - run: cargo clippy --workspace -- -D warnings
-      - run: cargo clippy -p blitz-dom --no-default-features --features svg,woff,accessibility,system-fonts,file-input,custom-widget --all-targets -- -D warnings
+      - run: cargo clippy -p blitz-dom --no-default-features --features parley,svg,woff,accessibility,system-fonts,file-input,custom-widget --all-targets -- -D warnings
 
   ci-scripts:
     name: "Test CI scripts"
diff --git a/.github/workflows/wpt.yml b/.github/workflows/wpt.yml
index 9183f4776c..d377253c93 100644
--- a/.github/workflows/wpt.yml
+++ b/.github/workflows/wpt.yml
@@ -24,7 +24,7 @@ jobs:
   wpt:
     name: "Run WPT Tests"
     runs-on: warp-ubuntu-latest-arm64-16x
-    timeout-minutes: 15
+    timeout-minutes: 25
     steps:
       - uses: actions/checkout@v5
       - uses: dtolnay/rust-toolchain@stable
@@ -43,9 +43,9 @@ jobs:
       - name: Clone WPT tests
         run: git clone --depth 1 --revision "$(cat ./wpt/WPT_COMMIT)" https://github.com/web-platform-tests/wpt ./wpt/tests
       - name: Build WPT runner
-        run: cargo build -rp wpt
+        run: cargo build -rp wpt --no-default-features --features cpu,winkin
       - name: Run WPT tests
-        run: cargo run -rp wpt css svg
+        run: cargo run -rp wpt --no-default-features --features cpu,winkin css svg
       - name: Compress report (zstd)
         run: zstd -22 --ultra -o ./wpt/output/wptreport.json.zst ./wpt/output/wptreport.json
       - uses: actions/upload-artifact@v7
diff --git a/Cargo.lock b/Cargo.lock
index 7474b5a316..70510e071b 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -272,7 +272,7 @@ version = "1.1.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "40c48f72fd53cd289104fc64099abca73db4166ad86ea0b4341abe65af83dadc"
 dependencies = [
- "windows-sys 0.61.2",
+ "windows-sys 0.60.2",
 ]
 
 [[package]]
@@ -283,7 +283,7 @@ checksum = "291e6a250ff86cd4a820112fb8898808a366d8f9f58ce16d1f538353ad55747d"
 dependencies = [
  "anstyle",
  "once_cell_polyfill",
- "windows-sys 0.61.2",
+ "windows-sys 0.60.2",
 ]
 
 [[package]]
@@ -314,7 +314,7 @@ dependencies = [
  "anyrender",
  "image",
  "peniko",
- "read-fonts",
+ "read-fonts 0.41.0",
  "serde",
  "serde_json",
  "sha2",
@@ -910,6 +910,7 @@ dependencies = [
  "cursor-icon",
  "debug_timer 0.1.3",
  "euclid",
+ "fontwich",
  "html-escape",
  "icu_casemap",
  "icu_locale_core",
@@ -921,6 +922,7 @@ dependencies = [
  "linebender_resource_handle",
  "markup5ever",
  "objc2 0.6.5",
+ "parlance",
  "parley",
  "percent-encoding",
  "rayon",
@@ -941,6 +943,7 @@ dependencies = [
  "url",
  "usvg",
  "web-time",
+ "winkin",
  "writeable",
  "wuff",
 ]
@@ -1021,7 +1024,6 @@ dependencies = [
  "color",
  "euclid",
  "kurbo",
- "parley",
  "peniko",
  "skrifa",
  "smallvec",
@@ -1085,6 +1087,7 @@ dependencies = [
  "dioxus-core",
  "dioxus-native-dom",
  "keyboard-types 0.7.0",
+ "kurbo",
  "markup5ever",
  "stylo",
  "taffy",
@@ -1784,7 +1787,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "117725a109d387c937a1533ce01b450cbde6b88abceea8473c4d7a85853cda3c"
 dependencies = [
  "lazy_static",
- "windows-sys 0.59.0",
+ "windows-sys 0.52.0",
 ]
 
 [[package]]
@@ -2783,7 +2786,7 @@ dependencies = [
  "libc",
  "option-ext",
  "redox_users",
- "windows-sys 0.61.2",
+ "windows-sys 0.60.2",
 ]
 
 [[package]]
@@ -3077,7 +3080,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "39cab71617ae0d63f51a36d69f866391735b51691dbda63cf6f96d042b63efeb"
 dependencies = [
  "libc",
- "windows-sys 0.61.2",
+ "windows-sys 0.52.0",
 ]
 
 [[package]]
@@ -3305,7 +3308,7 @@ dependencies = [
  "objc2-core-text",
  "objc2-foundation 0.3.2",
  "parlance",
- "read-fonts",
+ "read-fonts 0.41.0",
  "roxmltree 0.21.1",
  "smallvec",
  "windows",
@@ -3313,6 +3316,24 @@ dependencies = [
  "yeslogic-fontconfig-sys",
 ]
 
+[[package]]
+name = "fontwich"
+version = "0.0.1"
+source = "git+https://github.com/dfrg/winkin?rev=11bc928c7cf92e1155ac4a0cd14773ae801b42fc#11bc928c7cf92e1155ac4a0cd14773ae801b42fc"
+dependencies = [
+ "hashbrown 0.17.1",
+ "memmap2 0.9.11",
+ "objc2-core-foundation",
+ "objc2-core-text",
+ "parlance",
+ "read-fonts 0.45.0",
+ "roxmltree 0.21.1",
+ "spin",
+ "windows",
+ "windows-core",
+ "yeslogic-fontconfig-sys",
+]
+
 [[package]]
 name = "foreign-types"
 version = "0.3.2"
@@ -3808,8 +3829,22 @@ checksum = "c03d949a14aa089bbb282f7dd76a498a7f684428e4257202efc119ec010376f9"
 dependencies = [
  "bitflags 2.13.2",
  "bytemuck",
- "read-fonts",
+ "read-fonts 0.41.0",
+ "smallvec",
+]
+
+[[package]]
+name = "harfrust"
+version = "0.14.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "86aa776d6d32b072119e1f1650f4db843ff4382a4aaa6a2c9c4e35703cd377cb"
+dependencies = [
+ "bitflags 2.13.2",
+ "bytemuck",
+ "core_maths",
+ "read-fonts 0.45.0",
  "smallvec",
+ "spin",
 ]
 
 [[package]]
@@ -5415,7 +5450,7 @@ version = "0.50.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7957b9740744892f114936ab4a57b3f487491bbeafaf8083688b16841a4240e5"
 dependencies = [
- "windows-sys 0.61.2",
+ "windows-sys 0.60.2",
 ]
 
 [[package]]
@@ -6080,7 +6115,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b74c0d373e462e504ad4436710a39f099e18e848e1ee711f70cd2dcd5a69b290"
 dependencies = [
  "fontique",
- "harfrust",
+ "harfrust 0.12.0",
  "hashbrown 0.17.1",
  "icu_locale_core",
  "icu_normalizer",
@@ -6538,13 +6573,24 @@ version = "6.0.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "f8dcc9c7d52a811697d2151c701e0d08956f92b0e24136cf4cf27b57a6a0d9bf"
 
+[[package]]
+name = "rand"
+version = "0.8.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e058c7de0b26af77780c769414d6257830bb240f3c38477dbc2c16e5f54d6d4c"
+dependencies = [
+ "libc",
+ "rand_chacha 0.3.1",
+ "rand_core 0.6.4",
+]
+
 [[package]]
 name = "rand"
 version = "0.9.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b9ef1d0d795eb7d84685bca4f72f3649f064e6641543d3a8c415898726a57b41"
 dependencies = [
- "rand_chacha",
+ "rand_chacha 0.9.0",
  "rand_core 0.9.5",
 ]
 
@@ -6559,6 +6605,16 @@ dependencies = [
  "rand_core 0.10.1",
 ]
 
+[[package]]
+name = "rand_chacha"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e6c10a63a0fa32252be49d21e7709d4d4baf8d231c2dbce1eaa8141b9b127d88"
+dependencies = [
+ "ppv-lite86",
+ "rand_core 0.6.4",
+]
+
 [[package]]
 name = "rand_chacha"
 version = "0.9.0"
@@ -6569,6 +6625,15 @@ dependencies = [
  "rand_core 0.9.5",
 ]
 
+[[package]]
+name = "rand_core"
+version = "0.6.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ec0be4795e2f6a28069bec0b5ff3e2ac9bafc99e6a9a7dc3547996c5c816922c"
+dependencies = [
+ "getrandom 0.2.17",
+]
+
 [[package]]
 name = "rand_core"
 version = "0.9.5"
@@ -6618,7 +6683,7 @@ dependencies = [
  "paste",
  "profiling",
  "rand 0.9.5",
- "rand_chacha",
+ "rand_chacha 0.9.0",
  "simd_helpers",
  "thiserror 2.0.21",
  "v_frame",
@@ -6725,6 +6790,19 @@ dependencies = [
  "once_cell",
 ]
 
+[[package]]
+name = "read-fonts"
+version = "0.45.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8a5b7bed3d16ab428d8fa533640ab805ff50e7ad8a4d00649de1259e70023282"
+dependencies = [
+ "bytemuck",
+ "core_maths",
+ "font-types 0.12.6",
+ "once_cell",
+ "yoke",
+]
+
 [[package]]
 name = "redox_event"
 version = "0.4.8"
@@ -6993,7 +7071,7 @@ dependencies = [
  "errno",
  "libc",
  "linux-raw-sys 0.4.15",
- "windows-sys 0.59.0",
+ "windows-sys 0.52.0",
 ]
 
 [[package]]
@@ -7006,7 +7084,7 @@ dependencies = [
  "errno",
  "libc",
  "linux-raw-sys 0.12.1",
- "windows-sys 0.61.2",
+ "windows-sys 0.52.0",
 ]
 
 [[package]]
@@ -7138,12 +7216,12 @@ dependencies = [
 [[package]]
 name = "selectors"
 version = "0.41.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8322aebea94a6cc288ff884e8a49bdbceef60206c400c6c46d22e62fc4fd91a6"
+source = "git+https://github.com/dfrg/stylo?branch=style-more#58490d7b0b50cf915b510383512f1ce062dbd17b"
 dependencies = [
  "bitflags 2.13.2",
  "cssparser",
  "derive_more",
+ "hashbrown 0.17.1",
  "log",
  "new_debug_unreachable",
  "precomputed-hash",
@@ -7278,8 +7356,7 @@ dependencies = [
 [[package]]
 name = "servo_arc"
 version = "0.5.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b4eceb519ec34d8290aaf6e46f435102f2bfa63f22b05a144fb16ab266d3b198"
+source = "git+https://github.com/dfrg/stylo?branch=style-more#58490d7b0b50cf915b510383512f1ce062dbd17b"
 dependencies = [
  "serde",
  "stable_deref_trait",
@@ -7463,7 +7540,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "819ab7d62b1d3e72d9d9dea5650bac30424f9111364bb94928dbf5ecad1baa68"
 dependencies = [
  "bytemuck",
- "read-fonts",
+ "read-fonts 0.41.0",
 ]
 
 [[package]]
@@ -7577,7 +7654,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c3d1e2c7f27f8d4cb10542a02c49005dbd6e93095799d6f3be745fae9f8fedd4"
 dependencies = [
  "libc",
- "windows-sys 0.61.2",
+ "windows-sys 0.60.2",
 ]
 
 [[package]]
@@ -7625,6 +7702,12 @@ dependencies = [
  "softbuffer",
 ]
 
+[[package]]
+name = "spin"
+version = "0.12.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0134f9043ed38b087ac4f7d4af44c79e2c9e5094421fe3164f435ce585953b10"
+
 [[package]]
 name = "spirv"
 version = "0.4.0+sdk-1.4.341.0"
@@ -7739,8 +7822,7 @@ dependencies = [
 [[package]]
 name = "stylo"
 version = "0.22.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7a255e46af2478628c48daab3774090caabd7812b1dd3ca98801c2b9c53491ed"
+source = "git+https://github.com/dfrg/stylo?branch=style-more#58490d7b0b50cf915b510383512f1ce062dbd17b"
 dependencies = [
  "app_units",
  "arrayvec",
@@ -7751,6 +7833,7 @@ dependencies = [
  "derive_more",
  "encoding_rs",
  "euclid",
+ "hashbrown 0.17.1",
  "icu_segmenter",
  "indexmap",
  "itertools 0.14.0",
@@ -7765,6 +7848,7 @@ dependencies = [
  "num_cpus",
  "parking_lot",
  "precomputed-hash",
+ "rand 0.8.8",
  "rayon",
  "rayon-core",
  "rustc-hash 2.1.3",
@@ -7796,8 +7880,7 @@ dependencies = [
 [[package]]
 name = "stylo_atoms"
 version = "0.22.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ee1771588fd747ef16f8b1990061b6f37c7d3251a0f9b74f405a44c0c5fb8966"
+source = "git+https://github.com/dfrg/stylo?branch=style-more#58490d7b0b50cf915b510383512f1ce062dbd17b"
 dependencies = [
  "string_cache 0.11.0",
  "string_cache_codegen",
@@ -7806,8 +7889,7 @@ dependencies = [
 [[package]]
 name = "stylo_derive"
 version = "0.22.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4ee5c550c2e00a0b3c046bef84a9ee217e04e7c014142eeb96f9e48781c5cfd3"
+source = "git+https://github.com/dfrg/stylo?branch=style-more#58490d7b0b50cf915b510383512f1ce062dbd17b"
 dependencies = [
  "darling 0.20.11",
  "proc-macro2",
@@ -7819,8 +7901,7 @@ dependencies = [
 [[package]]
 name = "stylo_dom"
 version = "0.22.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9febcb03f2b669ef06b3e8a5209e6280971ed55cecf83fbf3c0562fcf2aa2ec6"
+source = "git+https://github.com/dfrg/stylo?branch=style-more#58490d7b0b50cf915b510383512f1ce062dbd17b"
 dependencies = [
  "bitflags 2.13.2",
  "stylo_malloc_size_of",
@@ -7829,12 +7910,12 @@ dependencies = [
 [[package]]
 name = "stylo_malloc_size_of"
 version = "0.22.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "83ed69d55ee907599f093221004a28371925236f09f20961963020abf38bab6a"
+source = "git+https://github.com/dfrg/stylo?branch=style-more#58490d7b0b50cf915b510383512f1ce062dbd17b"
 dependencies = [
  "app_units",
  "cssparser",
  "euclid",
+ "hashbrown 0.17.1",
  "parking_lot",
  "selectors",
  "servo_arc",
@@ -7848,8 +7929,7 @@ dependencies = [
 [[package]]
 name = "stylo_static_prefs"
 version = "0.22.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6767c48a1590461db79f8b434ccc5a2d65600a3b716751f7999b35ccead1e024"
+source = "git+https://github.com/dfrg/stylo?branch=style-more#58490d7b0b50cf915b510383512f1ce062dbd17b"
 dependencies = [
  "toml",
 ]
@@ -7867,8 +7947,7 @@ dependencies = [
 [[package]]
 name = "stylo_traits"
 version = "0.22.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "645d6bfe40eb6e86ebe9f2d2adadcbced41bfa96175de7cb13d4d178d27bc83d"
+source = "git+https://github.com/dfrg/stylo?branch=style-more#58490d7b0b50cf915b510383512f1ce062dbd17b"
 dependencies = [
  "app_units",
  "bitflags 2.13.2",
@@ -8057,7 +8136,7 @@ dependencies = [
  "getrandom 0.4.3",
  "once_cell",
  "rustix 1.1.5",
- "windows-sys 0.61.2",
+ "windows-sys 0.52.0",
 ]
 
 [[package]]
@@ -8092,7 +8171,7 @@ version = "1.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d8c27177b12a6399ffc08b98f76f7c9a1f4fe9fc967c784c5a071fa8d93cf7e1"
 dependencies = [
- "windows-sys 0.61.2",
+ "windows-sys 0.60.2",
 ]
 
 [[package]]
@@ -8136,6 +8215,9 @@ name = "thin-vec"
 version = "0.2.21"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d6a4b9ba8738cb4a4f399d37e266becfd475e75eb73425b87a05a2f2039ba63e"
+dependencies = [
+ "serde",
+]
 
 [[package]]
 name = "thiserror"
@@ -8288,10 +8370,10 @@ checksum = "fd3ca314f692efd6c868f8408f53fe444634a845f96c028b97d35f6a1f79f0ee"
 [[package]]
 name = "to_shmem"
 version = "0.6.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bbf077da8dd01cc18453bd7d9bc3a945c262f5f344562e5f6deb3914b4dd6f14"
+source = "git+https://github.com/dfrg/stylo?branch=style-more#58490d7b0b50cf915b510383512f1ce062dbd17b"
 dependencies = [
  "cssparser",
+ "hashbrown 0.17.1",
  "servo_arc",
  "smallbitvec",
  "smallvec",
@@ -8302,8 +8384,7 @@ dependencies = [
 [[package]]
 name = "to_shmem_derive"
 version = "0.2.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0f8e91a023810fd2019648410d00eea13a71f21d849e71d6d9ed936fb8061174"
+source = "git+https://github.com/dfrg/stylo?branch=style-more#58490d7b0b50cf915b510383512f1ce062dbd17b"
 dependencies = [
  "darling 0.20.11",
  "proc-macro2",
@@ -8662,7 +8743,7 @@ checksum = "f2f6fb2847f6742cd76af783a2a2c49e9375d0a111c7bef6f71cd9e738c72d6e"
 dependencies = [
  "memoffset",
  "tempfile",
- "windows-sys 0.61.2",
+ "windows-sys 0.60.2",
 ]
 
 [[package]]
@@ -8775,7 +8856,7 @@ dependencies = [
  "data-url",
  "flate2",
  "fontdb",
- "harfrust",
+ "harfrust 0.12.0",
  "imagesize",
  "kurbo",
  "log",
@@ -9777,7 +9858,7 @@ version = "0.1.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c2a7b1c03c876122aa43f3020e6c3c3ee5c05081c9a00739faf7503aeba10d22"
 dependencies = [
- "windows-sys 0.61.2",
+ "windows-sys 0.52.0",
 ]
 
 [[package]]
@@ -9899,15 +9980,6 @@ dependencies = [
  "windows-targets 0.52.6",
 ]
 
-[[package]]
-name = "windows-sys"
-version = "0.59.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "1e38bc4d79ed67fd075bcc251a1c39b32a1776bbe92e5bef1f0bf1f8c531853b"
-dependencies = [
- "windows-targets 0.52.6",
-]
-
 [[package]]
 name = "windows-sys"
 version = "0.60.2"
@@ -10354,6 +10426,23 @@ dependencies = [
  "xkbcommon-dl",
 ]
 
+[[package]]
+name = "winkin"
+version = "0.0.1"
+source = "git+https://github.com/dfrg/winkin?rev=11bc928c7cf92e1155ac4a0cd14773ae801b42fc#11bc928c7cf92e1155ac4a0cd14773ae801b42fc"
+dependencies = [
+ "fontwich",
+ "harfrust 0.14.0",
+ "hashbrown 0.17.1",
+ "icu_casemap",
+ "icu_locale_core",
+ "icu_segmenter",
+ "parlance",
+ "read-fonts 0.45.0",
+ "spin",
+ "writeable",
+]
+
 [[package]]
 name = "winnow"
 version = "0.7.15"
@@ -10403,7 +10492,6 @@ dependencies = [
  "markup5ever",
  "os_info",
  "owo-colors",
- "parley",
  "peniko",
  "png 0.17.16",
  "pollster",
@@ -10442,7 +10530,7 @@ checksum = "cae90d1d9f6d1d36ef116b0b1e651a6d7c12ba925439d4d06ff9adc94662a3d8"
 dependencies = [
  "font-types 0.12.6",
  "log",
- "read-fonts",
+ "read-fonts 0.41.0",
 ]
 
 [[package]]
diff --git a/Cargo.toml b/Cargo.toml
index 9c084b32f2..5dab13f700 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -55,7 +55,7 @@ dioxus-native-dom = { version = "0.7.0", path = "./packages/dioxus-native-dom",
 debug_timer = { version = "0.1.2", path = "./packages/debug_timer" }
 accesskit_xplat = { version = "0.2", path = "./packages/accesskit_xplat", default-features = false }
 browser-persistence = { path = "./apps/browser/persistence" }
-blitz-test-harness = { path = "./packages/blitz-test-harness" }
+blitz-test-harness = { path = "./packages/blitz-test-harness", default-features = false }
 
 # Servo dependencies
 style = { version = "0.22.0", package = "stylo" }
@@ -108,7 +108,15 @@ taffy = { git = "https://github.com/DioxusLabs/taffy", rev = "6c2106e3df79493d30
     "calc",
     "detailed_layout_info",
 ] }
+# The font value types shared by the text backends, from Parley's release
+parlance = { version = "0.1.1", default-features = false, features = ["std"] }
 parley = { version = "0.12", default-features = false, features = ["std"] }
+# Its `dictionaries` feature, ICU's line and word dictionaries, is blitz-dom's
+# `complex-scripts`.
+winkin = { git = "https://github.com/dfrg/winkin", rev = "11bc928c7cf92e1155ac4a0cd14773ae801b42fc", default-features = false, features = ["std"] }
+# The fonts winkin chooses from. Its `system` feature, the platform's font
+# APIs, is blitz-dom's `system-fonts`.
+fontwich = { git = "https://github.com/dfrg/winkin", rev = "11bc928c7cf92e1155ac4a0cd14773ae801b42fc", default-features = false, features = ["std"] }
 skrifa = { version = "0.44", default-features = false, features = [
     "std",
 ] } # Should match parley and vello versions
@@ -257,13 +265,17 @@ publish = false
 log-times = ["log-frame-times", "log-phase-times"]
 log-frame-times = ["dioxus-native/log-frame-times"]
 log-phase-times = ["dioxus-native/log-phase-times"]
+# The text backend: Parley (the default) or winkin. With both, Parley is used.
+default = ["parley"]
+parley = ["blitz-dom/parley", "blitz-paint/parley", "dioxus-native/parley"]
+winkin = ["blitz-dom/winkin", "blitz-paint/winkin", "dioxus-native/winkin"]
 
 [dev-dependencies]
 anyrender = { workspace = true }
 anyrender_vello = { workspace = true }
 anyrender_vello_cpu = { workspace = true, features = ["multithreading"] }
 anyrender_vello_hybrid = { workspace = true }
-blitz-dom = { workspace = true, features = ["default"] }
+blitz-dom = { workspace = true, features = ["svg", "woff", "accessibility", "system-fonts", "file-input", "custom-widget", "text-transform-icu"] }
 blitz-html = { workspace = true }
 blitz-traits = { workspace = true }
 blitz-paint = { workspace = true }
@@ -296,6 +308,26 @@ wgpu = { workspace = true }
 wgpu_context = { workspace = true }
 rustc-hash = { workspace = true }
 
+# The stylo fork with the gates relaxed on properties its servo build
+# declines to compute. They are gated because servo's layout does not
+# implement them, not because they need gecko: the values are plain Rust.
+# Un-gating them is what lets winkin lay out, and the WPT suites reach,
+# writing modes, ruby, emphasis marks, line clamping and the rest of the
+# text properties winkin implements. Every crate of the stylo family is
+# patched together, or Blitz would see two `Atom` types.
+[patch.crates-io]
+stylo = { git = "https://github.com/dfrg/stylo", branch = "style-more" }
+stylo_traits = { git = "https://github.com/dfrg/stylo", branch = "style-more" }
+stylo_atoms = { git = "https://github.com/dfrg/stylo", branch = "style-more" }
+stylo_dom = { git = "https://github.com/dfrg/stylo", branch = "style-more" }
+stylo_static_prefs = { git = "https://github.com/dfrg/stylo", branch = "style-more" }
+stylo_derive = { git = "https://github.com/dfrg/stylo", branch = "style-more" }
+stylo_malloc_size_of = { git = "https://github.com/dfrg/stylo", branch = "style-more" }
+selectors = { git = "https://github.com/dfrg/stylo", branch = "style-more" }
+servo_arc = { git = "https://github.com/dfrg/stylo", branch = "style-more" }
+to_shmem = { git = "https://github.com/dfrg/stylo", branch = "style-more" }
+to_shmem_derive = { git = "https://github.com/dfrg/stylo", branch = "style-more" }
+
 # [patch.crates-io]
 # anyrender = { path = "../anyrender/crates/anyrender" }
 # anyrender_skia = { path = "../anyrender/crates/anyrender_skia" }
diff --git a/apps/browser/Cargo.toml b/apps/browser/Cargo.toml
index b72608c4e5..bf02a468aa 100644
--- a/apps/browser/Cargo.toml
+++ b/apps/browser/Cargo.toml
@@ -10,7 +10,7 @@ name = "blitz"
 path = "src/main.rs"
 
 [features]
-default = ["hybrid", "cookies", "cache", "screenshot", "apple-font-embolden", "scrollbars"]
+default = ["hybrid", "cookies", "cache", "screenshot", "apple-font-embolden", "scrollbars", "parley"]
 android-defaults = ["skia", "cookies"]
 
 screenshot = ["dep:anyrender_vello_cpu", "dep:blitz-paint", "dep:png", "dep:peniko", "dep:rfd"]
@@ -41,6 +41,9 @@ mimalloc = ["dep:mimalloc"]
 font-embolden = ["dioxus-native/font-embolden"]
 apple-font-embolden = ["dioxus-native/apple-font-embolden"]
 writing-mode = ["blitz-dom/writing-mode", "dioxus-native/writing-mode"]
+# The text backend: Parley (the default) or winkin. With both, Parley is used.
+parley = ["dioxus-native/parley", "blitz-dom/parley", "blitz-html/parley", "blitz-paint?/parley", "blitz-vibey-script?/parley"]
+winkin = ["dioxus-native/winkin", "blitz-dom/winkin", "blitz-html/winkin", "blitz-paint?/winkin", "blitz-vibey-script?/winkin"]
 
 [dependencies]
 dioxus-native = { workspace = true, features = [
diff --git a/apps/browser/src/document_loader.rs b/apps/browser/src/document_loader.rs
index 2a6a9e6b32..4deee72b31 100644
--- a/apps/browser/src/document_loader.rs
+++ b/apps/browser/src/document_loader.rs
@@ -1,5 +1,6 @@
 use std::sync::{Arc, Mutex};
 
+use blitz_dom::text::TextFonts as _;
 use blitz_dom::{DocumentConfig, FontContext};
 use blitz_html::{HtmlDocument, HtmlProvider};
 use blitz_traits::{
@@ -7,7 +8,6 @@ use blitz_traits::{
     shell::ShellProvider,
 };
 use dioxus_native::{SubDocumentAttr, prelude::*};
-use linebender_resource_handle::Blob;
 
 use crate::StdNetProvider;
 use crate::favicon::favicon_candidate;
@@ -34,6 +34,8 @@ pub struct LoadedDocument {
 }
 
 pub struct DocumentLoader {
+    /// The fonts the tab's documents lay out text with, listed once and shared by every
+    /// document the tab loads.
     pub font_ctx: FontContext,
     pub net_provider: Arc<StdNetProvider>,
     pub status: Signal<DocumentLoaderStatus>,
@@ -42,33 +44,10 @@ pub struct DocumentLoader {
     current_abort: Mutex<Option<AbortController>>,
 }
 
-pub fn make_doc_config(
-    base_url: Option<String>,
-    net_provider: Arc<StdNetProvider>,
-    history: SyncStore<History>,
-    font_ctx: FontContext,
-    abort_signal: Option<AbortSignal>,
-) -> DocumentConfig {
-    DocumentConfig {
-        viewport: None,
-        base_url,
-        net_provider: Some(net_provider as _),
-        navigation_provider: Some(Arc::new(BrowserNavProvider { history })),
-        shell_provider: Some(consume_context::<Arc<dyn ShellProvider>>()),
-        html_parser_provider: Some(Arc::new(HtmlProvider)),
-        font_ctx: Some(font_ctx),
-        media_type: None,
-        abort_signal,
-        ..Default::default()
-    }
-}
-
 impl DocumentLoader {
     pub fn new(net_provider: Arc<StdNetProvider>, history: SyncStore<History>) -> Self {
         let mut font_ctx = FontContext::default();
-        font_ctx
-            .collection
-            .register_fonts(Blob::new(Arc::new(blitz_dom::BULLET_FONT) as _), None);
+        font_ctx.add_fonts(blitz_dom::BULLET_FONT);
 
         Self {
             font_ctx,
@@ -80,6 +59,27 @@ impl DocumentLoader {
         }
     }
 
+    pub fn make_doc_config(
+        &self,
+        base_url: Option<String>,
+        abort_signal: Option<AbortSignal>,
+    ) -> DocumentConfig {
+        DocumentConfig {
+            viewport: None,
+            base_url,
+            net_provider: Some(Arc::clone(&self.net_provider) as _),
+            navigation_provider: Some(Arc::new(BrowserNavProvider {
+                history: self.history,
+            })),
+            shell_provider: Some(consume_context::<Arc<dyn ShellProvider>>()),
+            html_parser_provider: Some(Arc::new(HtmlProvider)),
+            font_ctx: Some(self.font_ctx.clone()),
+            media_type: None,
+            abort_signal,
+            ..Default::default()
+        }
+    }
+
     pub fn reload(&self) {
         self.abort_current();
         let mut reload_generation = self.reload_generation;
@@ -98,8 +98,6 @@ impl DocumentLoader {
 
     pub async fn load_document(&self, req: Request) -> LoadedDocument {
         let net_provider = Arc::clone(&self.net_provider);
-        let font_ctx = self.font_ctx.clone();
-        let history = self.history;
 
         let controller = AbortController::default();
         let signal = controller.signal.clone();
@@ -119,13 +117,7 @@ impl DocumentLoader {
             Ok((resolved_url, bytes)) => {
                 tracing::info!("Loaded {}", resolved_url);
                 let base_url = resolved_url.clone();
-                let config = make_doc_config(
-                    Some(resolved_url),
-                    Arc::clone(&net_provider),
-                    history,
-                    font_ctx,
-                    Some(signal.clone()),
-                );
+                let config = self.make_doc_config(Some(resolved_url), Some(signal.clone()));
 
                 let body_text;
                 let (html, is_error) = if bytes.is_empty() {
@@ -151,8 +143,7 @@ impl DocumentLoader {
                 tracing::error!("Error loading document: {:?}", err);
 
                 let error_msg = format!("{err:?}");
-                let config =
-                    make_doc_config(None, net_provider, history, font_ctx, Some(signal.clone()));
+                let config = self.make_doc_config(None, Some(signal.clone()));
 
                 let error_html = include_str!("../assets/error.html");
                 let mut document = HtmlDocument::from_html(error_html, config).into_inner();
diff --git a/apps/readme/Cargo.toml b/apps/readme/Cargo.toml
index 08572c0238..0919ebdbbb 100644
--- a/apps/readme/Cargo.toml
+++ b/apps/readme/Cargo.toml
@@ -10,7 +10,10 @@ repository.workspace = true
 publish = true
 
 [features]
-default = ["hybrid", "comrak", "floats", "scrollbars"]
+default = ["hybrid", "comrak", "floats", "scrollbars", "parley"]
+# The text backend: Parley (the default) or winkin. With both, Parley is used.
+parley = ["blitz-dom/parley", "blitz-html/parley", "blitz-paint/parley", "blitz-shell/parley"]
+winkin = ["blitz-dom/winkin", "blitz-html/winkin", "blitz-paint/winkin", "blitz-shell/winkin"]
 
 # Renderers
 gpu = ["dep:anyrender_vello"]
@@ -43,11 +46,11 @@ tracing = ["dep:tracing-subscriber", "blitz-shell/tracing", "blitz-net/tracing",
 
 [dependencies]
 blitz-traits = { workspace = true }
-blitz-dom = { workspace = true, features = ["default", "parallel-construct"] }
+blitz-dom = { workspace = true, features = ["svg", "woff", "accessibility", "system-fonts", "file-input", "custom-widget", "text-transform-icu", "parallel-construct"] }
 blitz-html = { workspace = true }
-blitz-paint = { workspace = true, features = ["default"] }
+blitz-paint = { workspace = true, features = ["svg"] }
 blitz-net = { workspace = true, features = ["cookies"] }
-blitz-shell = { workspace = true, features = ["default"] }
+blitz-shell = { workspace = true, features = ["accessibility", "clipboard", "file-dialog"] }
 anyrender_vello = { workspace = true, optional = true }
 anyrender_skia = { workspace = true, optional = true }
 anyrender_vello_cpu = { workspace = true, features = ["multithreading"], optional = true }
diff --git a/examples/counter/Cargo.toml b/examples/counter/Cargo.toml
index c314bd0ee2..963584e44e 100644
--- a/examples/counter/Cargo.toml
+++ b/examples/counter/Cargo.toml
@@ -9,7 +9,10 @@ publish = false
 crate-type = ["cdylib"]
 
 [features]
-default = ["hybrid"]
+default = ["hybrid", "parley"]
+# The text backend: Parley (the default) or winkin. With both, Parley is used.
+parley = ["dioxus-native/parley", "blitz-dom/parley", "blitz-paint/parley"]
+winkin = ["dioxus-native/winkin", "blitz-dom/winkin", "blitz-paint/winkin"]
 system-fonts = ["blitz-dom/system-fonts"]
 vello = ["dioxus-native/vello"]
 cpu = ["cpu-pixels"]
diff --git a/examples/screenshot.rs b/examples/screenshot.rs
index 16cefd9808..ac54ae7a91 100644
--- a/examples/screenshot.rs
+++ b/examples/screenshot.rs
@@ -1,4 +1,7 @@
 //! Load first CLI argument as a url. Fallback to google.com if no CLI argument is provided.
+//!
+//! The second argument is the viewport's width in CSS pixels, and the third the
+//! path to write the PNG to.
 
 use anyrender::{PaintScene as _, render_to_buffer};
 use anyrender_vello_cpu::VelloCpuImageRenderer;
@@ -102,7 +105,7 @@ async fn main() {
     // Determine height to render
     let computed_height = document.as_ref().root_element().final_layout().size.height;
     let render_width = (width as f64 * scale) as u32;
-    let render_height = ((computed_height as f64).max(height as f64).min(4000.0) * scale) as u32;
+    let render_height = ((computed_height as f64).max(1.0).min(4000.0) * scale) as u32;
 
     // Render document to RGBA buffer
     let buffer = render_to_buffer::<VelloCpuImageRenderer, _>(
@@ -133,8 +136,12 @@ async fn main() {
 
     timer.time("Rendered to buffer");
 
-    // Determine output path, and open a file at that path. TODO: make configurable.
-    let out_path = compute_filename(&url_string);
+    // Determine output path, and open a file at that path: the third
+    // argument where there is one.
+    let out_path = std::env::args()
+        .nth(3)
+        .map(PathBuf::from)
+        .unwrap_or_else(|| compute_filename(&url_string));
     let mut file = File::create(&out_path).unwrap();
 
     // Encode buffer as PNG and write it to a file
diff --git a/examples/seven_guis/Cargo.toml b/examples/seven_guis/Cargo.toml
index 68951c8b19..05c8d2159c 100644
--- a/examples/seven_guis/Cargo.toml
+++ b/examples/seven_guis/Cargo.toml
@@ -13,7 +13,10 @@ path = "src/main.rs"
 crate-type = ["cdylib", "rlib"]
 
 [features]
-default = ["hybrid"]
+default = ["hybrid", "parley"]
+# The text backend: Parley (the default) or winkin. With both, Parley is used.
+parley = ["dioxus-native/parley"]
+winkin = ["dioxus-native/winkin"]
 vello = ["dioxus-native/vello"]
 hybrid = ["dioxus-native/vello-hybrid"]
 skia = ["dioxus-native/skia"]
diff --git a/examples/todomvc/Cargo.toml b/examples/todomvc/Cargo.toml
index 08be7ee3e2..e25cdc2cd4 100644
--- a/examples/todomvc/Cargo.toml
+++ b/examples/todomvc/Cargo.toml
@@ -13,7 +13,10 @@ path = "src/main.rs"
 crate-type = ["cdylib"]
 
 [features]
-default = ["hybrid"]
+default = ["hybrid", "parley"]
+# The text backend: Parley (the default) or winkin. With both, Parley is used.
+parley = ["dioxus-native/parley"]
+winkin = ["dioxus-native/winkin"]
 vello = ["dioxus-native/vello"]
 hybrid = ["dioxus-native/vello-hybrid"]
 skia = ["dioxus-native/skia"]
diff --git a/examples/transparent/Cargo.toml b/examples/transparent/Cargo.toml
index d7b34abbeb..fc3395ee5f 100644
--- a/examples/transparent/Cargo.toml
+++ b/examples/transparent/Cargo.toml
@@ -6,7 +6,10 @@ license.workspace = true
 publish = false
 
 [features]
-default = ["hybrid"]
+default = ["hybrid", "parley"]
+# The text backend: Parley (the default) or winkin. With both, Parley is used.
+parley = ["dioxus-native/parley", "blitz-dom/parley", "blitz-paint/parley"]
+winkin = ["dioxus-native/winkin", "blitz-dom/winkin", "blitz-paint/winkin"]
 system-fonts = ["blitz-dom/system-fonts"]
 vello = ["dioxus-native/vello"]
 cpu = ["cpu-pixels"]
diff --git a/examples/wasm_hello/Cargo.toml b/examples/wasm_hello/Cargo.toml
index d556bf01c9..040c990bbf 100644
--- a/examples/wasm_hello/Cargo.toml
+++ b/examples/wasm_hello/Cargo.toml
@@ -10,7 +10,8 @@ crate-type = ["cdylib"]
 
 [dependencies]
 anyrender_vello_hybrid = { workspace = true, features = ["webgl"] }
-blitz-dom = { workspace = true, features = ["woff"] }
+# This example builds Parley's font context itself.
+blitz-dom = { workspace = true, features = ["woff", "parley"] }
 blitz-html = { workspace = true }
 blitz-shell = { workspace = true, default-features = false, features = ["tracing"]}
 
diff --git a/examples/wgpu_texture/Cargo.toml b/examples/wgpu_texture/Cargo.toml
index 7560c6d6cd..2cbbc4b96f 100644
--- a/examples/wgpu_texture/Cargo.toml
+++ b/examples/wgpu_texture/Cargo.toml
@@ -9,7 +9,10 @@ license = "MIT"
 publish = false
 
 [features]
-default = ["vello-hybrid"]
+default = ["vello-hybrid", "parley"]
+# The text backend: Parley (the default) or winkin. With both, Parley is used.
+parley = ["dioxus-native/parley", "blitz-dom/parley", "blitz-paint/parley", "blitz-html/parley", "blitz-shell/parley"]
+winkin = ["dioxus-native/winkin", "blitz-dom/winkin", "blitz-paint/winkin", "blitz-html/winkin", "blitz-shell/winkin"]
 vello = ["dep:anyrender_vello", "dioxus-native/vello"]
 vello-hybrid = ["dep:anyrender_vello_hybrid", "dioxus-native/vello-hybrid"]
 
diff --git a/justfile b/justfile
index 123fba584e..342d18eeff 100644
--- a/justfile
+++ b/justfile
@@ -21,6 +21,9 @@ wpt *ARGS:
 browser *ARGS:
   cargo run --release --package browser --features log-frame-times,log-phase-times {{ARGS}}
 
+browink *ARGS:
+  cargo run --release --package browser --no-default-features --features winkin,hybrid,cookies,cache,screenshot,apple-font-embolden,scrollbars,log-frame-times,log-phase-times {{ARGS}}
+
 browser-with-perf:
   cargo run --release --package browser --features log-frame-times,log-phase-times
 
diff --git a/packages/blitz-dom/Cargo.toml b/packages/blitz-dom/Cargo.toml
index a36fdfa3d7..966b611d01 100644
--- a/packages/blitz-dom/Cargo.toml
+++ b/packages/blitz-dom/Cargo.toml
@@ -18,17 +18,22 @@ default = [
     "system-fonts",
     "file-input",
     "custom-widget",
-    "text-transform-icu"
+    "text-transform-icu",
+    "parley",
 ]
+# The text backend that lays out, edits and reads back text: Parley or winkin.
+# One of them must be enabled; with both, Parley is used.
+parley = ["dep:parley"]
+winkin = ["dep:winkin", "dep:fontwich"]
 custom-widget = ["dep:anyrender", "accessibility"]
 tracing = ["dep:tracing"]
 svg = ["dep:usvg", "dep:svgtypes"]
 # WOFF decoding (using the "wuff" crate which is pure Rust)
 woff = ["dep:wuff"]
 accessibility = ["accesskit"]
-system-fonts = ["parley/system"]
+system-fonts = ["parley?/system", "fontwich?/system", "fontwich?/mmap"]
 # complex-scripts: enable dictionary-based line-breaking
-complex-scripts = ["parley/complex-scripts"]
+complex-scripts = ["parley?/complex-scripts", "winkin?/dictionaries"]
 # text-transform-icu: language-aware, Unicode-complete case mapping for `text-transform`
 # (otherwise falls back to the standard library's case mapping)
 text-transform-icu = ["dep:icu_casemap", "dep:writeable"]
@@ -69,7 +74,11 @@ anyrender = { workspace = true, optional = true }
 
 # Linebender/Fontations dependencies
 accesskit = { workspace = true, optional = true }
-parley = { workspace = true }
+parlance = { workspace = true }
+# blitz-paint casts Parley's glyph coordinates with bytemuck.
+parley = { workspace = true, optional = true, features = ["bytemuck"] }
+winkin = { workspace = true, optional = true }
+fontwich = { workspace = true, optional = true }
 skrifa = { workspace = true }
 linebender_resource_handle = { workspace = true }
 color = { workspace = true }
diff --git a/packages/blitz-dom/assets/default.css b/packages/blitz-dom/assets/default.css
index ad76a976be..0b96c202e5 100644
--- a/packages/blitz-dom/assets/default.css
+++ b/packages/blitz-dom/assets/default.css
@@ -17,8 +17,8 @@
  * spec's bidi rendering section rather than Gecko's internal pseudo-classes
  * (:-moz-dir-attr-rtl and friends), which this engine's selector parser
  * does not know: it dropped these rules, and the dir attribute did nothing.
- * dir=auto keeps its isolation but not the content-based direction, which
- * needs bidi analysis no selector can express.
+ * dir=auto takes its content-based direction from a presentational hint,
+ * which needs bidi analysis no selector can express.
  */
 
 [dir="ltr" i] {
@@ -59,6 +59,11 @@ input[type="hidden" i] {
     display: none !important;
 }
 
+/* Password fields draw a disc for each character, as Chrome's UA sheet has them. */
+input[type="password" i] {
+    -webkit-text-security: disc !important;
+}
+
 input[type="checkbox"] {
     width: 14px;
     height: 14px;
@@ -101,7 +106,8 @@ input[type="reset"],
 input[type="button"] {
     border: 1px solid #999;
     border-radius: 1px;
-    padding: 1px 6px;
+    padding-block: 1px;
+    padding-inline: 6px;
     color: black;
     background-color: #EFEFEF;
     text-align: center;
@@ -116,6 +122,55 @@ input[type="submit"],
 input[type="reset"],
 input[type="button"] {
     overflow: clip !important;
+    white-space: pre;
+}
+
+/* Form controls draw their platform look unless `appearance: none` asks for
+ * the look their CSS gives them, as Chrome's UA stylesheet sets it. */
+input,
+textarea,
+select,
+button,
+progress,
+meter {
+    appearance: auto;
+}
+
+input[type="file"] {
+    appearance: none;
+}
+
+/* A color well is 50px by 27px along the inline and block axes, as in Chrome. */
+input[type="color"] {
+    box-sizing: border-box;
+    inline-size: 50px;
+    block-size: 27px;
+    padding: 1px 2px;
+    background-color: #EFEFEF;
+}
+
+input[type="range"] {
+    border: none;
+    padding: 0;
+    margin: 2px;
+}
+
+/* https://html.spec.whatwg.org/#the-progress-element-2 and
+ * https://html.spec.whatwg.org/#the-meter-element-2, with Chrome's sizes */
+progress,
+meter {
+    display: inline-block;
+    box-sizing: border-box;
+    block-size: 1em;
+    vertical-align: -0.2em;
+}
+
+progress {
+    inline-size: 10em;
+}
+
+meter {
+    inline-size: 5em;
 }
 
 input[type="file"] {
@@ -147,6 +202,26 @@ option {
     display: none;
 }
 
+/* A list box shows its options, one to a row along its block axis, and
+ * scrolls through them: https://html.spec.whatwg.org/#the-select-element-2.
+ * Its block size is its display size in rows of 1.2em, a presentational
+ * hint. */
+select:is([multiple], [size]:not([size="0"], [size="1"])) {
+    display: inline-block;
+    overflow: auto;
+    border: 1px solid #767676;
+    border-radius: 2px;
+    background-color: white;
+    vertical-align: text-bottom;
+    white-space: nowrap;
+}
+
+select:is([multiple], [size]:not([size="0"], [size="1"])) option {
+    display: block;
+    padding-inline: 2px;
+    line-height: 1.2;
+}
+
 picture {
     display: contents;
 }
@@ -234,11 +309,28 @@ bdo:-moz-has-dir-attr {
     unicode-bidi: isolate-override;
 }
 
-textarea:-moz-dir-attr-like-auto,
-pre:-moz-dir-attr-like-auto {
+/* The rule above is dropped where `:-moz-has-dir-attr` does not parse, and
+   "bdo[dir]" outweighs the "[dir]" rules the way that selector did. */
+bdo,
+bdo[dir] {
+    unicode-bidi: isolate-override;
+}
+
+/* The HTML spec's form: `:-moz-dir-attr-like-auto` does not parse here. */
+textarea[dir="auto" i],
+pre[dir="auto" i] {
     unicode-bidi: plaintext;
 }
 
+/* CSS Text 4's default style sheet: no autospace in code. */
+pre,
+code,
+kbd,
+samp,
+tt {
+    text-autospace: no-autospace;
+}
+
 /* blocks */
 
 article,
@@ -1060,13 +1152,6 @@ rtc>rt {
     font-size: unset;
 }
 
-ruby,
-rb,
-rt,
-rtc {
-    unicode-bidi: isolate;
-}
-
 /* Shadow DOM v1
  * https://drafts.csswg.org/css-scoping/#slots-in-shadow-tree */
 slot {
diff --git a/packages/blitz-dom/build.rs b/packages/blitz-dom/build.rs
new file mode 100644
index 0000000000..8742182334
--- /dev/null
+++ b/packages/blitz-dom/build.rs
@@ -0,0 +1,12 @@
+//! Picks the text backend, as the `text_parley` or `text_winkin` cfg, which the
+//! code reads in place of the features. With both features, Parley is used.
+
+fn main() {
+    println!("cargo::rustc-check-cfg=cfg(text_parley)");
+    println!("cargo::rustc-check-cfg=cfg(text_winkin)");
+    if std::env::var_os("CARGO_FEATURE_PARLEY").is_some() {
+        println!("cargo::rustc-cfg=text_parley");
+    } else if std::env::var_os("CARGO_FEATURE_WINKIN").is_some() {
+        println!("cargo::rustc-cfg=text_winkin");
+    }
+}
diff --git a/packages/blitz-dom/src/accessibility.rs b/packages/blitz-dom/src/accessibility.rs
index 06ef05745e..a1795659b2 100644
--- a/packages/blitz-dom/src/accessibility.rs
+++ b/packages/blitz-dom/src/accessibility.rs
@@ -91,7 +91,7 @@ impl BlitzDomNode {
             .and_then(|s| s.get())
             .map(|s| {
                 s.styles.is_display_none()
-                    || s.styles.primary().clone_visibility()
+                    || s.styles.primary().slow_clone_visibility()
                         == visibility::computed_value::T::Hidden
             })
             .unwrap_or(false)
diff --git a/packages/blitz-dom/src/config.rs b/packages/blitz-dom/src/config.rs
index 4686b1285a..04dc6c50dd 100644
--- a/packages/blitz-dom/src/config.rs
+++ b/packages/blitz-dom/src/config.rs
@@ -1,10 +1,10 @@
+use crate::text::FontContext;
 use crate::{HtmlParserProvider, UserAgentStylesheet};
 use blitz_traits::{
     navigation::NavigationProvider,
     net::{AbortSignal, NetProvider},
     shell::{ShellProvider, Viewport},
 };
-use parley::FontContext;
 use std::sync::Arc;
 use style::media_queries::MediaType;
 
@@ -47,7 +47,10 @@ pub struct DocumentConfig {
     pub shell_provider: Option<Arc<dyn ShellProvider>>,
     /// HTML parser provider. Used to parse HTML for setInnerHTML
     pub html_parser_provider: Option<Arc<dyn HtmlParserProvider>>,
-    /// Parley `FontContext`
+    /// The fonts the document lays out text with. Defaults to the platform's fonts, where Blitz
+    /// is built to read them (`system-fonts`), and Blitz's bullet font. Clones share loaded
+    /// fonts, so hand a clone of one to every document rather than listing the platform's fonts
+    /// for each.
     pub font_ctx: Option<FontContext>,
     /// The CSS media type used to evaluate `@media` rules.
     /// Defaults to [`MediaType::screen`].
@@ -68,6 +71,14 @@ pub struct DocumentConfig {
     /// How deeply this document is nested within other documents
     /// (0 for a root document). Used to limit `<iframe>` nesting depth.
     pub subdocument_depth: usize,
+    /// How long a password field shows the character typed last in the clear before masking it,
+    /// as iOS and Android do. `None`, the default, masks it at once, as desktop browsers do.
+    ///
+    /// Only one typed grapheme is shown; pasted text and text an input method commits in more than
+    /// one grapheme stay masked. Any other edit, a move of the caret, a change of the value from
+    /// script and a change of focus mask it before its time. A shell wakes for the deadline that
+    /// [`BaseDocument::text_input_deadline`](crate::BaseDocument::text_input_deadline) gives.
+    pub reveal_typed_password_character: Option<web_time::Duration>,
 }
 
 impl Default for DocumentConfig {
@@ -86,6 +97,7 @@ impl Default for DocumentConfig {
             incremental: None,
             abort_signal: None,
             subdocument_depth: 0,
+            reveal_typed_password_character: None,
         }
     }
 }
diff --git a/packages/blitz-dom/src/debug.rs b/packages/blitz-dom/src/debug.rs
index b589b80ede..c032392288 100644
--- a/packages/blitz-dom/src/debug.rs
+++ b/packages/blitz-dom/src/debug.rs
@@ -1,8 +1,8 @@
 use blitz_traits::node_id::NodeId;
-use parley::layout::PositionedLayoutItem;
 
 use crate::BaseDocument;
 use crate::layout::TaffyDebugTree;
+use crate::text::InlineText as _;
 
 impl BaseDocument {
     pub fn print_taffy_tree(&self) {
@@ -42,48 +42,7 @@ impl BaseDocument {
                 .as_ref()
                 .unwrap();
 
-            println!(
-                "Size: {}x{}",
-                inline_layout.layout.width(),
-                inline_layout.layout.height()
-            );
-            println!("Text content: {:?}", inline_layout.text);
-            println!("Inline Boxes:");
-            for ibox in inline_layout.layout.inline_boxes() {
-                print!("(id: {}) ", ibox.id);
-            }
-            println!();
-            println!("Lines:");
-            for (i, line) in inline_layout.layout.lines().enumerate() {
-                let metrics = line.metrics();
-                let x = metrics.inline_min_coord;
-                let y = metrics.block_min_coord;
-                let w = metrics.inline_max_coord - metrics.inline_min_coord;
-                let h = metrics.block_max_coord - metrics.block_min_coord;
-                println!("Line {i}: x:{x} y:{y} width:{w} height:{h}");
-                for item in line.items() {
-                    print!("  ");
-                    match item {
-                        PositionedLayoutItem::GlyphRun(run) => {
-                            print!(
-                                "RUN (x: {}, w: {}) ",
-                                run.offset().round(),
-                                run.run().advance()
-                            )
-                        }
-                        PositionedLayoutItem::InlineBox(ibox) => print!(
-                            "BOX {:?} (id: {} x: {} y: {} w: {}, h: {})",
-                            ibox.kind,
-                            ibox.id,
-                            ibox.x.round(),
-                            ibox.y.round(),
-                            ibox.width.round(),
-                            ibox.height.round()
-                        ),
-                    }
-                    println!();
-                }
-            }
+            inline_layout.debug_print();
         }
 
         let layout = node.final_layout();
diff --git a/packages/blitz-dom/src/document.rs b/packages/blitz-dom/src/document.rs
index 96d7ed070e..313e45fdee 100644
--- a/packages/blitz-dom/src/document.rs
+++ b/packages/blitz-dom/src/document.rs
@@ -6,11 +6,15 @@ use crate::mutator::ViewportMut;
 use crate::net::{
     Resource, ResourceHandler, ResourceLoadResponse, StylesheetHandler, StylesheetLoader,
 };
-use crate::node::{ImageData, NodeFlags, RasterImageData, SpecialElementData, Status, TextBrush};
+use crate::node::{ImageData, NodeFlags, RasterImageData, SpecialElementData, Status};
 use crate::scrolling::ScrollAnimationState;
 use crate::selection::TextSelection;
 use crate::stylo_device::{DeviceChanges, make_device};
 use crate::stylo_to_cursor_icon::stylo_to_cursor_icon;
+use crate::text::{
+    DocumentText as _, Edit, EditEngine as _, EditableText as _, InlineText as _, TextContext,
+    TextInputDriver,
+};
 use crate::traversal::TreeTraverser;
 use crate::url::DocumentUrl;
 use crate::util::ImageType;
@@ -26,9 +30,7 @@ use blitz_traits::net::{AbortSignal, DummyNetProvider, NetProvider, Request};
 use blitz_traits::node_id::NodeId;
 use blitz_traits::shell::{DummyShellProvider, ShellProvider, Viewport};
 use cursor_icon::CursorIcon;
-use linebender_resource_handle::Blob;
 use markup5ever::{LocalName, local_name};
-use parley::{FontContext, PlainEditorDriver};
 use selectors::{Element, matching::QuirksMode};
 use smallvec::SmallVec;
 use std::any::Any;
@@ -39,7 +41,7 @@ use std::rc::Rc;
 use std::str::FromStr;
 use std::sync::atomic::{AtomicUsize, Ordering};
 use std::sync::mpsc::{Receiver, Sender, channel};
-use std::sync::{Arc, LazyLock, Mutex, MutexGuard, OnceLock, RwLockReadGuard, RwLockWriteGuard};
+use std::sync::{Arc, LazyLock, MutexGuard, OnceLock, RwLockReadGuard, RwLockWriteGuard};
 use std::task::{Context as TaskContext, Waker};
 use style::Atom;
 use style::animation::DocumentAnimationSet;
@@ -69,9 +71,6 @@ use thin_vec::ThinVec;
 use url::Url;
 use web_time::Instant;
 
-#[cfg(feature = "parallel-construct")]
-use thread_local::ThreadLocal;
-
 /// A user-agent stylesheet, parsed with a read-only lock so that it can be shared between documents.
 ///
 /// Documents with the same user-agent stylesheets (in the same order) also share Stylo's
@@ -79,8 +78,27 @@ use thread_local::ThreadLocal;
 #[derive(Clone, Debug, PartialEq)]
 pub struct UserAgentStylesheet(DocumentStyleSheet);
 
+/// Turns on the Stylo features Blitz supports. A property behind a pref that is off is dropped
+/// when a stylesheet is parsed, so this runs before any sheet is: a user-agent sheet may be
+/// parsed (for a `DocumentConfig`) before the first document is created.
+fn enable_stylo_prefs() {
+    style_config::set_pref!("layout.flexbox.balance", true);
+    style_config::set_pref!("layout.unimplemented", true);
+    style_config::set_pref!("layout.columns.enabled", true);
+    style_config::set_pref!("layout.css.basic-shape-shape.enabled", true);
+    style_config::set_pref!("layout.css.tree-counting-functions.enabled", true);
+    style_config::set_pref!("layout.css.progress-function.enabled", true);
+    style_config::set_pref!("layout.variable_fonts.enabled", true);
+    // The `writing-mode` feature lays out vertical boxes and winkin
+    // vertical lines; without either the property stays unparsed.
+    #[cfg(any(feature = "writing-mode", text_winkin))]
+    style_config::set_pref!("layout.writing-mode.enabled", true);
+    style_config::set_pref!("layout.threads", -1);
+}
+
 impl UserAgentStylesheet {
     pub fn parse(css: &str) -> Self {
+        enable_stylo_prefs();
         let lock = SharedRwLock::read_only();
         let data = Stylesheet::from_str(
             css,
@@ -275,14 +293,8 @@ pub struct BaseDocument {
     /// Stylo invalidation map. We insert into this map prior to mutating nodes.
     pub(crate) snapshots: SnapshotMap,
 
-    // Parley contexts
-    /// A Parley font context
-    pub(crate) font_ctx: Arc<Mutex<parley::FontContext>>,
-    #[cfg(feature = "parallel-construct")]
-    /// Thread-and-document-local copies to the font context
-    pub(crate) thread_font_contexts: ThreadLocal<RefCell<Box<FontContext>>>,
-    /// A Parley layout context
-    pub(crate) layout_ctx: parley::LayoutContext<TextBrush>,
+    /// The document's fonts, and the contexts the text backend lays out text in
+    pub(crate) text: TextContext,
 
     /// The real (non-anonymous) node which is currently hovered (if any).
     /// This is never a layout-generated (anonymous) node, so it remains valid
@@ -315,6 +327,13 @@ pub struct BaseDocument {
     /// When each scroll container's overlay scrollbars were last shown
     /// (scrolled, or the pointer left the thumb); drives their fade-out
     pub(crate) scrollbar_activity: HashMap<NodeId, Instant>,
+    /// How long a password field shows the character typed last in the clear
+    /// ([`DocumentConfig::reveal_typed_password_character`]).
+    pub(crate) reveal_typed_password: Option<web_time::Duration>,
+    /// The password field showing a character in the clear, and when it masks it.
+    pub(crate) password_reveal: Option<(NodeId, Instant)>,
+    /// When a password field in a subdocument next masks the character it shows in the clear.
+    pub(crate) subdoc_text_input_deadline: Option<Instant>,
     /// Whether and what kind of scroll animation is currently in progress
     pub(crate) scroll_animation: ScrollAnimationState,
 
@@ -399,48 +418,14 @@ impl BaseDocument {
 
         let id = ID_GENERATOR.fetch_add(1, Ordering::SeqCst);
 
-        let font_ctx = config
-            .font_ctx
-            .map(|mut font_ctx| {
-                font_ctx.source_cache.make_shared();
-                // font_ctx.collection.make_shared();
-                font_ctx
-            })
-            .unwrap_or_else(|| {
-                use parley::fontique::{Collection, CollectionOptions, SourceCache};
-                let mut font_ctx = FontContext {
-                    source_cache: SourceCache::new_shared(),
-                    collection: Collection::new(CollectionOptions {
-                        shared: false,
-                        system_fonts: cfg!(all(
-                            feature = "system-fonts",
-                            not(target_arch = "wasm32")
-                        )),
-                    }),
-                };
-                font_ctx
-                    .collection
-                    .register_fonts(Blob::new(Arc::new(crate::BULLET_FONT) as _), None);
-                font_ctx
-            });
-        let font_ctx = Arc::new(Mutex::new(font_ctx));
+        let text = TextContext::new(config.font_ctx);
 
         // Make sure we turn on stylo features *before* creating the Stylist
-        style_config::set_pref!("layout.grid.enabled", true);
-        style_config::set_pref!("layout.flexbox.balance", true);
-        style_config::set_pref!("layout.unimplemented", true);
-        style_config::set_pref!("layout.columns.enabled", true);
-        style_config::set_pref!("layout.css.basic-shape-shape.enabled", true);
-        style_config::set_pref!("layout.css.tree-counting-functions.enabled", true);
-        style_config::set_pref!("layout.css.progress-function.enabled", true);
-        style_config::set_pref!("layout.variable_fonts.enabled", true);
-        #[cfg(feature = "writing-mode")]
-        style_config::set_pref!("layout.writing-mode.enabled", true);
-        style_config::set_pref!("layout.threads", -1);
+        enable_stylo_prefs();
 
         let viewport = config.viewport.unwrap_or_default();
         let media_type = config.media_type.unwrap_or_else(MediaType::screen);
-        let device = make_device(&viewport, media_type.clone(), font_ctx.clone());
+        let device = make_device(&viewport, media_type.clone(), text.font_metrics_provider());
         let stylist = Stylist::new(device, QuirksMode::NoQuirks);
         let snapshots = SnapshotMap::new();
         let nodes = Box::new(NodeTree::new());
@@ -489,10 +474,7 @@ impl BaseDocument {
             url: base_url,
             nodes_to_stylesheet: BTreeMap::new(),
             stylesheet_generation: 0,
-            font_ctx,
-            #[cfg(feature = "parallel-construct")]
-            thread_font_contexts: ThreadLocal::new(),
-            layout_ctx: parley::LayoutContext::new(),
+            text,
 
             hover_node_id: None,
             hover_hit_node_id: None,
@@ -530,6 +512,9 @@ impl BaseDocument {
             drag_mode: DragMode::None,
             hovered_scrollbar: None,
             scrollbar_activity: HashMap::new(),
+            reveal_typed_password: config.reveal_typed_password_character,
+            password_reveal: None,
+            subdoc_text_input_deadline: None,
             scroll_animation: ScrollAnimationState::None,
             text_selection: TextSelection::default(),
         };
@@ -1349,40 +1334,7 @@ impl BaseDocument {
                 self.apply_iframe_html(node_id, res.request_id, res.resolved_url, &html);
             }
             Resource::Font(bytes, overrides) => {
-                let font = Blob::new(Arc::new(bytes));
-
-                // Build a `FontInfoOverride` from the `@font-face` descriptors
-                // captured during stylesheet parsing. Without this, parley
-                // reads the family name from the TTF's own metadata, which
-                // means CSS `font-family: 'Avenir Book'` won't match a font
-                // file that internally identifies as `Avenir 45 Book`.
-                let weight_override = overrides.weight.map(parley::fontique::FontWeight::new);
-                let info_override = parley::fontique::FontInfoOverride {
-                    family_name: overrides.family_name.as_deref(),
-                    weight: weight_override,
-                    style: overrides.style,
-                    ..Default::default()
-                };
-
-                // TODO: Investigate eliminating double-box
-                let mut global_font_ctx = self.font_ctx.lock().unwrap();
-                global_font_ctx
-                    .collection
-                    .register_fonts(font.clone(), Some(info_override));
-
-                #[cfg(feature = "parallel-construct")]
-                {
-                    rayon::broadcast(|_ctx| {
-                        let mut font_ctx = self
-                            .thread_font_contexts
-                            .get_or(|| RefCell::new(Box::new(global_font_ctx.clone())))
-                            .borrow_mut();
-                        font_ctx
-                            .collection
-                            .register_fonts(font.clone(), Some(info_override));
-                    });
-                }
-                drop(global_font_ctx);
+                self.text.add_web_font(bytes, &overrides);
 
                 // TODO: see if we can only invalidate if resolved fonts may have changed
                 self.invalidate_inline_contexts();
@@ -1685,6 +1637,7 @@ impl BaseDocument {
 
     /// Clear the focussed node
     pub fn clear_focus(&mut self) {
+        self.conceal_password();
         if let Some(id) = self.focus_node_id {
             let shell_provider = self.shell_provider.clone();
             self.snapshot_node_and(id, ElementState::FOCUS | ElementState::FOCUSRING, |node| {
@@ -1711,6 +1664,7 @@ impl BaseDocument {
         let shell_provider = self.shell_provider.clone();
 
         // Remove focus from the old node
+        self.conceal_password();
         if let Some(id) = self.focus_node_id {
             self.snapshot_node_and(id, ElementState::FOCUS | ElementState::FOCUSRING, |node| {
                 node.blur(shell_provider.clone())
@@ -2061,6 +2015,62 @@ impl BaseDocument {
             .and_then(|el| el.sub_doc_data_mut())
     }
 
+    /// Returns when a password field next masks the character it shows in the clear
+    /// ([`DocumentConfig::reveal_typed_password_character`]), for a shell to wake and redraw at.
+    /// Redrawing runs [`expire_text_input_timers`](Self::expire_text_input_timers).
+    pub fn text_input_deadline(&self) -> Option<Instant> {
+        let own = self.password_reveal.map(|(_, deadline)| deadline);
+        match (own, self.subdoc_text_input_deadline) {
+            (Some(own), Some(subdoc)) => Some(own.min(subdoc)),
+            (own, subdoc) => own.or(subdoc),
+        }
+    }
+
+    /// Masks the character a password field shows in the clear where its time is up at `now`,
+    /// and returns whether it did.
+    pub fn expire_text_input_timers(&mut self, now: Instant) -> bool {
+        let expired = self
+            .password_reveal
+            .is_some_and(|(_, deadline)| deadline <= now);
+        if expired {
+            self.conceal_password();
+        }
+        expired
+    }
+
+    /// Records when the password field `node_id` masks the character it shows in the clear, after
+    /// an edit at `now`: none where it shows none.
+    pub(crate) fn note_password_reveal(&mut self, node_id: NodeId, now: Instant) {
+        let revealed = self
+            .get_node(node_id)
+            .and_then(|node| node.element_data())
+            .and_then(|element| element.text_input_data())
+            .is_some_and(|input| input.editor.revealed_range().is_some());
+        self.password_reveal = self
+            .reveal_typed_password
+            .filter(|_| revealed)
+            .map(|duration| (node_id, now + duration));
+    }
+
+    /// Masks the character a password field shows in the clear, where one does.
+    pub(crate) fn conceal_password(&mut self) {
+        let Some((node_id, _)) = self.password_reveal.take() else {
+            return;
+        };
+        let Some(input) = self
+            .nodes
+            .get_mut(node_id)
+            .and_then(|node| node.element_data_mut())
+            .and_then(|element| element.text_input_data_mut())
+        else {
+            return;
+        };
+        if input.editor.revealed_range().is_some() {
+            input.editor.edit(&mut self.text, Edit::Conceal);
+            self.shell_provider.request_redraw();
+        }
+    }
+
     pub fn is_animating(&self) -> bool {
         #[cfg(feature = "custom-widget")]
         let custom_widget_is_animating = self.custom_widget_nodes.iter().any(|&node_id| {
@@ -2101,7 +2111,7 @@ impl BaseDocument {
         self.set_stylist_device(make_device(
             &self.viewport,
             self.media_type.clone(),
-            self.font_ctx.clone(),
+            self.text.font_metrics_provider(),
         ));
         self.scroll_viewport_by(0.0, 0.0); // Clamp scroll offset
 
@@ -2135,7 +2145,7 @@ impl BaseDocument {
             device.set_root_style(root_style);
 
             let font = root_style.get_font();
-            let font_size = font.clone_font_size().computed_size();
+            let font_size = font.slow_clone_font_size().computed_size();
             device.set_root_font_size(root_style.effective_zoom.unzoom(font_size.px()));
 
             let line_height = device
@@ -2207,8 +2217,8 @@ impl BaseDocument {
         }
 
         let style = node.primary_styles()?;
-        let user_select = style.clone_user_select();
-        let keyword = style.clone_cursor().keyword;
+        let user_select = style.slow_clone_user_select();
+        let keyword = style.slow_clone_cursor().keyword;
 
         // Return cursor from style if it is non-auto
         if keyword != CursorKind::Auto {
@@ -2446,11 +2456,8 @@ impl BaseDocument {
         self.find_element_by_tag_name(&local_name!("title"))
     }
 
-    pub fn with_text_input(
-        &mut self,
-        node_id: NodeId,
-        cb: impl FnOnce(PlainEditorDriver<TextBrush>),
-    ) {
+    /// Calls `cb` with the editor of the text input at `node_id`, if it is one.
+    pub fn with_text_input(&mut self, node_id: NodeId, cb: impl FnOnce(TextInputDriver<'_>)) {
         let Some(node) = self.nodes.get_mut(node_id) else {
             return;
         };
@@ -2459,10 +2466,10 @@ impl BaseDocument {
             .element_data_mut()
             .and_then(|el| el.text_input_data_mut())
         {
-            let mut font_ctx = self.font_ctx.lock().unwrap();
-            let layout_ctx = &mut self.layout_ctx;
-            let driver = text_input.editor.driver(&mut font_ctx, layout_ctx);
-            cb(driver)
+            cb(TextInputDriver {
+                editor: &mut text_input.editor,
+                cx: &mut self.text,
+            })
         }
     }
 
@@ -2641,14 +2648,14 @@ impl BaseDocument {
             let element_data = node.element_data()?;
             let inline_layout = element_data.inline_layout_data.as_ref()?;
 
-            if *end > inline_layout.text.len() {
+            let mut pieces = inline_layout.selected_text(*start, *end).peekable();
+            if pieces.peek().is_none() {
                 continue;
             }
-
             if !result.is_empty() {
                 result.push(' ');
             }
-            result.push_str(&inline_layout.text[*start..*end]);
+            result.extend(pieces);
         }
 
         if result.is_empty() {
@@ -2744,7 +2751,7 @@ impl BaseDocument {
                 continue;
             };
 
-            let text_len = inline_layout.text.len();
+            let text_len = inline_layout.text_len();
 
             if node_id == first_node && node_id == last_node {
                 let start = first_offset.min(last_offset);
@@ -2992,7 +2999,7 @@ mod hover_invalidation_tests {
     fn text_color(doc: &BaseDocument, id: NodeId) -> String {
         format!(
             "{:?}",
-            doc.nodes[id].primary_styles().unwrap().clone_color()
+            doc.nodes[id].primary_styles().unwrap().slow_clone_color()
         )
     }
 
@@ -3302,76 +3309,3 @@ mod hover_invalidation_tests {
         );
     }
 }
-
-#[cfg(test)]
-mod font_face_override_tests {
-    use super::*;
-    use crate::net::{FontFaceOverrides, Resource, ResourceLoadResponse};
-
-    /// Regression-pin for the `@font-face` descriptor-honouring fix.
-    ///
-    /// The bug was that `Resource::Font` carried only the raw font bytes,
-    /// so `load_resource` registered fonts with `info_override = None` and
-    /// parley fell back to the TTF's internal `name` table. After the fix,
-    /// `Resource::Font` carries `FontFaceOverrides` and `load_resource`
-    /// builds a `FontInfoOverride` from them — meaning a CSS-declared
-    /// `font-family` alias wins over the file's own metadata.
-    ///
-    /// We drive `load_resource` directly with a fabricated response rather
-    /// than go through HTML parsing → `fetch_font_face`, because the
-    /// downstream HTML parser lives in `blitz-html` (would be a circular
-    /// crate dependency). The mapping from `@font-face` descriptors into
-    /// `FontFaceOverrides` is covered by the unit tests in `net.rs`; this
-    /// test pins the load-side of the pipeline.
-    #[test]
-    fn font_face_overrides_alias_family_name() {
-        const ALIAS: &str = "AliasedFamily";
-
-        let mut document = BaseDocument::new(DocumentConfig::default());
-
-        // Sanity: the alias name is not registered before we feed the font.
-        {
-            let mut ctx = document.font_ctx.lock().unwrap();
-            assert!(
-                ctx.collection.family_id(ALIAS).is_none(),
-                "alias must not exist before registration",
-            );
-        }
-
-        // Drive `load_resource` with a `Resource::Font` whose overrides
-        // assert the CSS-side family name. We use the bullet font as a
-        // valid font payload — its internal `name` table is irrelevant to
-        // the assertion; what matters is whether the override wins.
-        let response = ResourceLoadResponse {
-            request_id: 0,
-            node_id: None,
-            resolved_url: Some(String::from("test://aliased-family")),
-            result: Ok(Resource::Font(
-                blitz_traits::net::Bytes::from_static(crate::BULLET_FONT),
-                FontFaceOverrides {
-                    family_name: Some(String::from(ALIAS)),
-                    weight: Some(800.0),
-                    style: Some(parley::fontique::FontStyle::Italic),
-                },
-            )),
-        };
-        document.load_resource(response);
-
-        // The override must have taken effect: parley's `Collection` now
-        // resolves the CSS-declared alias to a registered family.
-        let mut ctx = document.font_ctx.lock().unwrap();
-        let family_id = ctx
-            .collection
-            .family_id(ALIAS)
-            .expect("CSS-declared family name should be registered as a family alias");
-        let resolved_name = ctx
-            .collection
-            .family_name(family_id)
-            .expect("family id should resolve back to a name");
-        assert_eq!(
-            resolved_name, ALIAS,
-            "registered family should report the CSS-declared name, \
-             not the font file's internal `name` table entry",
-        );
-    }
-}
diff --git a/packages/blitz-dom/src/events/ime.rs b/packages/blitz-dom/src/events/ime.rs
index 6338a2793d..81a1489122 100644
--- a/packages/blitz-dom/src/events/ime.rs
+++ b/packages/blitz-dom/src/events/ime.rs
@@ -8,19 +8,17 @@ pub(crate) fn handle_ime_event<F: FnMut(DomEvent)>(
     dispatch_event: F,
 ) {
     if let Some(node_id) = doc.focus_node_id {
+        let reveals = doc.reveal_typed_password.is_some();
         let node = &mut doc.nodes[node_id];
         let text_input_data = node
             .data
             .downcast_element_mut()
             .and_then(|el| el.text_input_data_mut());
         if let Some(input_data) = text_input_data {
-            let generated_event = input_data.apply_ime_event(
-                &mut doc.font_ctx.lock().unwrap(),
-                &mut doc.layout_ctx,
-                event,
-            );
+            let generated_event = input_data.apply_ime_event(&mut doc.text, event, reveals);
 
             if let Some(generated_event) = generated_event {
+                doc.note_password_reveal(node_id, web_time::Instant::now());
                 doc.apply_generated_text_input_event(node_id, generated_event, dispatch_event);
             }
 
diff --git a/packages/blitz-dom/src/events/keyboard.rs b/packages/blitz-dom/src/events/keyboard.rs
index 3ea83557f3..22dc835565 100644
--- a/packages/blitz-dom/src/events/keyboard.rs
+++ b/packages/blitz-dom/src/events/keyboard.rs
@@ -1,5 +1,7 @@
 use crate::events::focus::generate_focus_events;
-use crate::{BaseDocument, node::GeneratedTextInputEvent, util::ACTION_MOD};
+use crate::{
+    BaseDocument, node::GeneratedTextInputEvent, text::EditableText as _, util::ACTION_MOD,
+};
 use blitz_traits::node_id::NodeId;
 use blitz_traits::{
     SmolStr,
@@ -70,6 +72,7 @@ pub(crate) fn handle_key_or_input_event<F: FnMut(DomEvent)>(
             return;
         }
 
+        let reveals = doc.reveal_typed_password.is_some();
         let node = &mut doc.nodes[node_id];
         let Some(element_data) = node.element_data_mut() else {
             return;
@@ -79,21 +82,17 @@ pub(crate) fn handle_key_or_input_event<F: FnMut(DomEvent)>(
             let generated_event = match event {
                 KeyboardOrTextInputEvent::KeyPress(blitz_key_event) => input_data
                     .apply_keypress_event(
-                        &mut doc.font_ctx.lock().unwrap(),
-                        &mut doc.layout_ctx,
+                        &mut doc.text,
                         &*doc.shell_provider,
                         blitz_key_event,
+                        reveals,
                     ),
                 KeyboardOrTextInputEvent::AppleStandardKeyBinding(command) => input_data
-                    .apply_apple_standard_keybinding(
-                        &mut doc.font_ctx.lock().unwrap(),
-                        &mut doc.layout_ctx,
-                        &*doc.shell_provider,
-                        &command,
-                    ),
+                    .apply_apple_standard_keybinding(&mut doc.text, &*doc.shell_provider, &command),
             };
 
             if let Some(generated_event) = generated_event {
+                doc.note_password_reveal(node_id, web_time::Instant::now());
                 doc.apply_generated_text_input_event(node_id, generated_event, dispatch_event);
             }
         }
diff --git a/packages/blitz-dom/src/events/pointer.rs b/packages/blitz-dom/src/events/pointer.rs
index 4eca266589..42084119e3 100644
--- a/packages/blitz-dom/src/events/pointer.rs
+++ b/packages/blitz-dom/src/events/pointer.rs
@@ -20,6 +20,7 @@ use crate::{
     BaseDocument,
     node::{ScrollbarRef, SpecialElementData},
     scrolling::{FlingState, ScrollAnimationState},
+    text::{Edit, EditEngine as _, EditableText as _},
 };
 
 use super::focus::generate_focus_events;
@@ -178,7 +179,7 @@ fn touch_action_pan_axes(doc: &BaseDocument, node_id: NodeId) -> (bool, bool) {
     while let Some(id) = current {
         let node = &doc.nodes[id];
         if let Some(style) = node.primary_styles() {
-            let touch_action = style.clone_touch_action();
+            let touch_action = style.slow_clone_touch_action();
             if !done_x {
                 allow_x &= touch_action.intersects(pan_x_flags);
             }
@@ -186,10 +187,14 @@ fn touch_action_pan_axes(doc: &BaseDocument, node_id: NodeId) -> (bool, bool) {
                 allow_y &= touch_action.intersects(pan_y_flags);
             }
 
-            let scrolls_x = matches!(style.clone_overflow_x(), Overflow::Scroll | Overflow::Auto)
-                && node.final_layout().scroll_width() > 0.0;
-            let scrolls_y = matches!(style.clone_overflow_y(), Overflow::Scroll | Overflow::Auto)
-                && node.final_layout().scroll_height() > 0.0;
+            let scrolls_x = matches!(
+                style.slow_clone_overflow_x(),
+                Overflow::Scroll | Overflow::Auto
+            ) && node.final_layout().scroll_width() > 0.0;
+            let scrolls_y = matches!(
+                style.slow_clone_overflow_y(),
+                Overflow::Scroll | Overflow::Auto
+            ) && node.final_layout().scroll_height() > 0.0;
             done_x |= scrolls_x;
             done_y |= scrolls_y;
 
@@ -225,14 +230,14 @@ pub(crate) fn handle_pointermove<F: FnMut(DomEvent)>(
                     if let Some(mousedown_node_id) = doc.mousedown_node_id {
                         let node = &doc.nodes[mousedown_node_id];
                         if let Some(style) = node.primary_styles() {
-                            let user_select = style.clone_user_select();
+                            let user_select = style.slow_clone_user_select();
                             if user_select == UserSelect::None {
                                 // Do nothing. Continue with rest of function
                             } else if user_select == UserSelect::Auto {
                                 if let Some(parent) = node.parent {
                                     let node = &doc.nodes[parent];
                                     if let Some(style) = node.primary_styles() {
-                                        let user_select = style.clone_user_select();
+                                        let user_select = style.slow_clone_user_select();
                                         if user_select == UserSelect::None {
                                             // Do nothing. Continue with rest of function
                                         } else {
@@ -338,17 +343,19 @@ pub(crate) fn handle_pointermove<F: FnMut(DomEvent)>(
             return changed;
         }
 
+        text_input_data.editor.refresh(&mut doc.text);
         let mut content_box_offset = taffy::Point {
             x: final_layout.padding.left + final_layout.border.left,
             y: final_layout.padding.top + final_layout.border.top,
         };
         if !text_input_data.is_multiline {
-            let layout = text_input_data.editor.try_layout().unwrap();
-            let content_box_height = final_layout.content_box_height();
-            let input_height = layout.height() / layout.scale();
-            let y_offset = ((content_box_height - input_height) / 2.0).max(0.0);
+            if let Some(metrics) = text_input_data.editor.metrics() {
+                let content_box_height = final_layout.content_box_height();
+                let input_height = metrics.size.height as f32 / metrics.scale;
+                let y_offset = ((content_box_height - input_height) / 2.0).max(0.0);
 
-            content_box_offset.y += y_offset;
+                content_box_offset.y += y_offset;
+            }
         }
 
         // Account for the input's scroll offset (stored in CSS pixels, scaled here to device
@@ -363,10 +370,10 @@ pub(crate) fn handle_pointermove<F: FnMut(DomEvent)>(
         let x = (hit.x - content_box_offset.x) as f64 * doc.viewport.scale_f64() + scroll_x;
         let y = (hit.y - content_box_offset.y) as f64 * doc.viewport.scale_f64() + scroll_y;
 
-        text_input_data
-            .editor
-            .driver(&mut doc.font_ctx.lock().unwrap(), &mut doc.layout_ctx)
-            .extend_selection_to_point(x as f32, y as f32);
+        text_input_data.editor.edit(
+            &mut doc.text,
+            Edit::ExtendSelectionToPoint(x as f32, y as f32),
+        );
 
         changed = true;
     } else if event.is_mouse()
@@ -462,11 +469,12 @@ pub(crate) fn handle_pointerdown(
                         y: node.final_layout().padding.top + node.final_layout().border.top,
                     };
                     if !text_input_data.is_multiline {
-                        let layout = text_input_data.editor.try_layout().unwrap();
-                        let content_box_height = node.final_layout().content_box_height();
-                        let input_height = layout.height() / layout.scale();
-                        let y_offset = ((content_box_height - input_height) / 2.0).max(0.0);
-                        content_box_offset.y += y_offset;
+                        if let Some(metrics) = text_input_data.editor.metrics() {
+                            let content_box_height = node.final_layout().content_box_height();
+                            let input_height = metrics.size.height as f32 / metrics.scale;
+                            let y_offset = ((content_box_height - input_height) / 2.0).max(0.0);
+                            content_box_offset.y += y_offset;
+                        }
                     }
                     // `scroll_offset` is stored in CSS pixels; scale it to device pixels to
                     // match the editor's coordinate space.
@@ -521,24 +529,20 @@ pub(crate) fn handle_pointerdown(
             let node = &mut doc.nodes[actual_target];
             let el = node.data.downcast_element_mut().unwrap();
             if let SpecialElementData::TextInput(ref mut text_input_data) = el.special_data {
-                let mut font_ctx = doc.font_ctx.lock().unwrap();
-                let mut driver = text_input_data
-                    .editor
-                    .driver(&mut font_ctx, &mut doc.layout_ctx);
-
-                match click_count {
+                let (tx, ty) = (tx as f32, ty as f32);
+                let edit = match click_count {
                     1 => {
                         if mods.shift() {
-                            driver.shift_click_extension(tx as f32, ty as f32);
+                            Edit::ShiftClickExtension(tx, ty)
                         } else {
-                            driver.move_to_point(tx as f32, ty as f32);
+                            Edit::MoveToPoint(tx, ty)
                         }
                     }
-                    2 => driver.select_word_at_point(tx as f32, ty as f32),
-                    _ => driver.select_hard_line_at_point(tx as f32, ty as f32),
-                }
-
-                drop(font_ctx);
+                    2 => Edit::SelectWordAtPoint(tx, ty),
+                    _ => Edit::SelectHardLineAtPoint(tx, ty),
+                };
+                let edit = text_input_data.edit(edit);
+                text_input_data.editor.edit(&mut doc.text, edit);
             }
 
             generate_focus_events(
diff --git a/packages/blitz-dom/src/font_metrics.rs b/packages/blitz-dom/src/font_metrics.rs
deleted file mode 100644
index 5273cdfafc..0000000000
--- a/packages/blitz-dom/src/font_metrics.rs
+++ /dev/null
@@ -1,177 +0,0 @@
-use std::sync::{Arc, Mutex};
-
-use crate::stylo_to_parley;
-use app_units::Au;
-use parley::{FontContext, FontVariation};
-use skrifa::MetadataProvider as _;
-use skrifa::charmap::Charmap;
-use style::properties::style_structs::Font as FontStyles;
-use style::{
-    device::servo::FontMetricsProvider,
-    font_metrics::FontMetrics,
-    values::computed::{CSSPixelLength, font::QueryFontMetricsFlags},
-};
-
-/// Query fontique for the fonts matching `font_styles` (family list and attributes).
-fn query_for_font_styles<'a>(
-    font_ctx: &'a mut FontContext,
-    font_styles: &'a FontStyles,
-) -> parley::fontique::Query<'a> {
-    use parley::fontique::Attributes;
-
-    let mut query = font_ctx.collection.query(&mut font_ctx.source_cache);
-    let families = font_styles
-        .font_family
-        .families
-        .iter()
-        .map(stylo_to_parley::query_font_family);
-    query.set_families(families);
-    query.set_attributes(Attributes {
-        width: stylo_to_parley::font_width(font_styles.font_width),
-        weight: stylo_to_parley::font_weight(font_styles.font_weight),
-        style: stylo_to_parley::font_style(font_styles.font_style),
-    });
-    query
-}
-
-#[derive(Clone)]
-pub(crate) struct BlitzFontMetricsProvider {
-    pub(crate) font_ctx: Arc<Mutex<FontContext>>,
-}
-
-impl core::fmt::Debug for BlitzFontMetricsProvider {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        write!(f, "BlitzFontMetricsProvider")
-    }
-}
-
-impl FontMetricsProvider for BlitzFontMetricsProvider {
-    fn query_font_metrics(
-        &self,
-        _vertical: bool,
-        font_styles: &FontStyles,
-        font_size: CSSPixelLength,
-        _flags: QueryFontMetricsFlags,
-    ) -> FontMetrics {
-        use parley::fontique::{Query, QueryFont, QueryStatus};
-        use skrifa::instance::{LocationRef, Size};
-        use skrifa::metrics::{GlyphMetrics, Metrics};
-
-        // Lock font_ctx. Explicit reborrow required for borrow checker.
-        let mut font_ctx = self.font_ctx.lock().unwrap();
-        let font_ctx = &mut *font_ctx;
-
-        // Query fontique for the font that matches the font styles
-        let mut query = query_for_font_styles(font_ctx, font_styles);
-        // let fb_script = crate::swash_convert::script_to_fontique(script);
-        // let fb_language = locale.and_then(crate::swash_convert::locale_to_fontique);
-        // query.set_fallbacks(fontique::FallbackKey::new(fb_script, fb_language.as_ref()));
-
-        let variations = stylo_to_parley::font_variations(&font_styles.font_variation_settings);
-        // let features = self.rcx.features(style.font_features).unwrap_or(&[]);
-
-        // fn name_of(font_ref: &skrifa::FontRef) -> String {
-        //     use skrifa::string::StringId;
-        //     font_ref
-        //         .localized_strings(StringId::POSTSCRIPT_NAME)
-        //         .english_or_first()
-        //         .unwrap()
-        //         .chars()
-        //         .collect()
-        // }
-
-        fn find_font_for(query: &mut Query, ch: char) -> Option<QueryFont> {
-            let mut font = None;
-            query.matches_with(|q_font: &QueryFont| {
-                use skrifa::MetadataProvider;
-
-                let Ok(font_ref) = skrifa::FontRef::from_index(q_font.blob.as_ref(), q_font.index)
-                else {
-                    return QueryStatus::Continue;
-                };
-
-                let charmap = font_ref.charmap();
-                if charmap.map(ch).is_some() {
-                    font = Some(q_font.clone());
-                    QueryStatus::Stop
-                } else {
-                    QueryStatus::Continue
-                }
-            });
-            font
-        }
-
-        /// Scales the advance the same way as Parley's shaped glyph advances (font units × size / upem)
-        /// rather than with skrifa's FreeType-compatible fixed-point scale, so that `ch`/`ic`
-        /// lengths exactly match the width of the corresponding laid-out text.
-        fn advance_of(
-            query: &mut Query,
-            ch: char,
-            font_size: f32,
-            variations: &[FontVariation],
-        ) -> Option<f32> {
-            let font = find_font_for(query, ch)?;
-            let font_ref = skrifa::FontRef::from_index(font.blob.as_ref(), font.index).ok()?;
-            let location = font_ref.axes().location(
-                variations
-                    .iter()
-                    .map(|v| (skrifa::Tag::from_be_bytes(v.tag.to_bytes()), v.value)),
-            );
-            let location_ref = LocationRef::from(&location);
-            let upem = Metrics::new(&font_ref, Size::unscaled(), location_ref).units_per_em;
-            if upem == 0 {
-                return None;
-            }
-            let glyph_metrics = GlyphMetrics::new(&font_ref, Size::unscaled(), location_ref);
-            let char_map = Charmap::new(&font_ref);
-            let glyph_id = char_map.map(ch)?;
-            let advance = glyph_metrics.advance_width(glyph_id)?;
-            Some(advance * (font_size / upem as f32))
-        }
-
-        fn metrics_of(
-            query: &mut Query,
-            ch: char,
-            font_size: Size,
-            variations: &[FontVariation],
-        ) -> Option<(f32, Option<f32>, Option<f32>)> {
-            let font = find_font_for(query, ch)?;
-            let font_ref = skrifa::FontRef::from_index(font.blob.as_ref(), font.index).ok()?;
-            let location = font_ref.axes().location(
-                variations
-                    .iter()
-                    .map(|v| (skrifa::Tag::from_be_bytes(v.tag.to_bytes()), v.value)),
-            );
-            let location_ref = LocationRef::from(&location);
-            let metrics = Metrics::new(&font_ref, font_size, location_ref);
-            Some((metrics.ascent, metrics.x_height, metrics.cap_height))
-        }
-
-        let zero_advance = advance_of(&mut query, '0', font_size.px(), &variations);
-        let ic_advance = advance_of(&mut query, '\u{6C34}', font_size.px(), &variations);
-        let (ascent, x_height, cap_height) =
-            metrics_of(&mut query, ' ', Size::new(font_size.px()), &variations)
-                .unwrap_or((0.0, None, None));
-
-        FontMetrics {
-            ascent: CSSPixelLength::new(ascent),
-            x_height: x_height.filter(|xh| *xh != 0.0).map(CSSPixelLength::new),
-            cap_height: cap_height.map(CSSPixelLength::new),
-            zero_advance_measure: zero_advance.map(CSSPixelLength::new),
-            ic_width: ic_advance.map(CSSPixelLength::new),
-            script_percent_scale_down: None,
-            script_script_percent_scale_down: None,
-        }
-    }
-
-    fn base_size_for_generic(
-        &self,
-        generic: style::values::computed::font::GenericFontFamily,
-    ) -> style::values::computed::Length {
-        let size = match generic {
-            style::values::computed::font::GenericFontFamily::Monospace => 13.0,
-            _ => 16.0,
-        };
-        style::values::computed::Length::from(Au::from_f32_px(size))
-    }
-}
diff --git a/packages/blitz-dom/src/form.rs b/packages/blitz-dom/src/form.rs
index 86f5a66f48..802e31d047 100644
--- a/packages/blitz-dom/src/form.rs
+++ b/packages/blitz-dom/src/form.rs
@@ -3,6 +3,7 @@ use markup5ever::{LocalName, local_name};
 
 use crate::{
     BaseDocument, ElementData,
+    text::EditableText as _,
     traversal::{AncestorTraverser, TreeTraverser},
 };
 use blitz_traits::{
@@ -314,7 +315,7 @@ fn construct_entry_list(doc: &BaseDocument, form_id: NodeId, submitter_id: NodeI
         }
         // Otherwise, create an entry with name and the value of the field element, and append it to entry list.
         else if let Some(text) = element.text_input_data() {
-            create_entry(name, text.editor.text().to_string().as_str().into());
+            create_entry(name, text.editor.text().as_ref().into());
         } else if let Some(value) = element.attr(local_name!("value")) {
             create_entry(name, value.into());
         }
diff --git a/packages/blitz-dom/src/iframe.rs b/packages/blitz-dom/src/iframe.rs
index c439fa8277..3833b99138 100644
--- a/packages/blitz-dom/src/iframe.rs
+++ b/packages/blitz-dom/src/iframe.rs
@@ -10,6 +10,7 @@ use blitz_traits::shell::ShellProvider;
 
 use crate::document::DocumentEvent;
 use crate::net::{DocumentSrcHandler, ResourceHandler, stamped_request};
+use crate::text::DocumentText as _;
 use crate::{BaseDocument, DocumentConfig, UserAgentStylesheet, local_name};
 
 /// Maximum nesting depth of documents-within-documents. Iframes nested deeper
@@ -66,12 +67,13 @@ impl BaseDocument {
             })),
             shell_provider: Some(self.shell_provider.clone()),
             html_parser_provider: Some(self.html_parser_provider.clone()),
-            font_ctx: Some(self.font_ctx.lock().unwrap().clone()),
+            font_ctx: Some(self.text.fonts()),
             media_type: Some(self.media_type.clone()),
             style_threading: self.style_threading,
             incremental: Some(self.incremental_layout),
             abort_signal: Some(abort_signal),
             subdocument_depth: self.subdocument_depth + 1,
+            reveal_typed_password_character: self.reveal_typed_password,
         }
     }
 
diff --git a/packages/blitz-dom/src/layout/construct.rs b/packages/blitz-dom/src/layout/construct.rs
index a1b07ff6f6..9cd69f80c8 100644
--- a/packages/blitz-dom/src/layout/construct.rs
+++ b/packages/blitz-dom/src/layout/construct.rs
@@ -3,10 +3,6 @@ use core::str;
 use std::sync::Arc;
 
 use markup5ever::{QualName, local_name, ns};
-use parley::{
-    FontContext, InlineBox, InlineBoxKind, LayoutContext, StyleProperty, TreeBuilder,
-    WhiteSpaceCollapse,
-};
 use style::{
     computed_values::position::T as PositionProperty,
     data::ElementData as StyloElementData,
@@ -23,20 +19,15 @@ use crate::{
     layout::damage::{
         CONSTRUCT_BOX, CONSTRUCT_DESCENDENT, CONSTRUCT_FC, sort_layout_children_by_order,
     },
-    node::{
-        ListItemLayout, ListItemLayoutPosition, Marker, NodeFlags, NodeKind, SpecialElementData,
-        TextBrush, TextInputData, TextLayout,
-    },
-    qual_name, stylo_to_parley,
-    traversal::{iter_children, iter_children_and_pseudos},
+    node::{NodeFlags, NodeKind, SpecialElementData, TextInputData, TextLayout},
+    qual_name,
+    text::EditEngine as _,
+    traversal::iter_children_and_pseudos,
 };
 
 use super::{
-    damage::ALL_DAMAGE,
-    list::{BULLET_FONT_FAMILY, collect_list_item_children},
-    replaced::is_inline_box_element,
+    damage::ALL_DAMAGE, list::collect_list_item_children, replaced::is_inline_box_element,
     table::build_table_context,
-    text_transform::{CaseTransform, TextTransformer},
 };
 
 const DUMMY_NAME: QualName = qual_name!("div", html);
@@ -47,20 +38,11 @@ pub(crate) struct ConstructionTask {
     pub(crate) data: ConstructionTaskData,
 }
 
-pub(crate) struct ConstructionTaskResult {
-    pub(crate) node_id: NodeId,
-    pub(crate) data: ConstructionTaskResultData,
-}
-
 #[derive(Clone)]
 pub(crate) enum ConstructionTaskData {
     InlineLayout(Box<TextLayout>),
 }
 
-pub(crate) enum ConstructionTaskResultData {
-    InlineLayout(Box<TextLayout>),
-}
-
 /// Accumulator threaded through layout-child collection.
 ///
 /// `children` is the list of layout children being built up, and
@@ -321,9 +303,12 @@ fn classify_flow_children(
     let node = &doc.nodes[container_node_id];
     // ::before/::after pseudos with display:contents are transparent for box
     // generation, so their children (e.g. generated text) participate in the
-    // container's formatting context and vote in the classification. Pseudos
-    // with any other display value generate their own box, which every
-    // construction arm already pushes explicitly, so they cast no vote.
+    // container's formatting context and vote in the classification. A
+    // block-level pseudo votes as any block child does: inline siblings go
+    // into anonymous blocks around it rather than setting it as an atomic
+    // inline on their line. Pseudos with any other display value generate
+    // their own box, which every construction arm already pushes explicitly,
+    // so they cast no vote.
     let pseudo_ids = node
         .before()
         .into_iter()
@@ -333,6 +318,7 @@ fn classify_flow_children(
                 .display_style()
                 .unwrap_or(Display::inline());
             matches!(display.inside(), DisplayInside::Contents)
+                || matches!(display.outside(), DisplayOutside::Block)
         });
     let child_ids = node.children.iter().copied().chain(pseudo_ids);
     for child_id in child_ids {
@@ -362,9 +348,9 @@ fn classify_flow_children(
             continue;
         } else {
             let position = style
-                .map(|s| s.clone_position())
+                .map(|s| s.slow_clone_position())
                 .unwrap_or(PositionProperty::Static);
-            let float = style.map(|s| s.clone_float()).unwrap_or(Float::None);
+            let float = style.map(|s| s.slow_clone_float()).unwrap_or(Float::None);
 
             // Ignore nodes whose whitespace is entirely collapsed away
             if child.is_collapsible_whitespace_node() {
@@ -447,7 +433,20 @@ fn collect_layout_children_with_wrap(
                 return;
             } else if matches!(
                 type_attr,
-                None | Some("text" | "password" | "email" | "number" | "search" | "tel" | "url")
+                None | Some(
+                    "text"
+                        | "password"
+                        | "email"
+                        | "number"
+                        | "search"
+                        | "tel"
+                        | "url"
+                        | "date"
+                        | "month"
+                        | "week"
+                        | "time"
+                        | "datetime-local"
+                )
             ) {
                 create_text_editor(doc, container_node_id, false);
                 return;
@@ -613,7 +612,7 @@ fn collect_layout_children_with_wrap(
                 let existing_layout = doc.nodes[container_node_id]
                     .element_data_mut()
                     .and_then(|el| el.inline_layout_data.take());
-                let layout = existing_layout.unwrap_or_else(|| Box::new(TextLayout::new()));
+                let layout = existing_layout.unwrap_or_default();
 
                 // Queue node for inline layout construction. Deferring construction of inline layouts to a
                 // dedicated phase allows us to multithread the expensive text shaping step.
@@ -795,6 +794,45 @@ fn flush_pseudo_elements(doc: &mut BaseDocument, node_id: NodeId) {
     }
 }
 
+/// Whether the `display: contents` node `node_id` holds in-flow inline content and nothing
+/// block-level, looking through nested `display: contents` children and pseudo-elements.
+fn contents_holds_only_inlines(doc: &BaseDocument, node_id: NodeId) -> bool {
+    fn walk(doc: &BaseDocument, node_id: NodeId, found: &mut bool) -> bool {
+        let node = &doc.nodes[node_id];
+        let children = node
+            .before()
+            .into_iter()
+            .chain(node.children.iter().copied())
+            .chain(node.after());
+        for child_id in children {
+            let child = &doc.nodes[child_id];
+            match child.data.kind() {
+                NodeKind::Comment => continue,
+                NodeKind::Text => {
+                    *found |= !child.is_whitespace_node();
+                    continue;
+                }
+                _ => {}
+            }
+            let display = child.display_style().unwrap_or(Display::inline());
+            if display.inside() == DisplayInside::Contents {
+                if !walk(doc, child_id, found) {
+                    return false;
+                }
+            } else if display.outside() != DisplayOutside::None {
+                // A table part is not inline content: the container wraps it in a table.
+                if child.is_or_contains_block() || display.outside() != DisplayOutside::Inline {
+                    return false;
+                }
+                *found = true;
+            }
+        }
+        true
+    }
+    let mut found = false;
+    walk(doc, node_id, &mut found) && found
+}
+
 /// Handles the cases where there are text nodes or inline nodes that need to be wrapped in an anonymous block node
 fn collect_complex_layout_children(
     doc: &mut BaseDocument,
@@ -828,6 +866,15 @@ fn collect_complex_layout_children(
         if child_node_kind == NodeKind::Comment || (hide_whitespace && is_whitespace_node) {
             // return;
         }
+        // A `display: contents` node in block flow that holds only inline
+        // content goes into the anonymous block whole, so that its text
+        // keeps the style it inherits from the node.
+        else if display_inside == DisplayInside::Contents
+            && !hide_whitespace
+            && contents_holds_only_inlines(doc, child_id)
+        {
+            out.push_wrapped(container_node_id, child_id, doc);
+        }
         // Recurse into `Display::Contents` nodes, wrapping hoisted text and
         // inline children as if they were direct children of this container
         else if display_inside == DisplayInside::Contents {
@@ -854,19 +901,11 @@ fn collect_complex_layout_children(
 
 fn create_text_editor(doc: &mut BaseDocument, input_element_id: NodeId, is_multiline: bool) {
     let node = &mut doc.nodes[input_element_id];
-    let parley_style = node
-        .primary_styles()
-        .as_ref()
-        .map(|s| stylo_to_parley::style(node.id, s))
-        .unwrap_or_default();
-    let alignment = node
-        .primary_styles()
-        .map(|s| stylo_to_parley::text_align(s.clone_text_align()))
-        .unwrap_or(parley::layout::Alignment::Start);
-    let base_direction = node
-        .primary_styles()
-        .map(|s| stylo_to_parley::base_direction(s.clone_direction(), s.clone_unicode_bidi()))
-        .unwrap_or(parley::BaseDirection::Auto);
+    let style = node.primary_styles().map(|s| (*s).clone());
+    let is_password = !is_multiline
+        && node
+            .attr(local_name!("type"))
+            .is_some_and(|kind| kind.eq_ignore_ascii_case("password"));
 
     let initial_text = if is_multiline {
         node.text_content()
@@ -876,42 +915,25 @@ fn create_text_editor(doc: &mut BaseDocument, input_element_id: NodeId, is_multi
     let element = &mut node.data.downcast_element_mut().unwrap();
     if !matches!(element.special_data, SpecialElementData::TextInput(_)) {
         let mut text_input_data = TextInputData::new(is_multiline);
-        let editor = &mut text_input_data.editor;
-        editor.set_text(&initial_text);
+        text_input_data.editor.set_initial_text(&initial_text);
         element.special_data = SpecialElementData::TextInput(text_input_data);
     }
 
     let SpecialElementData::TextInput(text_input_data) = &mut element.special_data else {
         unreachable!();
     };
+    text_input_data.is_password = is_password;
 
-    let editor = &mut text_input_data.editor;
-    editor.set_scale(doc.viewport.scale_f64() as f32);
-    editor.set_width(None);
-
-    let styles = editor.edit_styles();
-    styles.retain(|_| false);
-    styles.insert(StyleProperty::FontFamily(parley_style.font_family));
-    styles.insert(StyleProperty::FontSize(parley_style.font_size));
-    styles.insert(StyleProperty::FontWidth(parley_style.font_width));
-    styles.insert(StyleProperty::FontStyle(parley_style.font_style));
-    styles.insert(StyleProperty::FontWeight(parley_style.font_weight));
-    styles.insert(StyleProperty::FontVariations(parley_style.font_variations));
-    styles.insert(StyleProperty::FontFeatures(parley_style.font_features));
-    styles.insert(StyleProperty::LineHeight(parley_style.line_height));
-    styles.insert(StyleProperty::WordSpacing(parley_style.word_spacing));
-    styles.insert(StyleProperty::LetterSpacing(parley_style.letter_spacing));
-    styles.insert(StyleProperty::WordBreak(parley_style.word_break));
-    styles.insert(StyleProperty::OverflowWrap(parley_style.overflow_wrap));
-    styles.insert(StyleProperty::TextWrapMode(parley_style.text_wrap_mode));
-    styles.insert(StyleProperty::WhiteSpaceCollapse(
-        parley_style.white_space_collapse,
-    ));
-    styles.insert(StyleProperty::Brush(parley_style.brush));
-    editor.set_alignment(alignment);
-    editor.set_base_direction(base_direction);
-
-    editor.refresh_layout(&mut doc.font_ctx.lock().unwrap(), &mut doc.layout_ctx);
+    text_input_data.editor.set_style(
+        input_element_id,
+        style.as_deref(),
+        doc.viewport.scale_f64() as f32,
+    );
+    // A single-line input never wraps, so its text is laid out now. A textarea's is laid out once
+    // layout knows its width.
+    if !is_multiline {
+        text_input_data.editor.refresh(&mut doc.text);
+    }
 }
 
 fn create_checkbox_input(doc: &mut BaseDocument, input_element_id: NodeId) {
@@ -989,7 +1011,7 @@ pub(crate) fn find_inline_layout_embedded_boxes(
                     }
                     (DisplayOutside::None, DisplayInside::Contents) => {
                         node.remove_damage(CONSTRUCT_DESCENDENT | CONSTRUCT_FC | CONSTRUCT_BOX);
-                        iter_children!(nodes[node_id], |child_id| {
+                        iter_children_and_pseudos!(nodes[node_id], |child_id| {
                             find_inline_layout_embedded_boxes_recursive(
                                 nodes,
                                 parent_id,
@@ -1030,285 +1052,3 @@ pub(crate) fn find_inline_layout_embedded_boxes(
         }
     }
 }
-
-pub(crate) fn build_inline_layout_into(
-    nodes: &crate::NodeTree,
-    layout_ctx: &mut LayoutContext<TextBrush>,
-    font_ctx: &mut FontContext,
-    text_layout: &mut TextLayout,
-    scale: f32,
-    inline_context_root_node_id: NodeId,
-) {
-    // Get the inline context's root node's text styles
-    let root_node = &nodes[inline_context_root_node_id];
-    let root_node_style = root_node.primary_styles().or_else(|| {
-        root_node
-            .parent
-            .and_then(|parent_id| nodes[parent_id].primary_styles())
-    });
-
-    let parley_style = root_node_style
-        .as_ref()
-        .map(|s| stylo_to_parley::style(inline_context_root_node_id, s))
-        .unwrap_or_else(|| parley::TextStyle {
-            white_space_collapse: WhiteSpaceCollapse::Collapse,
-            ..Default::default()
-        });
-
-    // Create a parley tree builder
-    let mut builder = layout_ctx.tree_builder(font_ctx, scale, true, &parley_style);
-    if let Some(style) = root_node_style.as_deref() {
-        builder.set_base_direction(stylo_to_parley::base_direction(
-            style.clone_direction(),
-            style.clone_unicode_bidi(),
-        ));
-    }
-
-    let text_transform = root_node_style
-        .as_deref()
-        .map(|s| CaseTransform::from_style(s))
-        .unwrap_or(CaseTransform::NONE);
-
-    // Render position-inside list items
-    if let Some(ListItemLayout {
-        marker,
-        position: ListItemLayoutPosition::Inside,
-    }) = root_node
-        .element_data()
-        .and_then(|el| el.list_item_data.as_deref())
-    {
-        match marker {
-            // Bullet glyphs live in the bundled bullet font. The position-outside
-            // path already asks for it; without the same span here a marker like
-            // disclosure-closed (U+25B8) falls back to the element's own font and
-            // renders as a missing glyph.
-            Marker::Char(char) => {
-                let mut marker_style = parley_style.clone();
-                marker_style.font_family = BULLET_FONT_FAMILY.into();
-                builder.push_style_span(marker_style);
-                builder.push_text(&format!("{char} "));
-                builder.pop_style_span();
-            }
-            Marker::String(str) => builder.push_text(str),
-        }
-    };
-    // The marker is a separate box, so words in the content don't continue from it.
-    let mut text_transformer = TextTransformer::default();
-    text_transformer.word_break(&builder);
-
-    if let Some(before_id) = root_node.before() {
-        build_inline_layout_recursive(
-            &mut builder,
-            &mut text_transformer,
-            nodes,
-            before_id,
-            &text_transform,
-        );
-    }
-    for child_id in root_node.children.iter().copied() {
-        build_inline_layout_recursive(
-            &mut builder,
-            &mut text_transformer,
-            nodes,
-            child_id,
-            &text_transform,
-        );
-    }
-    if let Some(after_id) = root_node.after() {
-        build_inline_layout_recursive(
-            &mut builder,
-            &mut text_transformer,
-            nodes,
-            after_id,
-            &text_transform,
-        );
-    }
-
-    text_layout.text = builder.build_into(&mut text_layout.layout);
-    return;
-
-    fn build_inline_layout_recursive(
-        builder: &mut TreeBuilder<TextBrush>,
-        text_transformer: &mut TextTransformer,
-        nodes: &crate::NodeTree,
-        node_id: NodeId,
-        parent_text_transform: &CaseTransform,
-    ) {
-        let node = &nodes[node_id];
-
-        let style = node.primary_styles();
-        let style = style.as_ref();
-
-        let text_transform = style
-            .map(|s| CaseTransform::from_style(s))
-            .unwrap_or(CaseTransform::NONE);
-
-        match &node.data {
-            NodeData::Element(element_data) | NodeData::AnonymousBlock(element_data) => {
-                // if the input type is hidden, hide it
-                if *element_data.name.local == *"input" {
-                    if let Some("hidden") = element_data.attr(local_name!("type")) {
-                        return;
-                    }
-                }
-
-                let display = node.display_style().unwrap_or(Display::inline());
-                let position = style
-                    .map(|s| s.clone_position())
-                    .unwrap_or(PositionProperty::Static);
-                let float = style.map(|s| s.clone_float()).unwrap_or(Float::None);
-                let box_kind = if position.is_absolutely_positioned() {
-                    InlineBoxKind::OutOfFlow
-                } else if float.is_floating() {
-                    InlineBoxKind::CustomOutOfFlow
-                } else {
-                    InlineBoxKind::InFlow
-                };
-
-                match (display.outside(), display.inside()) {
-                    (DisplayOutside::None, DisplayInside::None) => {
-                        // node.remove_damage(CONSTRUCT_DESCENDENT | CONSTRUCT_FC | CONSTRUCT_BOX);
-                    }
-                    (DisplayOutside::None, DisplayInside::Contents) => {
-                        let whitespace = style.map(|s| {
-                            [
-                                parley::StyleProperty::WhiteSpaceCollapse(
-                                    stylo_to_parley::white_space_collapse(
-                                        s.clone_white_space_collapse(),
-                                    ),
-                                ),
-                                parley::StyleProperty::TextWrapMode(
-                                    stylo_to_parley::text_wrap_mode(s.clone_text_wrap_mode()),
-                                ),
-                            ]
-                        });
-                        builder.push_style_modification_span(
-                            whitespace
-                                .as_ref()
-                                .map_or(&[][..], |styles| styles.as_slice()),
-                        );
-                        for child_id in node.children.iter().copied() {
-                            // node.remove_damage(CONSTRUCT_DESCENDENT | CONSTRUCT_FC | CONSTRUCT_BOX);
-                            build_inline_layout_recursive(
-                                builder,
-                                text_transformer,
-                                nodes,
-                                child_id,
-                                &text_transform,
-                            );
-                        }
-                        builder.pop_style_span();
-                    }
-                    (DisplayOutside::Inline, DisplayInside::Flow) => {
-                        let tag_name = &element_data.name.local;
-
-                        if is_inline_box_element(tag_name) {
-                            if box_kind == InlineBoxKind::InFlow {
-                                text_transformer.word_break(builder);
-                            }
-                            builder.push_inline_box(InlineBox {
-                                id: node_id.as_u64(),
-                                kind: box_kind,
-                                // Overridden by push_inline_box method
-                                index: 0,
-                                // Width and height are set during layout
-                                width: 0.0,
-                                height: 0.0,
-                                baseline: None,
-                                vertical_align: node
-                                    .primary_styles()
-                                    .map(|s| stylo_to_parley::vertical_align(&s))
-                                    .unwrap_or_default(),
-                            });
-                        } else if *tag_name == local_name!("br") {
-                            // node.remove_damage(CONSTRUCT_DESCENDENT | CONSTRUCT_FC | CONSTRUCT_BOX);
-                            // TODO: update span id for br spans
-                            builder.push_style_modification_span(&[
-                                parley::StyleProperty::WhiteSpaceCollapse(
-                                    WhiteSpaceCollapse::Preserve,
-                                ),
-                            ]);
-                            builder.push_text("\n");
-                            builder.pop_style_span();
-                            text_transformer.word_break(builder);
-                        } else {
-                            // node.remove_damage(CONSTRUCT_DESCENDENT | CONSTRUCT_FC | CONSTRUCT_BOX);
-                            let style = node
-                                .primary_styles()
-                                .map(|s| stylo_to_parley::style(node.id, &s))
-                                .unwrap_or_else(|| parley::TextStyle {
-                                    white_space_collapse: WhiteSpaceCollapse::Collapse,
-                                    ..Default::default()
-                                });
-
-                            builder.push_style_span(style);
-
-                            if let Some(before_id) = node.before() {
-                                build_inline_layout_recursive(
-                                    builder,
-                                    text_transformer,
-                                    nodes,
-                                    before_id,
-                                    &text_transform,
-                                );
-                            }
-
-                            for child_id in node.children.iter().copied() {
-                                build_inline_layout_recursive(
-                                    builder,
-                                    text_transformer,
-                                    nodes,
-                                    child_id,
-                                    &text_transform,
-                                );
-                            }
-                            if let Some(after_id) = node.after() {
-                                build_inline_layout_recursive(
-                                    builder,
-                                    text_transformer,
-                                    nodes,
-                                    after_id,
-                                    &text_transform,
-                                );
-                            }
-
-                            builder.pop_style_span();
-                        }
-                    }
-                    // Inline box
-                    (_, _) => {
-                        if box_kind == InlineBoxKind::InFlow {
-                            text_transformer.word_break(builder);
-                        }
-                        builder.push_inline_box(InlineBox {
-                            id: node_id.as_u64(),
-                            kind: box_kind,
-                            // Overridden by push_inline_box method
-                            index: 0,
-                            // Width and height are set during layout
-                            width: 0.0,
-                            height: 0.0,
-                            baseline: None,
-                            vertical_align: node
-                                .primary_styles()
-                                .map(|s| stylo_to_parley::vertical_align(&s))
-                                .unwrap_or_default(),
-                        });
-                    }
-                };
-            }
-            NodeData::Text(data) => {
-                // node.remove_damage(CONSTRUCT_DESCENDENT | CONSTRUCT_FC | CONSTRUCT_BOX);
-                // dbg!(&data.content);
-
-                let text =
-                    text_transformer.transform(&data.content, parent_text_transform, builder);
-                builder.push_text(text);
-            }
-            NodeData::Comment { .. } => {
-                // node.remove_damage(CONSTRUCT_DESCENDENT | CONSTRUCT_FC | CONSTRUCT_BOX);
-            }
-            NodeData::Document(_) => unreachable!(),
-        }
-    }
-}
diff --git a/packages/blitz-dom/src/layout/damage.rs b/packages/blitz-dom/src/layout/damage.rs
index aaa5f5e26e..62e4902dcd 100644
--- a/packages/blitz-dom/src/layout/damage.rs
+++ b/packages/blitz-dom/src/layout/damage.rs
@@ -3,7 +3,10 @@ use blitz_traits::node_id::NodeId;
 use markup5ever::local_name;
 
 use crate::net::ResourceHandler;
+use crate::node::TextLayout;
 use crate::node::{Node, NodeFlags};
+use crate::text::EditEngine as _;
+use crate::text::InlineLayoutEngine as _;
 use crate::tree::NodeTree;
 use crate::{
     BaseDocument, net::ImageHandler, node::ImageResourceData, node::Status, util::ImageLayerKind,
@@ -128,6 +131,12 @@ impl BaseDocument {
             damage.insert(CONSTRUCT_BOX);
         }
 
+        // An `<input>` or a `<textarea>` takes its style when its box is built, and from a
+        // restyle that keeps the box.
+        if !own_damage.is_empty() && !damage.contains(CONSTRUCT_BOX) {
+            self.restyle_text_input(node_id);
+        }
+
         // Reconstruction replaces the anonymous boxes with freshly styled ones.
         if !own_damage.is_empty() && !damage.intersects(CONSTRUCT_BOX | CONSTRUCT_FC) {
             let anonymous_damage = self.refresh_anonymous_block_styles(node_id);
@@ -194,6 +203,26 @@ impl BaseDocument {
         damage_for_parent
     }
 
+    /// Hands a text input's editor its restyled style, and lays a single-line input's text out
+    /// again where the editor takes it.
+    fn restyle_text_input(&mut self, node_id: NodeId) {
+        let node = &mut self.nodes[node_id];
+        let Some(style) = node.primary_styles().map(|style| (*style).clone()) else {
+            return;
+        };
+        let Some(input) = node
+            .data
+            .downcast_element_mut()
+            .and_then(|element| element.text_input_data_mut())
+        else {
+            return;
+        };
+        // A textarea's text is laid out again once layout knows its width.
+        if input.editor.restyle(node_id, &style) && !input.is_multiline {
+            input.editor.refresh(&mut self.text);
+        }
+    }
+
     /// Refresh owned anonymous boxes without revisiting their DOM children.
     fn refresh_anonymous_block_styles(&mut self, node_id: NodeId) -> RestyleDamage {
         // Skip owners with no anonymous boxes to refresh.
@@ -332,7 +361,7 @@ impl BaseDocument {
 }
 
 // fn is_fc_root(style: &ComputedValues) -> bool {
-//     let display = style.clone_display();
+//     let display = style.slow_clone_display();
 //     let display_inside = display.inside();
 
 //     match display_inside {
@@ -367,7 +396,7 @@ pub(crate) fn compute_layout_damage(old: &ComputedValues, new: &ComputedValues)
             || old_box.float != new_box.float
             || old_box.position != new_box.position
             || old_box.contain != new_box.contain
-            || old.clone_visibility() != new.clone_visibility()
+            || old.slow_clone_visibility() != new.slow_clone_visibility()
         {
             return true;
         }
@@ -415,8 +444,8 @@ pub(crate) fn compute_layout_damage(old: &ComputedValues, new: &ComputedValues)
     };
 
     let text_shaping_needs_recollect = || {
-        if old.clone_direction() != new.clone_direction()
-            || old.clone_unicode_bidi() != new.clone_unicode_bidi()
+        if old.slow_clone_direction() != new.slow_clone_direction()
+            || old.slow_clone_unicode_bidi() != new.slow_clone_unicode_bidi()
         {
             return true;
         }
@@ -445,7 +474,7 @@ pub(crate) fn compute_layout_damage(old: &ComputedValues, new: &ComputedValues)
     )]
     if box_tree_needs_rebuild() {
         ALL_DAMAGE
-    } else if text_shaping_needs_recollect() {
+    } else if text_shaping_needs_recollect() || TextLayout::style_change_rebuilds(old, new) {
         ALL_DAMAGE
     } else if old.get_position().order != new.get_position().order
         // `position` is unchanged here (else the box tree would be rebuilt), so
@@ -482,8 +511,7 @@ impl BaseDocument {
     pub(crate) fn invalidate_inline_contexts(&mut self) {
         let scale = self.viewport.scale();
 
-        let font_ctx = &self.font_ctx;
-        let layout_ctx = &mut self.layout_ctx;
+        let text = &mut self.text;
 
         let mut anon_nodes = Vec::new();
 
@@ -504,8 +532,10 @@ impl BaseDocument {
                 }
             } else if let Some(input) = element.text_input_data_mut() {
                 input.editor.set_scale(scale);
-                let mut font_ctx = font_ctx.lock().unwrap();
-                input.editor.refresh_layout(&mut font_ctx, layout_ctx);
+                // A textarea's text is laid out again once layout knows its width.
+                if !input.is_multiline {
+                    input.editor.refresh(text);
+                }
                 node.insert_damage(ONLY_RELAYOUT);
             }
         }
diff --git a/packages/blitz-dom/src/layout/inline.rs b/packages/blitz-dom/src/layout/inline.rs
deleted file mode 100644
index 344a7fa742..0000000000
--- a/packages/blitz-dom/src/layout/inline.rs
+++ /dev/null
@@ -1,1173 +0,0 @@
-use blitz_traits::node_id::NodeId;
-use parley::{AlignmentOptions, BreakReason, IndentOptions};
-use style::values::specified::box_::{DisplayInside, DisplayOutside};
-use style::values::{
-    computed::{BaselineSource, CSSPixelLength, Contain},
-    generics::text::GenericTextIndent,
-};
-use taffy::{
-    AvailableSpace, AxisStaticPosition, BlockContainerStyle, BlockContext, BlockFormattingContext,
-    BoxSizing, CollapsibleMarginSet, CompactLength, CoreStyle as _, Direction, LayoutInput,
-    LayoutOutput, LayoutPartialTree as _, MaybeMath as _, MaybeResolve as _, OofCandidate,
-    OofCandidates, OofItemStyle, OofPositioningArea, Overflow, Point, RequestedAxis,
-    ResolveOrZero as _, RunMode, Size, SizingMode,
-};
-
-#[cfg(feature = "floats")]
-use parley::YieldData;
-#[cfg(feature = "floats")]
-use taffy::{BlockItemStyle as _, Clear, Float, prelude::TaffyMaxContent};
-
-use stylo_taffy::StyleFlags;
-
-use super::resolve_calc_value;
-use crate::layout::LayoutPassState;
-use crate::stylo_to_parley;
-
-/// Subtract a child's margins from the definite axes of the available space it is laid out in.
-/// Taffy's convention is that the parent subtracts a child's margins from the available space
-/// before passing it to the child, and that the child does not subtract them again.
-fn subtract_margins(mut child_inputs: LayoutInput, margin: taffy::Rect<f32>) -> LayoutInput {
-    child_inputs.available_space = child_inputs
-        .available_space
-        .maybe_sub(margin.sum_axes())
-        .maybe_max(Size::ZERO);
-    child_inputs
-}
-
-/// Layout inputs for an atomic inline box, with any sizing keyword on its `width` style
-/// (`min-content`, `max-content`, `fit-content`, `fit-content(...)`, `stretch`) resolved
-/// into the available space or known width the box is measured with.
-fn inline_box_inputs(
-    width_style: taffy::Dimension,
-    margin: taffy::Rect<f32>,
-    child_inputs: LayoutInput,
-) -> LayoutInput {
-    let mut inputs = subtract_margins(child_inputs, margin);
-    let stretch_width = inputs.available_space.width.into_option();
-    let percent_basis = child_inputs.parent_size.width;
-
-    match width_style.tag() {
-        CompactLength::MIN_CONTENT_TAG => inputs.available_space.width = AvailableSpace::MinContent,
-        CompactLength::MAX_CONTENT_TAG => inputs.available_space.width = AvailableSpace::MaxContent,
-        CompactLength::FIT_CONTENT_PX_TAG => {
-            inputs.available_space.width = AvailableSpace::Definite(width_style.value())
-        }
-        CompactLength::FIT_CONTENT_PERCENT_TAG => {
-            if let Some(basis) = percent_basis {
-                inputs.available_space.width =
-                    AvailableSpace::Definite(basis * width_style.value());
-            }
-        }
-        CompactLength::FIT_CONTENT_KEYWORD_TAG => {
-            if let Some(width) = stretch_width {
-                inputs.available_space.width = AvailableSpace::Definite(width);
-            }
-        }
-        _ if width_style.is_fit_content_calc() => {
-            if let Some(basis) = percent_basis {
-                inputs.available_space.width =
-                    AvailableSpace::Definite(resolve_calc_value(width_style.calc_value(), basis));
-            }
-        }
-        CompactLength::STRETCH_TAG => {
-            if let Some(width) = stretch_width {
-                inputs.known_dimensions.width = Some(width);
-                inputs.available_space.width = AvailableSpace::Definite(width);
-            }
-        }
-        _ => {}
-    }
-    inputs
-}
-
-impl LayoutPassState<'_> {
-    pub(crate) fn compute_inline_layout(
-        &mut self,
-        node_id: NodeId,
-        inputs: taffy::tree::LayoutInput,
-        block_ctx: Option<&mut BlockContext<'_>>,
-    ) -> taffy::LayoutOutput {
-        let LayoutInput {
-            known_dimensions,
-            parent_size,
-            run_mode,
-            ..
-        } = inputs;
-        let style = self.nodes[node_id].layout_style();
-
-        // Pull these out earlier to avoid borrowing issues
-        let is_scroll_container =
-            style.overflow().x.is_scroll_container() || style.overflow().y.is_scroll_container();
-        let padding = style
-            .padding()
-            .resolve_or_zero(parent_size.width, resolve_calc_value);
-        let border = style
-            .border()
-            .resolve_or_zero(parent_size.width, resolve_calc_value);
-        let padding_border_size = (padding + border).sum_axes();
-        let box_sizing_adjustment = if style.box_sizing() == BoxSizing::ContentBox {
-            padding_border_size
-        } else {
-            Size::ZERO
-        };
-
-        // Resolve node's preferred/min/max sizes (width/heights) against the available space (percentages resolve to pixel values)
-        // For ContentSize mode, we pretend that the node has no size styles as these should be ignored.
-        let (clamped_style_size, min_size, max_size, _aspect_ratio) = match inputs.sizing_mode {
-            SizingMode::ContentSize => {
-                let node_size = known_dimensions;
-                let node_min_size = Size::NONE;
-                let node_max_size = Size::NONE;
-                (node_size, node_min_size, node_max_size, None)
-            }
-            SizingMode::InherentSize => {
-                let aspect_ratio = style.aspect_ratio();
-                let style_size = style
-                    .size()
-                    .maybe_resolve(parent_size, resolve_calc_value)
-                    .maybe_apply_aspect_ratio(aspect_ratio)
-                    .maybe_add(box_sizing_adjustment);
-                let style_min_size = style
-                    .min_size()
-                    .maybe_resolve(parent_size, resolve_calc_value)
-                    .maybe_apply_aspect_ratio(aspect_ratio)
-                    .maybe_add(box_sizing_adjustment);
-                let style_max_size = style
-                    .max_size()
-                    .maybe_resolve(parent_size, resolve_calc_value)
-                    .maybe_add(box_sizing_adjustment);
-
-                let node_size =
-                    known_dimensions.or(style_size.maybe_clamp(style_min_size, style_max_size));
-                (node_size, style_min_size, style_max_size, aspect_ratio)
-            }
-        };
-
-        // If both min and max in a given axis are set and max <= min then this determines the size in that axis
-        let min_max_definite_size = min_size.zip_map(max_size, |min, max| match (min, max) {
-            (Some(min), Some(max)) if max <= min => Some(min),
-            _ => None,
-        });
-
-        let styled_based_known_dimensions = known_dimensions
-            .or(min_max_definite_size)
-            .or(clamped_style_size)
-            .maybe_max(padding_border_size);
-
-        // Short-circuit layout if the container's size is fully determined by the container's size and the run mode
-        // is ComputeSize (and thus the container's size is all that we're interested in)
-        if run_mode == RunMode::ComputeSize {
-            if let Size {
-                width: Some(width),
-                height: Some(height),
-            } = styled_based_known_dimensions
-            {
-                return LayoutOutput::from_outer_size(Size { width, height });
-            }
-        }
-
-        drop(style);
-
-        // Unwrap the block formatting context if one was passed, or else create a new one
-        match block_ctx {
-            Some(inherited_bfc) if !is_scroll_container => self.compute_inline_layout_inner(
-                node_id,
-                LayoutInput {
-                    known_dimensions: styled_based_known_dimensions,
-                    ..inputs
-                },
-                inherited_bfc,
-            ),
-            _ => {
-                let mut root_bfc = BlockFormattingContext::new();
-                let mut root_ctx = root_bfc.root_block_context();
-                self.compute_inline_layout_inner(
-                    node_id,
-                    LayoutInput {
-                        known_dimensions: styled_based_known_dimensions,
-                        ..inputs
-                    },
-                    &mut root_ctx,
-                )
-            }
-        }
-    }
-
-    /// The out-of-flow positions for which an inline span between the inline box `box_id` and its
-    /// inline root `root_id` is a containing block (as `SPAN_*_CB` flags)
-    fn inline_span_cb_flags(&self, root_id: NodeId, box_id: NodeId) -> StyleFlags {
-        let root = &self.nodes[root_id];
-        // The spans of an anonymous inline root are descendants of its parent
-        let root_parent = root.is_anonymous().then_some(root.parent).flatten();
-
-        let mut flags = StyleFlags::empty();
-        let mut current = self.nodes[box_id].parent;
-        while let Some(id) = current {
-            if id == root_id || Some(id) == root_parent {
-                return flags;
-            }
-            let ancestor = &self.nodes[id];
-            if let Some(style) = ancestor.primary_styles() {
-                let display = style.clone_display();
-                if display.outside() == DisplayOutside::Inline
-                    && display.inside() == DisplayInside::Flow
-                {
-                    let claims = stylo_taffy::convert::inline_containing_block_claims(&style);
-                    if claims.absolute {
-                        flags |= StyleFlags::SPAN_ABSOLUTE_CB;
-                    }
-                    if claims.fixed {
-                        flags |= StyleFlags::SPAN_FIXED_CB;
-                    }
-                }
-            }
-            current = ancestor.parent;
-        }
-        StyleFlags::empty()
-    }
-
-    fn compute_inline_layout_inner(
-        &mut self,
-        node_id: NodeId,
-        inputs: taffy::tree::LayoutInput,
-        block_ctx: &mut BlockContext<'_>,
-    ) -> taffy::LayoutOutput {
-        let scale = self.viewport.scale();
-        let LayoutInput {
-            known_dimensions,
-            parent_size,
-            available_space,
-            sizing_mode,
-            ..
-        } = inputs;
-
-        // Take inline layout to satisfy borrow checker
-        let mut inline_layout = self.nodes[node_id]
-            .data
-            .downcast_element_mut()
-            .unwrap()
-            .take_inline_layout()
-            .unwrap();
-
-        let style = self.nodes[node_id].layout_style();
-
-        // Note: both horizontal and vertical percentage padding/borders are resolved against the container's inline size (i.e. width).
-        // This is not a bug, but is how CSS is specified (see: https://developer.mozilla.org/en-US/docs/Web/CSS/padding#values)
-        let padding = style
-            .padding()
-            .resolve_or_zero(parent_size.width, resolve_calc_value);
-        let border = style
-            .border()
-            .resolve_or_zero(parent_size.width, resolve_calc_value);
-        let container_pb = padding + border;
-        let pb_sum = container_pb.sum_axes();
-        let box_sizing_adjustment = if style.box_sizing() == BoxSizing::ContentBox {
-            pb_sum
-        } else {
-            Size::ZERO
-        };
-
-        // Scrollbar gutters are reserved when the `overflow` property is set to `Overflow::Scroll`.
-        // However, the axis are switched (transposed) because a node that scrolls vertically needs
-        // *horizontal* space to be reserved for a scrollbar
-        let scrollbar_gutter = style.overflow().transpose().map(|overflow| match overflow {
-            Overflow::Scroll => style.scrollbar_width(),
-            _ => 0.0,
-        });
-        // TODO: make side configurable based on the `direction` property
-        let mut content_box_inset = container_pb;
-        content_box_inset.right += scrollbar_gutter.x;
-        content_box_inset.bottom += scrollbar_gutter.y;
-
-        let has_styles_preventing_being_collapsed_through = !style.is_block()
-            || style.overflow().x.is_scroll_container()
-            || style.overflow().y.is_scroll_container()
-            || style.position().is_out_of_flow()
-            || padding.top > 0.0
-            || padding.bottom > 0.0
-            || border.top > 0.0
-            || border.bottom > 0.0;
-        // || matches!(node_size.height, Some(h) if h > 0.0)
-        // || matches!(node_min_size.height, Some(h) if h > 0.0)
-        // || !inline_layout.text.is_empty();
-        // || inline_layout.layout.inline_boxes().len() > 0;
-
-        // Resolve node's preferred/min/max sizes (width/heights) against the available space (percentages resolve to pixel values)
-        // For ContentSize mode, we pretend that the node has no size styles as these should be ignored.
-        let (node_size, node_min_size, node_max_size, aspect_ratio) = match sizing_mode {
-            SizingMode::ContentSize => {
-                let node_size = known_dimensions;
-                let node_min_size = Size::NONE;
-                let node_max_size = Size::NONE;
-                (node_size, node_min_size, node_max_size, None)
-            }
-            SizingMode::InherentSize => {
-                let aspect_ratio = style.aspect_ratio();
-                let style_size = style
-                    .size()
-                    .maybe_resolve(parent_size, resolve_calc_value)
-                    .maybe_apply_aspect_ratio(aspect_ratio)
-                    .maybe_add(box_sizing_adjustment);
-                let style_min_size = style
-                    .min_size()
-                    .maybe_resolve(parent_size, resolve_calc_value)
-                    .maybe_apply_aspect_ratio(aspect_ratio)
-                    .maybe_add(box_sizing_adjustment);
-                let style_max_size = style
-                    .max_size()
-                    .maybe_resolve(parent_size, resolve_calc_value)
-                    .maybe_add(box_sizing_adjustment);
-
-                let node_size =
-                    known_dimensions.or(style_size.maybe_clamp(style_min_size, style_max_size));
-                (node_size, style_min_size, style_max_size, aspect_ratio)
-            }
-        };
-
-        let suppresses_baseline = style.contain().suppresses_baseline();
-        drop(style);
-
-        // Short circuit if inline context contains no text or inline boxes
-        if !has_styles_preventing_being_collapsed_through
-            && inline_layout.text.is_empty()
-            && inline_layout.layout.inline_boxes().len() == 0
-        {
-            // Put layout back
-            self.nodes[node_id]
-                .data
-                .downcast_element_mut()
-                .unwrap()
-                .inline_layout_data = Some(inline_layout);
-            return LayoutOutput::from_outer_size(
-                Size::ZERO.maybe_max(container_pb.sum_axes().map(Some)),
-            );
-        }
-
-        // Compute available space
-        let available_space = Size {
-            width: known_dimensions
-                .width
-                .map(AvailableSpace::from)
-                .unwrap_or(available_space.width)
-                .maybe_set(known_dimensions.width)
-                .maybe_set(node_size.width)
-                .map_definite_value(|size| {
-                    (size.maybe_clamp(node_min_size.width, node_max_size.width)
-                        - content_box_inset.horizontal_axis_sum())
-                    .max(0.0)
-                }),
-            height: known_dimensions
-                .height
-                .map(AvailableSpace::from)
-                .unwrap_or(available_space.height)
-                .maybe_set(known_dimensions.height)
-                .maybe_set(node_size.height)
-                .map_definite_value(|size| {
-                    (size.maybe_clamp(node_min_size.height, node_max_size.height)
-                        - content_box_inset.vertical_axis_sum())
-                    .max(0.0)
-                }),
-        };
-
-        // Compute size of inline boxes
-        let child_inputs = taffy::tree::LayoutInput {
-            known_dimensions: Size::NONE,
-            available_space,
-            sizing_mode: SizingMode::InherentSize,
-            parent_size: Size {
-                width: available_space.width.into_option(),
-                // Anonymous blocks do not establish the containing block for percentages.
-                height: if self.nodes[node_id].is_anonymous() {
-                    parent_size.height
-                } else {
-                    available_space.height.into_option()
-                },
-            },
-            // Atomic inlines (e.g. inline-block) establish independent formatting
-            // contexts: their margins never collapse with their children's margins.
-            vertical_margins_are_collapsible: taffy::Line::FALSE,
-            ..inputs
-        };
-        #[cfg(feature = "floats")]
-        let float_child_inputs = taffy::tree::LayoutInput {
-            available_space: Size::MAX_CONTENT,
-            ..child_inputs
-        };
-
-        // Update inline boxes
-        for ibox in inline_layout.layout.inline_boxes_mut() {
-            let style = self.child_layout_style(&self.nodes[NodeId::from_u64(ibox.id)]);
-            let margin = style
-                .margin()
-                .resolve_or_zero(inputs.parent_size, resolve_calc_value);
-
-            #[cfg(feature = "floats")]
-            let is_floated = style.float().is_floated();
-            #[cfg(not(feature = "floats"))]
-            let is_floated = false;
-
-            let is_out_of_flow = style.position().is_out_of_flow();
-            // `baseline-source: auto` selects the last baseline for inline-blocks and the first
-            // for other atomic inlines. A block-axis scroll-container inline-block (except buttons)
-            // instead uses its bottom margin edge, but only with `auto` (css-align-3 §9.1).
-            // `overflow: clip` is not a scroll container. Exported scroll-container baselines
-            // are clamped to the border box.
-            // A layout-contained box is treated as having no baseline (css-contain-1 §3.3).
-            let overflow = style.overflow();
-            let box_style = style.style.get_box();
-            let is_flow = matches!(
-                style.effective_display().inside(),
-                DisplayInside::Flow | DisplayInside::FlowRoot
-            );
-            let baseline_source = box_style.clone_baseline_source();
-            let uses_last_baseline = match baseline_source {
-                BaselineSource::Auto => is_flow,
-                BaselineSource::First => false,
-                BaselineSource::Last => true,
-            };
-            let is_scroll_container = !matches!(overflow.y, Overflow::Visible | Overflow::Clip);
-            let is_block_axis_scroll_container = is_flow
-                && is_scroll_container
-                && !style
-                    .flags
-                    .intersects(StyleFlags::IS_BUTTON | StyleFlags::IS_BUTTON_INPUT);
-            let contain_layout = box_style.clone_contain().contains(Contain::LAYOUT);
-            let exports_baseline = !(baseline_source == BaselineSource::Auto
-                && is_block_axis_scroll_container)
-                && !contain_layout;
-            let box_inputs = inline_box_inputs(style.size().width, margin, child_inputs);
-            drop(style);
-
-            if is_out_of_flow || is_floated {
-                ibox.width = 0.0;
-                ibox.height = 0.0;
-                ibox.baseline = None;
-            } else {
-                let output = self.compute_child_layout(taffy::NodeId::from(ibox.id), box_inputs);
-                ibox.width = (margin.left + margin.right + output.size.width) * scale;
-                ibox.baseline = if exports_baseline {
-                    let baseline = if uses_last_baseline {
-                        output.baselines.last.or(output.baselines.first)
-                    } else {
-                        output.baselines.first.or(output.baselines.last)
-                    };
-                    baseline.map(|baseline| {
-                        let baseline = if is_scroll_container {
-                            baseline.clamp(0.0, output.size.height)
-                        } else {
-                            baseline
-                        };
-                        (margin.top + baseline) * scale
-                    })
-                } else {
-                    None
-                };
-                // Vertical margins adjust the space the box reserves in the line. A box with a
-                // baseline splits that space into ascent (`margin.top + baseline`) and descent
-                // (`margin.bottom + height - baseline`), either of which may be negative. A box
-                // without a baseline sits on the baseline and cannot reserve negative space.
-                // Kept finite: huge author lengths can sum to infinity, which is taller than
-                // the line breaker's `f32::MAX` height limit, and it then yields
-                // `MaxHeightExceeded` for this box forever without advancing.
-                let margin_box_height = margin.top + margin.bottom + output.size.height;
-                ibox.height = if ibox.baseline.is_some() {
-                    (margin_box_height * scale).min(f32::MAX)
-                } else {
-                    (margin_box_height.max(0.0) * scale).min(f32::MAX)
-                };
-            }
-        }
-
-        let text_indent = self.nodes[node_id]
-            .primary_styles()
-            .map(|s| s.clone_text_indent())
-            .unwrap_or_else(GenericTextIndent::zero);
-        let indent_options = IndentOptions {
-            each_line: text_indent.each_line,
-            hanging: text_indent.hanging,
-        };
-        // Percentage indents do not contribute to intrinsic widths.
-        inline_layout.layout.set_text_indent(
-            text_indent.length.resolve(CSSPixelLength::new(0.0)).px() * scale,
-            indent_options,
-        );
-
-        let pbw = container_pb.horizontal_components().sum() * scale;
-        let width = known_dimensions
-            .width
-            .map(|w| (w * scale) - pbw)
-            .unwrap_or_else(|| {
-                // TODO: Cache content widths.
-                //
-                // This is a little tricky as the size of the inline boxes may depend on whether we are sizing under
-                // and a min-content or max-content constraint. So if we want to compute both widths in one pass then
-                // we need to store both a min-content and max-content size on each box.
-                let content_sizes = inline_layout.layout.calculate_content_widths();
-                let min_content_width = content_sizes.min;
-                let max_content_width = content_sizes.max;
-
-                #[cfg(feature = "floats")]
-                let float_width = match available_space.width {
-                    AvailableSpace::Definite(_) => 0.0,
-                    AvailableSpace::MinContent => {
-                        let mut width: f32 = 0.0;
-                        for ibox in inline_layout.layout.inline_boxes_mut() {
-                            let (is_floated, margin) = {
-                                let style =
-                                    self.child_layout_style(&self.nodes[NodeId::from_u64(ibox.id)]);
-                                (
-                                    style.float().is_floated(),
-                                    style
-                                        .margin()
-                                        .resolve_or_zero(inputs.parent_size, resolve_calc_value),
-                                )
-                            };
-
-                            if is_floated {
-                                let output = self.compute_child_layout(
-                                    taffy::NodeId::from(ibox.id),
-                                    subtract_margins(child_inputs, margin),
-                                );
-                                width = width.max(output.size.width + margin.left + margin.right);
-                            }
-                        }
-
-                        width * scale
-                    }
-                    AvailableSpace::MaxContent => {
-                        // When computing a max-content size the available width is effectively
-                        // infinite, so floats never wrap onto a new "band" due to a lack of
-                        // horizontal space. They only move below preceding floats when the `clear`
-                        // property forces them to.
-                        //
-                        // Floats that share a band sit side-by-side and so their widths sum, whereas
-                        // floats pushed onto a new band (via `clear`) stack vertically and so we
-                        // take the maximum extent across bands rather than summing.
-                        let mut left_band: f32 = 0.0;
-                        let mut right_band: f32 = 0.0;
-                        let mut width: f32 = 0.0;
-                        for ibox in inline_layout.layout.inline_boxes_mut() {
-                            let (float, clear, margin) = {
-                                let style =
-                                    self.child_layout_style(&self.nodes[NodeId::from_u64(ibox.id)]);
-                                (
-                                    style.float(),
-                                    style.clear(),
-                                    style
-                                        .margin()
-                                        .resolve_or_zero(inputs.parent_size, resolve_calc_value),
-                                )
-                            };
-
-                            if float.is_floated() {
-                                if matches!(clear, Clear::Left | Clear::Both) {
-                                    left_band = 0.0;
-                                }
-                                if matches!(clear, Clear::Right | Clear::Both) {
-                                    right_band = 0.0;
-                                }
-
-                                let output = self.compute_child_layout(
-                                    taffy::NodeId::from(ibox.id),
-                                    subtract_margins(child_inputs, margin),
-                                );
-                                let box_width = output.size.width + margin.left + margin.right;
-
-                                match float {
-                                    Float::Left => left_band += box_width,
-                                    Float::Right => right_band += box_width,
-                                    Float::None => {}
-                                }
-                                width = width.max(left_band + right_band);
-                            }
-                        }
-
-                        width * scale
-                    }
-                };
-
-                #[cfg(not(feature = "floats"))]
-                let float_width = 0.0;
-
-                let computed_width = match available_space.width {
-                    AvailableSpace::MinContent => min_content_width.max(float_width),
-                    AvailableSpace::MaxContent => max_content_width + float_width,
-                    AvailableSpace::Definite(limit) => (limit * scale)
-                        .min(max_content_width + float_width)
-                        .max(min_content_width),
-                }
-                .ceil();
-
-                let style_width = node_size.width.map(|w| w * scale);
-                let min_width = node_min_size.width.map(|w| w * scale);
-                let max_width = node_max_size.width.map(|w| w * scale);
-
-                (style_width)
-                    .unwrap_or(computed_width + pbw)
-                    .max(computed_width)
-                    .maybe_clamp(min_width, max_width)
-                    - pbw
-            });
-
-        #[cfg(not(feature = "floats"))]
-        let _ = block_ctx; // Suppress unused variable warning
-
-        // Set block context width if this is a block context root
-        #[cfg(feature = "floats")]
-        let is_bfc_root = block_ctx.is_bfc_root();
-        #[cfg(feature = "floats")]
-        if is_bfc_root {
-            block_ctx.set_width((width + pbw) / scale);
-        }
-
-        // Create sub-context to account for the inline layout's padding/border
-        #[cfg(feature = "floats")]
-        let outer_block_ctx = block_ctx;
-        #[cfg(feature = "floats")]
-        let mut block_ctx =
-            outer_block_ctx.sub_context(container_pb.top, [container_pb.left, container_pb.right]);
-        // block_ctx.apply_content_box_inset([container_pb.left, container_pb.right]);
-
-        if inputs.run_mode == taffy::RunMode::ComputeSize
-            && inputs.axis == RequestedAxis::Horizontal
-        {
-            // Put layout back
-            self.nodes[node_id]
-                .data
-                .downcast_element_mut()
-                .unwrap()
-                .inline_layout_data = Some(inline_layout);
-
-            let measured_size = inputs.known_dimensions.unwrap_or(taffy::Size {
-                width: width.ceil() / scale,
-                // Height is ignored if RequestedAxis if Horizontal
-                height: 0.0,
-            });
-
-            let clamped_size = inputs
-                .known_dimensions
-                .or(node_size)
-                .unwrap_or(measured_size + content_box_inset.sum_axes())
-                .maybe_clamp(node_min_size, node_max_size)
-                .maybe_max(container_pb.sum_axes().map(Some));
-
-            return LayoutOutput::from_outer_size(clamped_size);
-        }
-
-        let resolved_text_indent = text_indent
-            .length
-            .resolve(CSSPixelLength::new((width / scale).max(0.0)))
-            .px();
-        inline_layout
-            .layout
-            .set_text_indent(resolved_text_indent * scale, indent_options);
-
-        #[cfg(not(feature = "floats"))]
-        {
-            inline_layout.layout.break_all_lines(Some(width));
-        }
-
-        // Out-of-flow candidates bubbled up from this container and its in-flow subtree.
-        // These are laid out by the out-of-flow positioning pass (`compute_oof_layout`).
-        let mut oof_candidates = OofCandidates::new();
-
-        // Perform inline layout
-        #[cfg(feature = "floats")]
-        {
-            let mut breaker = inline_layout.layout.break_lines();
-            let initial_slot = block_ctx.find_content_slot(0.0, Clear::None, None);
-            let mut has_active_floats = initial_slot.segment_id.is_some();
-            let state = breaker.state_mut();
-            state.set_layout_max_advance(width);
-            state.set_line_max_advance(initial_slot.width * scale);
-            state.set_line_x(initial_slot.x * scale);
-            state.set_line_y((initial_slot.y * scale) as f64);
-
-            // TODO: revert state and retry layout if a line doesn't fit
-            //
-            // Save initial state. Saved state is used to revert the layout to a previous state if needed
-            // (e.g. to revert a line that doesn't fit in the space it was laid out into)
-            //
-            // let mut saved_state = breaker.state().clone();
-
-            while let Some(yield_data) = breaker.break_next() {
-                match yield_data {
-                    YieldData::LineBreak(_line_break_data) => {
-                        let state = breaker.state_mut();
-
-                        if has_active_floats {
-                            // TODO: revert state and retry layout if a line doesn't fit
-                            // saved_state = state.clone();
-
-                            let min_y = state.line_y() / scale as f64;
-                            let next_slot =
-                                block_ctx.find_content_slot(min_y as f32, Clear::None, None);
-                            has_active_floats = next_slot.segment_id.is_some();
-
-                            state.set_line_max_advance(next_slot.width * scale);
-                            state.set_line_x(next_slot.x * scale);
-                            state.set_line_y((next_slot.y * scale) as f64);
-                        } else {
-                            state.set_line_x(0.0);
-                            state.set_line_max_advance(width);
-                        }
-
-                        continue;
-                    }
-                    YieldData::MaxHeightExceeded(_data) => {
-                        // TODO
-                        continue;
-                    }
-                    YieldData::InlineBoxBreak(box_break_data) => {
-                        let state = breaker.state_mut();
-                        let node_id = NodeId::from_u64(box_break_data.inline_box_id);
-
-                        let (direction, clear, margin) = {
-                            let style = self.child_layout_style(&self.nodes[node_id]);
-                            // We can assume that the box is a float because we only set `break_on_box: true` for floats
-                            let direction = match style.float() {
-                                Float::Left => taffy::FloatDirection::Left,
-                                Float::Right => taffy::FloatDirection::Right,
-                                Float::None => unreachable!(),
-                            };
-                            (
-                                direction,
-                                style.clear(),
-                                style
-                                    .margin()
-                                    .resolve_or_zero(inputs.parent_size, resolve_calc_value),
-                            )
-                        };
-
-                        let margin_sum = margin.sum_axes();
-
-                        let mut output = self.compute_child_layout(
-                            crate::taffy_node_id(node_id),
-                            float_child_inputs,
-                        );
-                        let min_y = state.line_y() as f32 / scale;
-
-                        // Note: `pos` is content-box relative
-                        let pos = block_ctx.place_floated_box(
-                            crate::taffy_node_id(node_id).into(),
-                            output.size + margin_sum,
-                            min_y,
-                            direction,
-                            clear,
-                            false,
-                        );
-
-                        let min_y = state.line_y() / scale as f64; //.max(pos.y as f64);
-                        let next_slot =
-                            block_ctx.find_content_slot(min_y as f32, Clear::None, None);
-                        has_active_floats = next_slot.segment_id.is_some();
-
-                        state.set_line_max_advance(next_slot.width * scale);
-                        state.set_line_x(next_slot.x * scale);
-                        state.set_line_y((next_slot.y * scale) as f64);
-
-                        let location = taffy::Point {
-                            x: pos.x + margin.left + container_pb.left,
-                            y: pos.y + margin.top + container_pb.top,
-                        };
-                        let layout = self.nodes[node_id].unrounded_layout_mut();
-                        layout.size = output.size;
-                        layout.location = location;
-                        layout.margin = margin;
-
-                        // Translate anchors from item-relative to container-relative
-                        // coordinates and collect candidates bubbled from the float's subtree
-                        if !output.oof_candidates.is_empty() {
-                            output.oof_candidates.translate(location);
-                            oof_candidates.append(&mut output.oof_candidates);
-                        }
-
-                        // dbg!(&layout.size);
-                        // dbg!(&layout.location);
-
-                        // Floats are out-of-flow and must not contribute to the line's height.
-                        state.append_inline_box_to_line(
-                            box_break_data.advance,
-                            f32::NEG_INFINITY,
-                            f32::NEG_INFINITY,
-                        );
-
-                        // if float.is_floated() {
-                        //     println!("INLINE FLOATED BOX ({}) {:?}", ibox.id, float);
-                        //     println!(
-                        //         "w:{} h:{} x:{}, y:{}",
-                        //         layout.size.width, layout.size.height, 0, 0
-                        //     );
-                        // }
-                    }
-                }
-            }
-            breaker.finish();
-        }
-
-        // Propagate the height consumed by floats placed within this container to the
-        // enclosing block context (so that the BFC root can contain them)
-        #[cfg(feature = "floats")]
-        let float_height_contribution = block_ctx.floated_content_height_contribution();
-        #[cfg(feature = "floats")]
-        outer_block_ctx.add_child_floated_content_height_contribution(
-            container_pb.top + float_height_contribution,
-        );
-
-        let (alignment, last_line_alignment) = self.nodes[node_id]
-            .primary_styles()
-            .map(|s| {
-                (
-                    stylo_to_parley::text_align(s.clone_text_align()),
-                    stylo_to_parley::text_align_last(s.clone_text_align_last()),
-                )
-            })
-            .unwrap_or((parley::layout::Alignment::Start, None));
-
-        inline_layout.layout.align(
-            alignment,
-            AlignmentOptions {
-                align_when_overflowing: false,
-                last_line_alignment,
-            },
-        );
-
-        // Parley lays out empty text as a single strut-height line (text-editor semantics),
-        // but a line box containing no text, inline boxes or other in-flow content is a
-        // zero-height line box in CSS (CSS2 §9.4.2).
-        let has_inline_content =
-            !inline_layout.text.is_empty() || inline_layout.layout.inline_boxes().len() > 0;
-
-        let mut height = if has_inline_content {
-            inline_layout.layout.height()
-        } else {
-            0.0
-        };
-
-        // A forced line break (e.g. `<br>` or a preserved newline) at the end of the inline
-        // content ends the final line box without starting a new one. Parley still emits an
-        // empty line after it (so that editors have a line to place the cursor on), so that
-        // line is excluded from the measured height (and from the last baseline).
-        let line_count = inline_layout.layout.len();
-        let mut trailing_empty_line = None;
-        if line_count >= 2
-            && let (Some(prev_line), Some(last_line)) = (
-                inline_layout.layout.get(line_count - 2),
-                inline_layout.layout.get(line_count - 1),
-            )
-            && prev_line.break_reason() == BreakReason::Explicit
-            && last_line.text_range().is_empty()
-            && last_line.items().next().is_none()
-        {
-            height -= last_line.metrics().line_height;
-            trailing_empty_line = Some(line_count - 1);
-        }
-
-        #[cfg(feature = "floats")]
-        {
-            if is_bfc_root {
-                height = height.max(float_height_contribution * scale)
-            };
-        }
-
-        // Note: `width` and `height` are content-box measurements of the inline content.
-        // `known_dimensions` must not be substituted in here: those are border-box sizes, and
-        // using them for the scrollable overflow rect (which adds padding below) would
-        // double-count padding, incorrectly making the container's content overflow it.
-        let measured_size = taffy::Size {
-            width: width / scale,
-            height: height / scale,
-        };
-
-        // Unbreakable content (e.g. `white-space: pre` text) may overflow the max advance the
-        // lines were broken at. `width` is the advance the lines were broken at, so the actual
-        // extent of the line boxes must be taken from the laid-out lines for `content_size`.
-        let content_width = f32_max(width, inline_layout.layout.width()) / scale;
-
-        let clamped_size = inputs
-            .known_dimensions
-            .or(node_size)
-            .unwrap_or(measured_size + content_box_inset.sum_axes())
-            .maybe_clamp(node_min_size, node_max_size);
-        let final_size = Size {
-            width: clamped_size.width,
-            height: f32_max(
-                clamped_size.height,
-                aspect_ratio
-                    .map(|ratio| clamped_size.width / ratio)
-                    .unwrap_or(0.0),
-            ),
-        }
-        .maybe_max(container_pb.sum_axes().map(Some));
-
-        let container_direction = self.nodes[node_id].layout_style().direction();
-
-        // `align-content` aligns the line boxes (as a single unit) within the content box in
-        // the block axis. Floats are positioned relative to the formatting context and are not
-        // moved. The offset is stored on the text layout for painting and hit-testing.
-        let align_content = BlockContainerStyle::align_content(&self.nodes[node_id].layout_style());
-        let block_offset = if align_content.keyword() == taffy::AlignContentKeyword::Normal {
-            0.0
-        } else {
-            let free_space =
-                final_size.height - content_box_inset.vertical_axis_sum() - measured_size.height;
-            taffy::compute_block_align_content_offset(align_content, free_space)
-        };
-        inline_layout.block_offset = block_offset;
-        let line_box_top = container_pb.top + block_offset;
-
-        // Store sizes and positions of inline boxes
-        let mut ibox_order: u32 = 0;
-        let mut span_cb_flags = StyleFlags::empty();
-        for line in inline_layout.layout.lines() {
-            for item in line.items() {
-                if let parley::layout::PositionedLayoutItem::InlineBox(ibox) = item {
-                    let order = ibox_order;
-                    ibox_order += 1;
-                    if inputs.run_mode == RunMode::PerformLayout {
-                        span_cb_flags |=
-                            self.inline_span_cb_flags(node_id, NodeId::from_u64(ibox.id));
-                    }
-                    let node = &self.nodes[NodeId::from_u64(ibox.id)];
-                    let style = self.child_layout_style(node);
-                    let padding = style
-                        .padding()
-                        .resolve_or_zero(child_inputs.parent_size, resolve_calc_value);
-                    let border = style
-                        .border()
-                        .resolve_or_zero(child_inputs.parent_size, resolve_calc_value);
-                    let margin = style
-                        .margin()
-                        .resolve_or_zero(child_inputs.parent_size, resolve_calc_value);
-
-                    #[cfg(feature = "floats")]
-                    let is_floated = style.float() != Float::None;
-                    #[cfg(not(feature = "floats"))]
-                    let is_floated = false;
-
-                    let position = style.position();
-                    let is_absolute = position.is_out_of_flow();
-                    let item_direction = style.direction();
-                    // Inline formatting contexts have no `justify-items`/`align-items` for an
-                    // `auto` self-alignment to defer to, so it behaves as `normal`.
-                    let justify_self =
-                        OofItemStyle::justify_self(&style).unwrap_or(taffy::AlignItems::NORMAL);
-                    let align_self =
-                        OofItemStyle::align_self(&style).unwrap_or(taffy::AlignItems::NORMAL);
-
-                    // The static position of an absolutely positioned box depends on the
-                    // display its hypothetical box would have had (the display specified
-                    // before position:absolute blockified it): inline-level boxes sit at
-                    // their position within the line, while block-level boxes start at the
-                    // content-box left edge of their containing block.
-                    let is_inline_level =
-                        style.style.get_box().original_display.outside() == DisplayOutside::Inline;
-
-                    // Resolve relative inset offsets against the containing block
-                    // (the content box of the inline container).
-                    let container_content_size = final_size - content_box_inset.sum_axes();
-                    let inset_style = style.inset();
-                    let inset = taffy::Rect {
-                        left: inset_style
-                            .left
-                            .maybe_resolve(container_content_size.width, resolve_calc_value),
-                        right: inset_style
-                            .right
-                            .maybe_resolve(container_content_size.width, resolve_calc_value),
-                        top: inset_style
-                            .top
-                            .maybe_resolve(container_content_size.height, resolve_calc_value),
-                        bottom: inset_style
-                            .bottom
-                            .maybe_resolve(container_content_size.height, resolve_calc_value),
-                    };
-                    let box_inputs = inline_box_inputs(style.size().width, margin, child_inputs);
-                    drop(style);
-
-                    if is_absolute {
-                        // The static-position rectangle
-                        // (https://www.w3.org/TR/css-position-3/#staticpos-rect):
-                        // - An inline-level box's rectangle is zero-width at its position
-                        //   within the line (`ibox.y` is the baseline as out-of-flow boxes are
-                        //   zero-sized) and spans the line box in the block axis.
-                        // - A block-level box's rectangle spans the containing block's content
-                        //   box in the inline axis and is zero-height below the line box.
-                        let line_metrics = line.metrics();
-                        let line_top = (line_metrics.block_min_coord / scale) + line_box_top;
-                        let line_bottom = (line_metrics.block_max_coord / scale) + line_box_top;
-                        let (inline_area, block_area) = if is_inline_level {
-                            let x = (ibox.x / scale) + container_pb.left;
-                            (
-                                taffy::Line { start: x, end: x },
-                                taffy::Line {
-                                    start: line_top,
-                                    end: line_bottom,
-                                },
-                            )
-                        } else {
-                            (
-                                taffy::Line {
-                                    start: container_pb.left,
-                                    end: final_size.width - container_pb.right,
-                                },
-                                taffy::Line {
-                                    start: line_bottom,
-                                    end: line_bottom,
-                                },
-                            )
-                        };
-
-                        oof_candidates.push(OofCandidate {
-                            node: taffy::NodeId::from(ibox.id),
-                            order,
-                            position,
-                            static_position: taffy::Point {
-                                x: AxisStaticPosition::from_alignment(
-                                    justify_self.resolve_self_relative(
-                                        item_direction,
-                                        container_direction,
-                                        true,
-                                    ),
-                                    inline_area,
-                                    container_direction.is_rtl(),
-                                ),
-                                y: AxisStaticPosition::from_alignment(
-                                    align_self.resolve_self_relative(
-                                        item_direction,
-                                        container_direction,
-                                        false,
-                                    ),
-                                    block_area,
-                                    false,
-                                ),
-                            },
-                        });
-                    } else if is_floated {
-                        let layout = self.nodes[NodeId::from_u64(ibox.id)].unrounded_layout_mut();
-                        layout.padding = padding; //.map(|p| p / scale);
-                        layout.border = border; //.map(|p| p / scale);
-                        layout.margin = margin;
-                    } else {
-                        // Re-measure the box to get its border-box size (this hits the layout
-                        // cache). The size cannot be recovered from `ibox` dimensions as the
-                        // space reserved in the line is clamped to be non-negative.
-                        let mut output =
-                            self.compute_child_layout(taffy::NodeId::from(ibox.id), box_inputs);
-                        let size = output.size;
-                        let node = &mut self.nodes[NodeId::from_u64(ibox.id)];
-
-                        let is_relative = position == taffy::Position::Relative;
-                        let inset_offset = if is_relative {
-                            taffy::Point {
-                                x: if container_direction == Direction::Rtl {
-                                    inset.right.map(|x| -x).or(inset.left).unwrap_or(0.0)
-                                } else {
-                                    inset.left.or(inset.right.map(|x| -x)).unwrap_or(0.0)
-                                },
-                                y: inset.top.or(inset.bottom.map(|x| -x)).unwrap_or(0.0),
-                            }
-                        } else {
-                            taffy::Point::ZERO
-                        };
-
-                        let layout = node.unrounded_layout_mut();
-                        layout.size = size;
-                        layout.scrollable_overflow_rect = output.scrollable_overflow_rect;
-                        layout.location.x =
-                            (ibox.x / scale) + margin.left + container_pb.left + inset_offset.x;
-                        // Parley positions the margin box; offset to the border box even
-                        // when a negative top margin makes it extend above the margin box.
-                        layout.location.y =
-                            (ibox.y / scale) + margin.top + line_box_top + inset_offset.y;
-                        layout.padding = padding; //.map(|p| p / scale);
-                        layout.border = border; //.map(|p| p / scale);
-                        layout.margin = margin;
-
-                        // Translate anchors from item-relative to container-relative
-                        // coordinates and collect candidates bubbled from the box's subtree
-                        if !output.oof_candidates.is_empty() {
-                            let location = layout.location;
-                            output.oof_candidates.translate(location);
-                            oof_candidates.append(&mut output.oof_candidates);
-                        }
-                    }
-                }
-            }
-        }
-
-        // println!("INLINE LAYOUT FOR {:?}. max_advance: {:?}", node_id, max_advance);
-        // dbg!(&inline_layout.text);
-        // println!("Computed: w: {} h: {}", inline_layout.layout.width(), inline_layout.layout.height());
-        // println!("known_dimensions: w: {:?} h: {:?}", inputs.known_dimensions.width, inputs.known_dimensions.height);
-        // println!("\n");
-
-        let line_baseline =
-            |line: parley::Line<'_, _>| (line.metrics().baseline / scale) + line_box_top;
-        let exports_baseline = has_inline_content && !suppresses_baseline;
-        let first_baseline = exports_baseline
-            .then(|| inline_layout.layout.lines().next().map(line_baseline))
-            .flatten();
-        let last_line_index = trailing_empty_line.unwrap_or(line_count).checked_sub(1);
-        let last_baseline = exports_baseline
-            .then(|| last_line_index.and_then(|i| inline_layout.layout.get(i)))
-            .flatten()
-            .map(line_baseline);
-
-        if inputs.run_mode == RunMode::PerformLayout {
-            inline_layout.span_cb_flags = span_cb_flags;
-        }
-
-        // Put layout back
-        self.nodes[node_id]
-            .data
-            .downcast_element_mut()
-            .unwrap()
-            .inline_layout_data = Some(inline_layout);
-
-        let oof_position_inset = taffy::Rect {
-            left: border.left,
-            right: border.right + scrollbar_gutter.x,
-            top: border.top,
-            bottom: border.bottom + scrollbar_gutter.y,
-        };
-
-        LayoutOutput {
-            size: final_size,
-            scrollable_overflow_rect: {
-                let content_extent = taffy::Size {
-                    width: content_width,
-                    height: measured_size.height,
-                } + padding.sum_axes();
-                taffy::Rect {
-                    left: 0.0,
-                    right: content_extent.width,
-                    top: 0.0,
-                    bottom: content_extent.height + block_offset.max(0.0),
-                }
-            },
-            baselines: taffy::Baselines {
-                first: first_baseline,
-                last: last_baseline,
-            },
-            top_margin: CollapsibleMarginSet::ZERO,
-            bottom_margin: CollapsibleMarginSet::ZERO,
-            margins_can_collapse_through: !has_styles_preventing_being_collapsed_through
-                && final_size.height == 0.0
-                && measured_size.height == 0.0,
-            oof_candidates,
-            oof_positioning_area: Some(OofPositioningArea {
-                size: final_size - oof_position_inset.sum_axes(),
-                offset: Point {
-                    x: oof_position_inset.left,
-                    y: oof_position_inset.top,
-                },
-            }),
-        }
-    }
-}
-
-#[inline(always)]
-fn f32_max(a: f32, b: f32) -> f32 {
-    a.max(b)
-}
diff --git a/packages/blitz-dom/src/layout/inline/build.rs b/packages/blitz-dom/src/layout/inline/build.rs
new file mode 100644
index 0000000000..a43b086f5a
--- /dev/null
+++ b/packages/blitz-dom/src/layout/inline/build.rs
@@ -0,0 +1,178 @@
+//! Walking the DOM of an inline formatting context into a text backend's builder.
+
+use markup5ever::local_name;
+use style::properties::ComputedValues;
+use style::values::computed::Display;
+use style::values::specified::box_::{DisplayInside, DisplayOutside};
+
+use crate::layout::replaced::is_inline_box_element;
+use crate::layout::text_transform::{CaseTransform, TextTransformer};
+use crate::node::{ListItemLayout, ListItemLayoutPosition};
+use crate::text::{InlineBoxKind, InlineBuilder, SpanKind};
+use crate::{Node, NodeData, NodeTree};
+
+/// Pushes the content of the inline formatting context rooted at `root` into `builder`: the
+/// marker of a list item whose marker is inside it, then its `::before`, its children and its
+/// `::after`, in tree order.
+pub(crate) fn push_inline_content<B: InlineBuilder>(
+    nodes: &NodeTree,
+    root: &Node,
+    builder: &mut B,
+) {
+    // An anonymous block has no style of its own: its text is set in the box around it.
+    let root_style = root.primary_styles().or_else(|| {
+        root.parent
+            .and_then(|parent| nodes[parent].primary_styles())
+    });
+    let text_transform = case_transform::<B>(root_style.as_deref().map(|style| &**style));
+    drop(root_style);
+
+    if let Some(ListItemLayout {
+        marker,
+        position: ListItemLayoutPosition::Inside,
+    }) = root
+        .element_data()
+        .and_then(|element| element.list_item_data.as_deref())
+    {
+        builder.push_marker(marker);
+    }
+    let mut walk = Walk {
+        nodes,
+        // The marker is a box of its own, so the content's words do not continue from it.
+        transformer: TextTransformer::default(),
+    };
+    walk.transformer.word_break(builder);
+    walk.children_and_pseudos(builder, root, &text_transform);
+}
+
+/// The text transform text inside an element set in `style` is pushed with, where Blitz
+/// transforms text for the backend.
+fn case_transform<B: InlineBuilder>(style: Option<&ComputedValues>) -> CaseTransform {
+    match style {
+        Some(style) if !B::TRANSFORMS_TEXT => CaseTransform::from_style(style),
+        _ => CaseTransform::NONE,
+    }
+}
+
+/// The walk of an inline formatting context's DOM.
+struct Walk<'a> {
+    nodes: &'a NodeTree,
+    /// Transforms text where the backend does not.
+    transformer: TextTransformer,
+}
+
+impl Walk<'_> {
+    /// Pushes `parent`'s `::before`, children and `::after`, whose text is transformed by
+    /// `text_transform`.
+    fn children_and_pseudos<B: InlineBuilder>(
+        &mut self,
+        builder: &mut B,
+        parent: &Node,
+        text_transform: &CaseTransform,
+    ) {
+        if let Some(before) = parent.before() {
+            self.node(builder, &self.nodes[before], text_transform);
+        }
+        for &child in &parent.children {
+            self.node(builder, &self.nodes[child], text_transform);
+        }
+        if let Some(after) = parent.after() {
+            self.node(builder, &self.nodes[after], text_transform);
+        }
+    }
+
+    /// Pushes `node`, whose text is transformed by its parent's `parent_transform`.
+    fn node<B: InlineBuilder>(
+        &mut self,
+        builder: &mut B,
+        node: &Node,
+        parent_transform: &CaseTransform,
+    ) {
+        let element = match &node.data {
+            NodeData::Element(element) | NodeData::AnonymousBlock(element) => element,
+            NodeData::Text(data) => {
+                let text = self
+                    .transformer
+                    .transform(&data.content, parent_transform, builder);
+                builder.push_text(node, text);
+                return;
+            }
+            NodeData::Comment { .. } | NodeData::Document(_) => return,
+        };
+        if *element.name.local == *"input" && element.attr(local_name!("type")) == Some("hidden") {
+            return;
+        }
+        let Some(style) = node.primary_styles() else {
+            return;
+        };
+        let display = node.display_style().unwrap_or(Display::inline());
+        match (display.outside(), display.inside()) {
+            (DisplayOutside::None, DisplayInside::None) => {}
+            // No box, but its children inherit from it.
+            (DisplayOutside::None, DisplayInside::Contents) => {
+                let text_transform = case_transform::<B>(Some(&**style));
+                builder.push_span(node, &style, SpanKind::Contents);
+                self.children_and_pseudos(builder, node, &text_transform);
+                builder.pop_span(SpanKind::Contents);
+            }
+            _ if style.slow_clone_position().is_absolutely_positioned() => {
+                builder.push_inline_box(node, &style, InlineBoxKind::Absolute);
+            }
+            (DisplayOutside::Inline, DisplayInside::Flow) => {
+                let tag = &element.name.local;
+                if is_inline_box_element(tag) {
+                    self.transformer.word_break(builder);
+                    builder.push_inline_box(node, &style, InlineBoxKind::Atomic);
+                } else if *tag == local_name!("br") {
+                    builder.push_line_break(node, &style);
+                    self.transformer.word_break(builder);
+                } else if *tag == local_name!("wbr") && builder.push_break_opportunity(node) {
+                } else if B::SETS_RUBY && *tag == local_name!("rp") {
+                    // The fallback parentheses, for a renderer that cannot set ruby.
+                } else {
+                    let kind = if !B::SETS_RUBY {
+                        SpanKind::Span
+                    } else if *tag == local_name!("ruby") {
+                        SpanKind::Ruby
+                    } else if *tag == local_name!("rt") {
+                        SpanKind::Annotation {
+                            in_container: node.parent.is_some_and(|parent| {
+                                self.nodes[parent]
+                                    .data
+                                    .is_element_with_tag_name(&local_name!("rtc"))
+                            }),
+                        }
+                    } else if *tag == local_name!("rtc") {
+                        // An annotation container is the annotation itself where it holds no
+                        // `<rt>`; one that does is transparent, each `<rt>` an annotation.
+                        let holds_annotation = node.children.iter().any(|&child| {
+                            self.nodes[child]
+                                .data
+                                .is_element_with_tag_name(&local_name!("rt"))
+                        });
+                        if holds_annotation {
+                            SpanKind::Contents
+                        } else {
+                            SpanKind::Annotation {
+                                in_container: false,
+                            }
+                        }
+                    } else {
+                        SpanKind::Span
+                    };
+                    let text_transform = case_transform::<B>(Some(&**style));
+                    builder.push_span(node, &style, kind);
+                    self.children_and_pseudos(builder, node, &text_transform);
+                    builder.pop_span(kind);
+                }
+            }
+            _ if style.slow_clone_float().is_floating() => {
+                builder.push_inline_box(node, &style, InlineBoxKind::Float);
+            }
+            _ => {
+                self.transformer.word_break(builder);
+                builder.push_inline_box(node, &style, InlineBoxKind::Atomic);
+            }
+        }
+    }
+}
diff --git a/packages/blitz-dom/src/layout/inline/floats.rs b/packages/blitz-dom/src/layout/inline/floats.rs
new file mode 100644
index 0000000000..bead9cae76
--- /dev/null
+++ b/packages/blitz-dom/src/layout/inline/floats.rs
@@ -0,0 +1,253 @@
+//! The floats an inline formatting context's lines flow around.
+
+// Without float layout, the lines are broken without asking about floats.
+#![cfg_attr(not(feature = "floats"), allow(dead_code))]
+
+use crate::text::{FloatRequest, FloatSide, LineExclusions, PlacedFloat};
+
+/// A float placed while the lines were broken: its node and its margin box in device pixels,
+/// relative to the content box.
+#[derive(Copy, Clone, Debug)]
+pub(crate) struct Floated {
+    /// The key the content holds it by.
+    pub(crate) key: u64,
+    pub(crate) side: FloatSide,
+    /// Whether it is the room a block's initial letter takes.
+    pub(crate) initial_letter: bool,
+    pub(crate) left: f32,
+    pub(crate) right: f32,
+    pub(crate) top: f32,
+    pub(crate) bottom: f32,
+}
+
+impl Floated {
+    /// Whether it narrows what reaches across the block from `start` to `end`: a line box, or a
+    /// float being placed. A line of no height is asked about where it stands.
+    fn overlaps(&self, start: f32, end: f32) -> bool {
+        self.bottom > self.top && self.top < end.max(start + f32::EPSILON) && self.bottom > start
+    }
+}
+
+/// The room the block formatting context leaves an inline formatting context's lines, and the
+/// floats placed as the text reaches them.
+///
+/// The floats the blocks before this one placed are read from Taffy's context, which cannot take
+/// one back; the ones this block's text places are kept here, where a trial break the line breaker
+/// takes back takes them back too, and are handed to Taffy once the lines are settled.
+///
+/// The lines measure in device pixels and Taffy in CSS pixels, so every answer is scaled on the
+/// way through.
+pub(crate) struct FloatRoom<'c, 'bfc> {
+    #[cfg(feature = "floats")]
+    pub(crate) outer: Option<&'c taffy::BlockContext<'bfc>>,
+    #[cfg(not(feature = "floats"))]
+    pub(crate) outer: core::marker::PhantomData<(&'c (), &'bfc ())>,
+    /// How wide a line is where no float is in the way.
+    pub(crate) width: f32,
+    /// Device pixels a CSS pixel, which the floats of the blocks before this one are placed in.
+    pub(crate) scale: f32,
+    /// Each float's `clear`, by key.
+    #[cfg(feature = "floats")]
+    pub(crate) clears: &'c [(u64, taffy::Clear)],
+    /// The floats placed so far, in the order the text reached them.
+    pub(crate) placed: Vec<Floated>,
+}
+
+impl FloatRoom<'_, '_> {
+    /// The room along a line that reaches across the block from `start` to `end`, as the floats
+    /// before this block leave it.
+    #[cfg_attr(not(feature = "floats"), allow(unused_mut))]
+    fn outer_band(&self, start: f32, end: f32) -> (f32, f32) {
+        let mut band = (0.0, self.width);
+        #[cfg(feature = "floats")]
+        if let Some(outer) = self.outer {
+            // Every segment of floats the line reaches across: the narrowest of them is its room.
+            let scale = self.scale;
+            let mut at = start / scale;
+            let mut after = None;
+            for _ in 0..64 {
+                let slot = outer.find_content_slot(at, taffy::Clear::None, after);
+                let Some(segment) = slot.segment_id else {
+                    break;
+                };
+                band.0 = f32::max(band.0, slot.x * scale);
+                band.1 = f32::min(band.1, (slot.x + slot.width) * scale);
+                let next = outer.find_content_slot(at, taffy::Clear::None, Some(segment));
+                if next.segment_id.is_none() || next.y * scale >= end.max(start + f32::EPSILON) {
+                    break;
+                }
+                at = next.y;
+                after = Some(segment);
+            }
+        }
+        #[cfg(not(feature = "floats"))]
+        let _ = (start, end);
+        band
+    }
+
+    /// The next position below `top` where the floats before this block change the room.
+    fn outer_below(&self, top: f32) -> Option<f32> {
+        #[cfg(feature = "floats")]
+        if let Some(outer) = self.outer {
+            let at = top / self.scale;
+            let slot = outer.find_content_slot(at, taffy::Clear::None, None);
+            let segment = slot.segment_id?;
+            let next = outer.find_content_slot(at, taffy::Clear::None, Some(segment));
+            if next.segment_id.is_some() {
+                return Some(next.y * self.scale);
+            }
+            // Past the last segment no float is in the way.
+            return outer
+                .cleared_threshold(taffy::Clear::Both)
+                .map(|bottom| bottom * self.scale)
+                .filter(|bottom| *bottom > top);
+        }
+        #[cfg(not(feature = "floats"))]
+        let _ = top;
+        None
+    }
+
+    /// The room a line or a float has across the block from `start` to `end`, every float
+    /// counted.
+    fn room(&self, start: f32, end: f32) -> (f32, f32) {
+        let mut band = self.outer_band(start, end);
+        for float in &self.placed {
+            if float.overlaps(start, end) {
+                match float.side {
+                    FloatSide::Left => band.0 = band.0.max(float.right),
+                    FloatSide::Right => band.1 = band.1.min(float.left),
+                }
+            }
+        }
+        band
+    }
+
+    /// Where the floats placed on the sides the float `key` clears end: the top it is placed from.
+    fn cleared(&self, key: u64) -> f32 {
+        #[cfg(feature = "floats")]
+        {
+            let clear = self
+                .clears
+                .iter()
+                .find(|(node, _)| *node == key)
+                .map_or(taffy::Clear::None, |(_, clear)| *clear);
+            let clears = |side: FloatSide| match clear {
+                taffy::Clear::Both => true,
+                taffy::Clear::Left => side == FloatSide::Left,
+                taffy::Clear::Right => side == FloatSide::Right,
+                taffy::Clear::None => false,
+            };
+            let local = self
+                .placed
+                .iter()
+                .filter(|float| clears(float.side))
+                .map(|float| float.bottom)
+                .fold(f32::NEG_INFINITY, f32::max);
+            let outer = self
+                .outer
+                .and_then(|outer| outer.cleared_threshold(clear))
+                .map_or(f32::NEG_INFINITY, |bottom| bottom * self.scale);
+            local.max(outer)
+        }
+        #[cfg(not(feature = "floats"))]
+        {
+            let _ = key;
+            f32::NEG_INFINITY
+        }
+    }
+}
+
+impl LineExclusions for FloatRoom<'_, '_> {
+    fn band(&self, start: f32, end: f32) -> (f32, f32) {
+        self.room(start, end)
+    }
+
+    fn below(&self, top: f32) -> Option<f32> {
+        let local = self
+            .placed
+            .iter()
+            .flat_map(|float| [float.top, float.bottom])
+            .filter(|edge| *edge > top)
+            .fold(None, |least: Option<f32>, edge| {
+                Some(least.map_or(edge, |least| least.min(edge)))
+            });
+        match (local, self.outer_below(top)) {
+            (Some(local), Some(outer)) => Some(local.min(outer)),
+            (local, outer) => local.or(outer),
+        }
+    }
+
+    /// Places a float as CSS 2.1 §9.5.1 does: no higher than the line that reached it or any
+    /// float before it, below what it clears, and as high as it fits, then as far to its side as
+    /// it goes.
+    ///
+    /// An initial letter's room is placed as Chrome's `CreateExclusionSpaceForInitialLetterBox`
+    /// places it: at its line's top, even above an earlier float, and below any initial letter
+    /// before it. A float after it on its side goes below it, whatever the float clears.
+    fn place(&mut self, float: FloatRequest) -> PlacedFloat {
+        let width = float.inline_size.max(0.0);
+        let height = float.block_size.max(0.0);
+        let below_letters = |side: Option<FloatSide>| {
+            self.placed
+                .iter()
+                .filter(|placed| {
+                    placed.initial_letter && side.is_none_or(|side| placed.side == side)
+                })
+                .map(|placed| placed.bottom)
+                .fold(f32::NEG_INFINITY, f32::max)
+        };
+        let mut top = if float.initial_letter {
+            float.block_start.max(below_letters(None))
+        } else {
+            let earlier = self
+                .placed
+                .iter()
+                .map(|placed| placed.top)
+                .fold(f32::NEG_INFINITY, f32::max);
+            float
+                .block_start
+                .max(earlier)
+                .max(self.cleared(float.key))
+                .max(below_letters(Some(float.side)))
+        };
+        let mut band = self.room(top, top + height);
+        for _ in 0..256 {
+            // It fits, or nothing narrows the room it does not fit in.
+            if band.1 - band.0 >= width - 0.01 || (band.0 <= 0.0 && band.1 >= self.width) {
+                break;
+            }
+            let Some(next) = self.below(top).filter(|next| *next > top) else {
+                break;
+            };
+            top = next;
+            band = self.room(top, top + height);
+        }
+        let left = match float.side {
+            FloatSide::Left => band.0,
+            FloatSide::Right => band.1 - width,
+        };
+        self.placed.push(Floated {
+            key: float.key,
+            side: float.side,
+            initial_letter: float.initial_letter,
+            left,
+            right: left + width,
+            top,
+            bottom: top + height,
+        });
+        PlacedFloat {
+            left,
+            right: left + width,
+            top,
+            bottom: top + height,
+        }
+    }
+
+    fn checkpoint(&self) -> usize {
+        self.placed.len()
+    }
+
+    fn rewind(&mut self, to: usize) {
+        self.placed.truncate(to);
+    }
+}
diff --git a/packages/blitz-dom/src/layout/inline/lines.rs b/packages/blitz-dom/src/layout/inline/lines.rs
new file mode 100644
index 0000000000..7472389d19
--- /dev/null
+++ b/packages/blitz-dom/src/layout/inline/lines.rs
@@ -0,0 +1,1349 @@
+//! Measuring an inline formatting context's boxes, breaking its lines and placing what they hold,
+//! for every text backend.
+
+use blitz_traits::node_id::NodeId;
+use style::values::computed::Float as StyloFloat;
+use style::values::specified::box_::{BaselineSource, DisplayInside, DisplayOutside};
+use taffy::{
+    AvailableSpace, AxisStaticPosition, BlockContainerStyle, BlockContext, CollapsibleMarginSet,
+    CoreStyle as _, Direction, LayoutOutput, LayoutPartialTree as _, MaybeMath as _,
+    MaybeResolve as _, OofCandidate, OofCandidates, OofItemStyle, OofPositioningArea, Overflow,
+    Point, RequestedAxis, ResolveOrZero as _, RunMode, Size,
+};
+
+#[cfg(feature = "floats")]
+use taffy::{BlockItemStyle as _, Clear, Float};
+
+use stylo_taffy::StyleFlags;
+
+use super::floats::FloatRoom;
+#[cfg(feature = "floats")]
+use super::floats::Floated;
+use super::{Frame, f32_max, float_box_inputs, inline_box_inputs};
+use crate::layout::LayoutPassState;
+use crate::layout::replaced::is_replaced_element;
+use crate::layout::resolve_calc_value;
+use crate::node::TextLayout;
+use crate::text::{
+    BoxMeasure, FloatSide, InlineLayoutEngine as _, InlineText as _, LastBaseline, LineArea,
+    LinesInputs, Measure, Placement,
+};
+
+impl LayoutPassState<'_> {
+    /// Measures the inline formatting context's boxes, breaks its lines and places them and what
+    /// they hold, in the room `frame` describes.
+    pub(super) fn lay_out_lines(
+        &mut self,
+        node_id: NodeId,
+        mut inline_layout: Box<TextLayout>,
+        frame: Frame,
+        block_ctx: &mut BlockContext<'_>,
+    ) -> LayoutOutput {
+        let Frame {
+            inputs,
+            node_size,
+            node_min_size,
+            node_max_size,
+            aspect_ratio,
+            padding,
+            border,
+            scrollbar_gutter,
+            container_pb,
+            content_box_inset,
+            child_inputs,
+            available_space,
+            collapses_through,
+            suppresses_baseline,
+            scale,
+        } = frame;
+        let known_dimensions = inputs.known_dimensions;
+
+        // Short circuit if inline context contains no text or inline boxes
+        if !collapses_through && inline_layout.is_empty() {
+            self.put_inline_layout(node_id, inline_layout);
+            return LayoutOutput::from_outer_size(
+                Size::ZERO.maybe_max(container_pb.sum_axes().map(Some)),
+            );
+        }
+
+        // Whether the lines run down the page, where the backend sets them so, which turns what
+        // Taffy measures across them.
+        let vertical = TextLayout::SETS_WRITING_MODES && {
+            let node = &self.nodes[node_id];
+            node.primary_styles()
+                .map(|computed| computed.writing_mode.is_vertical())
+                .or_else(|| {
+                    node.parent.and_then(|parent| {
+                        self.nodes[parent]
+                            .primary_styles()
+                            .map(|computed| computed.writing_mode.is_vertical())
+                    })
+                })
+                .unwrap_or(false)
+        };
+        // What the pass needs of the atomic inlines, which says how far each is laid out to
+        // measure it. A pass that places them lays them out.
+        let pass = match inputs.run_mode {
+            RunMode::ComputeSize if !vertical && inputs.axis == RequestedAxis::Horizontal => {
+                Measure::InlineSizes
+            }
+            RunMode::ComputeSize => Measure::Sizes,
+            _ => Measure::Layout,
+        };
+        // Where the boxes are placed, they are laid out. The requested axis means nothing to a
+        // full layout, so every pass asks for one alike.
+        let child_inputs = taffy::LayoutInput {
+            run_mode: RunMode::PerformLayout,
+            axis: RequestedAxis::Both,
+            ..child_inputs
+        };
+        // The containing block's inline size, which a float's room is taken of.
+        let basis = match available_space.width {
+            AvailableSpace::Definite(width) => width,
+            _ => 0.0,
+        };
+        let sizes = self.measure_inline_boxes(node_id, child_inputs, pass, basis, vertical);
+        inline_layout.prepare(
+            self,
+            node_id,
+            LinesInputs {
+                sizes: &sizes,
+                pass,
+                basis,
+                vertical,
+            },
+        );
+        // Each float's `clear`, which the floats it reaches below are placed under.
+        #[cfg(feature = "floats")]
+        let clears: Vec<(u64, Clear)> = sizes
+            .iter()
+            .filter(|measured| measured.float.is_some())
+            .map(|measured| {
+                let style = self.child_layout_style(&self.nodes[measured.node]);
+                (measured.node.as_u64(), style.clear())
+            })
+            .collect();
+
+        if inline_layout.line_flow().is_vertical() {
+            return self.lay_out_vertical_lines(
+                node_id,
+                inline_layout,
+                frame,
+                LinePass {
+                    pass,
+                    child_inputs,
+                    basis,
+                    #[cfg(feature = "floats")]
+                    clears: &clears,
+                    #[cfg(not(feature = "floats"))]
+                    clears: core::marker::PhantomData,
+                },
+            );
+        }
+
+        let pbw = container_pb.horizontal_components().sum() * scale;
+        let width = known_dimensions
+            .width
+            .map(|w| (w * scale) - pbw)
+            .unwrap_or_else(|| {
+                let widths = inline_layout.content_widths();
+                let computed_width = match available_space.width {
+                    AvailableSpace::MinContent => widths.min,
+                    AvailableSpace::MaxContent => widths.max,
+                    AvailableSpace::Definite(limit) => {
+                        (limit * scale).min(widths.max).max(widths.min)
+                    }
+                }
+                .ceil();
+
+                let style_width = node_size.width.map(|w| w * scale);
+                let min_width = node_min_size.width.map(|w| w * scale);
+                let max_width = node_max_size.width.map(|w| w * scale);
+
+                (style_width)
+                    .unwrap_or(computed_width + pbw)
+                    .max(computed_width)
+                    .maybe_clamp(min_width, max_width)
+                    - pbw
+            });
+
+        // Set block context width if this is a block context root
+        #[cfg(feature = "floats")]
+        let is_bfc_root = block_ctx.is_bfc_root();
+        #[cfg(feature = "floats")]
+        if is_bfc_root {
+            block_ctx.set_width((width + pbw) / scale);
+        }
+
+        // Create sub-context to account for the inline layout's padding/border
+        #[cfg(feature = "floats")]
+        let mut block_ctx =
+            block_ctx.sub_context(container_pb.top, [container_pb.left, container_pb.right]);
+        #[cfg(not(feature = "floats"))]
+        let _ = block_ctx;
+
+        if inputs.run_mode == taffy::RunMode::ComputeSize
+            && inputs.axis == RequestedAxis::Horizontal
+        {
+            self.put_inline_layout(node_id, inline_layout);
+
+            let measured_size = inputs.known_dimensions.unwrap_or(taffy::Size {
+                width: width.ceil() / scale,
+                // Height is ignored if RequestedAxis if Horizontal
+                height: 0.0,
+            });
+
+            let clamped_size = inputs
+                .known_dimensions
+                .or(node_size)
+                .unwrap_or(measured_size + content_box_inset.sum_axes())
+                .maybe_clamp(node_min_size, node_max_size)
+                .maybe_max(container_pb.sum_axes().map(Some));
+
+            return LayoutOutput::from_outer_size(clamped_size);
+        }
+
+        // Out-of-flow candidates bubbled up from this container and its in-flow subtree.
+        // These are laid out by the out-of-flow positioning pass (`compute_oof_layout`).
+        let mut oof_candidates = OofCandidates::new();
+
+        // Where the content box ends where its `height` or `max-height` puts an end to it, which
+        // `line-clamp: auto` keeps the lines within.
+        let inset_height = content_box_inset.vertical_components().sum();
+        let block_end = known_dimensions
+            .height
+            .or(node_size.height)
+            .or(node_max_size.height)
+            .map(|height| (height - inset_height).max(0.0) * scale);
+        let room_above = if inline_layout.takes_room_above() {
+            let margin = self.nodes[node_id]
+                .layout_style()
+                .margin()
+                .resolve_or_zero(inputs.parent_size.width, resolve_calc_value);
+            self.room_above(node_id, margin.top, padding.top, container_pb.top, inputs) * scale
+        } else {
+            0.0
+        };
+        let area = LineArea {
+            width,
+            room_above,
+            block_end,
+            sizes_only: pass != Measure::Layout,
+            pass: self.nodes.geometry_generation(),
+        };
+        let floats = {
+            let style = self.nodes[node_id].primary_styles().map(|s| (*s).clone());
+            let mut room = FloatRoom {
+                #[cfg(feature = "floats")]
+                outer: Some(&block_ctx),
+                #[cfg(not(feature = "floats"))]
+                outer: core::marker::PhantomData,
+                width,
+                scale,
+                #[cfg(feature = "floats")]
+                clears: &clears,
+                placed: Vec::new(),
+            };
+            crate::text::PERF_COUNTS[1].fetch_add(1, core::sync::atomic::Ordering::Relaxed);
+            inline_layout.break_lines(&mut self.text, area, style.as_deref(), &mut room);
+            room.placed
+        };
+
+        let extent = inline_layout.extent(padding.bottom * scale);
+        #[cfg_attr(not(feature = "floats"), allow(unused_mut))]
+        let mut height = extent.height;
+
+        // A block formatting context's root holds its floats.
+        #[cfg(feature = "floats")]
+        if is_bfc_root {
+            height = floats
+                .iter()
+                .map(|float| float.bottom)
+                .fold(height, f32::max);
+        }
+
+        // Note: `width` and `height` are content-box measurements of the inline content.
+        // `known_dimensions` must not be substituted in here: those are border-box sizes, and
+        // using them for the scrollable overflow rect (which adds padding below) would
+        // double-count padding, incorrectly making the container's content overflow it.
+        let measured_size = taffy::Size {
+            width: width / scale,
+            height: height / scale,
+        };
+
+        // Unbreakable content (e.g. `white-space: pre` text) may overflow the max advance the
+        // lines were broken at. `width` is the advance the lines were broken at, so the actual
+        // extent of the line boxes must be taken from the laid-out lines for `content_size`.
+        let content_width = f32_max(width, extent.width) / scale;
+
+        let clamped_size = inputs
+            .known_dimensions
+            .or(node_size)
+            .unwrap_or(measured_size + content_box_inset.sum_axes())
+            .maybe_clamp(node_min_size, node_max_size);
+        let final_size = Size {
+            width: clamped_size.width,
+            height: f32_max(
+                clamped_size.height,
+                aspect_ratio
+                    .map(|ratio| clamped_size.width / ratio)
+                    .unwrap_or(0.0),
+            ),
+        }
+        .maybe_max(container_pb.sum_axes().map(Some));
+
+        let container_direction = self.nodes[node_id].layout_style().direction();
+
+        // `align-content` aligns the line boxes (as a single unit) within the content box in
+        // the block axis. Floats are positioned relative to the formatting context and are not
+        // moved. The offset is stored on the text layout for painting and hit-testing.
+        let align_content = BlockContainerStyle::align_content(&self.nodes[node_id].layout_style());
+        let block_offset = if align_content.keyword() == taffy::AlignContentKeyword::Normal {
+            0.0
+        } else {
+            let free_space =
+                final_size.height - content_box_inset.vertical_axis_sum() - measured_size.height;
+            taffy::compute_block_align_content_offset(align_content, free_space)
+        };
+        let content = (final_size - content_box_inset.sum_axes()).map(|size| size * scale);
+        inline_layout.set_frame(block_offset, content);
+        let line_box_top = container_pb.top + block_offset;
+
+        // Store sizes and positions of inline boxes. A pass that only sizes the block places
+        // nothing.
+        let mut span_cb_flags = StyleFlags::empty();
+        let placements = inline_layout
+            .placements()
+            .filter(|_| pass == Measure::Layout)
+            .enumerate();
+        let frame_at = PlacedFrame {
+            child_inputs,
+            container_pb,
+            line_box_top,
+            content_box_inset,
+            final_size,
+            container_direction,
+            scale,
+        };
+        for (order, placed) in placements {
+            if inputs.run_mode == RunMode::PerformLayout {
+                span_cb_flags |= self.inline_span_cb_flags(node_id, placed.node);
+            }
+            self.place_inline_box(&placed, order as u32, &frame_at, &mut oof_candidates);
+        }
+
+        // Each float goes where the lines flowed around it, and into the block formatting context
+        // for the blocks after this one.
+        #[cfg(feature = "floats")]
+        if inputs.run_mode == RunMode::PerformLayout {
+            for float in &floats {
+                let direction = match float.side {
+                    FloatSide::Left => taffy::FloatDirection::Left,
+                    FloatSide::Right => taffy::FloatDirection::Right,
+                };
+                let clear = clears
+                    .iter()
+                    .find(|(node, _)| *node == float.key)
+                    .map_or(Clear::None, |(_, clear)| *clear);
+                block_ctx.place_floated_box(
+                    float.key,
+                    Size {
+                        width: (float.right - float.left) / scale,
+                        height: (float.bottom - float.top) / scale,
+                    },
+                    float.top / scale,
+                    direction,
+                    clear,
+                    false,
+                );
+                // The block's initial letter goes into the context alone: its box is painted from
+                // the lines.
+                if let Some(node) = TextLayout::float_node(float.key) {
+                    self.place_float(
+                        node,
+                        float,
+                        child_inputs,
+                        basis,
+                        container_pb,
+                        scale,
+                        &mut oof_candidates,
+                    );
+                }
+            }
+        }
+        #[cfg(not(feature = "floats"))]
+        let _ = floats;
+
+        let line_baseline = |baseline: f32| (baseline / scale) + line_box_top;
+        let first_baseline = extent
+            .first_baseline
+            .filter(|_| !suppresses_baseline)
+            .map(line_baseline);
+        let last_baseline = extent
+            .last_baseline
+            .filter(|_| !suppresses_baseline)
+            .map(line_baseline);
+
+        if inputs.run_mode == RunMode::PerformLayout {
+            inline_layout.span_cb_flags = span_cb_flags;
+        }
+
+        self.put_inline_layout(node_id, inline_layout);
+
+        let oof_position_inset = taffy::Rect {
+            left: border.left,
+            right: border.right + scrollbar_gutter.x,
+            top: border.top,
+            bottom: border.bottom + scrollbar_gutter.y,
+        };
+
+        LayoutOutput {
+            size: final_size,
+            scrollable_overflow_rect: {
+                let content_extent = taffy::Size {
+                    width: content_width,
+                    height: measured_size.height,
+                } + padding.sum_axes();
+                taffy::Rect {
+                    left: 0.0,
+                    right: content_extent.width,
+                    top: 0.0,
+                    bottom: content_extent.height + block_offset.max(0.0),
+                }
+            },
+            baselines: taffy::Baselines {
+                first: first_baseline,
+                last: last_baseline,
+            },
+            top_margin: CollapsibleMarginSet::ZERO,
+            bottom_margin: CollapsibleMarginSet::ZERO,
+            // A line of no height still stops the margins collapsing through: only phantom lines,
+            // which make no line box, let them (CSS 2, section 8.3.1; CSS Inline 3, "invisible
+            // line boxes").
+            margins_can_collapse_through: !collapses_through
+                && final_size.height == 0.0
+                && measured_size.height == 0.0
+                && extent.first_baseline.is_none(),
+            oof_candidates,
+            oof_positioning_area: Some(OofPositioningArea {
+                size: final_size - oof_position_inset.sum_axes(),
+                offset: Point {
+                    x: oof_position_inset.left,
+                    y: oof_position_inset.top,
+                },
+            }),
+        }
+    }
+
+    /// Sets where a float the lines flowed around goes, and hands on the absolutely positioned
+    /// boxes it holds.
+    #[cfg(feature = "floats")]
+    #[allow(clippy::too_many_arguments)]
+    fn place_float(
+        &mut self,
+        node: NodeId,
+        float: &Floated,
+        child_inputs: taffy::LayoutInput,
+        basis: f32,
+        container_pb: taffy::Rect<f32>,
+        scale: f32,
+        oof_candidates: &mut OofCandidates,
+    ) {
+        let (margin, padding, border) = {
+            let style = self.child_layout_style(&self.nodes[node]);
+            (
+                style
+                    .margin()
+                    .resolve_or_zero(child_inputs.parent_size, resolve_calc_value),
+                style
+                    .padding()
+                    .resolve_or_zero(child_inputs.parent_size, resolve_calc_value),
+                style
+                    .border()
+                    .resolve_or_zero(child_inputs.parent_size, resolve_calc_value),
+            )
+        };
+        let mut output = self.compute_child_layout(
+            crate::taffy_node_id(node),
+            float_box_inputs(child_inputs, basis, margin),
+        );
+        let layout = self.nodes[node].unrounded_layout_mut();
+        layout.size = output.size;
+        layout.location.x = (float.left / scale) + margin.left + container_pb.left;
+        layout.location.y = (float.top / scale) + margin.top + container_pb.top;
+        layout.padding = padding;
+        layout.border = border;
+        layout.margin = margin;
+        // The candidates the float holds, from its own corner to this block's.
+        if !output.oof_candidates.is_empty() {
+            output.oof_candidates.translate(layout.location);
+            oof_candidates.append(&mut output.oof_candidates);
+        }
+    }
+
+    /// Sets where an atomic inline goes, or hands an absolutely positioned box to its containing
+    /// block as a candidate placed from its static position, with every one the atomic inline
+    /// holds.
+    fn place_inline_box(
+        &mut self,
+        placed: &Placement,
+        order: u32,
+        at: &PlacedFrame,
+        oof_candidates: &mut OofCandidates,
+    ) {
+        let PlacedFrame {
+            child_inputs,
+            container_pb,
+            line_box_top,
+            content_box_inset,
+            final_size,
+            container_direction,
+            scale,
+        } = *at;
+        let node = &self.nodes[placed.node];
+        let style = self.child_layout_style(node);
+        let padding = style
+            .padding()
+            .resolve_or_zero(child_inputs.parent_size, resolve_calc_value);
+        let border = style
+            .border()
+            .resolve_or_zero(child_inputs.parent_size, resolve_calc_value);
+        let margin = style
+            .margin()
+            .resolve_or_zero(child_inputs.parent_size, resolve_calc_value);
+
+        // A float goes where the lines flowed around it.
+        #[cfg(feature = "floats")]
+        if style.float() != Float::None {
+            return;
+        }
+
+        let position = style.position();
+        let is_absolute = position.is_out_of_flow();
+        let item_direction = style.direction();
+        // Inline formatting contexts have no `justify-items`/`align-items` for an
+        // `auto` self-alignment to defer to, so it behaves as `normal`.
+        let justify_self = OofItemStyle::justify_self(&style).unwrap_or(taffy::AlignItems::NORMAL);
+        let align_self = OofItemStyle::align_self(&style).unwrap_or(taffy::AlignItems::NORMAL);
+
+        // The static position of an absolutely positioned box depends on the
+        // display its hypothetical box would have had (the display specified
+        // before position:absolute blockified it): inline-level boxes sit at
+        // their position within the line, while block-level boxes start at the
+        // content-box left edge of their containing block.
+        let is_inline_level =
+            style.style.get_box().original_display.outside() == DisplayOutside::Inline;
+
+        // Resolve relative inset offsets against the containing block
+        // (the content box of the inline container).
+        let container_content_size = final_size - content_box_inset.sum_axes();
+        let inset_style = style.inset();
+        let inset = taffy::Rect {
+            left: inset_style
+                .left
+                .maybe_resolve(container_content_size.width, resolve_calc_value),
+            right: inset_style
+                .right
+                .maybe_resolve(container_content_size.width, resolve_calc_value),
+            top: inset_style
+                .top
+                .maybe_resolve(container_content_size.height, resolve_calc_value),
+            bottom: inset_style
+                .bottom
+                .maybe_resolve(container_content_size.height, resolve_calc_value),
+        };
+        let box_inputs = inline_box_inputs(style.size().width, margin, child_inputs);
+        drop(style);
+
+        if is_absolute {
+            // The static-position rectangle
+            // (https://www.w3.org/TR/css-position-3/#staticpos-rect):
+            // - An inline-level box's rectangle is zero-width at its position
+            //   within the line and spans the line box in the block axis.
+            // - A block-level box's rectangle spans the containing block's content
+            //   box in the inline axis and is zero-height where the lines say it starts.
+            let line_top = (placed.line_top / scale) + line_box_top;
+            let line_bottom = (placed.line_bottom / scale) + line_box_top;
+            let (inline_area, block_area) = if is_inline_level {
+                let x = (placed.x / scale) + container_pb.left;
+                (
+                    taffy::Line { start: x, end: x },
+                    taffy::Line {
+                        start: line_top,
+                        end: line_bottom,
+                    },
+                )
+            } else {
+                let block_start = (placed.block_start / scale) + line_box_top;
+                (
+                    taffy::Line {
+                        start: container_pb.left,
+                        end: final_size.width - container_pb.right,
+                    },
+                    taffy::Line {
+                        start: block_start,
+                        end: block_start,
+                    },
+                )
+            };
+            // An inline-level box's start faces the way the lines say, where they do; in a
+            // vertical block the horizontal axis runs across the lines.
+            let inline_rtl = match placed.rtl {
+                Some(rtl) if is_inline_level => rtl,
+                _ => container_direction.is_rtl(),
+            };
+
+            oof_candidates.push(OofCandidate {
+                node: crate::taffy_node_id(placed.node),
+                order,
+                position,
+                static_position: taffy::Point {
+                    x: AxisStaticPosition::from_alignment(
+                        justify_self.resolve_self_relative(
+                            item_direction,
+                            container_direction,
+                            true,
+                        ),
+                        inline_area,
+                        inline_rtl,
+                    ),
+                    y: AxisStaticPosition::from_alignment(
+                        align_self.resolve_self_relative(
+                            item_direction,
+                            container_direction,
+                            false,
+                        ),
+                        block_area,
+                        false,
+                    ),
+                },
+            });
+            return;
+        }
+
+        // Re-measure the box to get its border-box size (this hits the layout
+        // cache). The size cannot be recovered from the room the line reserves for it,
+        // as that is clamped to be non-negative.
+        let mut output = self.compute_child_layout(crate::taffy_node_id(placed.node), box_inputs);
+        let size = output.size;
+
+        let is_relative = position == taffy::Position::Relative;
+        let inset_offset = if is_relative {
+            taffy::Point {
+                x: if container_direction == Direction::Rtl {
+                    inset.right.map(|x| -x).or(inset.left).unwrap_or(0.0)
+                } else {
+                    inset.left.or(inset.right.map(|x| -x)).unwrap_or(0.0)
+                },
+                y: inset.top.or(inset.bottom.map(|x| -x)).unwrap_or(0.0),
+            }
+        } else {
+            taffy::Point::ZERO
+        };
+        // The inline boxes it is in move it as `position: relative` moves them, where the
+        // backend paints them moved.
+        let shift = TextLayout::inline_shift(
+            self,
+            placed.node,
+            container_content_size,
+            container_direction == Direction::Rtl,
+        );
+
+        let layout = self.nodes[placed.node].unrounded_layout_mut();
+        layout.size = size;
+        layout.scrollable_overflow_rect = output.scrollable_overflow_rect;
+        layout.location.x =
+            (placed.x / scale) + margin.left + container_pb.left + inset_offset.x + shift.x;
+        // The lines place the margin box; offset to the border box even when a
+        // negative top margin makes it extend above the margin box.
+        layout.location.y =
+            (placed.top / scale) + margin.top + line_box_top + inset_offset.y + shift.y;
+        layout.padding = padding;
+        layout.border = border;
+        layout.margin = margin;
+
+        // Translate anchors from item-relative to container-relative
+        // coordinates and collect candidates bubbled from the box's subtree
+        if !output.oof_candidates.is_empty() {
+            let location = layout.location;
+            output.oof_candidates.translate(location);
+            oof_candidates.append(&mut output.oof_candidates);
+        }
+    }
+
+    /// Lays out an inline formatting context whose lines run down the page: the room along them
+    /// is the box's height, and how far they stack across is its width. Taffy has no writing
+    /// modes, so the box is sized here in physical terms, and what the lines place is turned onto
+    /// the page. The floats of the blocks around it are not in its lines' way: Taffy places them
+    /// in horizontal terms.
+    fn lay_out_vertical_lines(
+        &mut self,
+        node_id: NodeId,
+        mut inline_layout: Box<TextLayout>,
+        frame: Frame,
+        lines: LinePass<'_>,
+    ) -> LayoutOutput {
+        let Frame {
+            inputs,
+            node_size,
+            node_min_size,
+            node_max_size,
+            padding,
+            border,
+            scrollbar_gutter,
+            container_pb,
+            content_box_inset,
+            available_space,
+            scale,
+            ..
+        } = frame;
+        let LinePass {
+            pass,
+            child_inputs,
+            basis,
+            ..
+        } = lines;
+        let known_dimensions = inputs.known_dimensions;
+        let flow = inline_layout.line_flow();
+        let margin = self.nodes[node_id]
+            .layout_style()
+            .margin()
+            .resolve_or_zero(inputs.parent_size.width, resolve_calc_value);
+        let pbh = container_pb.vertical_components().sum() * scale;
+        // Its own height, or where it has none the height it has room for, or failing both as
+        // long as its longest line. A block in a block container whose lines run the same way
+        // stretches into the room; any other box fits its content into it.
+        let widths = inline_layout.content_widths();
+        let fit = |along: f32| along.min(widths.max).max(widths.min).ceil();
+        let along = match known_dimensions.height.or(node_size.height) {
+            Some(height) => (height * scale) - pbh,
+            None => {
+                let room = match available_space.height {
+                    AvailableSpace::Definite(height) => Some(height),
+                    _ => None,
+                };
+                // The initial containing block's height, which an orthogonal flow without a
+                // definite parent height fits into.
+                let icb = self.stylist.device().au_viewport_size().height.to_f32_px();
+                // An orthogonal flow whose parent has no definite height has at most the
+                // parent's `max-height`, as Chrome takes its fallback inline size.
+                let room = match self.parent_max_height(node_id) {
+                    Some(cap) => {
+                        let cap = (cap.min(icb) - margin.vertical_components().sum()).max(0.0);
+                        Some(room.map_or(cap, |room| room.min(cap)))
+                    }
+                    None => room,
+                };
+                // Asked for its intrinsic height, it answers its lines' intrinsic length.
+                let intrinsic = inputs.run_mode == RunMode::ComputeSize
+                    && inputs.axis == RequestedAxis::Vertical;
+                match room {
+                    None if intrinsic && available_space.height == AvailableSpace::MinContent => {
+                        widths.min.ceil()
+                    }
+                    None if intrinsic => widths.max.ceil(),
+                    Some(room) if self.stretches_along(node_id) => (room * scale) - pbh,
+                    Some(room) => fit((room * scale) - pbh),
+                    // Within a parent of definite height, an orthogonal flow fits into that
+                    // height, less its margins, and within any other parent into the initial
+                    // containing block.
+                    None => match inputs.parent_size.height {
+                        Some(height) => {
+                            fit((height - margin.vertical_components().sum()) * scale - pbh)
+                        }
+                        None if self.is_orthogonal(node_id) => {
+                            fit((icb - margin.vertical_components().sum()) * scale - pbh)
+                        }
+                        None => widths.max.ceil(),
+                    },
+                }
+            }
+        };
+        // The padding at the block's start and end, which a vertical line's over and under sides
+        // face: the right and left where the lines stack from the right, the left and right in
+        // the others.
+        let (start_padding, end_padding) = if flow.stacks_from_right() {
+            (padding.right, padding.left)
+        } else {
+            (padding.left, padding.right)
+        };
+        let area = LineArea {
+            width: along,
+            room_above: start_padding * scale,
+            block_end: None,
+            sizes_only: pass != Measure::Layout,
+            pass: self.nodes.geometry_generation(),
+        };
+        let floats = {
+            let style = self.nodes[node_id].primary_styles().map(|s| (*s).clone());
+            let mut room = FloatRoom {
+                #[cfg(feature = "floats")]
+                outer: None,
+                #[cfg(not(feature = "floats"))]
+                outer: core::marker::PhantomData,
+                width: along,
+                scale,
+                #[cfg(feature = "floats")]
+                clears: lines.clears,
+                placed: Vec::new(),
+            };
+            crate::text::PERF_COUNTS[1].fetch_add(1, core::sync::atomic::Ordering::Relaxed);
+            inline_layout.break_lines(&mut self.text, area, style.as_deref(), &mut room);
+            room.placed
+        };
+        // How far the lines and the floats reach across the block from its start.
+        let across = floats
+            .iter()
+            .map(|float| float.bottom)
+            .fold(inline_layout.extent(end_padding * scale).height, f32::max);
+        let measured_size = Size {
+            width: across.ceil() / scale,
+            height: along / scale,
+        };
+        // A vertical block in a horizontal one is an orthogonal flow: where its width is `auto`
+        // it is as wide as its lines stack, as Chrome sizes it, rather than stretched across its
+        // container.
+        let auto_width = self.nodes[node_id].layout_style().size().width.is_auto();
+        let own_size = Size {
+            width: if auto_width {
+                None
+            } else {
+                known_dimensions.width.or(node_size.width)
+            },
+            height: known_dimensions.height.or(node_size.height),
+        };
+        let final_size = own_size
+            .unwrap_or(measured_size + content_box_inset.sum_axes())
+            .maybe_clamp(node_min_size, node_max_size)
+            .maybe_max(container_pb.sum_axes().map(Some));
+        let content = (final_size - content_box_inset.sum_axes()).map(|size| size * scale);
+        inline_layout.set_frame(0.0, content);
+
+        let mut oof_candidates = OofCandidates::new();
+        let container_direction = self.nodes[node_id].layout_style().direction();
+        // A pass that only sizes the block places nothing.
+        if pass == Measure::Layout {
+            let placements: Vec<Placement> = inline_layout.placements().collect();
+            let frame_at = PlacedFrame {
+                child_inputs,
+                container_pb,
+                line_box_top: container_pb.top,
+                content_box_inset,
+                final_size,
+                container_direction,
+                scale,
+            };
+            for (order, placed) in placements.iter().enumerate() {
+                self.place_inline_box(placed, order as u32, &frame_at, &mut oof_candidates);
+            }
+            #[cfg(feature = "floats")]
+            for float in &floats {
+                let Some(node) = TextLayout::float_node(float.key) else {
+                    continue;
+                };
+                let (x, y) = inline_layout
+                    .place_on_page([float.left, float.right], [float.top, float.bottom]);
+                let turned = super::floats::Floated {
+                    left: x,
+                    right: x,
+                    top: y,
+                    bottom: y,
+                    ..*float
+                };
+                self.place_float(
+                    node,
+                    &turned,
+                    child_inputs,
+                    basis,
+                    container_pb,
+                    scale,
+                    &mut oof_candidates,
+                );
+            }
+        }
+        #[cfg(not(feature = "floats"))]
+        let _ = (floats, basis);
+        self.put_inline_layout(node_id, inline_layout);
+
+        let oof_position_inset = taffy::Rect {
+            left: border.left,
+            right: border.right + scrollbar_gutter.x,
+            top: border.top,
+            bottom: border.bottom + scrollbar_gutter.y,
+        };
+        let content_extent = measured_size + padding.sum_axes();
+        LayoutOutput {
+            size: final_size,
+            scrollable_overflow_rect: taffy::Rect {
+                left: 0.0,
+                right: content_extent.width,
+                top: 0.0,
+                bottom: content_extent.height,
+            },
+            baselines: taffy::Baselines {
+                first: None,
+                last: None,
+            },
+            top_margin: CollapsibleMarginSet::ZERO,
+            bottom_margin: CollapsibleMarginSet::ZERO,
+            margins_can_collapse_through: false,
+            oof_candidates,
+            oof_positioning_area: Some(OofPositioningArea {
+                size: final_size - oof_position_inset.sum_axes(),
+                offset: Point {
+                    x: oof_position_inset.left,
+                    y: oof_position_inset.top,
+                },
+            }),
+        }
+    }
+
+    /// Whether `node_id`, whose lines run down the page, stretches along them into the room it
+    /// is given: whether it is an in-flow block in a block container whose lines run the same
+    /// way.
+    fn stretches_along(&self, node_id: NodeId) -> bool {
+        let node = &self.nodes[node_id];
+        if let Some(style) = node.primary_styles() {
+            let display = style.slow_clone_display();
+            if display.outside() != DisplayOutside::Block
+                || style.get_box().float != style::computed_values::float::T::None
+                || style.get_box().position.is_absolutely_positioned()
+            {
+                return false;
+            }
+        }
+        let Some(parent) = node.layout_parent.get().map(|id| &self.nodes[id]) else {
+            return false;
+        };
+        parent.taffy_display() == taffy::Display::Block
+            && parent
+                .primary_styles()
+                .is_some_and(|style| style.writing_mode.is_vertical())
+    }
+
+    /// Whether `node_id`, whose lines run down the page, is an orthogonal flow: whether its
+    /// layout parent's lines run across its own.
+    fn is_orthogonal(&self, node_id: NodeId) -> bool {
+        self.nodes[node_id]
+            .layout_parent
+            .get()
+            .and_then(|parent| self.nodes[parent].primary_styles())
+            .is_some_and(|style| !style.writing_mode.is_vertical())
+    }
+
+    /// The content height `node_id`'s layout parent may grow to where its own height is `auto`
+    /// and its `max-height` a length: that length, no less than its `min-height`, in CSS pixels.
+    fn parent_max_height(&self, node_id: NodeId) -> Option<f32> {
+        let parent = self.nodes[node_id].layout_parent.get()?;
+        let style = self.child_layout_style(&self.nodes[parent]);
+        if !style.size().height.is_auto() {
+            return None;
+        }
+        // The parent's own percentages are of a box this does not know.
+        let unknown: Option<f32> = None;
+        let max = style
+            .max_size()
+            .height
+            .maybe_resolve(unknown, resolve_calc_value)?;
+        let min = style
+            .min_size()
+            .height
+            .maybe_resolve(unknown, resolve_calc_value)
+            .unwrap_or(0.0);
+        let edges = if style.box_sizing() == taffy::BoxSizing::BorderBox {
+            let padding = style.padding().resolve_or_zero(unknown, resolve_calc_value);
+            let border = style.border().resolve_or_zero(unknown, resolve_calc_value);
+            (padding + border).vertical_components().sum()
+        } else {
+            0.0
+        };
+        Some((max.max(min) - edges).max(0.0))
+    }
+
+    /// The room over the block's first line its ruby annotations and emphasis marks may take
+    /// before the line moves down for them, in CSS pixels, as Chrome's block layout lends it
+    /// (`ComputeInitialBlockStartAnnotationSpace`): the block's padding over the line, and where
+    /// no border is in the way and its margins collapse, the margin collapsed between it and the
+    /// block before it, that block's end padding, and the room that block's last line left under
+    /// its content.
+    fn room_above(
+        &self,
+        node_id: NodeId,
+        margin_top: f32,
+        padding_top: f32,
+        padding_border_top: f32,
+        inputs: taffy::LayoutInput,
+    ) -> f32 {
+        let mut room = padding_top;
+        // A block that starts a formatting context of its own (`overflow: hidden`, `flow-root`)
+        // is lent no margin, as Chrome lends none to a new formatting context.
+        if padding_border_top > padding_top || !inputs.vertical_margins_are_collapsible.start {
+            return room;
+        }
+        let own = margin_top.max(0.0);
+        let Some(before) = self.block_before(node_id) else {
+            return room + own;
+        };
+        let node = &self.nodes[before];
+        let style = self.child_layout_style(node);
+        let parent_size = inputs.parent_size;
+        let margin = style
+            .margin()
+            .resolve_or_zero(parent_size, resolve_calc_value)
+            .bottom
+            .max(0.0);
+        let padding = style
+            .padding()
+            .resolve_or_zero(parent_size, resolve_calc_value)
+            .bottom;
+        let border = style
+            .border()
+            .resolve_or_zero(parent_size, resolve_calc_value)
+            .bottom;
+        drop(style);
+        room += own.max(margin);
+        if border > 0.0 {
+            return room;
+        }
+        let lent = node
+            .element_data()
+            .and_then(|element| element.inline_layout_data.as_ref())
+            .map_or(0.0, |text| text.room_below() / self.viewport.scale());
+        room + padding + lent.max(0.0)
+    }
+
+    /// The in-flow block laid out before `node_id` among its layout siblings, if there is one.
+    fn block_before(&self, node_id: NodeId) -> Option<NodeId> {
+        let parent = self.nodes[node_id].layout_parent.get()?;
+        let children = self.nodes[parent].layout_children.borrow();
+        let children = children.as_ref()?;
+        let at = children.iter().position(|child| *child == node_id)?;
+        children[..at].iter().rev().copied().find(|&child| {
+            let node = &self.nodes[child];
+            if !matches!(
+                node.data,
+                crate::NodeData::Element(_) | crate::NodeData::AnonymousBlock(_)
+            ) {
+                return false;
+            }
+            node.primary_styles().is_some_and(|computed| {
+                !computed.get_box().display.is_none()
+                    && !computed.slow_clone_position().is_absolutely_positioned()
+                    && matches!(
+                        computed.slow_clone_float(),
+                        style::values::computed::Float::None
+                    )
+            })
+        })
+    }
+
+    /// Hands the inline layout back to its node.
+    pub(crate) fn put_inline_layout(&mut self, node_id: NodeId, inline_layout: Box<TextLayout>) {
+        self.nodes[node_id]
+            .data
+            .downcast_element_mut()
+            .unwrap()
+            .inline_layout_data = Some(inline_layout);
+    }
+
+    /// Lays out each atomic inline of the inline formatting context rooted at `node_id` as its
+    /// line holds it, and each float as the lines flow around it: its border box, and an atomic
+    /// inline's baseline down from its top. Absolutely positioned boxes take no room in the lines,
+    /// and are not measured.
+    ///
+    /// A float is sized in the room beside nothing, less its margins, `basis` being the containing
+    /// block's inline size.
+    ///
+    /// `pass` says how far each box is laid out: where its baseline is not read or the pass needs
+    /// no baseline, it is only measured, along the line alone in an inline-size pass.
+    /// `child_inputs` are the inputs of a full layout. Lines that run down the page, `vertical`,
+    /// read no baseline.
+    ///
+    /// `baseline-source: auto` is the last baseline for an inline-block and the first otherwise.
+    /// An inline-block's last baseline is its last line box's, and a flex, grid or table box's
+    /// first baseline its first; a replaced element, or an inline-block other than a button that
+    /// clips its overflow and takes its last baseline, has none, and sits on its margin box's
+    /// bottom.
+    fn measure_inline_boxes(
+        &mut self,
+        node_id: NodeId,
+        child_inputs: taffy::LayoutInput,
+        pass: Measure,
+        basis: f32,
+        vertical: bool,
+    ) -> Vec<BoxMeasure> {
+        let children = self.nodes[node_id].layout_children.borrow().clone();
+        let mut sizes = Vec::with_capacity(children.as_ref().map_or(0, |children| children.len()));
+        let rtl = self.nodes[node_id].primary_styles().is_some_and(|style| {
+            style.get_inherited_box().direction == style::computed_values::direction::T::Rtl
+        });
+        for node in children.iter().flatten().copied() {
+            let held = &self.nodes[node];
+            let style = self.child_layout_style(held);
+            let margin = style
+                .margin()
+                .resolve_or_zero(child_inputs.parent_size, resolve_calc_value);
+
+            #[cfg(feature = "floats")]
+            let is_floated = style.float().is_floated();
+            #[cfg(not(feature = "floats"))]
+            let is_floated = false;
+
+            if style.position().is_out_of_flow() {
+                continue;
+            }
+            if is_floated {
+                // `inline-start` and `inline-end` are the containing block's sides, as its
+                // direction has them.
+                let float_side = match (held.primary_styles().map(|s| s.slow_clone_float()), rtl) {
+                    (Some(StyloFloat::Right), _)
+                    | (Some(StyloFloat::InlineStart), true)
+                    | (Some(StyloFloat::InlineEnd), false) => FloatSide::Right,
+                    _ => FloatSide::Left,
+                };
+                let pass_inputs = match pass {
+                    Measure::Layout => child_inputs,
+                    Measure::Sizes => taffy::LayoutInput {
+                        run_mode: RunMode::ComputeSize,
+                        ..child_inputs
+                    },
+                    Measure::InlineSizes => taffy::LayoutInput {
+                        run_mode: RunMode::ComputeSize,
+                        axis: RequestedAxis::Horizontal,
+                        ..child_inputs
+                    },
+                };
+                drop(style);
+                let output = self.compute_child_layout(
+                    crate::taffy_node_id(node),
+                    float_box_inputs(pass_inputs, basis, margin),
+                );
+                sizes.push(BoxMeasure {
+                    node,
+                    size: output.size,
+                    margin,
+                    baseline: None,
+                    float: Some(float_side),
+                });
+                continue;
+            }
+            let replaced = held
+                .data
+                .downcast_element()
+                .is_some_and(|element| is_replaced_element(&element.name.local));
+            let inside = held.display_style().map(|display| display.inside());
+            let source = held
+                .primary_styles()
+                .map_or(BaselineSource::Auto, |computed| {
+                    computed.slow_clone_baseline_source()
+                });
+            let uses_last = match source {
+                BaselineSource::First => false,
+                BaselineSource::Last => true,
+                BaselineSource::Auto => {
+                    matches!(inside, Some(DisplayInside::Flow | DisplayInside::FlowRoot))
+                }
+            };
+            // Only `baseline-source: auto` lets an inline-block that clips sit on its margin
+            // box's bottom, and buttons keep their content's baseline.
+            let is_button = style
+                .flags
+                .intersects(StyleFlags::IS_BUTTON | StyleFlags::IS_BUTTON_INPUT);
+            let clips = source == BaselineSource::Auto && !is_button && {
+                let overflow = style.overflow();
+                overflow.x != Overflow::Visible || overflow.y != Overflow::Visible
+            };
+            let has_baseline = !replaced && !(uses_last && clips);
+            let reads_baseline = has_baseline
+                && !vertical
+                && held
+                    .primary_styles()
+                    .is_none_or(|computed| reads_own_baseline(&computed));
+            let pass_inputs = match pass {
+                Measure::Layout => child_inputs,
+                Measure::Sizes if reads_baseline => child_inputs,
+                Measure::Sizes => taffy::LayoutInput {
+                    run_mode: RunMode::ComputeSize,
+                    ..child_inputs
+                },
+                Measure::InlineSizes => taffy::LayoutInput {
+                    run_mode: RunMode::ComputeSize,
+                    axis: RequestedAxis::Horizontal,
+                    ..child_inputs
+                },
+            };
+            let box_inputs = inline_box_inputs(style.size().width, margin, pass_inputs);
+            drop(style);
+
+            let output = self.compute_child_layout(crate::taffy_node_id(node), box_inputs);
+            let reads_baseline = reads_baseline && pass_inputs.run_mode == RunMode::PerformLayout;
+            let baseline = if !reads_baseline {
+                None
+            } else if uses_last {
+                // An inline formatting context's own baseline is its layout's; a block
+                // container's is found among its children.
+                let inline_root = self.nodes[node]
+                    .element_data()
+                    .is_some_and(|element| element.inline_layout_data.is_some());
+                let walked = if inline_root {
+                    LastBaseline::Unknown
+                } else {
+                    self.last_line_baseline(node)
+                };
+                match walked {
+                    LastBaseline::At(baseline) => Some(baseline),
+                    LastBaseline::None => None,
+                    LastBaseline::Unknown => output.baselines.last.or(output.baselines.first),
+                }
+            } else {
+                output.baselines.first.or(output.baselines.last)
+            };
+            sizes.push(BoxMeasure {
+                node,
+                size: output.size,
+                margin,
+                baseline,
+                float: None,
+            });
+        }
+        sizes
+    }
+
+    /// An inline-block's baseline, its last line box's, down from the border box's top of
+    /// `node`, a block container laid out already, in CSS pixels. The last in-flow child in its
+    /// writing mode that has one gives it, and a child that is a scroll container gives its margin
+    /// box's bottom edge.
+    fn last_line_baseline(&self, node: NodeId) -> LastBaseline {
+        let held = &self.nodes[node];
+        let vertical = held
+            .primary_styles()
+            .is_some_and(|computed| computed.writing_mode.is_vertical());
+        if let Some(text) = held
+            .element_data()
+            .and_then(|element| element.inline_layout_data.as_ref())
+        {
+            // Lines that run down the page have no baseline across them.
+            if vertical {
+                return LastBaseline::Unknown;
+            }
+            return match text.last_line_baseline() {
+                LastBaseline::At(baseline) => {
+                    let edges = held.unrounded_layout();
+                    LastBaseline::At(
+                        (baseline / text.scale()) + edges.border.top + edges.padding.top,
+                    )
+                }
+                other => other,
+            };
+        }
+        let children = held.layout_children.borrow();
+        let Some(children) = children.as_ref() else {
+            return LastBaseline::None;
+        };
+        for &child in children.iter().rev() {
+            let child_node = &self.nodes[child];
+            let Some(computed) = child_node.primary_styles() else {
+                continue;
+            };
+            // An orthogonal flow gives no baseline across this one's lines.
+            if computed.get_box().display.is_none()
+                || computed.writing_mode.is_vertical() != vertical
+                || computed.slow_clone_position().is_absolutely_positioned()
+                || !matches!(
+                    computed.slow_clone_float(),
+                    style::values::computed::Float::None
+                )
+            {
+                continue;
+            }
+            let scrolls = !matches!(
+                computed.slow_clone_overflow_x(),
+                style::values::computed::Overflow::Visible
+            ) || !matches!(
+                computed.slow_clone_overflow_y(),
+                style::values::computed::Overflow::Visible
+            );
+            let inside = child_node.display_style().map(|display| display.inside());
+            let flows = matches!(inside, Some(DisplayInside::Flow | DisplayInside::FlowRoot));
+            drop(computed);
+            let placed = child_node.unrounded_layout();
+            if scrolls && flows {
+                return LastBaseline::At(
+                    placed.location.y + placed.size.height + placed.margin.bottom,
+                );
+            }
+            if !flows {
+                return LastBaseline::Unknown;
+            }
+            match self.last_line_baseline(child) {
+                LastBaseline::At(baseline) => {
+                    return LastBaseline::At(placed.location.y + baseline);
+                }
+                LastBaseline::None => continue,
+                LastBaseline::Unknown => return LastBaseline::Unknown,
+            }
+        }
+        LastBaseline::None
+    }
+}
+
+/// Whether the lines read the own baseline of an atomic inline set in `style` to set it on its
+/// line. A pass that sets the lines lays such a box out to measure it, since Taffy gives a
+/// baseline only with a layout.
+///
+/// A box aligned by its edges, `top`, `bottom`, `text-top` or `text-bottom`, is not: its margin
+/// box's edge goes where the alignment says, wherever its baseline is.
+fn reads_own_baseline(style: &style::properties::ComputedValues) -> bool {
+    use style::values::computed::AlignmentBaseline;
+    use style::values::computed::length_percentage::Unpacked;
+    use style::values::generics::box_::{BaselineShiftKeyword, GenericBaselineShift};
+    let box_style = style.get_box();
+    match box_style.slow_clone_baseline_shift() {
+        GenericBaselineShift::Keyword(BaselineShiftKeyword::Top | BaselineShiftKeyword::Bottom) => {
+            return false;
+        }
+        GenericBaselineShift::Keyword(_) => return true,
+        GenericBaselineShift::Length(shift) => match shift.unpack() {
+            Unpacked::Length(length) if length.px() != 0.0 => return true,
+            Unpacked::Percentage(percentage) if percentage.0 != 0.0 => return true,
+            _ => {}
+        },
+    }
+    !matches!(
+        box_style.slow_clone_alignment_baseline(),
+        AlignmentBaseline::TextTop | AlignmentBaseline::TextBottom
+    )
+}
+
+/// What the pass that lays out an inline formatting context measured its boxes for.
+#[derive(Clone, Copy)]
+struct LinePass<'a> {
+    pass: Measure,
+    /// The inputs of a full layout of an atomic inline or a float.
+    child_inputs: taffy::LayoutInput,
+    /// The containing block's inline size, which a float's room is taken of.
+    basis: f32,
+    /// Each float's `clear`, by node.
+    #[cfg(feature = "floats")]
+    clears: &'a [(u64, Clear)],
+    #[cfg(not(feature = "floats"))]
+    #[allow(dead_code)]
+    clears: core::marker::PhantomData<&'a ()>,
+}
+
+/// Where the boxes an inline formatting context's lines hold are placed from.
+#[derive(Clone, Copy)]
+struct PlacedFrame {
+    /// The inputs of a full layout of an atomic inline.
+    child_inputs: taffy::LayoutInput,
+    /// The inline root's padding and border.
+    container_pb: taffy::Rect<f32>,
+    /// Where the line boxes start, down from the border box's top, in CSS pixels.
+    line_box_top: f32,
+    content_box_inset: taffy::Rect<f32>,
+    /// The inline root's border box.
+    final_size: Size<f32>,
+    container_direction: Direction,
+    /// Device pixels per CSS pixel.
+    scale: f32,
+}
diff --git a/packages/blitz-dom/src/layout/inline/mod.rs b/packages/blitz-dom/src/layout/inline/mod.rs
new file mode 100644
index 0000000000..b38753de18
--- /dev/null
+++ b/packages/blitz-dom/src/layout/inline/mod.rs
@@ -0,0 +1,441 @@
+mod build;
+mod floats;
+mod lines;
+
+use blitz_traits::node_id::NodeId;
+use taffy::{
+    AvailableSpace, BlockContext, BlockFormattingContext, BoxSizing, CompactLength, CoreStyle as _,
+    LayoutInput, LayoutOutput, MaybeMath as _, MaybeResolve as _, Overflow, Point, Rect,
+    ResolveOrZero as _, RunMode, Size, SizingMode,
+};
+
+use style::values::specified::box_::{DisplayInside, DisplayOutside};
+use stylo_taffy::StyleFlags;
+
+use super::resolve_calc_value;
+use crate::layout::LayoutPassState;
+
+pub(crate) use build::push_inline_content;
+
+/// What `compute_inline_layout_inner` has resolved from the container's styles and inputs
+/// before the inline boxes are measured and the lines broken.
+#[derive(Clone, Copy)]
+pub(crate) struct Frame {
+    pub(crate) inputs: LayoutInput,
+    pub(crate) node_size: Size<Option<f32>>,
+    pub(crate) node_min_size: Size<Option<f32>>,
+    pub(crate) node_max_size: Size<Option<f32>>,
+    pub(crate) aspect_ratio: Option<f32>,
+    pub(crate) padding: Rect<f32>,
+    pub(crate) border: Rect<f32>,
+    pub(crate) scrollbar_gutter: Point<f32>,
+    pub(crate) container_pb: Rect<f32>,
+    pub(crate) content_box_inset: Rect<f32>,
+    pub(crate) child_inputs: LayoutInput,
+    pub(crate) available_space: Size<AvailableSpace>,
+    pub(crate) collapses_through: bool,
+    pub(crate) suppresses_baseline: bool,
+    pub(crate) scale: f32,
+}
+
+/// Subtract a child's margins from the definite axes of the available space it is laid out in.
+/// Taffy's convention is that the parent subtracts a child's margins from the available space
+/// before passing it to the child, and that the child does not subtract them again.
+pub(crate) fn subtract_margins(
+    mut child_inputs: LayoutInput,
+    margin: taffy::Rect<f32>,
+) -> LayoutInput {
+    child_inputs.available_space = child_inputs
+        .available_space
+        .maybe_sub(margin.sum_axes())
+        .maybe_max(Size::ZERO);
+    child_inputs
+}
+
+/// Layout inputs for a float in an inline formatting context, from `inputs`, those of the pass: it
+/// is sized in the room beside nothing, `basis` CSS pixels less its margins where that room is
+/// definite, and as tall as it needs.
+pub(crate) fn float_box_inputs(
+    inputs: LayoutInput,
+    basis: f32,
+    margin: taffy::Rect<f32>,
+) -> LayoutInput {
+    LayoutInput {
+        known_dimensions: Size::NONE,
+        sizing_mode: SizingMode::InherentSize,
+        available_space: Size {
+            width: match inputs.available_space.width {
+                AvailableSpace::Definite(_) => {
+                    AvailableSpace::Definite((basis - margin.left - margin.right).max(0.0))
+                }
+                other => other,
+            },
+            height: AvailableSpace::MaxContent,
+        },
+        ..inputs
+    }
+}
+
+/// Layout inputs for an atomic inline box, with any sizing keyword on its `width` style
+/// (`min-content`, `max-content`, `fit-content`, `fit-content(...)`, `stretch`) resolved
+/// into the available space or known width the box is measured with.
+pub(crate) fn inline_box_inputs(
+    width_style: taffy::Dimension,
+    margin: taffy::Rect<f32>,
+    child_inputs: LayoutInput,
+) -> LayoutInput {
+    let mut inputs = subtract_margins(child_inputs, margin);
+    let stretch_width = inputs.available_space.width.into_option();
+    let percent_basis = child_inputs.parent_size.width;
+
+    match width_style.tag() {
+        CompactLength::MIN_CONTENT_TAG => inputs.available_space.width = AvailableSpace::MinContent,
+        CompactLength::MAX_CONTENT_TAG => inputs.available_space.width = AvailableSpace::MaxContent,
+        CompactLength::FIT_CONTENT_PX_TAG => {
+            inputs.available_space.width = AvailableSpace::Definite(width_style.value())
+        }
+        CompactLength::FIT_CONTENT_PERCENT_TAG => {
+            if let Some(basis) = percent_basis {
+                inputs.available_space.width =
+                    AvailableSpace::Definite(basis * width_style.value());
+            }
+        }
+        CompactLength::FIT_CONTENT_KEYWORD_TAG => {
+            if let Some(width) = stretch_width {
+                inputs.available_space.width = AvailableSpace::Definite(width);
+            }
+        }
+        _ if width_style.is_fit_content_calc() => {
+            if let Some(basis) = percent_basis {
+                inputs.available_space.width =
+                    AvailableSpace::Definite(resolve_calc_value(width_style.calc_value(), basis));
+            }
+        }
+        CompactLength::STRETCH_TAG => {
+            if let Some(width) = stretch_width {
+                inputs.known_dimensions.width = Some(width);
+                inputs.available_space.width = AvailableSpace::Definite(width);
+            }
+        }
+        _ => {}
+    }
+    inputs
+}
+
+impl LayoutPassState<'_> {
+    pub(crate) fn compute_inline_layout(
+        &mut self,
+        node_id: NodeId,
+        inputs: taffy::tree::LayoutInput,
+        block_ctx: Option<&mut BlockContext<'_>>,
+    ) -> taffy::LayoutOutput {
+        let LayoutInput {
+            known_dimensions,
+            parent_size,
+            run_mode,
+            ..
+        } = inputs;
+        let style = self.nodes[node_id].layout_style();
+
+        // Pull these out earlier to avoid borrowing issues
+        let is_scroll_container =
+            style.overflow().x.is_scroll_container() || style.overflow().y.is_scroll_container();
+        let padding = style
+            .padding()
+            .resolve_or_zero(parent_size.width, resolve_calc_value);
+        let border = style
+            .border()
+            .resolve_or_zero(parent_size.width, resolve_calc_value);
+        let padding_border_size = (padding + border).sum_axes();
+        let box_sizing_adjustment = if style.box_sizing() == BoxSizing::ContentBox {
+            padding_border_size
+        } else {
+            Size::ZERO
+        };
+
+        // Resolve node's preferred/min/max sizes (width/heights) against the available space (percentages resolve to pixel values)
+        // For ContentSize mode, we pretend that the node has no size styles as these should be ignored.
+        let (clamped_style_size, min_size, max_size, _aspect_ratio) = match inputs.sizing_mode {
+            SizingMode::ContentSize => {
+                let node_size = known_dimensions;
+                let node_min_size = Size::NONE;
+                let node_max_size = Size::NONE;
+                (node_size, node_min_size, node_max_size, None)
+            }
+            SizingMode::InherentSize => {
+                let aspect_ratio = style.aspect_ratio();
+                let style_size = style
+                    .size()
+                    .maybe_resolve(parent_size, resolve_calc_value)
+                    .maybe_apply_aspect_ratio(aspect_ratio)
+                    .maybe_add(box_sizing_adjustment);
+                let style_min_size = style
+                    .min_size()
+                    .maybe_resolve(parent_size, resolve_calc_value)
+                    .maybe_apply_aspect_ratio(aspect_ratio)
+                    .maybe_add(box_sizing_adjustment);
+                let style_max_size = style
+                    .max_size()
+                    .maybe_resolve(parent_size, resolve_calc_value)
+                    .maybe_add(box_sizing_adjustment);
+
+                let node_size =
+                    known_dimensions.or(style_size.maybe_clamp(style_min_size, style_max_size));
+                (node_size, style_min_size, style_max_size, aspect_ratio)
+            }
+        };
+
+        // If both min and max in a given axis are set and max <= min then this determines the size in that axis
+        let min_max_definite_size = min_size.zip_map(max_size, |min, max| match (min, max) {
+            (Some(min), Some(max)) if max <= min => Some(min),
+            _ => None,
+        });
+
+        let styled_based_known_dimensions = known_dimensions
+            .or(min_max_definite_size)
+            .or(clamped_style_size)
+            .maybe_max(padding_border_size);
+
+        // Short-circuit layout if the container's size is fully determined by the container's size and the run mode
+        // is ComputeSize (and thus the container's size is all that we're interested in)
+        if run_mode == RunMode::ComputeSize {
+            if let Size {
+                width: Some(width),
+                height: Some(height),
+            } = styled_based_known_dimensions
+            {
+                return LayoutOutput::from_outer_size(Size { width, height });
+            }
+        }
+
+        drop(style);
+
+        // Unwrap the block formatting context if one was passed, or else create a new one
+        match block_ctx {
+            Some(inherited_bfc) if !is_scroll_container => self.compute_inline_layout_inner(
+                node_id,
+                LayoutInput {
+                    known_dimensions: styled_based_known_dimensions,
+                    ..inputs
+                },
+                inherited_bfc,
+            ),
+            _ => {
+                let mut root_bfc = BlockFormattingContext::new();
+                let mut root_ctx = root_bfc.root_block_context();
+                self.compute_inline_layout_inner(
+                    node_id,
+                    LayoutInput {
+                        known_dimensions: styled_based_known_dimensions,
+                        ..inputs
+                    },
+                    &mut root_ctx,
+                )
+            }
+        }
+    }
+
+    /// The out-of-flow positions for which an inline span between the inline box `box_id` and its
+    /// inline root `root_id` is a containing block (as `SPAN_*_CB` flags)
+    pub(crate) fn inline_span_cb_flags(&self, root_id: NodeId, box_id: NodeId) -> StyleFlags {
+        let root = &self.nodes[root_id];
+        // The spans of an anonymous inline root are descendants of its parent
+        let root_parent = root.is_anonymous().then_some(root.parent).flatten();
+
+        let mut flags = StyleFlags::empty();
+        let mut current = self.nodes[box_id].parent;
+        while let Some(id) = current {
+            if id == root_id || Some(id) == root_parent {
+                return flags;
+            }
+            let ancestor = &self.nodes[id];
+            if let Some(style) = ancestor.primary_styles() {
+                let display = style.slow_clone_display();
+                if display.outside() == DisplayOutside::Inline
+                    && display.inside() == DisplayInside::Flow
+                {
+                    let claims = stylo_taffy::convert::inline_containing_block_claims(&style);
+                    if claims.absolute {
+                        flags |= StyleFlags::SPAN_ABSOLUTE_CB;
+                    }
+                    if claims.fixed {
+                        flags |= StyleFlags::SPAN_FIXED_CB;
+                    }
+                }
+            }
+            current = ancestor.parent;
+        }
+        StyleFlags::empty()
+    }
+
+    fn compute_inline_layout_inner(
+        &mut self,
+        node_id: NodeId,
+        inputs: taffy::tree::LayoutInput,
+        block_ctx: &mut BlockContext<'_>,
+    ) -> taffy::LayoutOutput {
+        let scale = self.viewport.scale();
+        let LayoutInput {
+            known_dimensions,
+            parent_size,
+            available_space,
+            sizing_mode,
+            ..
+        } = inputs;
+
+        // Take inline layout to satisfy borrow checker
+        let inline_layout = self.nodes[node_id]
+            .data
+            .downcast_element_mut()
+            .unwrap()
+            .take_inline_layout()
+            .unwrap();
+
+        let style = self.nodes[node_id].layout_style();
+
+        // Note: both horizontal and vertical percentage padding/borders are resolved against the container's inline size (i.e. width).
+        // This is not a bug, but is how CSS is specified (see: https://developer.mozilla.org/en-US/docs/Web/CSS/padding#values)
+        let padding = style
+            .padding()
+            .resolve_or_zero(parent_size.width, resolve_calc_value);
+        let border = style
+            .border()
+            .resolve_or_zero(parent_size.width, resolve_calc_value);
+        let container_pb = padding + border;
+        let pb_sum = container_pb.sum_axes();
+        let box_sizing_adjustment = if style.box_sizing() == BoxSizing::ContentBox {
+            pb_sum
+        } else {
+            Size::ZERO
+        };
+
+        // Scrollbar gutters are reserved when the `overflow` property is set to `Overflow::Scroll`.
+        // However, the axis are switched (transposed) because a node that scrolls vertically needs
+        // *horizontal* space to be reserved for a scrollbar
+        let scrollbar_gutter = style.overflow().transpose().map(|overflow| match overflow {
+            Overflow::Scroll => style.scrollbar_width(),
+            _ => 0.0,
+        });
+        // TODO: make side configurable based on the `direction` property
+        let mut content_box_inset = container_pb;
+        content_box_inset.right += scrollbar_gutter.x;
+        content_box_inset.bottom += scrollbar_gutter.y;
+
+        let has_styles_preventing_being_collapsed_through = !style.is_block()
+            || style.overflow().x.is_scroll_container()
+            || style.overflow().y.is_scroll_container()
+            || style.position().is_out_of_flow()
+            || padding.top > 0.0
+            || padding.bottom > 0.0
+            || border.top > 0.0
+            || border.bottom > 0.0;
+        // || matches!(node_size.height, Some(h) if h > 0.0)
+        // || matches!(node_min_size.height, Some(h) if h > 0.0)
+        // || !inline_layout.text.is_empty();
+        // || inline_layout.layout.inline_boxes().len() > 0;
+
+        // Resolve node's preferred/min/max sizes (width/heights) against the available space (percentages resolve to pixel values)
+        // For ContentSize mode, we pretend that the node has no size styles as these should be ignored.
+        let (node_size, node_min_size, node_max_size, aspect_ratio) = match sizing_mode {
+            SizingMode::ContentSize => {
+                let node_size = known_dimensions;
+                let node_min_size = Size::NONE;
+                let node_max_size = Size::NONE;
+                (node_size, node_min_size, node_max_size, None)
+            }
+            SizingMode::InherentSize => {
+                let aspect_ratio = style.aspect_ratio();
+                let style_size = style
+                    .size()
+                    .maybe_resolve(parent_size, resolve_calc_value)
+                    .maybe_apply_aspect_ratio(aspect_ratio)
+                    .maybe_add(box_sizing_adjustment);
+                let style_min_size = style
+                    .min_size()
+                    .maybe_resolve(parent_size, resolve_calc_value)
+                    .maybe_apply_aspect_ratio(aspect_ratio)
+                    .maybe_add(box_sizing_adjustment);
+                let style_max_size = style
+                    .max_size()
+                    .maybe_resolve(parent_size, resolve_calc_value)
+                    .maybe_add(box_sizing_adjustment);
+
+                let node_size =
+                    known_dimensions.or(style_size.maybe_clamp(style_min_size, style_max_size));
+                (node_size, style_min_size, style_max_size, aspect_ratio)
+            }
+        };
+
+        let suppresses_baseline = style.contain().suppresses_baseline();
+        drop(style);
+
+        // Compute available space
+        let available_space = Size {
+            width: known_dimensions
+                .width
+                .map(AvailableSpace::from)
+                .unwrap_or(available_space.width)
+                .maybe_set(known_dimensions.width)
+                .maybe_set(node_size.width)
+                .map_definite_value(|size| {
+                    (size.maybe_clamp(node_min_size.width, node_max_size.width)
+                        - content_box_inset.horizontal_axis_sum())
+                    .max(0.0)
+                }),
+            height: known_dimensions
+                .height
+                .map(AvailableSpace::from)
+                .unwrap_or(available_space.height)
+                .maybe_set(known_dimensions.height)
+                .maybe_set(node_size.height)
+                .map_definite_value(|size| {
+                    (size.maybe_clamp(node_min_size.height, node_max_size.height)
+                        - content_box_inset.vertical_axis_sum())
+                    .max(0.0)
+                }),
+        };
+
+        // Compute size of inline boxes
+        let child_inputs = taffy::tree::LayoutInput {
+            known_dimensions: Size::NONE,
+            available_space,
+            sizing_mode: SizingMode::InherentSize,
+            parent_size: Size {
+                width: available_space.width.into_option(),
+                // Anonymous blocks do not establish the containing block for percentages.
+                height: if self.nodes[node_id].is_anonymous() {
+                    parent_size.height
+                } else {
+                    available_space.height.into_option()
+                },
+            },
+            // Atomic inlines (e.g. inline-block) establish independent formatting
+            // contexts: their margins never collapse with their children's margins.
+            vertical_margins_are_collapsible: taffy::Line::FALSE,
+            ..inputs
+        };
+        let frame = Frame {
+            inputs,
+            node_size,
+            node_min_size,
+            node_max_size,
+            aspect_ratio,
+            padding,
+            border,
+            scrollbar_gutter,
+            container_pb,
+            content_box_inset,
+            child_inputs,
+            available_space,
+            collapses_through: has_styles_preventing_being_collapsed_through,
+            suppresses_baseline,
+            scale,
+        };
+        self.lay_out_lines(node_id, inline_layout, frame, block_ctx)
+    }
+}
+
+#[inline(always)]
+pub(crate) fn f32_max(a: f32, b: f32) -> f32 {
+    a.max(b)
+}
diff --git a/packages/blitz-dom/src/layout/list.rs b/packages/blitz-dom/src/layout/list.rs
index 0d4dbabf1f..71410cb960 100644
--- a/packages/blitz-dom/src/layout/list.rs
+++ b/packages/blitz-dom/src/layout/list.rs
@@ -1,6 +1,5 @@
 use blitz_traits::node_id::NodeId;
 use markup5ever::local_name;
-use parley::FontFamily;
 use style::computed_values::list_style_type::T as ListStyleType;
 use style::{
     computed_values::list_style_position::T as ListStylePosition, counter_style::CounterStyle,
@@ -9,11 +8,9 @@ use style::{
 use crate::{
     BaseDocument,
     node::{ListItemLayout, ListItemLayoutPosition, Marker},
-    stylo_to_parley,
+    text::{MarkerEngine as _, MarkerLayout},
 };
 
-pub(super) const BULLET_FONT_FAMILY: &str = "Bullet, monospace, sans-serif";
-
 pub(super) fn collect_list_item_children(
     doc: &mut BaseDocument,
     index: &mut usize,
@@ -71,40 +68,22 @@ fn node_list_item_child(
     };
 
     let styles = node.primary_styles().unwrap();
-    let list_style_type = styles.clone_list_style_type();
-    let list_style_position = styles.clone_list_style_position();
+    let list_style_type = styles.slow_clone_list_style_type();
+    let list_style_position = styles.slow_clone_list_style_position();
     let marker = marker_for_style(list_style_type.clone(), index)?;
 
     let position = match list_style_position {
         ListStylePosition::Inside => ListItemLayoutPosition::Inside,
         ListStylePosition::Outside => {
-            let mut parley_style = stylo_to_parley::style(child_id, &styles);
-
-            if let Some(font_family) = font_for_bullet_style(list_style_type) {
-                parley_style.font_family = font_family;
-            }
-
-            // Create a parley tree builder
-            let mut font_ctx = doc.font_ctx.lock().unwrap();
-            let mut builder = doc.layout_ctx.tree_builder(
-                &mut font_ctx,
+            let bullet = list_style_type.0.is_bullet();
+            let layout = MarkerLayout::build(
+                &mut doc.text,
+                child_id,
+                &styles,
+                &marker,
+                bullet,
                 doc.viewport.scale(),
-                true,
-                &parley_style,
             );
-
-            match &marker {
-                Marker::Char(char) => {
-                    let mut buf = [0u8; 4];
-                    builder.push_text(char.encode_utf8(&mut buf));
-                }
-                Marker::String(str) => builder.push_text(str),
-            };
-
-            let mut layout = builder.build().0;
-            let width = layout.calculate_content_widths().max;
-            layout.break_all_lines(Some(width));
-
             ListItemLayoutPosition::Outside(Box::new(layout))
         }
     };
@@ -157,15 +136,6 @@ fn marker_for_style(list_style_type: ListStyleType, index: usize) -> Option<Mark
     })
 }
 
-// Override the font to our specific bullet font when rendering bullets
-fn font_for_bullet_style(list_style_type: ListStyleType) -> Option<FontFamily<'static>> {
-    if list_style_type.0.is_bullet() {
-        return Some(BULLET_FONT_FAMILY.into());
-    }
-
-    None
-}
-
 const ALPHABET: [char; 26] = [
     'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's',
     't', 'u', 'v', 'w', 'x', 'y', 'z',
diff --git a/packages/blitz-dom/src/layout/mod.rs b/packages/blitz-dom/src/layout/mod.rs
index 0a5fbc1dc8..5f7a64fb3a 100644
--- a/packages/blitz-dom/src/layout/mod.rs
+++ b/packages/blitz-dom/src/layout/mod.rs
@@ -5,6 +5,7 @@
 //! This is slower, yes, but happens fast enough that it's not a huge issue.
 
 use crate::node::{ComputedStyleRef, ImageData, NodeData, SpecialElementData};
+use crate::text::EditEngine as _;
 use crate::{document::BaseDocument, dom_node_id, node::Node, taffy_node_id};
 use markup5ever::{LocalName, local_name};
 use std::cell::Ref;
@@ -29,6 +30,8 @@ pub(crate) mod list;
 pub(crate) mod paint_tree;
 pub(crate) mod replaced;
 pub(crate) mod table;
+// winkin applies `text-transform` itself: only Parley's builder runs the transformer.
+#[cfg_attr(text_winkin, allow(dead_code))]
 pub(crate) mod text_transform;
 #[cfg(feature = "writing-mode")]
 pub(crate) mod writing_mode;
@@ -82,7 +85,7 @@ pub(crate) fn resolve_calc_value(calc_ptr: *const (), parent_size: f32) -> f32 {
 /// Per-pass layout state: wraps the document for the duration of a layout pass and carries
 /// the Taffy tree trait implementations. Derefs to [`BaseDocument`].
 pub(crate) struct LayoutPassState<'doc> {
-    doc: &'doc mut BaseDocument,
+    pub(crate) doc: &'doc mut BaseDocument,
     /// The writing mode of the box whose layout algorithm is currently running (see
     /// `layout::writing_mode`). Child styles read during that algorithm are expressed in its axes.
     #[cfg(feature = "writing-mode")]
@@ -228,8 +231,8 @@ impl LayoutPassState<'_> {
         let font_styles = node.primary_styles().map(|style| {
             use style::values::computed::font::LineHeight;
 
-            let font_size = style.clone_font_size().used_size().px();
-            let line_height = match style.clone_line_height() {
+            let font_size = style.slow_clone_font_size().used_size().px();
+            let line_height = match style.slow_clone_line_height() {
                 LineHeight::Normal => font_size * 1.2,
                 LineHeight::Number(num) => font_size * num.0,
                 LineHeight::Length(value) => value.0.px(),
@@ -317,10 +320,7 @@ impl LayoutPassState<'_> {
                             .and_then(|el| el.text_input_data_mut())
                         {
                             input.editor.set_width(Some(content_width * scale));
-                            input.editor.refresh_layout(
-                                &mut doc.font_ctx.lock().unwrap(),
-                                &mut doc.layout_ctx,
-                            );
+                            input.editor.refresh(&mut doc.text);
                         }
                     }
                     return output;
@@ -355,7 +355,24 @@ impl LayoutPassState<'_> {
                                 },
                             );
                         }
-                        None | Some("text" | "password" | "email" | "tel" | "url" | "search") => {
+                        // A slider is 129px along its inline axis and 16px across it, as Chrome
+                        // sizes one.
+                        Some("range") => {
+                            return compute_leaf_layout(
+                                inputs,
+                                &node.layout_style(),
+                                resolve_calc_value,
+                                |_known_size, _available_space| taffy::Size {
+                                    width: 129.0,
+                                    height: 16.0,
+                                },
+                            );
+                        }
+                        None
+                        | Some(
+                            "text" | "password" | "email" | "tel" | "url" | "search" | "number"
+                            | "date" | "month" | "week" | "time" | "datetime-local",
+                        ) => {
                             return compute_leaf_layout(
                                 inputs,
                                 &node.layout_style(),
diff --git a/packages/blitz-dom/src/layout/paint_tree.rs b/packages/blitz-dom/src/layout/paint_tree.rs
index 99875eae85..ec60e06dc9 100644
--- a/packages/blitz-dom/src/layout/paint_tree.rs
+++ b/packages/blitz-dom/src/layout/paint_tree.rs
@@ -444,18 +444,18 @@ fn node_to_paint_order(node: &Node, is_flex_or_grid: bool) -> (i32, i32) {
     let Some(style) = node.primary_styles() else {
         return (0, 0);
     };
-    let position = style.clone_position();
+    let position = style.slow_clone_position();
     if is_flex_or_grid {
         match position {
-            Position::Static => (0, style.clone_order()),
-            Position::Relative | Position::Sticky => (2, style.clone_order()),
+            Position::Static => (0, style.slow_clone_order()),
+            Position::Relative | Position::Sticky => (2, style.slow_clone_order()),
             // Out-of-flow children are not flex/grid items: `order` does
             // not apply; tree order does.
             Position::Absolute | Position::Fixed => (2, 0),
         }
     } else {
         (
-            position_to_order(position) + float_to_order(style.clone_float()),
+            position_to_order(position) + float_to_order(style.slow_clone_float()),
             0,
         )
     }
diff --git a/packages/blitz-dom/src/layout/replaced.rs b/packages/blitz-dom/src/layout/replaced.rs
index ce8b2b1348..0da3ced59a 100644
--- a/packages/blitz-dom/src/layout/replaced.rs
+++ b/packages/blitz-dom/src/layout/replaced.rs
@@ -17,7 +17,7 @@ pub(crate) fn is_replaced_element(tag_name: &LocalName) -> bool {
 }
 
 /// The intrinsic dimensions of a replaced element per CSS Images 3
-/// (https://drafts.csswg.org/css-images/#intrinsic-dimensions): an intrinsic
+/// (<https://drafts.csswg.org/css-images/#intrinsic-dimensions>): an intrinsic
 /// width, an intrinsic height, and an intrinsic aspect ratio, each of which
 /// may independently be absent.
 #[derive(Debug, Clone, Copy, Default)]
diff --git a/packages/blitz-dom/src/layout/table.rs b/packages/blitz-dom/src/layout/table.rs
index 30b96f07ee..ba9be73209 100644
--- a/packages/blitz-dom/src/layout/table.rs
+++ b/packages/blitz-dom/src/layout/table.rs
@@ -230,13 +230,13 @@ pub(crate) fn build_table_context(
     style.grid_auto_rows = Vec::new();
 
     // The fixed table layout algorithm only applies when the table has a non-auto width
-    let is_fixed = match stylo_styles.clone_table_layout() {
+    let is_fixed = match stylo_styles.slow_clone_table_layout() {
         TableLayout::Fixed => !style.size.width.is_auto(),
         TableLayout::Auto => false,
     };
 
-    let border_collapse = stylo_styles.clone_border_collapse();
-    let border_spacing = stylo_styles.clone_border_spacing().0;
+    let border_collapse = stylo_styles.slow_clone_border_collapse();
+    let border_spacing = stylo_styles.slow_clone_border_spacing().0;
 
     drop(stylo_styles);
 
@@ -261,7 +261,7 @@ pub(crate) fn build_table_context(
     let row_group_order = |doc: &BaseDocument, child_id: NodeId| -> u8 {
         let display = doc.nodes[child_id]
             .primary_styles()
-            .map(|s| s.clone_display());
+            .map(|s| s.slow_clone_display());
         match display.map(|d| d.inside()) {
             Some(DisplayInside::TableHeaderGroup) => 0,
             Some(DisplayInside::TableFooterGroup) => 2,
@@ -545,7 +545,7 @@ fn collect_table_cells(
 
     // Absolutely positioned boxes are out-of-flow: they are laid out by their containing
     // block rather than as part of the table grid.
-    let position = node.primary_styles().unwrap().clone_position();
+    let position = node.primary_styles().unwrap().slow_clone_position();
     if position.is_absolutely_positioned() {
         oof_children.push((node_id, stylo_taffy::convert::position(position)));
         return;
@@ -590,7 +590,7 @@ fn collect_table_cells(
             cursor.start_row();
 
             let height = node.primary_styles().and_then(|style| {
-                let height = stylo_taffy::convert::dimension(&style.clone_height());
+                let height = stylo_taffy::convert::dimension(&style.slow_clone_height());
                 (height.tag() == taffy::CompactLength::LENGTH_TAG).then(|| height.value())
             });
             rows.push(TableRow {
@@ -738,7 +738,8 @@ fn collect_table_cells(
         DisplayInside::Flow
         | DisplayInside::FlowRoot
         | DisplayInside::Flex
-        | DisplayInside::Grid => {
+        | DisplayInside::Grid
+        | DisplayInside::GridLanes => {
             node.remove_damage(CONSTRUCT_DESCENDENT | CONSTRUCT_FC | CONSTRUCT_BOX);
             // Probably a table caption: ignore
             // println!(
diff --git a/packages/blitz-dom/src/layout/text_transform.rs b/packages/blitz-dom/src/layout/text_transform.rs
index cafc86b0bd..f9e192ca44 100644
--- a/packages/blitz-dom/src/layout/text_transform.rs
+++ b/packages/blitz-dom/src/layout/text_transform.rs
@@ -11,7 +11,6 @@ use icu_locale_core::LanguageIdentifier;
 use icu_properties::props::{GeneralCategory, GeneralCategoryGroup};
 use icu_properties::{CodePointMapData, CodePointMapDataBorrowed};
 use icu_segmenter::{WordSegmenter, WordSegmenterBorrowed, options::WordBreakInvariantOptions};
-use parley::{Brush, TreeBuilder};
 use style::computed_values::white_space_collapse::T as WhiteSpaceCollapse;
 use style::properties::ComputedValues;
 use style::values::computed::TextTransform;
@@ -51,11 +50,11 @@ impl CaseTransform {
     };
 
     pub(crate) fn from_style(style: &ComputedValues) -> Self {
-        let text_transform = style.clone_text_transform();
+        let text_transform = style.slow_clone_text_transform();
         if text_transform.is_empty() {
             return Self::NONE;
         }
-        let white_space_collapse = style.clone_white_space_collapse();
+        let white_space_collapse = style.slow_clone_white_space_collapse();
         let lang = match text_transform.case() {
             TextTransformCase::None | TextTransformCase::MathAuto => LanguageIdentifier::UNKNOWN,
             _ => LanguageIdentifier::try_from_str(&style.get_font()._x_lang.0)
@@ -98,12 +97,20 @@ fn casing_language(lang: LanguageIdentifier) -> LanguageIdentifier {
     }
 }
 
+/// The text pushed so far to a text backend's builder, which `capitalize` reads as context.
+pub(crate) trait PushedText {
+    /// The text pushed so far.
+    fn text(&self) -> &str;
+    /// Whether collapsible white space is pending at the end of the text, which ends a word.
+    fn has_pending_whitespace(&self) -> bool;
+}
+
 /// Applies text transforms to the sequence of text nodes in an inline formatting context.
 ///
 /// `capitalize` operates on words, which may span multiple text nodes, so the text already
-/// pushed to the [`TreeBuilder`] is used as context for word segmentation. Only look-behind
-/// is needed: whether a word boundary precedes a letter never depends on the text that
-/// follows it.
+/// pushed to the builder ([`PushedText`]) is used as context for word segmentation. Only
+/// look-behind is needed: whether a word boundary precedes a letter never depends on the text
+/// that follows it.
 #[derive(Default)]
 pub(crate) struct TextTransformer {
     /// The offset in the builder's text of the last forced word boundary.
@@ -116,17 +123,17 @@ pub(crate) struct TextTransformer {
 
 impl TextTransformer {
     /// Forces a word boundary (e.g. at an atomic inline or a forced line break).
-    pub(crate) fn word_break<B: Brush>(&mut self, builder: &TreeBuilder<'_, B>) {
+    pub(crate) fn word_break(&mut self, builder: &impl PushedText) {
         self.context_start = builder.text().len();
     }
 
     /// Transforms the content of a text node that is about to be pushed to `builder`.
     #[inline]
-    pub(crate) fn transform<'a, B: Brush>(
+    pub(crate) fn transform<'a>(
         &'a mut self,
         text: &'a str,
         transform: &CaseTransform,
-        builder: &TreeBuilder<'_, B>,
+        builder: &impl PushedText,
     ) -> &'a str {
         if transform.text_transform.is_empty() {
             return text;
@@ -134,11 +141,11 @@ impl TextTransformer {
         self.transform_nonempty(text, transform, builder)
     }
 
-    fn transform_nonempty<'a, B: Brush>(
+    fn transform_nonempty<'a>(
         &'a mut self,
         text: &'a str,
         transform: &CaseTransform,
-        builder: &TreeBuilder<'_, B>,
+        builder: &impl PushedText,
     ) -> &'a str {
         let case = transform.text_transform.case();
         if text.is_ascii()
@@ -240,7 +247,9 @@ fn is_collapsible(white_space_collapse: WhiteSpaceCollapse, c: char) -> bool {
     match white_space_collapse {
         WhiteSpaceCollapse::Collapse => c.is_ascii_whitespace(),
         WhiteSpaceCollapse::PreserveBreaks => matches!(c, ' ' | '\t'),
-        WhiteSpaceCollapse::Preserve | WhiteSpaceCollapse::BreakSpaces => false,
+        WhiteSpaceCollapse::Preserve
+        | WhiteSpaceCollapse::PreserveSpaces
+        | WhiteSpaceCollapse::BreakSpaces => false,
     }
 }
 
@@ -536,10 +545,10 @@ fn ceil_char_boundary(s: &str, mut index: usize) -> usize {
     index
 }
 
-#[cfg(test)]
+#[cfg(all(test, text_parley))]
 mod tests {
     use super::*;
-    use parley::{FontContext, LayoutContext, TextStyle};
+    use parley::{FontContext, LayoutContext, TextStyle, TreeBuilder};
 
     fn transform(kind: TextTransform, lang: &str, texts: &[&str]) -> Vec<String> {
         let transform = CaseTransform {
diff --git a/packages/blitz-dom/src/layout/writing_mode.rs b/packages/blitz-dom/src/layout/writing_mode.rs
index edf4600c08..264d27a42d 100644
--- a/packages/blitz-dom/src/layout/writing_mode.rs
+++ b/packages/blitz-dom/src/layout/writing_mode.rs
@@ -63,7 +63,7 @@ impl LayoutPassState<'_> {
         if Some(node_id) == self.root_id {
             self.root_wm
         } else {
-            self.nodes[node_id].writing_mode()
+            self.nodes[node_id].layout_frame_wm()
         }
     }
 
diff --git a/packages/blitz-dom/src/lib.rs b/packages/blitz-dom/src/lib.rs
index fcf548967c..59d009deb4 100644
--- a/packages/blitz-dom/src/lib.rs
+++ b/packages/blitz-dom/src/lib.rs
@@ -44,7 +44,6 @@ mod config;
 mod cssom;
 mod debug;
 mod events;
-mod font_metrics;
 mod form;
 mod html;
 /// Loading of `<iframe>` elements into sub-documents.
@@ -64,7 +63,7 @@ mod stylo;
 mod stylo_device;
 mod stylo_to_cursor_icon;
 mod stylo_to_kurbo;
-mod stylo_to_parley;
+pub mod text;
 pub mod traversal;
 /// Versioned storage for the nodes of the DOM tree.
 mod tree;
@@ -102,8 +101,8 @@ pub use markup5ever::{
 };
 pub use mutator::DocumentMutator;
 pub use node::{Attribute, DocumentData, ElementData, Node, NodeData, TextNodeData};
-pub use parley::FontContext;
 pub use scrolling::{ScrollBehavior, ScrollLogicalPosition};
+pub use text::{FontContext, build_single_font_ctx};
 pub use tree::NodeTree;
 
 /// Convert a Blitz [`NodeId`] into a [`taffy::NodeId`] (which wraps a `u64`).
@@ -125,36 +124,3 @@ pub type SelectorList = selectors::SelectorList<style::selector_parser::Selector
 pub use events::{EventDriver, EventHandler, NoopEventHandler};
 pub use html::{DummyHtmlParserProvider, HtmlParserProvider};
 pub use util::{Point, decode_font_bytes};
-
-/// Convenience builder for the one-font case: produces a [`FontContext`] with
-/// system-font discovery disabled and the supplied font registered as the
-/// fallback for every generic family. The standard setup for WASM, where
-/// browsers don't expose system fonts. WOFF/WOFF2 inputs are decoded
-/// automatically.
-pub fn build_single_font_ctx(font_data: &[u8]) -> FontContext {
-    use parley::fontique::{Blob, Collection, CollectionOptions, GenericFamily, SourceCache};
-    use std::sync::Arc;
-
-    let mut ctx = FontContext {
-        source_cache: SourceCache::new_shared(),
-        collection: Collection::new(CollectionOptions {
-            shared: false,
-            system_fonts: false,
-        }),
-    };
-    let decoded = decode_font_bytes(font_data).into_owned();
-    let registered = ctx
-        .collection
-        .register_fonts(Blob::new(Arc::new(decoded) as _), None);
-    let family_ids: Vec<_> = registered.iter().map(|(id, _)| *id).collect();
-    for generic in [
-        GenericFamily::SansSerif,
-        GenericFamily::Serif,
-        GenericFamily::Monospace,
-        GenericFamily::SystemUi,
-    ] {
-        ctx.collection
-            .append_generic_families(generic, family_ids.iter().copied());
-    }
-    ctx
-}
diff --git a/packages/blitz-dom/src/mutator.rs b/packages/blitz-dom/src/mutator.rs
index feac670edc..1266e4f670 100644
--- a/packages/blitz-dom/src/mutator.rs
+++ b/packages/blitz-dom/src/mutator.rs
@@ -350,11 +350,7 @@ impl DocumentMutator<'_> {
         if *attr == local_name!("value") {
             if let Some(input_data) = element.text_input_data_mut() {
                 // Update text input value
-                input_data.set_text(
-                    &mut self.doc.font_ctx.lock().unwrap(),
-                    &mut self.doc.layout_ctx,
-                    value,
-                );
+                input_data.set_text(&mut self.doc.text, value);
             }
             return;
         }
@@ -468,11 +464,7 @@ impl DocumentMutator<'_> {
         // Update text input value
         if name.local == local_name!("value") {
             if let Some(input_data) = element.text_input_data_mut() {
-                input_data.set_text(
-                    &mut self.doc.font_ctx.lock().unwrap(),
-                    &mut self.doc.layout_ctx,
-                    "",
-                );
+                input_data.set_text(&mut self.doc.text, "");
             }
         }
 
diff --git a/packages/blitz-dom/src/net.rs b/packages/blitz-dom/src/net.rs
index 786b5bd19d..a1f340795e 100644
--- a/packages/blitz-dom/src/net.rs
+++ b/packages/blitz-dom/src/net.rs
@@ -6,7 +6,7 @@ use std::{
     sync::{Arc, atomic::AtomicUsize, mpsc::Sender},
 };
 use style::{
-    font_face::{FontFaceSourceFormat, FontFaceSourceFormatKeyword, FontStyleRange, Source},
+    font_face::{FontFaceSourceFormat, FontFaceSourceFormatKeyword, Source},
     media_queries::MediaList,
     servo_arc::Arc as ServoArc,
     shared_lock::SharedRwLock,
@@ -35,23 +35,18 @@ pub(crate) fn stamped_request(url: Url, signal: Option<&AbortSignal>) -> Request
 }
 
 /// Carries `@font-face` descriptors from CSS parsing through to font
-/// registration so `parley::Collection::register_fonts` can alias the bytes
-/// under the `font-family` declared in CSS rather than whatever family name
-/// the TTF's own `name` table reports.
+/// registration so the text backend can register the bytes under the
+/// `font-family` declared in CSS rather than whatever family name the TTF's
+/// own `name` table reports.
 ///
-/// All fields are `Option` because each descriptor is independently optional
-/// at the CSS level. Missing fields fall back to the values parley reads
-/// from the font's own metadata.
+/// Each descriptor is independently optional at the CSS level. Missing ones
+/// fall back to the values the backend reads from the font's own metadata.
 #[derive(Clone, Debug, Default)]
 pub struct FontFaceOverrides {
     /// `font-family` descriptor (the alias the rest of the stylesheet uses).
     pub family_name: Option<String>,
-    /// `font-weight` descriptor as a single CSS weight (100–900). Stylo
-    /// parses this as a range; we record the lower bound, which equals the
-    /// upper bound in the common single-value case.
-    pub weight: Option<f32>,
-    /// `font-style` descriptor mapped to fontique's `FontStyle`.
-    pub style: Option<parley::fontique::FontStyle>,
+    /// The other descriptors, as the text backend registers a face by them.
+    pub descriptors: crate::text::FaceDescriptors,
 }
 
 #[derive(Clone, Debug)]
@@ -418,16 +413,12 @@ pub(crate) fn fetch_font_face_rules<'a>(
                 let descriptor = &font_face.read_with(read_guard).descriptors;
                 let family = descriptor.font_family.as_ref()?;
                 let src = descriptor.src.as_ref()?;
-                // Capture the @font-face descriptors so parley can register
-                // the font under the CSS-declared family name (and weight /
-                // style) rather than whatever metadata the TTF reports.
+                // Capture the @font-face descriptors so the text backend can
+                // register the font under the CSS-declared family name (and
+                // weight / style) rather than whatever metadata the TTF reports.
                 let overrides = FontFaceOverrides {
                     family_name: Some(family.name.to_string()),
-                    weight: descriptor
-                        .font_weight
-                        .as_ref()
-                        .and_then(|range| range.0.compute().map(|w| w.value())),
-                    style: descriptor.font_style.as_ref().map(stylo_to_fontique_style),
+                    descriptors: crate::text::FaceDescriptors::from_rule(descriptor),
                 };
                 Some((src, overrides))
             }
@@ -518,29 +509,6 @@ pub(crate) fn fetch_font_face_rules<'a>(
         })
 }
 
-/// Translate stylo's `@font-face` `font-style` descriptor into the fontique
-/// `FontStyle` enum used by parley. Stylo encodes Italic and Oblique-with-
-/// angle distinctly; CSS's bare `normal` is parsed as `Oblique(0deg, 0deg)`
-/// by stylo (see the `FontStyle::parse` impl in stylo's `font_face.rs`), so
-/// that pattern is treated as `Normal` here.
-fn stylo_to_fontique_style(style: &FontStyleRange) -> parley::fontique::FontStyle {
-    use parley::fontique::FontStyle as Fq;
-    match style {
-        FontStyleRange::Italic => Fq::Italic,
-        FontStyleRange::Oblique(min, max) => {
-            let angle = min.degrees();
-            // Stylo emits `Oblique(0deg, 0deg)` for the literal CSS `normal`
-            // keyword. Map that back to `Normal` so parley's font matching
-            // doesn't misclassify upright fonts.
-            if angle.is_none_or(|a| a == 0.0) && max.degrees().is_none_or(|a| a == 0.0) {
-                Fq::Normal
-            } else {
-                Fq::Oblique(angle)
-            }
-        }
-    }
-}
-
 /// Handles HTML fetched for an `<iframe>` element's `src`
 pub(crate) struct DocumentSrcHandler;
 
@@ -605,45 +573,3 @@ impl ImageHandler {
         ))
     }
 }
-
-#[cfg(test)]
-mod tests {
-    use super::*;
-    use parley::fontique::FontStyle as Fq;
-    use style::values::specified::Angle;
-
-    fn oblique(min_deg: f32, max_deg: f32) -> FontStyleRange {
-        FontStyleRange::Oblique(Angle::from_degrees(min_deg), Angle::from_degrees(max_deg))
-    }
-
-    #[test]
-    fn italic_maps_to_italic() {
-        assert_eq!(stylo_to_fontique_style(&FontStyleRange::Italic), Fq::Italic,);
-    }
-
-    #[test]
-    fn oblique_zero_zero_maps_to_normal() {
-        // Stylo parses bare CSS `normal` as `Oblique(0deg, 0deg)`; the
-        // helper must round-trip that back to `FontStyle::Normal` so
-        // parley's matching doesn't misclassify upright fonts.
-        assert_eq!(stylo_to_fontique_style(&oblique(0.0, 0.0)), Fq::Normal);
-    }
-
-    #[test]
-    fn oblique_single_angle_maps_to_oblique_with_min() {
-        assert_eq!(
-            stylo_to_fontique_style(&oblique(14.0, 14.0)),
-            Fq::Oblique(Some(14.0)),
-        );
-    }
-
-    #[test]
-    fn oblique_range_uses_min_angle() {
-        // For a range, fontique's single-angle representation takes the
-        // lower bound — confirm `min` (not `max`) is what gets through.
-        assert_eq!(
-            stylo_to_fontique_style(&oblique(10.0, 20.0)),
-            Fq::Oblique(Some(10.0)),
-        );
-    }
-}
diff --git a/packages/blitz-dom/src/node/element.rs b/packages/blitz-dom/src/node/element.rs
index 313a0738c5..fea4bca8ac 100644
--- a/packages/blitz-dom/src/node/element.rs
+++ b/packages/blitz-dom/src/node/element.rs
@@ -31,7 +31,7 @@ use super::svg::SvgImageData;
 use super::{Attribute, Attributes};
 use crate::Document;
 use crate::layout::table::TableContext;
-use crate::node::{TextBrush, TextInputData, TextLayout};
+use crate::node::{TextInputData, TextLayout};
 
 #[cfg(feature = "custom-widget")]
 use super::custom_widget::CustomWidgetData;
@@ -61,7 +61,7 @@ pub struct ElementData {
     /// Heterogeneous data that depends on the element's type.
     /// For example:
     ///   - The image data for \<img\> elements.
-    ///   - The parley Layout for inline roots.
+    ///   - The text layout for inline roots.
     ///   - The text editor for input/textarea elements
     pub special_data: SpecialElementData,
 
@@ -69,7 +69,7 @@ pub struct ElementData {
 
     pub mask_images: ThinVec<Option<ImageResourceData>>,
 
-    /// Parley text layout (elements with inline inner display mode only)
+    /// Text layout (elements with inline inner display mode only)
     pub inline_layout_data: Option<Box<TextLayout>>,
 
     /// Data associated with display: list-item. Note that this display mode
@@ -120,7 +120,7 @@ pub struct ElementData {
 /// Taffy layout output state (cache, layouts, scroll offset and overflow).
 ///
 /// Lazily boxed on [`ElementData`] / [`DocumentData`]: inline-level elements
-/// are positioned by the inline (parley) layout rather than by taffy, so most
+/// are positioned by the inline (text) layout rather than by taffy, so most
 /// nodes on text-heavy pages never allocate one.
 #[derive(Debug, Clone)]
 pub struct LayoutData {
@@ -684,7 +684,7 @@ impl ElementData {
         guard: &SharedRwLock,
         url_extra_data: UrlExtraData,
     ) -> bool {
-        let context = ParserContext::new(
+        let mut context = ParserContext::new(
             Origin::Author,
             &url_extra_data,
             Some(CssRuleType::Style),
@@ -706,7 +706,7 @@ impl ElementData {
         let Ok(_) = PropertyDeclaration::parse_into(
             &mut source_property_declaration,
             property_id,
-            &context,
+            &mut context,
             &mut parser,
         ) else {
             #[cfg(feature = "tracing")]
@@ -921,7 +921,7 @@ pub struct ListItemLayout {
 }
 
 //We seperate chars from strings in order to optimise rendering - ie not needing to
-//construct a whole parley layout for simple char markers
+//construct a whole text layout for simple char markers
 #[derive(Debug, PartialEq, Clone)]
 pub enum Marker {
     Char(char),
@@ -932,7 +932,7 @@ pub enum Marker {
 #[derive(Clone)]
 pub enum ListItemLayoutPosition {
     Inside,
-    Outside(Box<parley::Layout<TextBrush>>),
+    Outside(Box<crate::text::MarkerLayout>),
 }
 
 impl std::fmt::Debug for ListItemLayout {
@@ -968,139 +968,3 @@ mod file_data {
 }
 #[cfg(feature = "file-input")]
 pub use file_data::FileData;
-
-#[cfg(test)]
-mod tests {
-    use super::TextInputData;
-    use parley::{FontContext, LayoutContext};
-
-    /// Build a [`TextInputData`] with the given text laid out at scale 1.0.
-    fn make_input(is_multiline: bool, text: &str) -> TextInputData {
-        let mut font_ctx = FontContext::new();
-        let mut layout_ctx = LayoutContext::new();
-        let mut data = TextInputData::new(is_multiline);
-        data.editor.set_scale(1.0);
-        data.editor.set_text(text);
-        data.editor
-            .driver(&mut font_ctx, &mut layout_ctx)
-            .refresh_layout();
-        data
-    }
-
-    #[test]
-    fn short_text_does_not_scroll() {
-        let mut data = make_input(false, "hi");
-        // A wide content box that comfortably fits the text.
-        data.clamp_scroll_offset(1000.0, 100.0);
-        assert_eq!(data.scroll_offset, 0.0);
-    }
-
-    #[test]
-    fn single_line_scrolls_to_follow_caret() {
-        let text = "the quick brown fox jumps over the lazy dog repeatedly and at length";
-        let mut data = make_input(false, text);
-        let content_box_width = 40.0;
-        let content_box_height = 20.0;
-
-        // Caret at the end of a string that overflows a narrow input should scroll right.
-        data.editor
-            .driver(&mut FontContext::new(), &mut LayoutContext::new())
-            .move_to_text_end();
-        data.clamp_scroll_offset(content_box_width, content_box_height);
-
-        let layout_width = data.editor.try_layout().unwrap().full_width();
-        if layout_width > content_box_width {
-            assert!(
-                data.scroll_offset > 0.0,
-                "expected horizontal scroll for overflowing single-line input"
-            );
-            // The caret must be within the visible region after scrolling.
-            let caret = data.editor.cursor_geometry(1.5).unwrap();
-            assert!(caret.x1 as f32 <= data.scroll_offset + content_box_width + 0.5);
-            assert!(caret.x0 as f32 >= data.scroll_offset - 0.5);
-        }
-
-        // Moving the caret back to the start should reset the scroll offset.
-        data.editor
-            .driver(&mut FontContext::new(), &mut LayoutContext::new())
-            .move_to_text_start();
-        data.clamp_scroll_offset(content_box_width, content_box_height);
-        assert_eq!(data.scroll_offset, 0.0);
-    }
-
-    #[test]
-    fn multiline_scrolls_vertically_not_horizontally() {
-        let text = (0..40)
-            .map(|i| format!("line {i}"))
-            .collect::<Vec<_>>()
-            .join("\n");
-        let mut data = make_input(true, &text);
-        // Constrain the width so wrapping is well-defined.
-        data.editor.set_width(Some(200.0));
-        data.editor
-            .driver(&mut FontContext::new(), &mut LayoutContext::new())
-            .refresh_layout();
-
-        let content_box_width = 200.0;
-        let content_box_height = 30.0;
-
-        data.editor
-            .driver(&mut FontContext::new(), &mut LayoutContext::new())
-            .move_to_text_end();
-        data.clamp_scroll_offset(content_box_width, content_box_height);
-
-        let layout_height = data.editor.try_layout().unwrap().height();
-        if layout_height > content_box_height {
-            assert!(
-                data.scroll_offset > 0.0,
-                "expected vertical scroll for overflowing multi-line input"
-            );
-        }
-    }
-
-    #[test]
-    fn scroll_by_clamps_and_bubbles() {
-        let text = (0..40)
-            .map(|i| format!("line {i}"))
-            .collect::<Vec<_>>()
-            .join("\n");
-        let mut data = make_input(true, &text);
-        data.editor.set_width(Some(200.0));
-        data.editor
-            .driver(&mut FontContext::new(), &mut LayoutContext::new())
-            .refresh_layout();
-
-        let content_box_width = 200.0;
-        let content_box_height = 30.0;
-        let max = data.max_scroll_offset(content_box_width, content_box_height);
-        assert!(max > 0.0, "test text should overflow the content box");
-
-        // Scrolling up (positive delta decreases offset) while already at the top is a no-op and
-        // the whole delta bubbles.
-        assert_eq!(data.scroll_offset, 0.0);
-        let bubbled = data.scroll_by(15.0, content_box_width, content_box_height);
-        assert_eq!(data.scroll_offset, 0.0);
-        assert_eq!(bubbled, 15.0);
-
-        // Scrolling down moves the offset and consumes the delta.
-        let bubbled = data.scroll_by(-10.0, content_box_width, content_box_height);
-        assert_eq!(data.scroll_offset, 10.0);
-        assert_eq!(bubbled, 0.0);
-
-        // Scrolling past the end clamps to the maximum and bubbles the remainder. Starting at
-        // offset 10 with max headroom of `max - 10`, a delta of `-(max + 100)` consumes
-        // `max - 10` and bubbles the rest (`-110`).
-        let bubbled = data.scroll_by(-(max + 100.0), content_box_width, content_box_height);
-        assert_eq!(data.scroll_offset, max);
-        assert!((bubbled - (-110.0)).abs() < 1e-3);
-    }
-
-    #[test]
-    fn single_line_does_not_scroll_when_text_fits() {
-        let mut data = make_input(false, "hi");
-        // Wide content box; nothing to scroll, so all delta bubbles.
-        let bubbled = data.scroll_by(-50.0, 1000.0, 100.0);
-        assert_eq!(data.scroll_offset, 0.0);
-        assert_eq!(bubbled, -50.0);
-    }
-}
diff --git a/packages/blitz-dom/src/node/mod.rs b/packages/blitz-dom/src/node/mod.rs
index 34b8a2eedd..5496b37ab1 100644
--- a/packages/blitz-dom/src/node/mod.rs
+++ b/packages/blitz-dom/src/node/mod.rs
@@ -27,4 +27,4 @@ pub use scrollbar::{ScrollbarColor, ScrollbarRef, ScrollbarWidth};
 pub use stylo_data::ComputedStyleRef;
 #[cfg(feature = "svg")]
 pub use svg::{SvgImageData, SvgIntrinsicDimensions};
-pub use text::{GeneratedTextInputEvent, TextBrush, TextInputData, TextLayout};
+pub use text::{GeneratedTextInputEvent, InlineContent, InlineTextHit, TextInputData, TextLayout};
diff --git a/packages/blitz-dom/src/node/node.rs b/packages/blitz-dom/src/node/node.rs
index 66190f49fa..abbf352eee 100644
--- a/packages/blitz-dom/src/node/node.rs
+++ b/packages/blitz-dom/src/node/node.rs
@@ -1,5 +1,6 @@
 use crate::Document;
 use crate::layout::paint_tree::{HoistedPaintChild, StackingContext};
+use crate::text::{EditableText as _, InlineText as _};
 use bitflags::bitflags;
 use blitz_traits::events::{
     BlitzPointerEvent, BlitzPointerId, DomEventData, HitResult, PointerCoords,
@@ -10,7 +11,6 @@ use euclid::{Point2D, Rect, Size2D};
 use keyboard_types::Modifiers;
 use kurbo::{Affine, Rect as KurboRect};
 use markup5ever::{LocalName, local_name};
-use parley::{BreakReason, Cluster, ClusterSide};
 use selectors::matching::ElementSelectorFlags;
 use std::cell::{Cell, RefCell};
 use std::fmt::Write;
@@ -128,7 +128,7 @@ pub struct Node {
     /// For element nodes this holds the [`ElementData`], which stores most of
     /// the per-node style/layout state. For the document node it holds the
     /// [`DocumentData`]. Access the moved fields through the forwarding methods
-    /// on [`Node`] (e.g. [`Node::style`], [`Node::final_layout`]).
+    /// on [`Node`] (e.g. [`Node::primary_styles`], [`Node::final_layout`]).
     pub data: NodeData,
 }
 
@@ -231,17 +231,9 @@ impl Node {
         }
     }
 
-    /// Clear this node's taffy layout cache and any cached inline
-    /// `content_widths`, forcing a full relayout of it on the next pass.
+    /// Clear this node's taffy layout cache, forcing a full relayout of it on the next pass.
     pub fn invalidate_layout_cache(&mut self) {
         self.clear_layout_cache();
-        if let Some(inline_layout) = self
-            .data
-            .downcast_element_mut()
-            .and_then(|el| el.inline_layout_data.as_mut())
-        {
-            inline_layout.content_widths = None;
-        }
     }
 
     #[inline]
@@ -470,7 +462,7 @@ impl Node {
     }
 
     pub(crate) fn display_style(&self) -> Option<StyloDisplay> {
-        let display = self.primary_styles().as_ref()?.clone_display();
+        let display = self.primary_styles().as_ref()?.slow_clone_display();
         Some(
             if self.element_data().is_some_and(|el| el.is_button_input()) {
                 stylo_taffy::convert::button_input_display(display)
@@ -486,7 +478,7 @@ impl Node {
 
         // Ignore out-of-flow items
         let position = style
-            .map(|s| s.clone_position())
+            .map(|s| s.slow_clone_position())
             .unwrap_or(Position::Relative);
         let is_in_flow = matches!(
             position,
@@ -498,7 +490,7 @@ impl Node {
         // Floated boxes do not break up the inline flow: they participate in the
         // inline formatting context as out-of-flow inline boxes
         let is_floating = style
-            .map(|s| s.clone_float().is_floating())
+            .map(|s| s.slow_clone_float().is_floating())
             .unwrap_or(false);
         if is_floating {
             return false;
@@ -542,9 +534,13 @@ impl Node {
         let white_space_collapse = self
             .parent
             .and_then(|parent_id| self.with(parent_id).primary_styles())
-            .map(|style| style.clone_white_space_collapse());
+            .map(|style| style.slow_clone_white_space_collapse());
         match white_space_collapse {
-            Some(WhiteSpaceCollapse::Preserve | WhiteSpaceCollapse::BreakSpaces) => false,
+            Some(
+                WhiteSpaceCollapse::Preserve
+                | WhiteSpaceCollapse::BreakSpaces
+                | WhiteSpaceCollapse::PreserveSpaces,
+            ) => false,
             Some(WhiteSpaceCollapse::PreserveBreaks) => !data.content.contains('\n'),
             Some(WhiteSpaceCollapse::Collapse) | None => true,
         }
@@ -821,7 +817,10 @@ impl Node {
         {
             if !input_data.is_multiline {
                 let content_box_height = self.final_layout().content_box_height();
-                let input_height = input_data.editor.try_layout().unwrap().height() / scale as f32;
+                let Some(metrics) = input_data.editor.metrics() else {
+                    return 0.0;
+                };
+                let input_height = metrics.size.height as f32 / scale as f32;
                 let y_offset = ((content_box_height - input_height) / 2.0).max(0.0);
 
                 return y_offset as f64;
@@ -1139,7 +1138,7 @@ impl Node {
         #[cfg(feature = "writing-mode")]
         {
             // Own-layout_wm by default: the node's own algorithm reads its style in its own axes
-            let layout_wm = styles.writing_mode;
+            let layout_wm = self.layout_frame_wm();
             stylo_taffy::TaffyStyloStyle::new_in(styles, flags, layout_wm)
         }
         #[cfg(not(feature = "writing-mode"))]
@@ -1165,7 +1164,7 @@ impl Node {
     #[cfg(feature = "writing-mode")]
     pub(crate) fn has_containment(&self) -> bool {
         self.primary_styles()
-            .is_some_and(|style| !style.clone_contain().is_empty())
+            .is_some_and(|style| !style.slow_clone_contain().is_empty())
     }
 
     /// Whether the node is a flex container with a column `flex-direction`, i.e. aligns its
@@ -1173,7 +1172,7 @@ impl Node {
     #[cfg(feature = "writing-mode")]
     pub(crate) fn is_column_flex_container(&self) -> bool {
         self.primary_styles().is_some_and(|s| {
-            s.clone_display().inside() == DisplayInside::Flex
+            s.slow_clone_display().inside() == DisplayInside::Flex
                 && !self.element_data().is_some_and(|el| el.is_button_input())
                 && matches!(
                     s.get_position().flex_direction,
@@ -1190,12 +1189,25 @@ impl Node {
             .unwrap_or(stylo_taffy::WritingMode::empty())
     }
 
+    /// The writing mode in whose axes the node's own layout algorithm runs. winkin turns an
+    /// inline formatting context's lines onto the page itself, so such a box runs in physical
+    /// axes, and its writing mode only meets Taffy's at its edges.
+    #[cfg(feature = "writing-mode")]
+    pub(crate) fn layout_frame_wm(&self) -> stylo_taffy::WritingMode {
+        if <crate::text::TextLayout as crate::text::InlineLayoutEngine>::SETS_WRITING_MODES
+            && self.flags.is_inline_root()
+        {
+            return stylo_taffy::WritingMode::empty();
+        }
+        self.writing_mode()
+    }
+
     /// The node's `display` as a [`taffy::Display`]. Returns [`taffy::Display::Block`]
     /// for nodes without computed styles (e.g. text nodes).
     pub fn taffy_display(&self) -> taffy::Display {
         self.primary_styles()
             .map(|style| {
-                let display = style.clone_display();
+                let display = style.slow_clone_display();
                 if self.element_data().is_some_and(|el| el.is_button_input())
                     && !matches!(
                         display.inside(),
@@ -1229,6 +1241,49 @@ impl Node {
         })
     }
 
+    /// The direction `dir=auto` gives the element from its text: `Some(true)`
+    /// where the first strong character is right-to-left, `Some(false)` where
+    /// it is left-to-right, and `None` where it has none, as HTML's "auto
+    /// directionality" finds it. Text inside `bdi`, `script`, `style` and
+    /// `textarea`, and inside an element with a valid `dir` of its own, is
+    /// skipped.
+    pub fn auto_direction_is_rtl(&self) -> Option<bool> {
+        use icu_properties::{CodePointMapData, props::BidiClass};
+        let classes = CodePointMapData::<BidiClass>::new();
+        let mut stack: Vec<NodeId> = self.children.iter().rev().copied().collect();
+        while let Some(id) = stack.pop() {
+            let node = self.with(id);
+            match &node.data {
+                NodeData::Text(data) => {
+                    for c in data.content.chars() {
+                        match classes.get(c) {
+                            BidiClass::LeftToRight => return Some(false),
+                            BidiClass::RightToLeft | BidiClass::ArabicLetter => return Some(true),
+                            _ => {}
+                        }
+                    }
+                }
+                NodeData::Element(element) => {
+                    let name = &element.name.local;
+                    let skipped = *name == local_name!("bdi")
+                        || *name == local_name!("script")
+                        || *name == local_name!("style")
+                        || *name == local_name!("textarea")
+                        || element.attr(local_name!("dir")).is_some_and(|dir| {
+                            ["ltr", "rtl", "auto"]
+                                .iter()
+                                .any(|valid| dir.eq_ignore_ascii_case(valid))
+                        });
+                    if !skipped {
+                        stack.extend(node.children.iter().rev().copied());
+                    }
+                }
+                _ => {}
+            }
+        }
+        None
+    }
+
     pub fn text_content(&self) -> String {
         let mut out = String::new();
         self.write_text_content(&mut out);
@@ -1269,13 +1324,13 @@ impl Node {
     pub fn order(&self) -> i32 {
         self.primary_styles()
             .filter(|s| !matches!(s.get_box().position, Position::Absolute | Position::Fixed))
-            .map(|s| s.clone_order())
+            .map(|s| s.slow_clone_order())
             .unwrap_or(0)
     }
 
     pub fn z_index(&self) -> i32 {
         self.primary_styles()
-            .map(|s| s.clone_z_index().integer_or(0))
+            .map(|s| s.slow_clone_z_index().integer_or(0))
             .unwrap_or(0)
     }
 
@@ -1285,10 +1340,10 @@ impl Node {
             return false;
         };
 
-        let position = style.clone_position();
-        let has_z_index = !style.clone_z_index().is_auto();
+        let position = style.slow_clone_position();
+        let has_z_index = !style.slow_clone_z_index().is_auto();
 
-        if style.clone_opacity() != 1.0 {
+        if style.slow_clone_opacity() != 1.0 {
             return true;
         }
 
@@ -1334,7 +1389,7 @@ impl Node {
             return false;
         };
 
-        if style.clone_opacity() != 1.0 {
+        if style.slow_clone_opacity() != 1.0 {
             return true;
         }
 
@@ -1343,7 +1398,7 @@ impl Node {
             return true;
         }
 
-        if !matches!(style.clone_clip_path(), ClipPath::None) {
+        if !matches!(style.slow_clone_clip_path(), ClipPath::None) {
             return true;
         }
 
@@ -1384,7 +1439,7 @@ impl Node {
         // Don't hit on visbility:hidden elements
         if let Some(style) = self.primary_styles() {
             if matches!(
-                style.clone_visibility(),
+                style.slow_clone_visibility(),
                 Visibility::Hidden | Visibility::Collapse
             ) {
                 return None;
@@ -1395,7 +1450,7 @@ impl Node {
         // descendants are still tested (one may restore pointer-events:auto).
         let pointer_events_none = self
             .primary_styles()
-            .is_some_and(|style| style.clone_pointer_events() == PointerEvents::None);
+            .is_some_and(|style| style.slow_clone_pointer_events() == PointerEvents::None);
 
         let mut x = x - self.final_layout().location.x + self.scroll_offset().x as f32;
         let mut y = y - self.final_layout().location.y + self.scroll_offset().y as f32;
@@ -1529,21 +1584,24 @@ impl Node {
         if self.flags.is_inline_root() {
             let element_data = &self.element_data().unwrap();
             if let Some(ild) = element_data.inline_layout_data.as_ref() {
-                let layout = &ild.layout;
-                let scale = layout.scale();
-                let y = y - ild.block_offset;
-
-                if let Some((cluster, _side)) =
-                    Cluster::from_point_exact(layout, x * scale, y * scale)
+                if let Some(hit) = ild.hit_test(x, y, true)
+                    && let Some(text_node) = self.tree().get(hit.node_id)
                 {
-                    let node_id = cluster.style().brush.id;
-                    let text_pointer_events_none = self
-                        .with(node_id)
-                        .primary_styles()
-                        .is_some_and(|style| style.clone_pointer_events() == PointerEvents::None);
+                    let hit_node = if matches!(text_node.data, NodeData::Text(_)) {
+                        text_node
+                            .layout_parent
+                            .get()
+                            .and_then(|parent| self.tree().get(parent))
+                            .unwrap_or(self)
+                    } else {
+                        text_node
+                    };
+                    let text_pointer_events_none = hit_node.primary_styles().is_some_and(|style| {
+                        style.slow_clone_pointer_events() == PointerEvents::None
+                    });
                     if !text_pointer_events_none {
                         return Some(HitResult {
-                            node_id,
+                            node_id: hit_node.id,
                             x,
                             y,
                             is_text: true,
@@ -1589,34 +1647,9 @@ impl Node {
 
         let element_data = self.element_data()?;
         let inline_layout = element_data.inline_layout_data.as_ref()?;
-        let layout = &inline_layout.layout;
-        let scale = layout.scale();
-        let y = y - inline_layout.block_offset;
-
-        // Use Parley's cluster hit testing (from_point is more forgiving than from_point_exact)
-        let (cluster, side) = Cluster::from_point(layout, x * scale, y * scale)?;
-
-        // Determine byte offset based on which side of the cluster was clicked
-        // For LTR text: left side = start of cluster, right side = end of cluster
-        // For RTL text: left side = end of cluster, right side = start of cluster
-        // Also, explicit line breaks should always use start to avoid cursor appearing on next line
-        let is_leading = side == ClusterSide::Left;
-        let offset = if cluster.is_rtl() {
-            if is_leading {
-                cluster.text_range().end
-            } else {
-                cluster.text_range().start
-            }
-        } else {
-            // LTR text
-            if is_leading || cluster.is_line_break() == Some(BreakReason::Explicit) {
-                cluster.text_range().start
-            } else {
-                cluster.text_range().end
-            }
-        };
-
-        Some(offset)
+        inline_layout
+            .hit_test(x, y, false)
+            .map(|hit| hit.byte_offset)
     }
 
     /// Whether this node is a non-atomic inline element: one that has no layout box of its
@@ -1632,7 +1665,7 @@ impl Node {
             return false;
         }
         self.primary_styles().is_some_and(|styles| {
-            let display = styles.clone_display();
+            let display = styles.slow_clone_display();
             display.outside() == DisplayOutside::Inline && display.inside() == DisplayInside::Flow
         })
     }
@@ -1681,8 +1714,7 @@ impl Node {
                 .is_some_and(|styles| styles.get_box().position == Position::Static)
     }
 
-    /// The nearest layout ancestor that [is an offset parent](Self::is_offset_parent), as in
-    /// CSSOM View's `offsetParent`.
+    /// The nearest layout ancestor that is an offset parent, as in CSSOM View's `offsetParent`.
     pub fn offset_parent(&self) -> Option<&Node> {
         let mut node = self;
         loop {
@@ -1698,103 +1730,13 @@ impl Node {
     ///
     /// Returns `None` for nodes that have their own layout box.
     pub fn inline_fragment_boxes(&self) -> Option<impl Iterator<Item = taffy::Rect<f32>> + '_> {
-        use parley::PositionedLayoutItem;
-
         if !self.is_non_atomic_inline() {
             return None;
         }
 
         let inline_root = self.inline_root_ancestor()?;
         let inline_layout = inline_root.element_data()?.inline_layout_data.as_ref()?;
-        let layout = &inline_layout.layout;
-        let scale = layout.scale();
-
-        // Walk up the DOM parent chain from `id` to check whether it is (or is
-        // inside) the target node, stopping at the inline root.
-        let inline_root_id = inline_root.id;
-        let is_in_target = move |mut id: NodeId| -> bool {
-            loop {
-                if id == self.id {
-                    return true;
-                }
-                if id == inline_root_id {
-                    return false;
-                }
-                match self.with(id).parent {
-                    Some(parent) => id = parent,
-                    None => return false,
-                }
-            }
-        };
-
-        let root_layout = inline_root.unrounded_layout();
-        let content_box_inset = root_layout.padding + root_layout.border;
-        let origin_x = content_box_inset.left;
-        let origin_y = content_box_inset.top + inline_layout.block_offset;
-
-        fn union(acc: &mut Option<taffy::Rect<f32>>, left: f32, top: f32, right: f32, bottom: f32) {
-            *acc = Some(match *acc {
-                Some(rect) => taffy::Rect {
-                    left: rect.left.min(left),
-                    top: rect.top.min(top),
-                    right: rect.right.max(right),
-                    bottom: rect.bottom.max(bottom),
-                },
-                None => taffy::Rect {
-                    left,
-                    top,
-                    right,
-                    bottom,
-                },
-            });
-        }
-
-        // One rect per line box: the union of all of the target's fragments on that line
-        Some(layout.lines().filter_map(move |line| {
-            let line_metrics = line.metrics();
-            let mut line_rect: Option<taffy::Rect<f32>> = None;
-
-            for item in line.items() {
-                match item {
-                    PositionedLayoutItem::GlyphRun(glyph_run) => {
-                        if !is_in_target(glyph_run.style().brush.id) {
-                            continue;
-                        }
-                        let x0 = glyph_run.offset();
-                        let x1 = x0 + glyph_run.advance();
-                        // Use the line box's block extent rather than the
-                        // run's font ascent/descent: fonts with small
-                        // typographic metrics would otherwise produce rects
-                        // that clip the rendered glyphs. This matches the
-                        // geometry used for text selection highlights.
-                        let y0 = line_metrics.block_min_coord;
-                        let y1 = line_metrics.block_max_coord;
-                        union(&mut line_rect, x0, y0, x1, y1);
-                    }
-                    PositionedLayoutItem::InlineBox(inline_box) => {
-                        if !is_in_target(NodeId::from_u64(inline_box.id)) {
-                            continue;
-                        }
-                        let x0 = inline_box.x;
-                        let y0 = inline_box.y;
-                        union(
-                            &mut line_rect,
-                            x0,
-                            y0,
-                            x0 + inline_box.width,
-                            y0 + inline_box.height,
-                        );
-                    }
-                }
-            }
-
-            line_rect.map(|rect| taffy::Rect {
-                left: origin_x + rect.left / scale,
-                top: origin_y + rect.top / scale,
-                right: origin_x + rect.right / scale,
-                bottom: origin_y + rect.bottom / scale,
-            })
-        }))
+        Some(inline_layout.fragment_rects(inline_root, self))
     }
 
     /// CSSOM View's `offsetLeft`/`offsetTop`: the offset of this node's border box from the
diff --git a/packages/blitz-dom/src/node/scrollbar.rs b/packages/blitz-dom/src/node/scrollbar.rs
index bef3b3419e..cc9e5b904b 100644
--- a/packages/blitz-dom/src/node/scrollbar.rs
+++ b/packages/blitz-dom/src/node/scrollbar.rs
@@ -51,7 +51,7 @@ impl Node {
     /// The node's computed `scrollbar-width`.
     pub fn scrollbar_width(&self) -> ScrollbarWidth {
         self.primary_styles()
-            .map(|style| style.clone_scrollbar_width())
+            .map(|style| style.slow_clone_scrollbar_width())
             .unwrap_or(ScrollbarWidth::Auto)
     }
 
@@ -61,8 +61,8 @@ impl Node {
         let Some(style) = self.primary_styles() else {
             return ScrollbarColor::Auto;
         };
-        let current_color = style.clone_color();
-        match style.clone_scrollbar_color() {
+        let current_color = style.slow_clone_color();
+        match style.slow_clone_scrollbar_color() {
             style::values::computed::ScrollbarColor::Auto => ScrollbarColor::Auto,
             style::values::computed::ScrollbarColor::Colors { thumb, track } => {
                 ScrollbarColor::Colors {
@@ -87,11 +87,11 @@ impl Node {
         }
         let (overflow, scroll_extent) = match axis {
             AbsoluteAxis::Horizontal => (
-                style.clone_overflow_x(),
+                style.slow_clone_overflow_x(),
                 self.final_layout().scroll_width() as f64,
             ),
             AbsoluteAxis::Vertical => (
-                style.clone_overflow_y(),
+                style.slow_clone_overflow_y(),
                 self.final_layout().scroll_height() as f64,
             ),
         };
diff --git a/packages/blitz-dom/src/node/serialize.rs b/packages/blitz-dom/src/node/serialize.rs
index 258abe8724..e48cf0241f 100644
--- a/packages/blitz-dom/src/node/serialize.rs
+++ b/packages/blitz-dom/src/node/serialize.rs
@@ -121,7 +121,7 @@ impl Node {
             .resolve_current_color
             .then(|| self.primary_styles())
             .flatten()
-            .map(|style| style.clone_color())
+            .map(|style| style.slow_clone_color())
             .map(|color| color.to_css_string());
 
         match &self.data {
diff --git a/packages/blitz-dom/src/node/text.rs b/packages/blitz-dom/src/node/text.rs
index 61906af145..6d770bd705 100644
--- a/packages/blitz-dom/src/node/text.rs
+++ b/packages/blitz-dom/src/node/text.rs
@@ -4,53 +4,33 @@ use blitz_traits::{
     shell::ShellProvider,
 };
 use keyboard_types::{Key, Modifiers};
-use parley::{ContentWidths, FontContext, LayoutContext};
 
+use crate::text::{
+    Edit, EditEngine as _, EditableText as _, EditorMetrics, Motion, TextContext, TextEditor,
+    TextInputDriver,
+};
 use crate::util::ACTION_MOD;
 
-#[derive(Debug, Clone, Copy, Default, PartialEq)]
-/// Parley Brush type for Blitz which contains the Blitz node id
-pub struct TextBrush {
-    /// The node id for the span
-    pub id: NodeId,
-}
-
-impl TextBrush {
-    pub(crate) fn from_id(id: NodeId) -> Self {
-        Self { id }
-    }
-}
-
-#[derive(Clone, Default)]
-pub struct TextLayout {
-    pub text: String,
-    pub content_widths: Option<ContentWidths>,
-    pub layout: parley::layout::Layout<TextBrush>,
-    /// Block-axis offset (in CSS px) of the line boxes from the top of the container's content
-    /// box, as applied by `align-content`.
-    pub block_offset: f32,
-    /// The out-of-flow positions for which some inline span with an inline box below it is a
-    /// containing block (as `SPAN_*_CB` flags). The inline root claims those boxes in its place.
-    /// Set by each `RunMode::PerformLayout` run of inline layout.
-    pub span_cb_flags: stylo_taffy::StyleFlags,
-}
+pub use crate::text::TextLayout;
 
-impl TextLayout {
-    pub fn new() -> Self {
-        Default::default()
-    }
-
-    pub fn content_widths(&mut self) -> ContentWidths {
-        *self
-            .content_widths
-            .get_or_insert_with(|| self.layout.calculate_content_widths())
-    }
+/// A position in an inline root's laid-out text.
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
+pub struct InlineTextHit {
+    pub node_id: NodeId,
+    pub byte_offset: usize,
 }
 
-impl std::fmt::Debug for TextLayout {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        write!(f, "TextLayout")
-    }
+/// A piece of an inline root's laid-out content, in logical order.
+#[derive(Clone, Debug, PartialEq, Eq)]
+pub enum InlineContent {
+    /// Text of node `node_id`: the bytes `range` of the layout text. The node is the text node,
+    /// or the element it is in, as the text backend maps the text.
+    Text {
+        node_id: NodeId,
+        range: std::ops::Range<usize>,
+    },
+    /// An inline box.
+    Box(NodeId),
 }
 
 // TODO: support keypress events
@@ -62,10 +42,13 @@ pub enum GeneratedTextInputEvent {
 }
 
 pub struct TextInputData {
-    /// A parley TextEditor instance
-    pub editor: Box<parley::PlainEditor<TextBrush>>,
+    /// The text backend's editor
+    pub editor: Box<TextEditor>,
     /// Whether the input is a singleline or multiline input
     pub is_multiline: bool,
+    /// Whether the input is `<input type=password>`, whose text is never copied and whose word
+    /// motions and double clicks take the whole text, as in Chrome.
+    pub is_password: bool,
     /// The scroll offset of the text content within the input, in CSS (unscaled) pixels.
     ///
     /// For single-line inputs this is a horizontal offset; for multi-line inputs it is a
@@ -74,7 +57,7 @@ pub struct TextInputData {
     pub scroll_offset: f32,
 }
 
-// FIXME: Implement Clone for PlainEditor
+// FIXME: Implement Clone for the editor
 impl Clone for TextInputData {
     fn clone(&self) -> Self {
         TextInputData::new(self.is_multiline)
@@ -83,24 +66,43 @@ impl Clone for TextInputData {
 
 impl TextInputData {
     pub fn new(is_multiline: bool) -> Self {
-        let editor = Box::new(parley::PlainEditor::new(16.0));
+        let editor = Box::new(<TextEditor as crate::text::EditEngine>::new(is_multiline));
         Self {
             editor,
             is_multiline,
+            is_password: false,
             scroll_offset: 0.0,
         }
     }
 
-    pub fn set_text(
-        &mut self,
-        font_ctx: &mut FontContext,
-        layout_ctx: &mut LayoutContext<TextBrush>,
-        text: &str,
-    ) {
-        if self.editor.text() != text {
-            self.editor.set_text(text);
-            self.editor.driver(font_ctx, layout_ctx).refresh_layout();
+    /// Returns `motion` as the input takes it: in a password field, Chrome moves a word to the
+    /// text's start or end, since it shows no words.
+    pub(crate) fn motion(&self, motion: Motion) -> Motion {
+        match motion {
+            Motion::WordLeft if self.is_password => Motion::TextStart,
+            Motion::WordRight if self.is_password => Motion::TextEnd,
+            motion => motion,
+        }
+    }
+
+    /// Returns `edit` as the input takes it: in a password field, Chrome selects the whole text
+    /// at a double or triple click, and moves by words as [`motion`](Self::motion) says.
+    pub(crate) fn edit<'e>(&self, edit: Edit<'e>) -> Edit<'e> {
+        if !self.is_password {
+            return edit;
         }
+        match edit {
+            Edit::SelectWordAtPoint(..) | Edit::SelectHardLineAtPoint(..) => Edit::SelectAll,
+            Edit::Move(motion) => Edit::Move(self.motion(motion)),
+            Edit::Extend(motion) => Edit::Extend(self.motion(motion)),
+            edit => edit,
+        }
+    }
+
+    /// Sets the text, and lays it out again where it changed.
+    pub(crate) fn set_text(&mut self, cx: &mut TextContext, text: &str) {
+        self.editor.set_text(text);
+        self.editor.refresh(cx);
     }
 
     /// Recompute [`Self::scroll_offset`] so that the caret stays visible within the input's
@@ -109,15 +111,14 @@ impl TextInputData {
     /// `content_box_width` and `content_box_height` are the dimensions of the input's content
     /// box in CSS (unscaled) pixels.
     pub fn clamp_scroll_offset(&mut self, content_box_width: f32, content_box_height: f32) {
-        let Some(layout) = self.editor.try_layout() else {
+        // The editor lays out at its scale, so its geometry is in scaled (device) pixels.
+        // We convert into CSS (unscaled) pixels to match `scroll_offset` and the content box.
+        let Some(EditorMetrics { size, scale }) = self.editor.metrics() else {
             return;
         };
-        // Parley lays out at the editor's scale, so its geometry is in scaled (device) pixels.
-        // We convert into CSS (unscaled) pixels to match `scroll_offset` and the content box.
-        let scale = layout.scale();
 
         // The caret geometry relative to the start of the text content.
-        let Some(caret) = self.editor.cursor_geometry(1.5) else {
+        let Some(caret) = self.editor.caret_rect() else {
             return;
         };
 
@@ -126,14 +127,14 @@ impl TextInputData {
             (
                 caret.y0 as f32 / scale,
                 caret.y1 as f32 / scale,
-                layout.height() / scale,
+                size.height as f32 / scale,
                 content_box_height,
             )
         } else {
             (
                 caret.x0 as f32 / scale,
                 caret.x1 as f32 / scale,
-                layout.full_width() / scale,
+                size.width as f32 / scale,
                 content_box_width,
             )
         };
@@ -162,14 +163,13 @@ impl TextInputData {
     /// `content_box_width` and `content_box_height` are the dimensions of the input's content
     /// box in CSS (unscaled) pixels.
     pub fn max_scroll_offset(&self, content_box_width: f32, content_box_height: f32) -> f32 {
-        let Some(layout) = self.editor.try_layout() else {
+        let Some(EditorMetrics { size, scale }) = self.editor.metrics() else {
             return 0.0;
         };
-        let scale = layout.scale();
         let (content, viewport) = if self.is_multiline {
-            (layout.height() / scale, content_box_height)
+            (size.height as f32 / scale, content_box_height)
         } else {
-            (layout.full_width() / scale, content_box_width)
+            (size.width as f32 / scale, content_box_width)
         };
         (content - viewport).max(0.0)
     }
@@ -199,12 +199,14 @@ impl TextInputData {
         delta - consumed
     }
 
+    /// Applies a key press. Where `reveals`, a password field shows the character typed in the
+    /// clear.
     pub(crate) fn apply_keypress_event(
         &mut self,
-        font_ctx: &mut FontContext,
-        layout_ctx: &mut LayoutContext<TextBrush>,
+        cx: &mut TextContext,
         shell_provider: &dyn ShellProvider,
         event: BlitzKeyEvent,
+        reveals: bool,
     ) -> Option<GeneratedTextInputEvent> {
         // Do nothing if it is a keyup event
         if !event.state.is_pressed() {
@@ -216,9 +218,19 @@ impl TextInputData {
         let action_mod = mods.contains(ACTION_MOD);
 
         let is_multiline = self.is_multiline;
-        let editor = &mut self.editor;
-        let mut driver = editor.driver(font_ctx, layout_ctx);
+        let is_password = self.is_password;
+        let word_left = self.motion(Motion::WordLeft);
+        let word_right = self.motion(Motion::WordRight);
+        let reveals = reveals && self.is_password;
+        let mut driver = TextInputDriver {
+            editor: &mut self.editor,
+            cx,
+        };
         match event.key {
+            // Chrome neither copies nor cuts a password field's text, and fires no event for it.
+            Key::Character(c) if action_mod && is_password && matches!(c.as_str(), "c" | "x") => {
+                return None;
+            }
             Key::Character(c) if action_mod && matches!(c.as_str(), "c" | "x" | "v") => {
                 match c.to_lowercase().as_str() {
                     "c" => {
@@ -229,103 +241,113 @@ impl TextInputData {
                     "x" => {
                         if let Some(text) = driver.editor.selected_text() {
                             let _ = shell_provider.set_clipboard_text(text.to_owned());
-                            driver.delete_selection()
+                            driver.edit(Edit::DeleteSelection)
                         }
                     }
                     "v" => {
                         let text = shell_provider.get_clipboard_text().unwrap_or_default();
-                        driver.insert_or_replace_selection(&text)
+                        driver.edit(Edit::Insert(&text))
                     }
                     _ => unreachable!(),
                 }
 
                 return Some(GeneratedTextInputEvent::Input);
             }
+            Key::Character(c)
+                if action_mod
+                    && (c.eq_ignore_ascii_case("z")
+                        || (cfg!(not(target_os = "macos")) && c.eq_ignore_ascii_case("y"))) =>
+            {
+                let redo = shift || c.eq_ignore_ascii_case("y");
+                return undo_or_redo(&mut driver, if redo { Edit::Redo } else { Edit::Undo });
+            }
+            Key::Undo => return undo_or_redo(&mut driver, Edit::Undo),
+            Key::Redo => return undo_or_redo(&mut driver, Edit::Redo),
             Key::Character(c) if action_mod && matches!(c.to_lowercase().as_str(), "a") => {
                 if shift {
-                    driver.collapse_selection()
+                    driver.edit(Edit::CollapseSelection)
                 } else {
-                    driver.select_all()
+                    driver.edit(Edit::SelectAll)
                 }
                 return Some(GeneratedTextInputEvent::Select);
             }
             Key::ArrowLeft => {
                 if action_mod {
                     if shift {
-                        driver.select_word_left()
+                        driver.edit(Edit::Extend(word_left))
                     } else {
-                        driver.move_word_left()
+                        driver.edit(Edit::Move(word_left))
                     }
                 } else if shift {
-                    driver.select_left()
+                    driver.edit(Edit::Extend(Motion::Left))
                 } else {
-                    driver.move_left()
+                    driver.edit(Edit::Move(Motion::Left))
                 }
                 return Some(GeneratedTextInputEvent::Select);
             }
             Key::ArrowRight => {
                 if action_mod {
                     if shift {
-                        driver.select_word_right()
+                        driver.edit(Edit::Extend(word_right))
                     } else {
-                        driver.move_word_right()
+                        driver.edit(Edit::Move(word_right))
                     }
                 } else if shift {
-                    driver.select_right()
+                    driver.edit(Edit::Extend(Motion::Right))
                 } else {
-                    driver.move_right()
+                    driver.edit(Edit::Move(Motion::Right))
                 }
                 return Some(GeneratedTextInputEvent::Select);
             }
             Key::ArrowUp => {
                 if shift {
-                    driver.select_up()
+                    driver.edit(Edit::Extend(Motion::Up))
                 } else {
-                    driver.move_up()
+                    driver.edit(Edit::Move(Motion::Up))
                 }
                 return Some(GeneratedTextInputEvent::Select);
             }
             Key::ArrowDown => {
                 if shift {
-                    driver.select_down()
+                    driver.edit(Edit::Extend(Motion::Down))
                 } else {
-                    driver.move_down()
+                    driver.edit(Edit::Move(Motion::Down))
                 }
                 return Some(GeneratedTextInputEvent::Select);
             }
             Key::Home => {
                 if action_mod {
                     if shift {
-                        driver.select_to_text_start()
+                        driver.edit(Edit::Extend(Motion::TextStart))
                     } else {
-                        driver.move_to_text_start()
+                        driver.edit(Edit::Move(Motion::TextStart))
                     }
                 } else if shift {
-                    driver.select_to_line_start()
+                    driver.edit(Edit::Extend(Motion::LineStart))
                 } else {
-                    driver.move_to_line_start()
+                    driver.edit(Edit::Move(Motion::LineStart))
                 }
                 return Some(GeneratedTextInputEvent::Select);
             }
             Key::End => {
                 if action_mod {
                     if shift {
-                        driver.select_to_text_end()
+                        driver.edit(Edit::Extend(Motion::TextEnd))
                     } else {
-                        driver.move_to_text_end()
+                        driver.edit(Edit::Move(Motion::TextEnd))
                     }
                 } else if shift {
-                    driver.select_to_line_end()
+                    driver.edit(Edit::Extend(Motion::LineEnd))
                 } else {
-                    driver.move_to_line_end()
+                    driver.edit(Edit::Move(Motion::LineEnd))
                 }
                 return Some(GeneratedTextInputEvent::Select);
             }
             Key::Delete => {
                 if action_mod {
-                    driver.delete_word()
+                    delete_word(&mut driver, is_password, true)
                 } else {
-                    driver.delete()
+                    driver.edit(Edit::Delete)
                 }
                 return Some(GeneratedTextInputEvent::Input);
             }
@@ -334,16 +356,16 @@ impl TextInputData {
             #[cfg(not(target_os = "macos"))]
             Key::Backspace => {
                 if action_mod {
-                    driver.backdelete_word()
+                    delete_word(&mut driver, is_password, false)
                 } else {
-                    driver.backdelete()
+                    driver.edit(Edit::Backdelete)
                 }
                 return Some(GeneratedTextInputEvent::Input);
             }
 
             Key::Character(c) if c == "\n" => {
                 if is_multiline {
-                    driver.insert_or_replace_selection("\n");
+                    driver.edit(Edit::Insert("\n"));
                     return Some(GeneratedTextInputEvent::Input);
                 } else {
                     return Some(GeneratedTextInputEvent::Submit);
@@ -351,7 +373,7 @@ impl TextInputData {
             }
             Key::Enter => {
                 if is_multiline {
-                    driver.insert_or_replace_selection("\n");
+                    driver.edit(Edit::Insert("\n"));
                     return Some(GeneratedTextInputEvent::Input);
                 } else {
                     return Some(GeneratedTextInputEvent::Submit);
@@ -360,7 +382,7 @@ impl TextInputData {
             Key::Character(s)
                 if !mods.contains(Modifiers::CONTROL) && !mods.contains(Modifiers::SUPER) =>
             {
-                driver.insert_or_replace_selection(&s);
+                driver.edit(insert(&s, reveals));
                 return Some(GeneratedTextInputEvent::Input);
             }
             _ => {}
@@ -371,14 +393,18 @@ impl TextInputData {
 
     pub(crate) fn apply_apple_standard_keybinding(
         &mut self,
-        font_ctx: &mut FontContext,
-        layout_ctx: &mut LayoutContext<TextBrush>,
+        cx: &mut TextContext,
         shell_provider: &dyn ShellProvider,
         command: &str,
     ) -> Option<GeneratedTextInputEvent> {
-        let editor = &mut self.editor;
-        let mut driver = editor.driver(font_ctx, layout_ctx);
         let is_multiline = self.is_multiline;
+        let is_password = self.is_password;
+        let word_left = self.motion(Motion::WordLeft);
+        let word_right = self.motion(Motion::WordRight);
+        let mut driver = TextInputDriver {
+            editor: &mut self.editor,
+            cx,
+        };
 
         match command {
             // Inserting Content
@@ -389,18 +415,18 @@ impl TextInputData {
             "insertContainerBreak:" => {}
             // Inserts a double quotation mark without substituting a curly quotation mark.
             "insertDoubleQuoteIgnoringSubstitution:" => {
-                driver.insert_or_replace_selection("\"");
+                driver.edit(Edit::Insert("\""));
                 return Some(GeneratedTextInputEvent::Input);
             }
             // Inserts a line break character.
             "insertLineBreak:" => {
-                driver.insert_or_replace_selection("\n");
+                driver.edit(Edit::Insert("\n"));
                 return Some(GeneratedTextInputEvent::Input);
             }
             // Inserts a newline character.
             "insertNewline:" => {
                 if is_multiline {
-                    driver.insert_or_replace_selection("\n");
+                    driver.edit(Edit::Insert("\n"));
                     return Some(GeneratedTextInputEvent::Input);
                 } else {
                     return Some(GeneratedTextInputEvent::Submit);
@@ -408,16 +434,16 @@ impl TextInputData {
             }
             // Inserts a newline character without invoking the field editor’s normal handling to end editing.
             "insertNewlineIgnoringFieldEditor:" => {
-                driver.insert_or_replace_selection("\n");
+                driver.edit(Edit::Insert("\n"));
                 return Some(GeneratedTextInputEvent::Input);
             }
             // Inserts a paragraph separator.
             "insertParagraphSeparator:" => {
-                driver.insert_or_replace_selection("\n");
+                driver.edit(Edit::Insert("\n"));
                 return Some(GeneratedTextInputEvent::Input);
             }
             "insertSingleQuoteIgnoringSubstitution:" => {
-                driver.insert_or_replace_selection("'");
+                driver.edit(Edit::Insert("'"));
                 return Some(GeneratedTextInputEvent::Input);
             }
             // Inserts a tab character.
@@ -432,60 +458,60 @@ impl TextInputData {
             // Deletes content moving backward from the current insertion point.
             // TODO: handle deleteBackwardByDecomposingPreviousCharacter separately
             "deleteBackward:" | "deleteBackwardByDecomposingPreviousCharacter:" => {
-                driver.backdelete();
+                driver.edit(Edit::Backdelete);
                 return Some(GeneratedTextInputEvent::Input);
             }
             "deleteForward:" => {
-                driver.delete();
+                driver.edit(Edit::Delete);
                 return Some(GeneratedTextInputEvent::Input);
             }
             // Deletes content from the insertion point to the beginning of the current line.
             "deleteToBeginningOfLine:" => {
-                if driver.editor.raw_selection().is_collapsed() {
-                    driver.select_to_line_start();
+                if driver.editor.is_selection_collapsed() {
+                    driver.edit(Edit::Extend(Motion::LineStart));
                 }
-                driver.delete_selection();
+                driver.edit(Edit::DeleteSelection);
                 return Some(GeneratedTextInputEvent::Input);
             }
             // Deletes content from the insertion point to the beginning of the current paragraph.
             "deleteToEndOfLine:" => {
-                if driver.editor.raw_selection().is_collapsed() {
-                    driver.select_to_line_end();
+                if driver.editor.is_selection_collapsed() {
+                    driver.edit(Edit::Extend(Motion::LineEnd));
                 }
-                driver.delete_selection();
+                driver.edit(Edit::DeleteSelection);
                 return Some(GeneratedTextInputEvent::Input);
             }
             "deleteToBeginningOfParagraph:" => {
-                if driver.editor.raw_selection().is_collapsed() {
-                    driver.select_to_hard_line_start();
+                if driver.editor.is_selection_collapsed() {
+                    driver.edit(Edit::Extend(Motion::HardLineStart));
                 }
-                driver.delete_selection();
+                driver.edit(Edit::DeleteSelection);
                 return Some(GeneratedTextInputEvent::Input);
             }
 
             // Deletes content from the insertion point to the end of the current line.
             "deleteToEndOfParagraph:" => {
-                if driver.editor.raw_selection().is_collapsed() {
-                    driver.select_to_hard_line_end();
+                if driver.editor.is_selection_collapsed() {
+                    driver.edit(Edit::Extend(Motion::HardLineEnd));
                 }
-                driver.delete_selection();
+                driver.edit(Edit::DeleteSelection);
                 return Some(GeneratedTextInputEvent::Input);
             }
             // Deletes content from the insertion point to the end of the current paragraph.
             "deleteWordBackward:" => {
-                driver.backdelete_word();
+                delete_word(&mut driver, is_password, false);
                 return Some(GeneratedTextInputEvent::Input);
             }
             // Deletes the word preceding the current insertion point.
             "deleteWordForward:" => {
-                driver.delete_word();
+                delete_word(&mut driver, is_password, true);
                 return Some(GeneratedTextInputEvent::Input);
             }
             // Deletes the current selection, placing it in a temporary buffer, such as the Clipboard.
             "yank:" => {
-                if let Some(text) = driver.editor.selected_text() {
+                if let Some(text) = driver.editor.selected_text().filter(|_| !is_password) {
                     let _ = shell_provider.set_clipboard_text(text.to_owned());
-                    driver.delete_selection();
+                    driver.edit(Edit::DeleteSelection);
                     return Some(GeneratedTextInputEvent::Input);
                 }
             }
@@ -494,34 +520,34 @@ impl TextInputData {
 
             // Moves the insertion pointer backward in the current content.
             "moveBackward:" => {
-                driver.move_left(); // TODO: Bidi-aware
+                driver.edit(Edit::Move(Motion::Left)); // TODO: Bidi-aware
                 return Some(GeneratedTextInputEvent::Select);
             }
 
             // Moves the insertion pointer down in the current content.
             "moveDown:" => {
-                driver.move_down();
+                driver.edit(Edit::Move(Motion::Down));
                 return Some(GeneratedTextInputEvent::Select);
             }
             // Moves the insertion pointer forward in the current content.
             "moveForward:" => {
-                driver.move_right();
+                driver.edit(Edit::Move(Motion::Right));
                 return Some(GeneratedTextInputEvent::Select);
             } // TODO: Bidi-aware
 
             // Moves the insertion pointer left in the current content.
             "moveLeft:" => {
-                driver.move_left();
+                driver.edit(Edit::Move(Motion::Left));
                 return Some(GeneratedTextInputEvent::Select);
             }
             // Moves the insertion pointer right in the current content.
             "moveRight:" => {
-                driver.move_right();
+                driver.edit(Edit::Move(Motion::Right));
                 return Some(GeneratedTextInputEvent::Select);
             }
             // Moves the insertion pointer up in the current content.
             "moveUp:" => {
-                driver.move_up();
+                driver.edit(Edit::Move(Motion::Up));
                 return Some(GeneratedTextInputEvent::Select);
             }
 
@@ -529,48 +555,46 @@ impl TextInputData {
 
             // Extends the selection to include the content before the current selection.
             "moveBackwardAndModifySelection:" => {
-                driver.select_left(); // TODO: Bidi-aware
+                driver.edit(Edit::Extend(Motion::Left)); // TODO: Bidi-aware
                 return Some(GeneratedTextInputEvent::Select);
             }
             // Extends the selection to include the content below the current selection.
             "moveDownAndModifySelection:" => {
-                driver.select_down();
+                driver.edit(Edit::Extend(Motion::Down));
                 return Some(GeneratedTextInputEvent::Select);
             }
             // Extends the selection to include the content after the current selection.
             "moveForwardAndModifySelection:" => {
-                driver.select_right(); // TODO: Bidi-aware
+                driver.edit(Edit::Extend(Motion::Right)); // TODO: Bidi-aware
                 return Some(GeneratedTextInputEvent::Select);
             }
             // Extends the selection to include the content to the left of the current selection.
             "moveLeftAndModifySelection:" => {
-                driver.select_left();
+                driver.edit(Edit::Extend(Motion::Left));
                 return Some(GeneratedTextInputEvent::Select);
             }
             // Extends the selection to include the content to the right of the current selection.
             "moveRightAndModifySelection:" => {
-                driver.select_right();
+                driver.edit(Edit::Extend(Motion::Right));
                 return Some(GeneratedTextInputEvent::Select);
             }
             // Extends the selection to include the content above the current selection.
             "moveUpAndModifySelection:" => {
-                driver.select_up();
+                driver.edit(Edit::Extend(Motion::Up));
                 return Some(GeneratedTextInputEvent::Select);
             }
 
             // Changing the Selection
             "selectAll:" => {
-                driver.select_all();
+                driver.edit(Edit::SelectAll);
                 return Some(GeneratedTextInputEvent::Select);
             }
             "selectLine:" => {
-                driver.move_to_line_start();
-                driver.select_to_line_end();
+                driver.edit(Edit::Select(Motion::LineStart, Motion::LineEnd));
                 return Some(GeneratedTextInputEvent::Select);
             }
             "selectParagraph:" => {
-                driver.move_to_hard_line_start();
-                driver.select_to_hard_line_end();
+                driver.edit(Edit::Select(Motion::HardLineStart, Motion::HardLineEnd));
                 return Some(GeneratedTextInputEvent::Select);
             }
             "selectWord:" => {
@@ -579,19 +603,19 @@ impl TextInputData {
 
             // Moving the Selection in Documents
             "moveToBeginningOfDocument:" => {
-                driver.move_to_text_start();
+                driver.edit(Edit::Move(Motion::TextStart));
                 return Some(GeneratedTextInputEvent::Select);
             }
             "moveToBeginningOfDocumentAndModifySelection:" => {
-                driver.select_to_text_start();
+                driver.edit(Edit::Extend(Motion::TextStart));
                 return Some(GeneratedTextInputEvent::Select);
             }
             "moveToEndOfDocument:" => {
-                driver.move_to_text_end();
+                driver.edit(Edit::Move(Motion::TextEnd));
                 return Some(GeneratedTextInputEvent::Select);
             }
             "moveToEndOfDocumentAndModifySelection:" => {
-                driver.move_to_text_end();
+                driver.edit(Edit::Move(Motion::TextEnd));
                 return Some(GeneratedTextInputEvent::Select);
             }
 
@@ -599,87 +623,87 @@ impl TextInputData {
             "moveParagraphBackwardAndModifySelection:" => {}
             "moveParagraphForwardAndModifySelection:" => {}
             "moveToBeginningOfParagraph:" => {
-                driver.move_to_hard_line_start();
+                driver.edit(Edit::Move(Motion::HardLineStart));
                 return Some(GeneratedTextInputEvent::Select);
             }
             "moveToBeginningOfParagraphAndModifySelection:" => {
-                driver.select_to_hard_line_start();
+                driver.edit(Edit::Extend(Motion::HardLineStart));
                 return Some(GeneratedTextInputEvent::Select);
             }
             "moveToEndOfParagraph:" => {
-                driver.move_to_hard_line_end();
+                driver.edit(Edit::Move(Motion::HardLineEnd));
                 return Some(GeneratedTextInputEvent::Select);
             }
             "moveToEndOfParagraphAndModifySelection:" => {
-                driver.select_to_hard_line_end();
+                driver.edit(Edit::Extend(Motion::HardLineEnd));
                 return Some(GeneratedTextInputEvent::Select);
             }
 
             // Moving the Selection in Lines of Text
             "moveToBeginningOfLine:" => {
-                driver.move_to_line_start();
+                driver.edit(Edit::Move(Motion::LineStart));
                 return Some(GeneratedTextInputEvent::Select);
             }
             "moveToBeginningOfLineAndModifySelection:" => {
-                driver.select_to_line_start();
+                driver.edit(Edit::Extend(Motion::LineStart));
                 return Some(GeneratedTextInputEvent::Select);
             }
             "moveToEndOfLine:" => {
-                driver.move_to_line_end();
+                driver.edit(Edit::Move(Motion::LineEnd));
                 return Some(GeneratedTextInputEvent::Select);
             }
             "moveToEndOfLineAndModifySelection:" => {
-                driver.select_to_line_end();
+                driver.edit(Edit::Extend(Motion::LineEnd));
                 return Some(GeneratedTextInputEvent::Select);
             }
             "moveToLeftEndOfLine:" => {
-                driver.move_to_text_start();
+                driver.edit(Edit::Move(Motion::TextStart));
                 return Some(GeneratedTextInputEvent::Select);
             }
             "moveToLeftEndOfLineAndModifySelection:" => {
-                driver.select_to_line_start();
+                driver.edit(Edit::Extend(Motion::LineStart));
                 return Some(GeneratedTextInputEvent::Select);
             }
             "moveToRightEndOfLine:" => {
-                driver.move_to_line_end();
+                driver.edit(Edit::Move(Motion::LineEnd));
                 return Some(GeneratedTextInputEvent::Select);
             }
             "moveToRightEndOfLineAndModifySelection:" => {
-                driver.select_to_line_end();
+                driver.edit(Edit::Extend(Motion::LineEnd));
                 return Some(GeneratedTextInputEvent::Select);
             }
 
             // Moving the Selection by Word Boundaries
             "moveWordBackward:" => {
-                driver.move_word_left();
+                driver.edit(Edit::Move(word_left));
                 return Some(GeneratedTextInputEvent::Select);
             }
             "moveWordBackwardAndModifySelection:" => {
-                driver.select_word_left();
+                driver.edit(Edit::Extend(word_left));
                 return Some(GeneratedTextInputEvent::Select);
             }
             "moveWordForward:" => {
-                driver.move_word_right();
+                driver.edit(Edit::Move(word_right));
                 return Some(GeneratedTextInputEvent::Select);
             }
             "moveWordForwardAndModifySelection:" => {
-                driver.select_word_right();
+                driver.edit(Edit::Extend(word_right));
                 return Some(GeneratedTextInputEvent::Select);
             }
             "moveWordLeft:" => {
-                driver.move_word_left();
+                driver.edit(Edit::Move(word_left));
                 return Some(GeneratedTextInputEvent::Select);
             }
             "moveWordLeftAndModifySelection:" => {
-                driver.select_word_left();
+                driver.edit(Edit::Extend(word_left));
                 return Some(GeneratedTextInputEvent::Select);
             }
             "moveWordRight:" => {
-                driver.move_word_right();
+                driver.edit(Edit::Move(word_right));
                 return Some(GeneratedTextInputEvent::Select);
             }
             "moveWordRightAndModifySelection:" => {
-                driver.select_word_right();
+                driver.edit(Edit::Extend(word_right));
                 return Some(GeneratedTextInputEvent::Select);
             }
 
@@ -760,14 +784,19 @@ impl TextInputData {
         None
     }
 
+    /// Applies an input method's event. Where `reveals`, a password field shows a committed
+    /// character in the clear.
     pub(crate) fn apply_ime_event(
         &mut self,
-        font_ctx: &mut FontContext,
-        layout_ctx: &mut LayoutContext<TextBrush>,
+        cx: &mut TextContext,
         event: BlitzImeEvent,
+        reveals: bool,
     ) -> Option<GeneratedTextInputEvent> {
-        let editor = &mut self.editor;
-        let mut driver = editor.driver(font_ctx, layout_ctx);
+        let reveals = reveals && self.is_password;
+        let mut driver = TextInputDriver {
+            editor: &mut self.editor,
+            cx,
+        };
 
         match event {
             BlitzImeEvent::Enabled => {
@@ -775,18 +804,18 @@ impl TextInputData {
                 None
             }
             BlitzImeEvent::Disabled => {
-                driver.clear_compose();
+                driver.edit(Edit::ClearCompose);
                 Some(GeneratedTextInputEvent::PreEditChange)
             }
             BlitzImeEvent::Commit(text) => {
-                driver.insert_or_replace_selection(&text);
+                driver.edit(insert(&text, reveals));
                 Some(GeneratedTextInputEvent::Input)
             }
             BlitzImeEvent::Preedit(text, cursor) => {
                 if text.is_empty() {
-                    driver.clear_compose();
+                    driver.edit(Edit::ClearCompose);
                 } else {
-                    driver.set_compose(&text, cursor);
+                    driver.edit(Edit::SetCompose(&text, cursor));
                 }
                 Some(GeneratedTextInputEvent::PreEditChange)
             }
@@ -802,3 +831,58 @@ impl TextInputData {
         }
     }
 }
+
+/// Returns the edit that inserts `text`, which a password field that `reveals` what is typed
+/// shows in the clear where it is one grapheme.
+fn insert(text: &str, reveals: bool) -> Edit<'_> {
+    if reveals && is_one_grapheme(text) {
+        Edit::InsertRevealed(text)
+    } else {
+        Edit::Insert(text)
+    }
+}
+
+/// Returns whether `text` is one grapheme.
+fn is_one_grapheme(text: &str) -> bool {
+    // The segmenter gives the text's start, then the end of each grapheme.
+    icu_segmenter::GraphemeClusterSegmenter::new()
+        .segment_str(text)
+        .count()
+        == 2
+}
+
+/// Deletes the selection or the word before or after the caret; in a password field, which shows
+/// no words, the text before or after it, as in Chrome.
+fn delete_word(driver: &mut TextInputDriver<'_>, is_password: bool, forward: bool) {
+    if !is_password {
+        driver.edit(if forward {
+            Edit::DeleteWord
+        } else {
+            Edit::BackdeleteWord
+        });
+        return;
+    }
+    if driver.editor.is_selection_collapsed() {
+        driver.edit(Edit::Extend(if forward {
+            Motion::TextEnd
+        } else {
+            Motion::TextStart
+        }));
+    }
+    driver.edit(Edit::DeleteSelection);
+}
+
+/// Applies an [`Edit::Undo`] or an [`Edit::Redo`], which changes the text only where the text
+/// backend keeps a history.
+fn undo_or_redo(
+    driver: &mut TextInputDriver<'_>,
+    edit: Edit<'_>,
+) -> Option<GeneratedTextInputEvent> {
+    let before = driver.raw_text().to_owned();
+    driver.edit(edit);
+    Some(if driver.raw_text() == before {
+        GeneratedTextInputEvent::Select
+    } else {
+        GeneratedTextInputEvent::Input
+    })
+}
diff --git a/packages/blitz-dom/src/resolve.rs b/packages/blitz-dom/src/resolve.rs
index 29a6607628..0a2d82571e 100644
--- a/packages/blitz-dom/src/resolve.rs
+++ b/packages/blitz-dom/src/resolve.rs
@@ -1,37 +1,23 @@
 //! Resolve style and layout
 
 use blitz_traits::node_id::NodeId;
-use std::cell::RefCell;
 
 use debug_timer::debug_timer;
 use kurbo::{Affine, Rect};
-use parley::LayoutContext;
 use selectors::Element as _;
 use style::dom::TDocument;
 
-#[cfg(feature = "parallel-construct")]
-use rayon::prelude::*;
-
-// FIXME: static thread_local FontCtx isn't necessarily correct in multi-document context.
-// Should use thread_local crate with ThreadLocal value store in the Document.
-thread_local! {
-    pub(crate) static LAYOUT_CTX: RefCell<Option<Box<LayoutContext<TextBrush>>>> = const { RefCell::new(None) };
-}
-
 use taffy::AvailableSpace;
 
 use crate::{
     BaseDocument,
     layout::{
         LayoutPassState,
-        construct::{
-            ConstructionTask, ConstructionTaskData, ConstructionTaskResult,
-            ConstructionTaskResultData, LayoutChildren, build_inline_layout_into,
-            collect_layout_children,
-        },
+        construct::{ConstructionTaskData, LayoutChildren, collect_layout_children},
         damage::{ALL_DAMAGE, CONSTRUCT_BOX, CONSTRUCT_DESCENDENT, CONSTRUCT_FC},
     },
-    node::TextBrush,
+    node::TextLayout,
+    text::InlineLayoutEngine as _,
 };
 
 impl BaseDocument {
@@ -64,6 +50,9 @@ impl BaseDocument {
 
         self.resolve_scroll_animation();
 
+        // Mask the character a password field shows in the clear, once its time is up.
+        self.expire_text_input_timers(web_time::Instant::now());
+
         // Drop scrollbar-activity entries whose fade-out has finished (also
         // sheds entries for removed nodes).
         {
@@ -139,6 +128,7 @@ impl BaseDocument {
         self.refresh_hover();
 
         let mut subdoc_is_animating = false;
+        let mut subdoc_deadline = None;
         for &node_id in &self.sub_document_nodes {
             let node = &mut self.nodes[node_id];
             let size = node.final_layout().size;
@@ -160,9 +150,11 @@ impl BaseDocument {
                 sub_doc.resolve(current_time_for_animations);
 
                 subdoc_is_animating |= sub_doc.is_animating();
+                subdoc_deadline = earliest(subdoc_deadline, sub_doc.text_input_deadline());
             }
         }
         self.subdoc_is_animating = subdoc_is_animating;
+        self.subdoc_text_input_deadline = subdoc_deadline;
         timer.record_time("subdocs");
 
         timer.print_times(&format!("Resolve({}): ", self.id()));
@@ -354,73 +346,32 @@ impl BaseDocument {
         deferred_construction_nodes.sort_unstable_by_key(|task| task.node_id);
         deferred_construction_nodes.dedup_by_key(|task| task.node_id);
 
-        #[cfg(feature = "parallel-construct")]
-        let iter = deferred_construction_nodes.into_par_iter();
-        #[cfg(not(feature = "parallel-construct"))]
-        let iter = deferred_construction_nodes.into_iter();
-
-        let results: Vec<ConstructionTaskResult> = iter
-            .map(|task: ConstructionTask| match task.data {
-                ConstructionTaskData::InlineLayout(mut layout) => {
-                    #[cfg(feature = "parallel-construct")]
-                    let mut layout_ctx = LAYOUT_CTX
-                        .take()
-                        .unwrap_or_else(|| Box::new(LayoutContext::new()));
-                    #[cfg(feature = "parallel-construct")]
-                    let layout_ctx_mut = &mut layout_ctx;
-
-                    #[cfg(feature = "parallel-construct")]
-                    let mut font_ctx = self
-                        .thread_font_contexts
-                        .get_or(|| RefCell::new(Box::new(self.font_ctx.lock().unwrap().clone())))
-                        .borrow_mut();
-                    #[cfg(feature = "parallel-construct")]
-                    let font_ctx_mut = &mut *font_ctx;
-
-                    #[cfg(not(feature = "parallel-construct"))]
-                    let layout_ctx_mut = &mut self.layout_ctx;
-                    #[cfg(not(feature = "parallel-construct"))]
-                    let font_ctx_mut = &mut *self.font_ctx.lock().unwrap();
-
-                    layout.content_widths = None;
-                    build_inline_layout_into(
-                        &self.nodes,
-                        layout_ctx_mut,
-                        font_ctx_mut,
-                        &mut layout,
-                        self.viewport.scale(),
-                        task.node_id,
-                    );
-
-                    #[cfg(feature = "parallel-construct")]
-                    {
-                        LAYOUT_CTX.set(Some(layout_ctx));
-                    }
-
-                    // If layout doesn't contain any inline boxes, then it is safe to populate the content_widths
-                    // cache during this parallelized stage.
-                    // if layout.layout.inline_boxes().is_empty() {
-                    //     layout.content_widths();
-                    // }
-
-                    ConstructionTaskResult {
-                        node_id: task.node_id,
-                        data: ConstructionTaskResultData::InlineLayout(layout),
-                    }
-                }
+        let mut layouts: Vec<(NodeId, Box<TextLayout>)> = deferred_construction_nodes
+            .into_iter()
+            .map(|task| match task.data {
+                ConstructionTaskData::InlineLayout(layout) => (task.node_id, layout),
             })
             .collect();
-
-        for result in results {
-            match result.data {
-                ConstructionTaskResultData::InlineLayout(layout) => {
-                    self.nodes[result.node_id].clear_layout_cache();
-                    self.nodes[result.node_id]
-                        .element_data_mut()
-                        .unwrap()
-                        .inline_layout_data = Some(layout);
-                }
-            }
+        let guard = self.guard.read();
+        let guards = style::shared_lock::StylesheetGuards::same(&guard);
+        TextLayout::build_layouts(
+            &mut self.text,
+            &self.nodes,
+            crate::text::DocumentCascade {
+                stylist: &self.stylist,
+                guards: &guards,
+            },
+            self.viewport.scale(),
+            &mut layouts,
+        );
+        drop(guard);
+
+        for (node_id, layout) in layouts {
+            self.nodes[node_id].clear_layout_cache();
+            self.nodes[node_id]
+                .element_data_mut()
+                .unwrap()
+                .inline_layout_data = Some(layout);
         }
 
         self.deferred_construction_nodes.clear();
@@ -462,3 +413,14 @@ impl BaseDocument {
         // taffy::print_tree(self, root_node_id)
     }
 }
+
+/// Returns the earlier of two deadlines, where either is set.
+fn earliest(
+    a: Option<web_time::Instant>,
+    b: Option<web_time::Instant>,
+) -> Option<web_time::Instant> {
+    match (a, b) {
+        (Some(a), Some(b)) => Some(a.min(b)),
+        (a, b) => a.or(b),
+    }
+}
diff --git a/packages/blitz-dom/src/resolved_style.rs b/packages/blitz-dom/src/resolved_style.rs
index e5c50fb66c..1e9a373378 100644
--- a/packages/blitz-dom/src/resolved_style.rs
+++ b/packages/blitz-dom/src/resolved_style.rs
@@ -298,7 +298,7 @@ impl BaseDocument {
         };
 
         let url_data = self.url.url_extra_data();
-        let context = ParserContext::new(
+        let mut context = ParserContext::new(
             Origin::Author,
             &url_data,
             Some(CssRuleType::Style),
@@ -309,7 +309,7 @@ impl BaseDocument {
             None,
             Default::default(),
         );
-        condition.eval(&context)
+        condition.eval(&mut context)
     }
 
     /// Register a custom property via script (`CSS.registerProperty()`).
@@ -363,7 +363,7 @@ impl BaseDocument {
             },
         };
 
-        let display = styles.clone_display();
+        let display = styles.slow_clone_display();
         // Non-atomic inline elements are laid out as style spans within their
         // inline root's text layout rather than as boxes of their own, so their
         // layout-dependent properties resolve to computed (not used) values.
@@ -540,7 +540,7 @@ impl BaseDocument {
                 };
             }
             "top" | "right" | "bottom" | "left" if has_layout_box => {
-                let position = styles.clone_position();
+                let position = styles.slow_clone_position();
                 let parent_layout = node
                     .containing_block()
                     .and_then(|id| self.get_node(id))
@@ -713,7 +713,7 @@ impl BaseDocument {
             let Some(parent_styles) = parent.primary_styles() else {
                 return false;
             };
-            let display = parent_styles.clone_display();
+            let display = parent_styles.slow_clone_display();
             if display.is_contents() {
                 parent_id = parent.parent;
                 continue;
diff --git a/packages/blitz-dom/src/scrolling.rs b/packages/blitz-dom/src/scrolling.rs
index 177e9d2ef2..44edc997a8 100644
--- a/packages/blitz-dom/src/scrolling.rs
+++ b/packages/blitz-dom/src/scrolling.rs
@@ -487,8 +487,8 @@ impl BaseDocument {
                     .primary_styles()
                     .map(|styles| {
                         (
-                            scrollable(styles.clone_overflow_x()),
-                            scrollable(styles.clone_overflow_y()),
+                            scrollable(styles.slow_clone_overflow_x()),
+                            scrollable(styles.slow_clone_overflow_y()),
                         )
                     })
                     .unwrap_or((false, false));
@@ -538,7 +538,7 @@ impl BaseDocument {
                 };
                 styled_node.is_some_and(|node| {
                     node.primary_styles().is_some_and(|style| {
-                        style.clone_scroll_behavior()
+                        style.slow_clone_scroll_behavior()
                             == style::computed_values::scroll_behavior::T::Smooth
                     })
                 })
diff --git a/packages/blitz-dom/src/stylo.rs b/packages/blitz-dom/src/stylo.rs
index 96998d704a..d6c8a32e6a 100644
--- a/packages/blitz-dom/src/stylo.rs
+++ b/packages/blitz-dom/src/stylo.rs
@@ -372,7 +372,7 @@ impl selectors::Element for BlitzNode<'_> {
         // Shadow DOM functionality in Stylo.
         let non_null =
             NonNull::new((self.id.as_u64() as usize).wrapping_add(1) as *mut ()).unwrap();
-        OpaqueElement::from_non_null_ptr(non_null)
+        OpaqueElement::from_ptr(non_null)
     }
 
     fn parent_element(&self) -> Option<Self> {
@@ -945,6 +945,33 @@ impl<'a> TElement for BlitzNode<'a> {
             }
         }
 
+        /// HTML's rules for parsing a legacy font size: an optional sign and
+        /// digits, relative to 3 where signed, clamped to 1 to 7.
+        ///
+        /// https://html.spec.whatwg.org/multipage/rendering.html#rules-for-parsing-a-legacy-font-size
+        fn parse_legacy_font_size(value: &str) -> Option<u8> {
+            let value = value.trim_start_matches(|c: char| c.is_ascii_whitespace());
+            let (sign, digits) = match value.as_bytes().first()? {
+                b'+' => (1, &value[1..]),
+                b'-' => (-1, &value[1..]),
+                _ => (0, value),
+            };
+            let end = digits
+                .find(|c: char| !c.is_ascii_digit())
+                .unwrap_or(digits.len());
+            if end == 0 {
+                return None;
+            }
+            // More digits than an i64 holds clamp as a large number does.
+            let number: i64 = digits[..end].parse().unwrap_or(i64::MAX / 2);
+            let size = match sign {
+                1 => 3i64.saturating_add(number),
+                -1 => 3i64.saturating_sub(number),
+                _ => number,
+            };
+            Some(size.clamp(1, 7) as u8)
+        }
+
         /// Parse the value of an SVG `width`/`height` presentation attribute.
         /// Unlike the legacy HTML dimension attributes, these accept any CSS
         /// <length-percentage> (e.g. `1em`), and a unitless number means user
@@ -990,6 +1017,54 @@ impl<'a> TElement for BlitzNode<'a> {
         let accepts_lang = elem.name.ns == ns!(html) || elem.name.ns == ns!(svg);
         let mut lang = None;
 
+        // `dir=auto`, and a `bdi` with no valid `dir`, take their direction
+        // from the first strong character of their text, as HTML's bidi
+        // rendering maps them; with none, the inherited direction stands.
+        let dir = elem
+            .attrs()
+            .iter()
+            .find(|attr| attr.name.local == local_name!("dir"))
+            .map(|attr| attr.value.as_str());
+        let dir_is = |keyword: &str| dir.is_some_and(|dir| dir.eq_ignore_ascii_case(keyword));
+        let dir_auto = dir_is("auto")
+            || (*tag == local_name!("bdi")
+                && elem.name.ns == ns!(html)
+                && !dir_is("ltr")
+                && !dir_is("rtl"));
+        if dir_auto {
+            if let Some(rtl) = self.auto_direction_is_rtl() {
+                use style::properties::longhands::direction::SpecifiedValue as Direction;
+                push_style(PropertyDeclaration::Direction(if rtl {
+                    Direction::Rtl
+                } else {
+                    Direction::Ltr
+                }));
+            }
+        }
+
+        // A list box shows as many rows as its display size: the `size` attribute, or 4 for a
+        // `multiple` select without one (https://html.spec.whatwg.org/#concept-select-size).
+        // The user-agent sheet sets each option 1.2em tall.
+        if *tag == local_name!("select") {
+            let size = elem
+                .attr(local_name!("size"))
+                .and_then(|size| size.trim().parse::<u32>().ok())
+                .filter(|size| *size > 0);
+            let rows = if elem.has_attr(local_name!("multiple")) {
+                Some(size.unwrap_or(4))
+            } else {
+                size.filter(|size| *size > 1)
+            };
+            if let Some(rows) = rows {
+                use style::values::generics::{NonNegative, length::Size};
+                use style::values::specified::{LengthPercentage, NoCalcLength};
+                let rows = rows.min(10_000) as f32;
+                let length = NoCalcLength::from_em(rows * 1.2);
+                let size = Size::LengthPercentage(NonNegative(LengthPercentage::Length(length)));
+                push_style(PropertyDeclaration::BlockSize(size));
+            }
+        }
+
         for attr in elem.attrs() {
             let name = &attr.name.local;
             let value = attr.value.as_str();
@@ -1179,6 +1254,17 @@ impl<'a> TElement for BlitzNode<'a> {
                 }
             }
 
+            // `<font size>`, by HTML's rules for parsing a legacy font size.
+            if *tag == local_name!("font")
+                && *name == local_name!("size")
+                && let Some(size) = parse_legacy_font_size(value)
+            {
+                use style::values::specified::FontSize;
+                push_style(PropertyDeclaration::FontSize(FontSize::from_html_size(
+                    size,
+                )));
+            }
+
             if *name == local_name!("bgcolor") {
                 use style::values::specified::Color;
                 if let Some((r, g, b, a)) = parse_color_attr(value) {
diff --git a/packages/blitz-dom/src/stylo_device.rs b/packages/blitz-dom/src/stylo_device.rs
index ab3ebe1eab..78e545fc96 100644
--- a/packages/blitz-dom/src/stylo_device.rs
+++ b/packages/blitz-dom/src/stylo_device.rs
@@ -4,21 +4,17 @@
 //! [`resolve`](crate::BaseDocument::resolve), no matter how many changes
 //! occurred since the last resolve.
 
-use std::sync::{Arc, Mutex};
-
 use bitflags::bitflags;
 use blitz_traits::shell::{ColorScheme, Viewport};
-use parley::FontContext;
 use selectors::matching::QuirksMode;
 use style::device::Device;
+use style::device::servo::FontMetricsProvider;
 use style::media_queries::MediaType;
 use style::properties::ComputedValues;
 use style::properties::style_structs::Font;
 use style::queries::values::PrefersColorScheme;
 use style::servo::media_features::PointerCapabilities;
 
-use crate::font_metrics::BlitzFontMetricsProvider;
-
 bitflags! {
     /// The set of changes to the [`Device`] that have accumulated since the
     /// stylist device was last rebuilt. Only the *latest* values matter (they
@@ -62,7 +58,7 @@ impl DeviceChanges {
 pub(crate) fn make_device(
     viewport: &Viewport,
     media_type: MediaType,
-    font_ctx: Arc<Mutex<FontContext>>,
+    font_metrics_provider: Box<dyn FontMetricsProvider>,
 ) -> Device {
     let (width, height) = viewport.logical_size();
     let viewport_size = euclid::Size2D::new(width, height);
@@ -75,7 +71,7 @@ pub(crate) fn make_device(
         viewport_size,
         device_size,
         device_pixel_ratio,
-        Box::new(BlitzFontMetricsProvider { font_ctx }),
+        font_metrics_provider,
         ComputedValues::initial_values_with_font_override(Font::initial_values()),
         match viewport.color_scheme {
             ColorScheme::Light => PrefersColorScheme::Light,
diff --git a/packages/blitz-dom/src/text/mod.rs b/packages/blitz-dom/src/text/mod.rs
new file mode 100644
index 0000000000..8e298433e8
--- /dev/null
+++ b/packages/blitz-dom/src/text/mod.rs
@@ -0,0 +1,1015 @@
+//! Text layout, text editing and fonts, behind one interface for every text backend.
+//!
+//! Blitz lays out text with one backend, chosen when it is built. Each backend is a module here
+//! that implements the traits below for its own types, and the type aliases name the types of the
+//! backend in use, so the rest of Blitz is written once, against the aliases and the traits.
+//!
+//! - [`FontContext`] ([`TextFonts`]): the fonts documents lay out text with.
+//! - [`TextLayout`] ([`InlineText`]): an inline formatting context, built from the DOM, measured,
+//!   broken into lines and placed, and read back for hit testing, selection and `innerText`.
+//! - [`TextEditor`] ([`EditableText`]): the text of an `<input>` or `<textarea>`, and its editing.
+//! - [`MarkerLayout`]: an outside list marker.
+//! - [`FaceDescriptors`]: an `@font-face` rule's descriptors, which a backend registers a face by,
+//!   in [`parlance`]'s font value types.
+//!
+//! Painting is the renderer's part: blitz-paint paints each backend's types in a module of its own,
+//! which [`cfg_text_backend!`](crate::cfg_text_backend) selects.
+
+#[cfg(not(any(text_parley, text_winkin)))]
+compile_error!("Enable one of the `parley` or `winkin` features");
+
+use std::borrow::Cow;
+use std::ops::{Range, RangeInclusive};
+
+use blitz_traits::net::Bytes;
+use blitz_traits::node_id::NodeId;
+use kurbo::{Rect, Size};
+pub use parlance;
+use parlance::{FontFeature, FontStyle, FontVariation, FontWeight, FontWidth, Tag};
+
+use crate::node::{InlineContent, InlineTextHit, Node};
+
+#[cfg(text_parley)]
+pub mod parley;
+#[cfg(text_winkin)]
+pub mod winkin;
+
+#[cfg(text_parley)]
+use self::parley as backend;
+#[cfg(text_winkin)]
+use self::winkin as backend;
+
+/// The fonts documents lay out text with. Clones share their fonts.
+///
+/// This is the text backend's own type, Parley's `FontContext` under Parley and winkin's under
+/// winkin, and its methods beyond [`TextFonts`] are the backend's: code written for every backend
+/// uses [`TextFonts`].
+pub type FontContext = backend::FontContext;
+/// An inline formatting context, as the text backend lays it out.
+pub type TextLayout = backend::TextLayout;
+/// The text of an `<input>` or `<textarea>`, as the text backend edits and lays it out.
+pub type TextEditor = backend::TextEditor;
+/// An outside list marker, as the text backend lays it out.
+pub type MarkerLayout = backend::MarkerLayout;
+/// What a document keeps for its text: its fonts, and the backend's contexts.
+pub(crate) type TextContext = backend::TextContext;
+
+/// The text backends Blitz can be built with.
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
+pub enum TextBackend {
+    /// [Parley](https://github.com/linebender/parley), the `parley` feature.
+    Parley,
+    /// [winkin](https://github.com/dfrg/winkin), the `winkin` feature.
+    Winkin,
+}
+
+/// The text backend this build of Blitz lays out text with.
+#[cfg(text_parley)]
+pub const BACKEND: TextBackend = TextBackend::Parley;
+/// The text backend this build of Blitz lays out text with.
+#[cfg(text_winkin)]
+pub const BACKEND: TextBackend = TextBackend::Winkin;
+
+/// Expands the arm for the text backend in use, and drops the others, so that a crate which
+/// holds code for each backend compiles the one blitz-dom was built with.
+///
+/// Each arm is a backend's name and its tokens in braces. The arms of backends other than the one
+/// in use are dropped, whether or not this build knows them, so callers can list every backend
+/// they hold code for.
+///
+/// ```ignore
+/// blitz_dom::cfg_text_backend! {
+///     parley => { mod parley; use parley as backend; }
+///     winkin => { mod winkin; use winkin as backend; }
+/// }
+/// ```
+#[macro_export]
+macro_rules! cfg_text_backend {
+    ($($arms:tt)*) => {
+        $crate::__text_backend_arms! { $($arms)* }
+    };
+}
+
+/// Expands the arm of [`cfg_text_backend!`] named for the text backend in use.
+#[cfg(text_parley)]
+#[doc(hidden)]
+#[macro_export]
+macro_rules! __text_backend_arms {
+    () => {};
+    (parley => { $($tokens:tt)* } $($rest:tt)*) => {
+        $($tokens)*
+        $crate::__text_backend_arms! { $($rest)* }
+    };
+    ($other:ident => { $($tokens:tt)* } $($rest:tt)*) => {
+        $crate::__text_backend_arms! { $($rest)* }
+    };
+}
+
+/// Expands the arm of [`cfg_text_backend!`] named for the text backend in use.
+#[cfg(text_winkin)]
+#[doc(hidden)]
+#[macro_export]
+macro_rules! __text_backend_arms {
+    () => {};
+    (winkin => { $($tokens:tt)* } $($rest:tt)*) => {
+        $($tokens)*
+        $crate::__text_backend_arms! { $($rest)* }
+    };
+    ($other:ident => { $($tokens:tt)* } $($rest:tt)*) => {
+        $crate::__text_backend_arms! { $($rest)* }
+    };
+}
+
+/// The fonts documents lay out text with.
+pub trait TextFonts: Clone + Default {
+    /// Fonts with only the fonts in `font_data`, decoded from WOFF or WOFF2 where it is, which
+    /// every generic family resolves to, and no platform fonts: the setup for WASM, where browsers
+    /// do not expose them.
+    fn with_single_font(font_data: &[u8]) -> Self;
+
+    /// Adds the fonts in `font_data`, decoded from WOFF or WOFF2 where it is, under the family
+    /// names they declare. Fonts that need no decoding are kept without a copy.
+    fn add_fonts(&mut self, font_data: impl Into<Bytes>);
+}
+
+/// What a document keeps for its text: its fonts, and the contexts the backend builds and
+/// breaks text in.
+pub(crate) trait DocumentText: Sized {
+    /// The context for a document handed `fonts`, or the default fonts.
+    fn new(fonts: Option<FontContext>) -> Self;
+
+    /// The fonts the document was handed, as it hands them to its iframes.
+    fn fonts(&self) -> FontContext;
+
+    /// Adds a web font that has loaded, under its `@font-face` rule's descriptors.
+    fn add_web_font(&mut self, bytes: Bytes, overrides: &crate::net::FontFaceOverrides);
+
+    /// What Stylo measures font-relative units (`ex`, `ch`, `cap`, `ic`) with.
+    fn font_metrics_provider(&self) -> Box<dyn style::device::servo::FontMetricsProvider>;
+}
+
+/// An inline formatting context, laid out and read back.
+///
+/// Positions in the layout's text are byte offsets into the backend's laid-out text, which
+/// [`text_len`](Self::text_len) bounds; [`source_offset`](Self::source_offset) maps a text node's
+/// own offsets into it where the backend can.
+pub trait InlineText: Default + Clone + std::fmt::Debug {
+    /// Device pixels per CSS pixel that the layout was built at.
+    fn scale(&self) -> f32;
+
+    /// How far `align-content` moves the line boxes down the content box, in CSS pixels.
+    fn block_offset(&self) -> f32;
+
+    /// The laid-out text, which the layout's byte offsets index.
+    fn text(&self) -> &str;
+
+    /// The byte length of the laid-out text.
+    fn text_len(&self) -> usize;
+
+    /// The text between byte offsets `start` and `end`, as it is copied, in the pieces of the
+    /// laid-out text it is made of. Nothing where the range is not within the text.
+    fn selected_text(&self, start: usize, end: usize) -> impl Iterator<Item = &str>;
+
+    /// The laid-out text and inline boxes in logical order, as the lines place them, read as it
+    /// is walked. Each stretch of text one node holds comes as one item, whose range indexes
+    /// [`text`](Self::text), and each inline box comes once.
+    fn logical_content(&self) -> impl Iterator<Item = InlineContent>;
+
+    /// Where byte `offset` of text node `node_id`'s content falls in the laid-out text, where
+    /// [`maps_source`](Self::maps_source).
+    fn source_offset(&self, node_id: NodeId, offset: usize) -> Option<usize>;
+
+    /// Whether the backend maps a text node's offsets into the laid-out text. Where it does not,
+    /// callers follow white space collapsing and text transforms themselves.
+    fn maps_source(&self) -> bool;
+
+    /// The baseline of the first line, in CSS pixels below the top of the inline root's content
+    /// box, or `None` where the layout has no lines.
+    fn first_baseline(&self) -> Option<f32>;
+
+    /// The text position at physical CSS-pixel coordinates relative to the inline root's content
+    /// box. `exact` requires the point to be within a line and its text.
+    fn hit_test(&self, x: f32, y: f32, exact: bool) -> Option<InlineTextHit>;
+
+    /// Calls `f` with each rectangle that highlights the text between `start` and `end`, in
+    /// device pixels relative to the inline root's content box moved down by
+    /// [`block_offset`](Self::block_offset).
+    fn for_each_selection_rect(&self, start: usize, end: usize, f: impl FnMut(Rect));
+
+    /// The boxes `node`, a non-atomic inline element inside the inline root `root`, has on each
+    /// line, first line first, in CSS pixels relative to `root`'s border box, computed as they are
+    /// walked.
+    fn fragment_rects(&self, root: &Node, node: &Node) -> impl Iterator<Item = taffy::Rect<f32>>;
+
+    /// Prints the layout's lines and what they hold, for debugging.
+    fn debug_print(&self);
+}
+
+/// What an element pushed as an inline span is.
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
+pub(crate) enum SpanKind {
+    /// A non-atomic inline box.
+    Span,
+    /// A `display: contents` element, which has no box but whose children inherit from it, or an
+    /// annotation container that holds `<rt>`s of its own.
+    Contents,
+    /// A ruby container, `<ruby>`, where the backend sets ruby.
+    Ruby,
+    /// A ruby annotation, `<rt>` or an `<rtc>` holding no `<rt>`, where the backend sets ruby.
+    /// `in_container` where it is an `<rt>` inside an `<rtc>`.
+    Annotation { in_container: bool },
+}
+
+/// What a box pushed whole into the content of an inline formatting context is.
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
+pub(crate) enum InlineBoxKind {
+    /// An atomic inline, which Taffy lays out and the lines place.
+    Atomic,
+    /// A float, which the lines flow around.
+    Float,
+    /// An absolutely positioned box, whose static position the lines find.
+    Absolute,
+}
+
+/// The content of one inline formatting context as a text backend builds it, pushed in content
+/// order by the walk of the DOM that Blitz runs for every backend.
+///
+/// Every span pushed is popped. The [`PushedText`](crate::layout::text_transform::PushedText)
+/// methods are read only where the backend does not apply `text-transform` itself.
+pub(crate) trait InlineBuilder: crate::layout::text_transform::PushedText {
+    /// Whether the backend applies `text-transform` itself. Where it does, text is pushed as the
+    /// DOM holds it; where it does not, Blitz transforms it first.
+    const TRANSFORMS_TEXT: bool;
+
+    /// Whether the backend sets ruby. Where it does, `<ruby>`, `<rt>` and `<rtc>` are pushed as
+    /// ruby and the fallback `<rp>` is dropped; where it does not, they are spans.
+    const SETS_RUBY: bool;
+
+    /// Pushes the marker of a list item whose marker is inside it, before its content.
+    fn push_marker(&mut self, marker: &crate::node::Marker);
+
+    /// Opens a span for the element `node`, set in its computed style `style`.
+    fn push_span(&mut self, node: &Node, style: &style::properties::ComputedValues, kind: SpanKind);
+
+    /// Closes the span opened last, which was opened as `kind`.
+    fn pop_span(&mut self, kind: SpanKind);
+
+    /// Pushes the text of text node `node`.
+    fn push_text(&mut self, node: &Node, text: &str);
+
+    /// Pushes the element `node`, set in its computed style `style`, as a box of its own.
+    fn push_inline_box(
+        &mut self,
+        node: &Node,
+        style: &style::properties::ComputedValues,
+        kind: InlineBoxKind,
+    );
+
+    /// Pushes the forced line break of the `<br>` element `node`, set in `style`.
+    fn push_line_break(&mut self, node: &Node, style: &style::properties::ComputedValues);
+
+    /// Pushes the line break opportunity of the `<wbr>` element `node`, and returns whether the
+    /// backend took it. Where it did not, the element is pushed as a span.
+    fn push_break_opportunity(&mut self, node: &Node) -> bool;
+}
+
+/// What restyles an element for a block's first formatted line: the document's stylist and the
+/// guards its stylesheets are read under.
+#[derive(Copy, Clone)]
+#[cfg_attr(not(feature = "winkin"), allow(dead_code))]
+pub(crate) struct DocumentCascade<'a> {
+    pub(crate) stylist: &'a style::stylist::Stylist,
+    pub(crate) guards: &'a style::shared_lock::StylesheetGuards<'a>,
+}
+
+/// Building, measuring and placing an inline formatting context: the part of [`InlineText`]
+/// layout runs.
+pub(crate) trait InlineLayoutEngine: InlineText {
+    /// Whether the backend sets lines in vertical writing modes itself, so that an inline
+    /// formatting context runs in physical axes and meets Taffy's writing modes only at its edges.
+    #[cfg_attr(not(feature = "writing-mode"), allow(dead_code))]
+    const SETS_WRITING_MODES: bool;
+
+    /// Builds the content of each inline formatting context in `layouts`, rooted at its node, from
+    /// the DOM. This is the deferred, possibly parallel, part of box construction.
+    fn build_layouts(
+        cx: &mut TextContext,
+        nodes: &crate::NodeTree,
+        cascade: DocumentCascade<'_>,
+        scale: f32,
+        layouts: &mut [(NodeId, Box<Self>)],
+    );
+
+    /// Whether an element's style changing from `old` to `new` changes what the backend built
+    /// from it, beyond what Blitz's own damage rebuilds for: then the inline formatting context
+    /// it is in is built again.
+    fn style_change_rebuilds(
+        _old: &::style::properties::ComputedValues,
+        _new: &::style::properties::ComputedValues,
+    ) -> bool {
+        false
+    }
+
+    /// Whether the backend's lines take room over the first line for ruby annotations and
+    /// emphasis marks, which the blocks before lend them: then [`LineArea::room_above`] is worked
+    /// out from those blocks, and [`room_below`](Self::room_below) read from them.
+    const READS_ROOM_ABOVE: bool;
+
+    /// Whether the content's first line may take room above it, where the backend reads room
+    /// above: it holds ruby annotations or emphasis marks. Without them the room is not worked out.
+    fn takes_room_above(&self) -> bool {
+        Self::READS_ROOM_ABOVE
+    }
+
+    /// Whether the content is known to hold no text and no inline boxes before it is laid out.
+    fn is_empty(&self) -> bool;
+
+    /// Readies the content of the inline formatting context rooted at `root` to be broken into
+    /// lines, with its atomic inlines and floats as `lines` says Taffy measured them.
+    /// `text-indent` percentages count as zero until the lines are broken, and are then of the
+    /// width they are broken in.
+    fn prepare(&mut self, doc: &mut crate::BaseDocument, root: NodeId, lines: LinesInputs<'_>);
+
+    /// Returns the content's min-content and max-content widths, in device pixels, with its
+    /// floats: the widest of them is as wide as the content gets at min-content, and at
+    /// max-content each paragraph is as wide as its text and the floats anchored in it.
+    fn content_widths(&mut self) -> ContentWidths;
+
+    /// Breaks the content into lines in `area`, or as narrow as `exclusions` leaves them, placing
+    /// each float into it as a line reaches it, and aligns them as `style`, the inline root's
+    /// computed style, says.
+    fn break_lines(
+        &mut self,
+        cx: &mut TextContext,
+        area: LineArea,
+        style: Option<&style::properties::ComputedValues>,
+        exclusions: &mut impl LineExclusions,
+    );
+
+    /// Returns how far the lines reach and where their baselines are, in device pixels from the
+    /// content box's top, where `end_padding` device pixels of padding after the last line let
+    /// what reaches past it in.
+    fn extent(&self, end_padding: f32) -> LinesExtent;
+
+    /// Sets how far `align-content` moves the line boxes down the content box, in CSS pixels, and
+    /// the size of the content box the lines are placed in, in device pixels.
+    fn set_frame(&mut self, block_offset: f32, content: taffy::Size<f32>);
+
+    /// Returns where the lines put each atomic inline and the static position of each absolutely
+    /// positioned box, in the order they are on the lines, on the page: lines that run down the
+    /// page are turned onto the content box [`set_frame`](Self::set_frame) gave.
+    fn placements(&self) -> impl Iterator<Item = Placement>;
+
+    /// Returns which way the lines run, as the content was last built.
+    fn line_flow(&self) -> LineFlow;
+
+    #[cfg_attr(any(not(text_winkin), not(feature = "floats")), allow(dead_code))]
+    /// Returns where a box that reaches `along` the lines from `along[0]` to `along[1]` and across
+    /// them from `across[0]` to `across[1]` has its top left on the page, in device pixels.
+    fn place_on_page(&self, along: [f32; 2], across: [f32; 2]) -> (f32, f32);
+
+    /// Returns where the last line put its baseline when the lines were last broken, in device
+    /// pixels from the content box's top, before `align-content` moved them.
+    fn last_line_baseline(&self) -> LastBaseline;
+
+    /// Returns how far below the last line its ruby annotations and emphasis marks leave room for
+    /// the block after, in device pixels; negative where they reach past it.
+    fn room_below(&self) -> f32;
+
+    #[cfg_attr(not(feature = "floats"), allow(dead_code))]
+    /// Returns the node of the float the content holds by `key`, where it is a node's.
+    fn float_node(key: u64) -> Option<NodeId>;
+
+    /// Returns how far `position: relative` on the non-atomic inline boxes around the atomic
+    /// inline `node` moves it, in CSS pixels, where the backend paints them moved: `containing`
+    /// is the inline root's content box in CSS pixels, and `rtl` its direction.
+    fn inline_shift(
+        doc: &crate::BaseDocument,
+        node: NodeId,
+        containing: taffy::Size<f32>,
+        rtl: bool,
+    ) -> taffy::Point<f32>;
+}
+
+/// What a pass of layout needs of an inline formatting context's atomic inlines and floats,
+/// which says how far each is laid out to measure it.
+#[derive(Copy, Clone, Debug, PartialEq, Eq)]
+pub(crate) enum Measure {
+    /// How far each reaches along the line: an intrinsic inline-size pass.
+    InlineSizes,
+    /// Each one's size, and the baselines the lines read: a pass that sets the lines to size the
+    /// block but places nothing.
+    Sizes,
+    /// Each one laid out, as the pass that places them lays them out.
+    Layout,
+}
+
+/// What the content of an inline formatting context is readied with.
+#[derive(Clone, Copy, Debug)]
+pub(crate) struct LinesInputs<'a> {
+    /// The atomic inlines and floats as Taffy measured them, in content order.
+    pub(crate) sizes: &'a [BoxMeasure],
+    /// What the pass measured them for.
+    #[cfg_attr(not(text_winkin), allow(dead_code))]
+    pub(crate) pass: Measure,
+    /// The containing block's inline size in CSS pixels, which percentages are of.
+    #[cfg_attr(not(text_winkin), allow(dead_code))]
+    pub(crate) basis: f32,
+    /// Whether the lines run down the page, so that what Taffy measured across the page reaches
+    /// along them.
+    #[cfg_attr(not(text_winkin), allow(dead_code))]
+    pub(crate) vertical: bool,
+}
+
+/// The room an inline formatting context's lines are broken in, in device pixels.
+#[derive(Clone, Copy, Debug, PartialEq)]
+pub(crate) struct LineArea {
+    /// How long a line is where no float is in the way.
+    pub(crate) width: f32,
+    /// How much room over the first line its ruby annotations and emphasis marks may take before
+    /// the line moves down for them.
+    pub(crate) room_above: f32,
+    /// Where the content box ends, which `line-clamp: auto` keeps the lines within.
+    pub(crate) block_end: Option<f32>,
+    /// Whether the pass only sizes the block, so that its lines need no positions.
+    pub(crate) sizes_only: bool,
+    /// The layout pass, which a block placed in it is placed through to its end.
+    pub(crate) pass: u64,
+}
+
+/// Which way an inline formatting context's lines run, and the way they stack.
+#[cfg_attr(not(text_winkin), allow(dead_code))]
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
+pub(crate) enum LineFlow {
+    /// Across the page, stacking down it.
+    Horizontal,
+    /// Down the page, stacking from the right.
+    VerticalRl,
+    /// Down the page, stacking from the left.
+    VerticalLr,
+    /// Down the page with sideways glyphs, stacking from the right.
+    SidewaysRl,
+    /// Up the page, stacking from the left.
+    SidewaysLr,
+}
+
+impl LineFlow {
+    /// Whether the lines run down or up the page.
+    pub(crate) fn is_vertical(self) -> bool {
+        self != Self::Horizontal
+    }
+
+    /// Whether the lines stack from the right.
+    pub(crate) fn stacks_from_right(self) -> bool {
+        matches!(self, Self::VerticalRl | Self::SidewaysRl)
+    }
+}
+
+/// Where a block container's last line box puts its baseline.
+#[derive(Clone, Copy, Debug, PartialEq)]
+pub(crate) enum LastBaseline {
+    /// This far down.
+    At(f32),
+    /// It has no line box.
+    None,
+    /// Something in it the walk does not read, which Taffy answers for.
+    Unknown,
+}
+
+/// An atomic inline or a float as Taffy measured it, which the lines are broken with.
+#[derive(Clone, Copy, Debug, PartialEq)]
+pub(crate) struct BoxMeasure {
+    /// The box's node.
+    pub(crate) node: NodeId,
+    /// Its border box, in CSS pixels.
+    pub(crate) size: taffy::Size<f32>,
+    /// Its margins, in CSS pixels.
+    pub(crate) margin: taffy::Rect<f32>,
+    /// Its baseline down from its border box's top, in CSS pixels, where it has one.
+    pub(crate) baseline: Option<f32>,
+    /// The side it floats to, where it is a float.
+    pub(crate) float: Option<FloatSide>,
+}
+
+/// The min-content and max-content widths of an inline formatting context's content.
+#[derive(Clone, Copy, Debug, Default, PartialEq)]
+pub(crate) struct ContentWidths {
+    pub(crate) min: f32,
+    pub(crate) max: f32,
+}
+
+/// How far an inline formatting context's lines reach, and where their baselines are, in device
+/// pixels from the content box's top left.
+#[derive(Clone, Copy, Debug, Default, PartialEq)]
+pub(crate) struct LinesExtent {
+    /// How far down the line boxes reach.
+    pub(crate) height: f32,
+    /// How far along the longest line reaches.
+    pub(crate) width: f32,
+    /// The first line's baseline, where there is a line.
+    pub(crate) first_baseline: Option<f32>,
+    /// The last line's baseline, where there is a line.
+    pub(crate) last_baseline: Option<f32>,
+}
+
+/// Where the lines put an inline box, in device pixels from the content box's top left. Its style
+/// says which of the positions apply.
+#[derive(Clone, Copy, Debug, PartialEq)]
+pub(crate) struct Placement {
+    /// The box's node.
+    pub(crate) node: NodeId,
+    /// Where an atomic inline's margin box's left edge is, or where an inline-level absolutely
+    /// positioned box would have been along its line.
+    pub(crate) x: f32,
+    /// Where an atomic inline's margin box's top edge is.
+    pub(crate) top: f32,
+    /// Where the line the box is on reaches from and to.
+    pub(crate) line_top: f32,
+    pub(crate) line_bottom: f32,
+    /// Where a block-level absolutely positioned box would have started.
+    pub(crate) block_start: f32,
+    /// Whether an absolutely positioned box's static position faces right to left across the
+    /// page, where the lines say: its inline start's way in a horizontal block, and its block
+    /// start's in a vertical one.
+    pub(crate) rtl: Option<bool>,
+}
+
+/// The side of the block a float goes to.
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
+pub(crate) enum FloatSide {
+    Left,
+    Right,
+}
+
+/// A float the lines reached, to be placed: its margin box's size and the line's top, in device
+/// pixels.
+#[cfg_attr(not(feature = "floats"), allow(dead_code))]
+#[derive(Clone, Copy, Debug, PartialEq)]
+pub(crate) struct FloatRequest {
+    /// The key the content holds the float by.
+    pub(crate) key: u64,
+    pub(crate) side: FloatSide,
+    pub(crate) inline_size: f32,
+    pub(crate) block_size: f32,
+    /// The top of the line that reached it, which it goes no higher than.
+    pub(crate) block_start: f32,
+    /// Whether it is the room a block's initial letter takes rather than a float.
+    pub(crate) initial_letter: bool,
+}
+
+/// Where a float was placed: its margin box, in device pixels from the content box's top left.
+#[cfg_attr(not(feature = "floats"), allow(dead_code))]
+#[derive(Clone, Copy, Debug, PartialEq)]
+pub(crate) struct PlacedFloat {
+    pub(crate) left: f32,
+    pub(crate) right: f32,
+    pub(crate) top: f32,
+    pub(crate) bottom: f32,
+}
+
+/// The floats an inline formatting context's lines flow around, which also places the floats its
+/// text reaches. Positions are in device pixels from the content box's top left.
+#[cfg_attr(not(feature = "floats"), allow(dead_code))]
+pub(crate) trait LineExclusions {
+    /// Returns the left and right edges of the room a line has that reaches across the block from
+    /// `start` to `end`.
+    fn band(&self, start: f32, end: f32) -> (f32, f32);
+
+    /// Returns the next position below `top` where the room changes, or `None` where it never
+    /// does.
+    fn below(&self, top: f32) -> Option<f32>;
+
+    /// Places a float, which later bands account for, and returns where it went.
+    fn place(&mut self, float: FloatRequest) -> PlacedFloat;
+
+    /// Returns a checkpoint that [`rewind`](Self::rewind) takes the placements back to.
+    #[cfg_attr(not(text_winkin), allow(dead_code))]
+    fn checkpoint(&self) -> usize;
+
+    /// Takes back the floats placed after `to`, as a trial break that is rejected does.
+    #[cfg_attr(not(text_winkin), allow(dead_code))]
+    fn rewind(&mut self, to: usize);
+}
+
+/// The size and scale of the laid-out text of an `<input>` or `<textarea>`.
+#[derive(Clone, Copy, Debug, PartialEq)]
+pub struct EditorMetrics {
+    /// How wide and tall the laid-out text is, in device pixels.
+    pub size: Size,
+    /// Device pixels per CSS pixel that the text is laid out at.
+    pub scale: f32,
+}
+
+/// The text of an `<input>` or `<textarea>`, as it is read back.
+pub trait EditableText {
+    /// The text, with any text an input method is composing, which the selection indexes.
+    fn raw_text(&self) -> &str;
+
+    /// The text without any text an input method is composing, as a form submits it: borrowed
+    /// where nothing is composing.
+    fn text(&self) -> Cow<'_, str>;
+
+    /// The selection's byte range in [`raw_text`](Self::raw_text).
+    fn selection(&self) -> Range<usize>;
+
+    /// The selected text, where the selection is not empty.
+    fn selected_text(&self) -> Option<&str>;
+
+    /// Whether the selection is a caret.
+    fn is_selection_collapsed(&self) -> bool;
+
+    /// The text a password field shows in the clear, in bytes of
+    /// [`raw_text`](Self::raw_text), where it shows any.
+    fn revealed_range(&self) -> Option<Range<usize>>;
+
+    /// The size and scale of the laid-out text, or `None` where it is not laid out.
+    fn metrics(&self) -> Option<EditorMetrics>;
+
+    /// The caret, in device pixels relative to the text's origin, where the editor shows one.
+    fn caret_rect(&self) -> Option<Rect>;
+}
+
+/// Changing the text of an `<input>` or `<textarea>`: the part of [`EditableText`] the document
+/// drives.
+///
+/// The setters record what changes, and the text is laid out again once, by the next
+/// [`refresh`](Self::refresh) or [`edit`](Self::edit).
+pub(crate) trait EditEngine: EditableText + Sized {
+    /// An empty editor.
+    fn new(is_multiline: bool) -> Self;
+
+    /// Sets the text the editor starts with.
+    fn set_initial_text(&mut self, text: &str);
+
+    /// Sets the text, where it changed.
+    fn set_text(&mut self, text: &str);
+
+    /// Sets the text in `style`, `node`'s computed style, at `scale`, with lines unwrapped until a
+    /// width is set.
+    fn set_style(
+        &mut self,
+        node: NodeId,
+        style: Option<&style::properties::ComputedValues>,
+        scale: f32,
+    );
+
+    /// Takes `style`, `node`'s computed style after a restyle that kept the control's box, where
+    /// the text is set in properties such a restyle changes. Returns whether the text is to be laid
+    /// out again.
+    fn restyle(
+        &mut self,
+        _node: NodeId,
+        _style: &style::servo_arc::Arc<style::properties::ComputedValues>,
+    ) -> bool {
+        false
+    }
+
+    /// Sets the scale.
+    fn set_scale(&mut self, scale: f32);
+
+    /// Sets the width lines wrap at, in device pixels.
+    fn set_width(&mut self, width: Option<f32>);
+
+    /// Lays the text out again, where a setter changed it since it was last laid out.
+    fn refresh(&mut self, cx: &mut TextContext);
+
+    /// Applies `edit`, leaving the text laid out.
+    fn edit(&mut self, cx: &mut TextContext, edit: Edit<'_>);
+}
+
+/// Laying out an outside list marker.
+pub(crate) trait MarkerEngine: Sized {
+    /// Lays out `marker` for `node`, set in its computed style `style`, in the bullet font where
+    /// `bullet`.
+    fn build(
+        cx: &mut TextContext,
+        node: NodeId,
+        style: &style::properties::ComputedValues,
+        marker: &crate::node::Marker,
+        bullet: bool,
+        scale: f32,
+    ) -> Self;
+}
+
+/// A change to the text or the selection of an `<input>` or `<textarea>`.
+///
+/// Points are in device pixels relative to the text's origin.
+#[derive(Clone, Copy, Debug, PartialEq)]
+pub enum Edit<'a> {
+    /// Replaces the selection with the text.
+    Insert(&'a str),
+    /// Replaces the selection with the text, which a password field shows in the clear until the
+    /// next edit, where the backend masks password fields.
+    InsertRevealed(&'a str),
+    /// Masks the text a password field shows in the clear.
+    Conceal,
+    /// Deletes the selection, or the character after the caret.
+    Delete,
+    /// Deletes the selection, or the character before the caret.
+    Backdelete,
+    /// Deletes the selection, or the word after the caret.
+    DeleteWord,
+    /// Deletes the selection, or the word before the caret.
+    BackdeleteWord,
+    /// Deletes the selection.
+    DeleteSelection,
+    /// Moves the caret, collapsing the selection.
+    Move(Motion),
+    /// Moves the selection's focus, keeping its anchor.
+    Extend(Motion),
+    /// Selects all the text.
+    SelectAll,
+    /// Collapses the selection to its focus.
+    CollapseSelection,
+    /// Selects the bytes from the first offset to the second.
+    SelectByteRange(usize, usize),
+    /// Moves the caret by the first motion, then extends the selection by the second:
+    /// `Select(LineStart, LineEnd)` selects the line.
+    Select(Motion, Motion),
+    /// Sets the text an input method is composing, and the cursor within it.
+    SetCompose(&'a str, Option<(usize, usize)>),
+    /// Clears the text an input method is composing.
+    ClearCompose,
+    /// Undoes the last change to the text, where the backend keeps a history.
+    Undo,
+    /// Redoes the last change undone, where the backend keeps a history.
+    Redo,
+    /// Moves the caret to the point.
+    MoveToPoint(f32, f32),
+    /// Extends the selection to the point, as a drag does.
+    ExtendSelectionToPoint(f32, f32),
+    /// Extends the selection to the point, as a shift-click does.
+    ShiftClickExtension(f32, f32),
+    /// Selects the word at the point.
+    SelectWordAtPoint(f32, f32),
+    /// Selects the hard line at the point.
+    SelectHardLineAtPoint(f32, f32),
+}
+
+/// Where an [`Edit::Move`] or an [`Edit::Extend`] takes the caret.
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
+pub enum Motion {
+    /// One character to the left.
+    Left,
+    /// One character to the right.
+    Right,
+    /// One word to the left.
+    WordLeft,
+    /// One word to the right.
+    WordRight,
+    /// One line up.
+    Up,
+    /// One line down.
+    Down,
+    /// The start of the visual line.
+    LineStart,
+    /// The end of the visual line.
+    LineEnd,
+    /// The start of the line, as the text's line breaks end it.
+    HardLineStart,
+    /// The end of the line, as the text's line breaks end it.
+    HardLineEnd,
+    /// The start of the text.
+    TextStart,
+    /// The end of the text.
+    TextEnd,
+}
+
+/// An `<input>` or `<textarea>`'s editor with the document's text context, handed to
+/// [`BaseDocument::with_text_input`](crate::BaseDocument::with_text_input).
+pub struct TextInputDriver<'a> {
+    pub(crate) editor: &'a mut TextEditor,
+    pub(crate) cx: &'a mut TextContext,
+}
+
+impl TextInputDriver<'_> {
+    /// The editor, to read back.
+    #[inline]
+    pub fn editor(&self) -> &TextEditor {
+        self.editor
+    }
+
+    /// The text, with any text an input method is composing.
+    #[inline]
+    pub fn raw_text(&self) -> &str {
+        self.editor.raw_text()
+    }
+
+    /// Applies `edit`.
+    #[inline]
+    pub fn edit(&mut self, edit: Edit<'_>) {
+        self.editor.edit(self.cx, edit);
+    }
+
+    /// Selects all the text.
+    pub fn select_all(&mut self) {
+        self.edit(Edit::SelectAll);
+    }
+
+    /// Selects the bytes from `start` to `end`.
+    pub fn select_byte_range(&mut self, start: usize, end: usize) {
+        self.edit(Edit::SelectByteRange(start, end));
+    }
+}
+
+/// The descriptors of an `@font-face` rule that a text backend registers a face by, beyond its
+/// family name, in the font value types the backends share.
+///
+/// A descriptor left out, or one whose `calc()` cannot be resolved without an element, is `None`
+/// or empty: the font's own value.
+#[derive(Clone, Debug, Default, PartialEq)]
+pub struct FaceDescriptors {
+    /// The `font-weight` descriptor, as its lowest and highest weight; a single weight is both.
+    pub weight: Option<(FontWeight, FontWeight)>,
+    /// The `font-width` (`font-stretch`) descriptor, as its narrowest and widest width; a single
+    /// width is both.
+    pub width: Option<(FontWidth, FontWidth)>,
+    /// The `font-style` descriptor, as its lowest and highest style; only an oblique's angle can
+    /// differ between them.
+    pub style: Option<(FontStyle, FontStyle)>,
+    /// The code point ranges of the `unicode-range` descriptor; empty where it allows every one.
+    pub unicode_range: Vec<RangeInclusive<u32>>,
+    /// The `font-feature-settings` descriptor.
+    pub feature_settings: Vec<FontFeature>,
+    /// The `font-variation-settings` descriptor.
+    pub variation_settings: Vec<FontVariation>,
+    /// The `size-adjust` descriptor, as a ratio: `1.0` is `100%`.
+    pub size_adjust: Option<f32>,
+    /// The `ascent-override` descriptor, as a fraction of the em.
+    pub ascent_override: Option<f32>,
+    /// The `descent-override` descriptor, as a fraction of the em.
+    pub descent_override: Option<f32>,
+    /// The `line-gap-override` descriptor, as a fraction of the em.
+    pub line_gap_override: Option<f32>,
+}
+
+impl FaceDescriptors {
+    /// Reads the descriptors of an `@font-face` rule.
+    pub(crate) fn from_rule(descriptors: &style::font_face::Descriptors) -> Self {
+        use style::font_face::FontStyleRange;
+        use style::values::specified::font::MetricsOverride;
+        let metric = |value: &Option<MetricsOverride>| match value {
+            Some(MetricsOverride::Override(percentage)) => percentage.0.get(),
+            _ => None,
+        };
+        Self {
+            weight: descriptors
+                .font_weight
+                .as_ref()
+                .and_then(|range| range.compute())
+                .map(|range| {
+                    (
+                        FontWeight::new(range.0.value()),
+                        FontWeight::new(range.1.value()),
+                    )
+                }),
+            style: descriptors.font_style.as_ref().map(|style| match style {
+                FontStyleRange::Italic => (FontStyle::Italic, FontStyle::Italic),
+                FontStyleRange::Oblique(min, max) => {
+                    let (min, max) = (min.degrees(), max.degrees());
+                    // Stylo parses `normal` as an oblique of no angle.
+                    if min.is_none_or(|angle| angle == 0.0) && max.is_none_or(|angle| angle == 0.0)
+                    {
+                        (FontStyle::Normal, FontStyle::Normal)
+                    } else {
+                        (FontStyle::Oblique(min), FontStyle::Oblique(max.or(min)))
+                    }
+                }
+            }),
+            width: descriptors
+                .font_width
+                .as_ref()
+                .and_then(|range| range.compute())
+                .map(|range| {
+                    (
+                        FontWidth::from_percentage(range.0.to_percentage().0 * 100.0),
+                        FontWidth::from_percentage(range.1.to_percentage().0 * 100.0),
+                    )
+                }),
+            unicode_range: descriptors
+                .unicode_range
+                .as_ref()
+                .map(|ranges| ranges.iter().map(|range| range.start..=range.end).collect())
+                .unwrap_or_default(),
+            // The rule's settings are specified values, whose numbers are known once parsed.
+            feature_settings: descriptors
+                .font_feature_settings
+                .as_ref()
+                .map(|settings| {
+                    settings
+                        .0
+                        .iter()
+                        .filter_map(|setting| {
+                            let value = setting.value.resolve()?;
+                            Some(FontFeature::new(
+                                Tag::from_bytes(setting.tag.0.to_be_bytes()),
+                                value.clamp(0, i32::from(u16::MAX)) as u16,
+                            ))
+                        })
+                        .collect()
+                })
+                .unwrap_or_default(),
+            variation_settings: descriptors
+                .font_variation_settings
+                .as_ref()
+                .map(|settings| {
+                    settings
+                        .0
+                        .iter()
+                        .filter_map(|setting| {
+                            Some(FontVariation::new(
+                                Tag::from_bytes(setting.tag.0.to_be_bytes()),
+                                setting.value.get()?,
+                            ))
+                        })
+                        .collect()
+                })
+                .unwrap_or_default(),
+            size_adjust: descriptors
+                .size_adjust
+                .as_ref()
+                .and_then(|percentage| percentage.0.get()),
+            ascent_override: metric(&descriptors.ascent_override),
+            descent_override: metric(&descriptors.descent_override),
+            line_gap_override: metric(&descriptors.line_gap_override),
+        }
+    }
+}
+
+/// Fonts with only the fonts in `font_data`, which every generic family resolves to, and no
+/// platform fonts: the standard setup for WASM, where browsers do not expose them. WOFF and WOFF2
+/// are decoded.
+pub fn build_single_font_ctx(font_data: &[u8]) -> FontContext {
+    FontContext::with_single_font(font_data)
+}
+
+#[cfg(test)]
+mod tests {
+    use style::stylesheets::{CssRule, Origin, StylesheetInDocument as _};
+
+    use parlance::{FontStyle, FontWeight};
+
+    use super::{BACKEND, FaceDescriptors, TextBackend};
+    use crate::{BaseDocument, DocumentConfig};
+
+    /// The descriptors of an `@font-face` rule with `declarations`.
+    fn face(declarations: &str) -> FaceDescriptors {
+        let doc = BaseDocument::new(DocumentConfig::default());
+        let css = format!("@font-face {{ font-family: face; {declarations} }}");
+        let sheet = doc.make_stylesheet(css, Origin::Author);
+        let guard = doc.guard.read();
+        let rules = sheet.0.contents(&guard).rules(&guard);
+        rules
+            .iter()
+            .find_map(|rule| match rule {
+                CssRule::FontFace(face) => Some(FaceDescriptors::from_rule(
+                    &face.read_with(&guard).descriptors,
+                )),
+                _ => None,
+            })
+            .unwrap()
+    }
+
+    #[test]
+    fn face_weight_is_a_value_or_a_range() {
+        assert_eq!(face("").weight, None);
+        let weight = |min, max| Some((FontWeight::new(min), FontWeight::new(max)));
+        assert_eq!(face("font-weight: 700").weight, weight(700.0, 700.0));
+        assert_eq!(face("font-weight: bold").weight, weight(700.0, 700.0));
+        assert_eq!(face("font-weight: 300 600").weight, weight(300.0, 600.0));
+    }
+
+    #[test]
+    fn face_style_is_normal_italic_or_oblique() {
+        let style = |style| Some((style, style));
+        assert_eq!(face("").style, None);
+        assert_eq!(face("font-style: normal").style, style(FontStyle::Normal));
+        assert_eq!(face("font-style: italic").style, style(FontStyle::Italic));
+        assert_eq!(
+            face("font-style: oblique").style,
+            style(FontStyle::Oblique(Some(14.0)))
+        );
+        assert_eq!(
+            face("font-style: oblique 10deg 20deg").style,
+            Some((
+                FontStyle::Oblique(Some(10.0)),
+                FontStyle::Oblique(Some(20.0))
+            ))
+        );
+    }
+
+    /// Parley is the backend wherever its feature is on, winkin's or not.
+    #[test]
+    fn parley_wins_when_both_backends_are_enabled() {
+        let expected = if cfg!(feature = "parley") {
+            TextBackend::Parley
+        } else {
+            TextBackend::Winkin
+        };
+        assert_eq!(BACKEND, expected);
+    }
+}
+
+#[doc(hidden)]
+pub static PERF_COUNTS: [core::sync::atomic::AtomicUsize; 2] =
+    [const { core::sync::atomic::AtomicUsize::new(0) }; 2];
diff --git a/packages/blitz-dom/src/text/parley/build.rs b/packages/blitz-dom/src/text/parley/build.rs
new file mode 100644
index 0000000000..0688d609cc
--- /dev/null
+++ b/packages/blitz-dom/src/text/parley/build.rs
@@ -0,0 +1,213 @@
+//! Building an inline formatting context's Parley layout from the DOM, and laying out outside
+//! list markers.
+
+use blitz_traits::node_id::NodeId;
+use parley::{
+    Brush, FontContext, FontFamily, InlineBox, LayoutContext, TreeBuilder, WhiteSpaceCollapse,
+};
+use style::properties::ComputedValues;
+
+use super::{MarkerLayout, TextBrush, TextContext, TextLayout, style as stylo_to_parley};
+use crate::Node;
+use crate::layout::inline::push_inline_content;
+use crate::layout::text_transform::PushedText;
+use crate::node::Marker;
+use crate::text::{InlineBoxKind, InlineBuilder, MarkerEngine, SpanKind};
+
+/// The families a list marker's bullet is set in.
+const BULLET_FONT_FAMILY: &str = "Bullet, monospace, sans-serif";
+
+impl<B: Brush> PushedText for TreeBuilder<'_, B> {
+    fn text(&self) -> &str {
+        TreeBuilder::text(self)
+    }
+
+    fn has_pending_whitespace(&self) -> bool {
+        TreeBuilder::has_pending_whitespace(self)
+    }
+}
+
+/// Builds the Parley layout of the inline formatting context rooted at
+/// `inline_context_root_node_id`.
+pub(super) fn build_inline_layout_into(
+    nodes: &crate::NodeTree,
+    layout_ctx: &mut LayoutContext<TextBrush>,
+    font_ctx: &mut FontContext,
+    text_layout: &mut TextLayout,
+    scale: f32,
+    inline_context_root_node_id: NodeId,
+) {
+    crate::text::PERF_COUNTS[0].fetch_add(1, core::sync::atomic::Ordering::Relaxed);
+    // Get the inline context's root node's text styles
+    let root_node = &nodes[inline_context_root_node_id];
+    let root_node_style = root_node.primary_styles().or_else(|| {
+        root_node
+            .parent
+            .and_then(|parent_id| nodes[parent_id].primary_styles())
+    });
+
+    let parley_style = root_node_style
+        .as_ref()
+        .map(|s| stylo_to_parley::style(inline_context_root_node_id, s))
+        .unwrap_or_else(|| parley::TextStyle {
+            white_space_collapse: WhiteSpaceCollapse::Collapse,
+            ..Default::default()
+        });
+
+    // Create a parley tree builder
+    let mut tree = layout_ctx.tree_builder(font_ctx, scale, true, &parley_style);
+    if let Some(style) = root_node_style.as_deref() {
+        tree.set_base_direction(stylo_to_parley::base_direction(
+            style.slow_clone_direction(),
+            style.slow_clone_unicode_bidi(),
+        ));
+    }
+    drop(root_node_style);
+
+    let mut builder = ParleyBuilder {
+        tree,
+        root_style: &parley_style,
+    };
+    push_inline_content(nodes, root_node, &mut builder);
+    text_layout.text = builder.tree.build_into(&mut text_layout.layout);
+}
+
+/// A Parley tree builder, as the walk of the DOM pushes into it.
+struct ParleyBuilder<'a, 'b> {
+    tree: TreeBuilder<'b, TextBrush>,
+    /// The style of the inline formatting context's root, which an inside list marker is set in.
+    root_style: &'a parley::TextStyle<'static, 'static, TextBrush>,
+}
+
+impl PushedText for ParleyBuilder<'_, '_> {
+    #[inline]
+    fn text(&self) -> &str {
+        self.tree.text()
+    }
+
+    #[inline]
+    fn has_pending_whitespace(&self) -> bool {
+        self.tree.has_pending_whitespace()
+    }
+}
+
+impl InlineBuilder for ParleyBuilder<'_, '_> {
+    const TRANSFORMS_TEXT: bool = false;
+    const SETS_RUBY: bool = false;
+
+    fn push_marker(&mut self, marker: &Marker) {
+        match marker {
+            // Bullet glyphs live in the bundled bullet font. The position-outside
+            // path already asks for it; without the same span here a marker like
+            // disclosure-closed (U+25B8) falls back to the element's own font and
+            // renders as a missing glyph.
+            Marker::Char(char) => {
+                let mut marker_style = self.root_style.clone();
+                marker_style.font_family = BULLET_FONT_FAMILY.into();
+                self.tree.push_style_span(marker_style);
+                self.tree.push_text(&format!("{char} "));
+                self.tree.pop_style_span();
+            }
+            Marker::String(str) => self.tree.push_text(str),
+        }
+    }
+
+    fn push_span(&mut self, node: &Node, style: &ComputedValues, kind: SpanKind) {
+        match kind {
+            // A `display: contents` element keeps only its white space handling.
+            SpanKind::Contents => self.tree.push_style_modification_span(&[
+                parley::StyleProperty::WhiteSpaceCollapse(stylo_to_parley::white_space_collapse(
+                    style.slow_clone_white_space_collapse(),
+                )),
+                parley::StyleProperty::TextWrapMode(stylo_to_parley::text_wrap_mode(
+                    style.slow_clone_text_wrap_mode(),
+                )),
+            ]),
+            _ => self
+                .tree
+                .push_style_span(stylo_to_parley::style(node.id, style)),
+        }
+    }
+
+    #[inline]
+    fn pop_span(&mut self, _kind: SpanKind) {
+        self.tree.pop_style_span();
+    }
+
+    #[inline]
+    fn push_text(&mut self, _node: &Node, text: &str) {
+        self.tree.push_text(text);
+    }
+
+    fn push_inline_box(&mut self, node: &Node, style: &ComputedValues, kind: InlineBoxKind) {
+        self.tree.push_inline_box(InlineBox {
+            id: node.id.as_u64(),
+            kind: match kind {
+                InlineBoxKind::Atomic => parley::InlineBoxKind::InFlow,
+                InlineBoxKind::Float => parley::InlineBoxKind::CustomOutOfFlow,
+                InlineBoxKind::Absolute => parley::InlineBoxKind::OutOfFlow,
+            },
+            // Overridden by push_inline_box method
+            index: 0,
+            // Width and height are set during layout
+            width: 0.0,
+            height: 0.0,
+            baseline: None,
+            vertical_align: stylo_to_parley::vertical_align(style),
+        });
+    }
+
+    fn push_line_break(&mut self, _node: &Node, _style: &ComputedValues) {
+        self.tree
+            .push_style_modification_span(&[parley::StyleProperty::WhiteSpaceCollapse(
+                WhiteSpaceCollapse::Preserve,
+            )]);
+        self.tree.push_text(
+            "
+",
+        );
+        self.tree.pop_style_span();
+    }
+
+    #[inline]
+    fn push_break_opportunity(&mut self, _node: &Node) -> bool {
+        false
+    }
+}
+
+impl MarkerEngine for MarkerLayout {
+    fn build(
+        cx: &mut TextContext,
+        node: NodeId,
+        style: &ComputedValues,
+        marker: &Marker,
+        bullet: bool,
+        scale: f32,
+    ) -> Self {
+        let mut parley_style = stylo_to_parley::style(node, style);
+
+        // Override the font to our specific bullet font when rendering bullets
+        if bullet {
+            parley_style.font_family = FontFamily::from(BULLET_FONT_FAMILY);
+        }
+
+        // Create a parley tree builder
+        let mut font_ctx = cx.font_ctx.lock().unwrap();
+        let mut builder = cx
+            .layout_ctx
+            .tree_builder(&mut font_ctx, scale, true, &parley_style);
+
+        match marker {
+            Marker::Char(char) => {
+                let mut buf = [0u8; 4];
+                builder.push_text(char.encode_utf8(&mut buf));
+            }
+            Marker::String(str) => builder.push_text(str),
+        };
+
+        let mut layout = builder.build().0;
+        let width = layout.calculate_content_widths().max;
+        layout.break_all_lines(Some(width));
+        layout
+    }
+}
diff --git a/packages/blitz-dom/src/text/parley/editor.rs b/packages/blitz-dom/src/text/parley/editor.rs
new file mode 100644
index 0000000000..1fe9107653
--- /dev/null
+++ b/packages/blitz-dom/src/text/parley/editor.rs
@@ -0,0 +1,407 @@
+//! The text of an `<input>` or `<textarea>`, edited and laid out by Parley's `PlainEditor`.
+
+use std::borrow::Cow;
+use std::ops::Range;
+
+use blitz_traits::node_id::NodeId;
+use kurbo::{Rect, Size};
+use parley::{PlainEditor, PlainEditorDriver, StyleProperty};
+use style::properties::ComputedValues;
+
+use super::{TextBrush, TextContext, style as stylo_to_parley};
+use crate::text::{Edit, EditEngine, EditableText, EditorMetrics, Motion};
+
+/// The text of an `<input>` or `<textarea>`, edited and laid out by Parley.
+pub struct TextEditor {
+    editor: PlainEditor<TextBrush>,
+    /// The width lines wrap at, in device pixels, as last set.
+    width: Option<f32>,
+}
+
+impl TextEditor {
+    /// Parley's editor, which the renderer paints the text, the selection and the caret of.
+    #[inline]
+    pub fn plain_editor(&self) -> &PlainEditor<TextBrush> {
+        &self.editor
+    }
+}
+
+impl EditableText for TextEditor {
+    #[inline]
+    fn raw_text(&self) -> &str {
+        self.editor.raw_text()
+    }
+
+    fn text(&self) -> Cow<'_, str> {
+        if self.editor.is_composing() {
+            Cow::Owned(self.editor.text().to_string())
+        } else {
+            Cow::Borrowed(self.editor.raw_text())
+        }
+    }
+
+    #[inline]
+    fn selection(&self) -> Range<usize> {
+        self.editor.raw_selection().text_range()
+    }
+
+    #[inline]
+    fn selected_text(&self) -> Option<&str> {
+        self.editor.selected_text()
+    }
+
+    #[inline]
+    fn is_selection_collapsed(&self) -> bool {
+        self.editor.raw_selection().is_collapsed()
+    }
+
+    fn revealed_range(&self) -> Option<Range<usize>> {
+        // Parley draws a password field's text as it is.
+        None
+    }
+
+    fn metrics(&self) -> Option<EditorMetrics> {
+        let layout = self.editor.try_layout()?;
+        // The white space a wrapped line ends in hangs past the width, and takes no room.
+        let width = if self.width.is_some() {
+            layout.width()
+        } else {
+            layout.full_width()
+        };
+        Some(EditorMetrics {
+            size: Size::new(f64::from(width), f64::from(layout.height())),
+            scale: layout.scale(),
+        })
+    }
+
+    fn caret_rect(&self) -> Option<Rect> {
+        self.editor.try_layout()?;
+        let caret = self.editor.cursor_geometry(1.5)?;
+        Some(Rect::new(caret.x0, caret.y0, caret.x1, caret.y1))
+    }
+}
+
+impl EditEngine for TextEditor {
+    fn new(_is_multiline: bool) -> Self {
+        Self {
+            editor: PlainEditor::new(16.0),
+            width: None,
+        }
+    }
+
+    fn set_initial_text(&mut self, text: &str) {
+        self.editor.set_text(text);
+    }
+
+    fn set_text(&mut self, text: &str) {
+        if self.editor.text() != text {
+            self.editor.set_text(text);
+        }
+    }
+
+    fn set_style(&mut self, node: NodeId, style: Option<&ComputedValues>, scale: f32) {
+        let parley_style = style
+            .map(|s| stylo_to_parley::style(node, s))
+            .unwrap_or_default();
+        let alignment = style
+            .map(|s| stylo_to_parley::text_align(s.slow_clone_text_align()))
+            .unwrap_or(parley::layout::Alignment::Start);
+        let base_direction = style
+            .map(|s| {
+                stylo_to_parley::base_direction(
+                    s.slow_clone_direction(),
+                    s.slow_clone_unicode_bidi(),
+                )
+            })
+            .unwrap_or(parley::BaseDirection::Auto);
+
+        let editor = &mut self.editor;
+        editor.set_scale(scale);
+        editor.set_width(None);
+        self.width = None;
+
+        let styles = editor.edit_styles();
+        styles.retain(|_| false);
+        styles.insert(StyleProperty::FontFamily(parley_style.font_family));
+        styles.insert(StyleProperty::FontSize(parley_style.font_size));
+        styles.insert(StyleProperty::FontWidth(parley_style.font_width));
+        styles.insert(StyleProperty::FontStyle(parley_style.font_style));
+        styles.insert(StyleProperty::FontWeight(parley_style.font_weight));
+        styles.insert(StyleProperty::FontVariations(parley_style.font_variations));
+        styles.insert(StyleProperty::FontFeatures(parley_style.font_features));
+        styles.insert(StyleProperty::LineHeight(parley_style.line_height));
+        styles.insert(StyleProperty::WordSpacing(parley_style.word_spacing));
+        styles.insert(StyleProperty::LetterSpacing(parley_style.letter_spacing));
+        styles.insert(StyleProperty::WordBreak(parley_style.word_break));
+        styles.insert(StyleProperty::OverflowWrap(parley_style.overflow_wrap));
+        styles.insert(StyleProperty::TextWrapMode(parley_style.text_wrap_mode));
+        styles.insert(StyleProperty::WhiteSpaceCollapse(
+            parley_style.white_space_collapse,
+        ));
+        styles.insert(StyleProperty::Brush(parley_style.brush));
+        editor.set_alignment(alignment);
+        editor.set_base_direction(base_direction);
+    }
+
+    fn set_scale(&mut self, scale: f32) {
+        if self.editor.get_scale() != scale {
+            self.editor.set_scale(scale);
+        }
+    }
+
+    fn set_width(&mut self, width: Option<f32>) {
+        if self.width != width {
+            self.width = width;
+            self.editor.set_width(width);
+        }
+    }
+
+    fn refresh(&mut self, cx: &mut TextContext) {
+        if self.editor.try_layout().is_none() {
+            self.editor
+                .refresh_layout(&mut cx.font_ctx.lock().unwrap(), &mut cx.layout_ctx);
+        }
+    }
+
+    fn edit(&mut self, cx: &mut TextContext, edit: Edit<'_>) {
+        let mut font_ctx = cx.font_ctx.lock().unwrap();
+        let mut driver = self.editor.driver(&mut font_ctx, &mut cx.layout_ctx);
+        driver.refresh_layout();
+        match edit {
+            // Parley masks nothing, so there is nothing to show in the clear.
+            Edit::Insert(text) | Edit::InsertRevealed(text) => {
+                driver.insert_or_replace_selection(text)
+            }
+            Edit::Conceal => {}
+            Edit::Delete => driver.delete(),
+            Edit::Backdelete => driver.backdelete(),
+            Edit::DeleteWord => driver.delete_word(),
+            Edit::BackdeleteWord => driver.backdelete_word(),
+            Edit::DeleteSelection => driver.delete_selection(),
+            Edit::Move(motion) => move_by(&mut driver, motion),
+            Edit::Extend(motion) => extend_by(&mut driver, motion),
+            Edit::SelectAll => driver.select_all(),
+            Edit::CollapseSelection => driver.collapse_selection(),
+            Edit::SelectByteRange(start, end) => driver.select_byte_range(start, end),
+            Edit::Select(from, to) => {
+                move_by(&mut driver, from);
+                extend_by(&mut driver, to);
+            }
+            Edit::SetCompose(text, cursor) => driver.set_compose(text, cursor),
+            Edit::ClearCompose => driver.clear_compose(),
+            // PlainEditor keeps no history.
+            Edit::Undo | Edit::Redo => {}
+            Edit::MoveToPoint(x, y) => driver.move_to_point(x, y),
+            Edit::ExtendSelectionToPoint(x, y) => driver.extend_selection_to_point(x, y),
+            Edit::ShiftClickExtension(x, y) => driver.shift_click_extension(x, y),
+            Edit::SelectWordAtPoint(x, y) => driver.select_word_at_point(x, y),
+            Edit::SelectHardLineAtPoint(x, y) => driver.select_hard_line_at_point(x, y),
+        }
+        driver.refresh_layout();
+    }
+}
+
+/// Moves the caret by `motion`, collapsing the selection.
+fn move_by(driver: &mut PlainEditorDriver<'_, TextBrush>, motion: Motion) {
+    match motion {
+        Motion::Left => driver.move_left(),
+        Motion::Right => driver.move_right(),
+        Motion::WordLeft => driver.move_word_left(),
+        Motion::WordRight => driver.move_word_right(),
+        Motion::Up => driver.move_up(),
+        Motion::Down => driver.move_down(),
+        Motion::LineStart => driver.move_to_line_start(),
+        Motion::LineEnd => driver.move_to_line_end(),
+        Motion::HardLineStart => driver.move_to_hard_line_start(),
+        Motion::HardLineEnd => driver.move_to_hard_line_end(),
+        Motion::TextStart => driver.move_to_text_start(),
+        Motion::TextEnd => driver.move_to_text_end(),
+    }
+}
+
+/// Moves the selection's focus by `motion`, keeping its anchor.
+fn extend_by(driver: &mut PlainEditorDriver<'_, TextBrush>, motion: Motion) {
+    match motion {
+        Motion::Left => driver.select_left(),
+        Motion::Right => driver.select_right(),
+        Motion::WordLeft => driver.select_word_left(),
+        Motion::WordRight => driver.select_word_right(),
+        Motion::Up => driver.select_up(),
+        Motion::Down => driver.select_down(),
+        Motion::LineStart => driver.select_to_line_start(),
+        Motion::LineEnd => driver.select_to_line_end(),
+        Motion::HardLineStart => driver.select_to_hard_line_start(),
+        Motion::HardLineEnd => driver.select_to_hard_line_end(),
+        Motion::TextStart => driver.select_to_text_start(),
+        Motion::TextEnd => driver.select_to_text_end(),
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use blitz_traits::node_id::NodeId;
+
+    use super::TextEditor;
+    use crate::node::TextInputData;
+    use crate::text::parley::TextContext;
+    use crate::text::{DocumentText as _, Edit, EditEngine, EditableText as _, Motion};
+
+    /// Build a [`TextInputData`] with the given text laid out at scale 1.0.
+    fn make_input(cx: &mut TextContext, is_multiline: bool, text: &str) -> TextInputData {
+        let mut data = TextInputData::new(is_multiline);
+        data.editor.editor.set_scale(1.0);
+        data.editor.editor.set_text(text);
+        data.editor
+            .editor
+            .driver(&mut cx.font_ctx.lock().unwrap(), &mut cx.layout_ctx)
+            .refresh_layout();
+        data
+    }
+
+    fn context() -> TextContext {
+        TextContext::new(Some(parley::FontContext::new()))
+    }
+
+    /// The setters lay nothing out: the next edit or refresh does, once, and the caret follows
+    /// what was set.
+    #[test]
+    fn setters_lay_out_on_the_next_edit_or_refresh() {
+        let mut cx = context();
+        let mut editor = <TextEditor as EditEngine>::new(false);
+        editor.set_style(NodeId::from_u64(1), None, 1.0);
+        editor.set_text("hello");
+        assert_eq!(editor.metrics(), None);
+        assert_eq!(editor.caret_rect(), None);
+
+        editor.edit(&mut cx, Edit::Move(Motion::TextEnd));
+        let metrics = editor.metrics().unwrap();
+        assert_eq!(metrics.scale, 1.0);
+        let caret = editor.caret_rect().unwrap();
+        assert!(
+            (caret.x0 - metrics.size.width).abs() < 2.0,
+            "{caret:?} {metrics:?}"
+        );
+
+        editor.set_scale(2.0);
+        assert_eq!(editor.metrics(), None);
+        editor.refresh(&mut cx);
+        let scaled = editor.metrics().unwrap();
+        assert_eq!(scaled.scale, 2.0);
+        assert!(
+            scaled.size.width > metrics.size.width * 1.5,
+            "{scaled:?} {metrics:?}"
+        );
+    }
+
+    #[test]
+    fn short_text_does_not_scroll() {
+        let mut cx = context();
+        let mut data = make_input(&mut cx, false, "hi");
+        // A wide content box that comfortably fits the text.
+        data.clamp_scroll_offset(1000.0, 100.0);
+        assert_eq!(data.scroll_offset, 0.0);
+    }
+
+    #[test]
+    fn single_line_scrolls_to_follow_caret() {
+        let mut cx = context();
+        let text = "the quick brown fox jumps over the lazy dog repeatedly and at length";
+        let mut data = make_input(&mut cx, false, text);
+        let content_box_width = 40.0;
+        let content_box_height = 20.0;
+
+        // Caret at the end of a string that overflows a narrow input should scroll right.
+        data.editor.edit(&mut cx, Edit::Move(Motion::TextEnd));
+        data.clamp_scroll_offset(content_box_width, content_box_height);
+
+        let layout_width = data.editor.metrics().unwrap().size.width as f32;
+        if layout_width > content_box_width {
+            assert!(
+                data.scroll_offset > 0.0,
+                "expected horizontal scroll for overflowing single-line input"
+            );
+            // The caret must be within the visible region after scrolling.
+            let caret = data.editor.caret_rect().unwrap();
+            assert!(caret.x1 as f32 <= data.scroll_offset + content_box_width + 0.5);
+            assert!(caret.x0 as f32 >= data.scroll_offset - 0.5);
+        }
+
+        // Moving the caret back to the start should reset the scroll offset.
+        data.editor.edit(&mut cx, Edit::Move(Motion::TextStart));
+        data.clamp_scroll_offset(content_box_width, content_box_height);
+        assert_eq!(data.scroll_offset, 0.0);
+    }
+
+    #[test]
+    fn multiline_scrolls_vertically_not_horizontally() {
+        let mut cx = context();
+        let text = (0..40)
+            .map(|i| format!("line {i}"))
+            .collect::<Vec<_>>()
+            .join("\n");
+        let mut data = make_input(&mut cx, true, &text);
+        // Constrain the width so wrapping is well-defined.
+        data.editor.set_width(Some(200.0));
+        data.editor.refresh(&mut cx);
+
+        let content_box_width = 200.0;
+        let content_box_height = 30.0;
+
+        data.editor.edit(&mut cx, Edit::Move(Motion::TextEnd));
+        data.clamp_scroll_offset(content_box_width, content_box_height);
+
+        let layout_height = data.editor.metrics().unwrap().size.height as f32;
+        if layout_height > content_box_height {
+            assert!(
+                data.scroll_offset > 0.0,
+                "expected vertical scroll for overflowing multi-line input"
+            );
+        }
+    }
+
+    #[test]
+    fn scroll_by_clamps_and_bubbles() {
+        let mut cx = context();
+        let text = (0..40)
+            .map(|i| format!("line {i}"))
+            .collect::<Vec<_>>()
+            .join("\n");
+        let mut data = make_input(&mut cx, true, &text);
+        data.editor.set_width(Some(200.0));
+        data.editor.refresh(&mut cx);
+
+        let content_box_width = 200.0;
+        let content_box_height = 30.0;
+        let max = data.max_scroll_offset(content_box_width, content_box_height);
+        assert!(max > 0.0, "test text should overflow the content box");
+
+        // Scrolling up (positive delta decreases offset) while already at the top is a no-op and
+        // the whole delta bubbles.
+        assert_eq!(data.scroll_offset, 0.0);
+        let bubbled = data.scroll_by(15.0, content_box_width, content_box_height);
+        assert_eq!(data.scroll_offset, 0.0);
+        assert_eq!(bubbled, 15.0);
+
+        // Scrolling down moves the offset and consumes the delta.
+        let bubbled = data.scroll_by(-10.0, content_box_width, content_box_height);
+        assert_eq!(data.scroll_offset, 10.0);
+        assert_eq!(bubbled, 0.0);
+
+        // Scrolling past the end clamps to the maximum and bubbles the remainder. Starting at
+        // offset 10 with max headroom of `max - 10`, a delta of `-(max + 100)` consumes
+        // `max - 10` and bubbles the rest (`-110`).
+        let bubbled = data.scroll_by(-(max + 100.0), content_box_width, content_box_height);
+        assert_eq!(data.scroll_offset, max);
+        assert!((bubbled - (-110.0)).abs() < 1e-3);
+    }
+
+    #[test]
+    fn single_line_does_not_scroll_when_text_fits() {
+        let mut cx = context();
+        let mut data = make_input(&mut cx, false, "hi");
+        // Wide content box; nothing to scroll, so all delta bubbles.
+        let bubbled = data.scroll_by(-50.0, 1000.0, 100.0);
+        assert_eq!(data.scroll_offset, 0.0);
+        assert_eq!(bubbled, -50.0);
+    }
+}
diff --git a/packages/blitz-dom/src/text/parley/fonts.rs b/packages/blitz-dom/src/text/parley/fonts.rs
new file mode 100644
index 0000000000..ecd95b9e0d
--- /dev/null
+++ b/packages/blitz-dom/src/text/parley/fonts.rs
@@ -0,0 +1,382 @@
+//! Parley's fonts: the collection documents lay text out with, `@font-face` registration, and
+//! the font metrics Stylo resolves font-relative units with.
+
+use std::borrow::Cow;
+#[cfg(feature = "parallel-construct")]
+use std::cell::RefCell;
+use std::sync::{Arc, Mutex};
+
+use app_units::Au;
+use blitz_traits::net::Bytes;
+use parley::fontique::{Blob, Collection, CollectionOptions, GenericFamily, SourceCache};
+use parley::{FontContext, FontVariation, LayoutContext};
+use skrifa::MetadataProvider as _;
+use skrifa::charmap::Charmap;
+use style::properties::style_structs::Font as FontStyles;
+use style::{
+    device::servo::FontMetricsProvider,
+    font_metrics::FontMetrics,
+    values::computed::{CSSPixelLength, font::QueryFontMetricsFlags},
+};
+
+/// Query fontique for the fonts matching `font_styles` (family list and attributes).
+fn query_for_font_styles<'a>(
+    font_ctx: &'a mut FontContext,
+    font_styles: &'a FontStyles,
+) -> parley::fontique::Query<'a> {
+    use parley::fontique::Attributes;
+
+    let mut query = font_ctx.collection.query(&mut font_ctx.source_cache);
+    let families = font_styles
+        .font_family
+        .families
+        .iter()
+        .map(stylo_to_parley::query_font_family);
+    query.set_families(families);
+    query.set_attributes(Attributes {
+        width: stylo_to_parley::font_width(font_styles.font_width),
+        weight: stylo_to_parley::font_weight(font_styles.font_weight),
+        style: stylo_to_parley::font_style(font_styles.font_style),
+    });
+    query
+}
+
+use super::{TextContext, style as stylo_to_parley};
+use crate::net::FontFaceOverrides;
+use crate::text::{DocumentText, TextFonts};
+
+impl TextFonts for FontContext {
+    fn with_single_font(font_data: &[u8]) -> Self {
+        let mut ctx = FontContext {
+            source_cache: SourceCache::new_shared(),
+            collection: Collection::new(CollectionOptions {
+                shared: false,
+                system_fonts: false,
+            }),
+        };
+        let decoded = crate::decode_font_bytes(font_data).into_owned();
+        let registered = ctx
+            .collection
+            .register_fonts(Blob::new(Arc::new(decoded) as _), None);
+        let family_ids: Vec<_> = registered.iter().map(|(id, _)| *id).collect();
+        for generic in [
+            GenericFamily::SansSerif,
+            GenericFamily::Serif,
+            GenericFamily::Monospace,
+            GenericFamily::SystemUi,
+        ] {
+            ctx.collection
+                .append_generic_families(generic, family_ids.iter().copied());
+        }
+        ctx
+    }
+
+    fn add_fonts(&mut self, font_data: impl Into<Bytes>) {
+        let font_data = font_data.into();
+        let blob = match crate::decode_font_bytes(&font_data) {
+            Cow::Owned(decoded) => Blob::new(Arc::new(decoded) as _),
+            Cow::Borrowed(_) => Blob::new(Arc::new(font_data) as _),
+        };
+        self.collection.register_fonts(blob, None);
+    }
+}
+
+impl DocumentText for TextContext {
+    fn new(fonts: Option<FontContext>) -> Self {
+        let font_ctx = fonts
+            .map(|mut font_ctx| {
+                font_ctx.source_cache.make_shared();
+                // font_ctx.collection.make_shared();
+                font_ctx
+            })
+            .unwrap_or_else(|| {
+                let mut font_ctx = FontContext {
+                    source_cache: SourceCache::new_shared(),
+                    collection: Collection::new(CollectionOptions {
+                        shared: false,
+                        system_fonts: cfg!(all(
+                            feature = "system-fonts",
+                            not(target_arch = "wasm32")
+                        )),
+                    }),
+                };
+                font_ctx
+                    .collection
+                    .register_fonts(Blob::new(Arc::new(crate::BULLET_FONT) as _), None);
+                font_ctx
+            });
+        Self {
+            font_ctx: Arc::new(Mutex::new(font_ctx)),
+            #[cfg(feature = "parallel-construct")]
+            thread_font_contexts: thread_local::ThreadLocal::new(),
+            layout_ctx: LayoutContext::new(),
+        }
+    }
+
+    fn fonts(&self) -> FontContext {
+        self.font_ctx.lock().unwrap().clone()
+    }
+
+    fn add_web_font(&mut self, bytes: Bytes, overrides: &FontFaceOverrides) {
+        let font = Blob::new(Arc::new(bytes));
+
+        // Build a `FontInfoOverride` from the `@font-face` descriptors
+        // captured during stylesheet parsing. Without this, parley
+        // reads the family name from the TTF's own metadata, which
+        // means CSS `font-family: 'Avenir Book'` won't match a font
+        // file that internally identifies as `Avenir 45 Book`. fontique takes one weight and one
+        // style, so a range registers as its lowest.
+        let info_override = parley::fontique::FontInfoOverride {
+            family_name: overrides.family_name.as_deref(),
+            weight: overrides.descriptors.weight.map(|(min, _)| min),
+            style: overrides.descriptors.style.map(|(min, _)| min),
+            ..Default::default()
+        };
+
+        // TODO: Investigate eliminating double-box
+        let mut global_font_ctx = self.font_ctx.lock().unwrap();
+        global_font_ctx
+            .collection
+            .register_fonts(font.clone(), Some(info_override));
+
+        #[cfg(feature = "parallel-construct")]
+        {
+            rayon::broadcast(|_ctx| {
+                let mut font_ctx = self
+                    .thread_font_contexts
+                    .get_or(|| RefCell::new(Box::new(global_font_ctx.clone())))
+                    .borrow_mut();
+                font_ctx
+                    .collection
+                    .register_fonts(font.clone(), Some(info_override));
+            });
+        }
+        drop(global_font_ctx);
+    }
+
+    fn font_metrics_provider(&self) -> Box<dyn FontMetricsProvider> {
+        Box::new(BlitzFontMetricsProvider {
+            font_ctx: self.font_ctx.clone(),
+        })
+    }
+}
+
+#[derive(Clone)]
+pub(crate) struct BlitzFontMetricsProvider {
+    pub(crate) font_ctx: Arc<Mutex<FontContext>>,
+}
+
+impl core::fmt::Debug for BlitzFontMetricsProvider {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        write!(f, "BlitzFontMetricsProvider")
+    }
+}
+
+impl FontMetricsProvider for BlitzFontMetricsProvider {
+    fn query_font_metrics(
+        &self,
+        _vertical: bool,
+        font_styles: &FontStyles,
+        font_size: CSSPixelLength,
+        _flags: QueryFontMetricsFlags,
+    ) -> FontMetrics {
+        use parley::fontique::{Query, QueryFont, QueryStatus};
+        use skrifa::instance::{LocationRef, Size};
+        use skrifa::metrics::{GlyphMetrics, Metrics};
+
+        // Lock font_ctx. Explicit reborrow required for borrow checker.
+        let mut font_ctx = self.font_ctx.lock().unwrap();
+        let font_ctx = &mut *font_ctx;
+
+        // Query fontique for the font that matches the font styles
+        let mut query = query_for_font_styles(font_ctx, font_styles);
+        // let fb_script = crate::swash_convert::script_to_fontique(script);
+        // let fb_language = locale.and_then(crate::swash_convert::locale_to_fontique);
+        // query.set_fallbacks(fontique::FallbackKey::new(fb_script, fb_language.as_ref()));
+
+        let variations = stylo_to_parley::font_variations(&font_styles.font_variation_settings);
+        // let features = self.rcx.features(style.font_features).unwrap_or(&[]);
+
+        // fn name_of(font_ref: &skrifa::FontRef) -> String {
+        //     use skrifa::string::StringId;
+        //     font_ref
+        //         .localized_strings(StringId::POSTSCRIPT_NAME)
+        //         .english_or_first()
+        //         .unwrap()
+        //         .chars()
+        //         .collect()
+        // }
+
+        fn find_font_for(query: &mut Query, ch: char) -> Option<QueryFont> {
+            let mut font = None;
+            query.matches_with(|q_font: &QueryFont| {
+                use skrifa::MetadataProvider;
+
+                let Ok(font_ref) = skrifa::FontRef::from_index(q_font.blob.as_ref(), q_font.index)
+                else {
+                    return QueryStatus::Continue;
+                };
+
+                let charmap = font_ref.charmap();
+                if charmap.map(ch).is_some() {
+                    font = Some(q_font.clone());
+                    QueryStatus::Stop
+                } else {
+                    QueryStatus::Continue
+                }
+            });
+            font
+        }
+
+        /// Scales the advance the same way as Parley's shaped glyph advances (font units × size / upem)
+        /// rather than with skrifa's FreeType-compatible fixed-point scale, so that `ch`/`ic`
+        /// lengths exactly match the width of the corresponding laid-out text.
+        fn advance_of(
+            query: &mut Query,
+            ch: char,
+            font_size: f32,
+            variations: &[FontVariation],
+        ) -> Option<f32> {
+            let font = find_font_for(query, ch)?;
+            let font_ref = skrifa::FontRef::from_index(font.blob.as_ref(), font.index).ok()?;
+            let location = font_ref.axes().location(
+                variations
+                    .iter()
+                    .map(|v| (skrifa::Tag::from_be_bytes(v.tag.to_bytes()), v.value)),
+            );
+            let location_ref = LocationRef::from(&location);
+            let upem = Metrics::new(&font_ref, Size::unscaled(), location_ref).units_per_em;
+            if upem == 0 {
+                return None;
+            }
+            let glyph_metrics = GlyphMetrics::new(&font_ref, Size::unscaled(), location_ref);
+            let char_map = Charmap::new(&font_ref);
+            let glyph_id = char_map.map(ch)?;
+            let advance = glyph_metrics.advance_width(glyph_id)?;
+            Some(advance * (font_size / upem as f32))
+        }
+
+        fn metrics_of(
+            query: &mut Query,
+            ch: char,
+            font_size: Size,
+            variations: &[FontVariation],
+        ) -> Option<(f32, Option<f32>, Option<f32>)> {
+            let font = find_font_for(query, ch)?;
+            let font_ref = skrifa::FontRef::from_index(font.blob.as_ref(), font.index).ok()?;
+            let location = font_ref.axes().location(
+                variations
+                    .iter()
+                    .map(|v| (skrifa::Tag::from_be_bytes(v.tag.to_bytes()), v.value)),
+            );
+            let location_ref = LocationRef::from(&location);
+            let metrics = Metrics::new(&font_ref, font_size, location_ref);
+            Some((metrics.ascent, metrics.x_height, metrics.cap_height))
+        }
+
+        let zero_advance = advance_of(&mut query, '0', font_size.px(), &variations);
+        let ic_advance = advance_of(&mut query, '\u{6C34}', font_size.px(), &variations);
+        let (ascent, x_height, cap_height) =
+            metrics_of(&mut query, ' ', Size::new(font_size.px()), &variations)
+                .unwrap_or((0.0, None, None));
+
+        FontMetrics {
+            ascent: CSSPixelLength::new(ascent),
+            x_height: x_height.filter(|xh| *xh != 0.0).map(CSSPixelLength::new),
+            cap_height: cap_height.map(CSSPixelLength::new),
+            zero_advance_measure: zero_advance.map(CSSPixelLength::new),
+            ic_width: ic_advance.map(CSSPixelLength::new),
+            script_percent_scale_down: None,
+            script_script_percent_scale_down: None,
+        }
+    }
+
+    fn base_size_for_generic(
+        &self,
+        generic: style::values::computed::font::GenericFontFamily,
+    ) -> style::values::computed::Length {
+        let size = match generic {
+            style::values::computed::font::GenericFontFamily::Monospace => 13.0,
+            _ => 16.0,
+        };
+        style::values::computed::Length::from(Au::from_f32_px(size))
+    }
+}
+
+#[cfg(test)]
+mod font_face_override_tests {
+    use crate::net::{FontFaceOverrides, Resource, ResourceLoadResponse};
+    use crate::text::FaceDescriptors;
+    use crate::text::parlance::{FontStyle, FontWeight};
+    use crate::{BaseDocument, DocumentConfig};
+
+    /// Regression-pin for the `@font-face` descriptor-honouring fix.
+    ///
+    /// The bug was that `Resource::Font` carried only the raw font bytes,
+    /// so `load_resource` registered fonts with `info_override = None` and
+    /// parley fell back to the TTF's internal `name` table. After the fix,
+    /// `Resource::Font` carries `FontFaceOverrides` and `load_resource`
+    /// builds a `FontInfoOverride` from them — meaning a CSS-declared
+    /// `font-family` alias wins over the file's own metadata.
+    ///
+    /// We drive `load_resource` directly with a fabricated response rather
+    /// than go through HTML parsing → `fetch_font_face`, because the
+    /// downstream HTML parser lives in `blitz-html` (would be a circular
+    /// crate dependency). The mapping from `@font-face` descriptors into
+    /// `FontFaceOverrides` is covered by the unit tests in this module; this
+    /// test pins the load-side of the pipeline.
+    #[test]
+    fn font_face_overrides_alias_family_name() {
+        const ALIAS: &str = "AliasedFamily";
+
+        let mut document = BaseDocument::new(DocumentConfig::default());
+
+        // Sanity: the alias name is not registered before we feed the font.
+        {
+            let mut ctx = document.text.font_ctx.lock().unwrap();
+            assert!(
+                ctx.collection.family_id(ALIAS).is_none(),
+                "alias must not exist before registration",
+            );
+        }
+
+        // Drive `load_resource` with a `Resource::Font` whose overrides
+        // assert the CSS-side family name. We use the bullet font as a
+        // valid font payload — its internal `name` table is irrelevant to
+        // the assertion; what matters is whether the override wins.
+        let response = ResourceLoadResponse {
+            request_id: 0,
+            node_id: None,
+            resolved_url: Some(String::from("test://aliased-family")),
+            result: Ok(Resource::Font(
+                blitz_traits::net::Bytes::from_static(crate::BULLET_FONT),
+                FontFaceOverrides {
+                    family_name: Some(String::from(ALIAS)),
+                    descriptors: FaceDescriptors {
+                        weight: Some((FontWeight::new(800.0), FontWeight::new(800.0))),
+                        style: Some((FontStyle::Italic, FontStyle::Italic)),
+                        ..Default::default()
+                    },
+                },
+            )),
+        };
+        document.load_resource(response);
+
+        // The override must have taken effect: parley's `Collection` now
+        // resolves the CSS-declared alias to a registered family.
+        let mut ctx = document.text.font_ctx.lock().unwrap();
+        let family_id = ctx
+            .collection
+            .family_id(ALIAS)
+            .expect("CSS-declared family name should be registered as a family alias");
+        let resolved_name = ctx
+            .collection
+            .family_name(family_id)
+            .expect("family id should resolve back to a name");
+        assert_eq!(
+            resolved_name, ALIAS,
+            "registered family should report the CSS-declared name, \
+             not the font file's internal `name` table entry",
+        );
+    }
+}
diff --git a/packages/blitz-dom/src/text/parley/layout.rs b/packages/blitz-dom/src/text/parley/layout.rs
new file mode 100644
index 0000000000..6d71db31c6
--- /dev/null
+++ b/packages/blitz-dom/src/text/parley/layout.rs
@@ -0,0 +1,299 @@
+//! Measuring, breaking and placing an inline formatting context with Parley.
+
+use blitz_traits::node_id::NodeId;
+use parley::{AlignmentOptions, BreakReason, IndentOptions};
+use style::properties::ComputedValues;
+use style::values::{computed::CSSPixelLength, generics::text::GenericTextIndent};
+
+#[cfg(feature = "floats")]
+use parley::YieldData;
+
+use super::{TextLayout, style as stylo_to_parley};
+#[cfg(feature = "floats")]
+use crate::text::FloatRequest;
+use crate::text::{BoxMeasure, ContentWidths, LineExclusions, LinesExtent, Placement};
+
+impl TextLayout {
+    /// Whether the content holds no text and no inline boxes.
+    pub(super) fn holds_nothing(&self) -> bool {
+        self.text.is_empty() && self.layout.inline_boxes().len() == 0
+    }
+
+    /// Gives the inline boxes their sizes, and sets the first line's indent.
+    pub(super) fn prepare_lines(&mut self, sizes: &[BoxMeasure], style: Option<&ComputedValues>) {
+        let scale = self.layout.scale();
+        self.floats.clear();
+        self.floats.extend(sizes.iter().filter_map(|measured| {
+            let margin = measured.margin;
+            Some((
+                measured.node.as_u64(),
+                measured.float?,
+                (margin.left + margin.right + measured.size.width) * scale,
+                (margin.top + margin.bottom + measured.size.height) * scale,
+            ))
+        }));
+        // The boxes are measured in the order the content holds them.
+        let mut next = 0;
+        for ibox in self.layout.inline_boxes_mut() {
+            let node = NodeId::from_u64(ibox.id);
+            let measured = match sizes.get(next) {
+                Some(measured) if measured.node == node => {
+                    next += 1;
+                    Some(measured)
+                }
+                _ => sizes.iter().find(|measured| measured.node == node),
+            };
+            let measured = measured.filter(|_| ibox.kind == parley::InlineBoxKind::InFlow);
+            let Some(measured) = measured else {
+                // An absolutely positioned box or a float takes no room in the line.
+                ibox.width = 0.0;
+                ibox.height = 0.0;
+                ibox.baseline = None;
+                continue;
+            };
+            let margin = measured.margin;
+            ibox.width = (margin.left + margin.right + measured.size.width) * scale;
+            ibox.baseline = measured
+                .baseline
+                .map(|baseline| (margin.top + baseline) * scale);
+            // Vertical margins adjust the space the box reserves in the line. A box with a
+            // baseline splits that space into ascent (`margin.top + baseline`) and descent
+            // (`margin.bottom + height - baseline`), either of which may be negative. A box
+            // without a baseline sits on the baseline and cannot reserve negative space.
+            // Kept finite: huge author lengths can sum to infinity, which is taller than
+            // the line breaker's `f32::MAX` height limit, and it then yields
+            // `MaxHeightExceeded` for this box forever without advancing.
+            let margin_box_height = margin.top + margin.bottom + measured.size.height;
+            ibox.height = if ibox.baseline.is_some() {
+                (margin_box_height * scale).min(f32::MAX)
+            } else {
+                (margin_box_height.max(0.0) * scale).min(f32::MAX)
+            };
+        }
+
+        // Percentage indents do not contribute to intrinsic widths.
+        self.set_indent(style, 0.0);
+    }
+
+    /// Sets the lines' `text-indent` as `style`, the inline root's computed style, says, with
+    /// percentages of `basis` CSS pixels.
+    fn set_indent(&mut self, style: Option<&ComputedValues>, basis: f32) {
+        let text_indent = style
+            .map(|s| s.slow_clone_text_indent())
+            .unwrap_or_else(GenericTextIndent::zero);
+        let amount = text_indent
+            .length
+            .resolve(CSSPixelLength::new(basis.max(0.0)))
+            .px();
+        self.layout.set_text_indent(
+            amount * self.layout.scale(),
+            IndentOptions {
+                each_line: text_indent.each_line,
+                hanging: text_indent.hanging,
+            },
+        );
+    }
+
+    /// The content's min-content and max-content widths, with its floats.
+    pub(super) fn widths(&mut self) -> ContentWidths {
+        // TODO: Cache content widths.
+        //
+        // This is a little tricky as the size of the inline boxes may depend on whether we are sizing under
+        // and a min-content or max-content constraint. So if we want to compute both widths in one pass then
+        // we need to store both a min-content and max-content size on each box.
+        //
+        // A float takes room along the line only as the content is measured: with a soft wrap
+        // opportunity either side, the widest float is as wide as the content gets at
+        // min-content, and at max-content each paragraph is as wide as its text and its floats.
+        let floats = &self.floats;
+        let measured_as_floats = |ibox: &parley::InlineBox| {
+            floats
+                .iter()
+                .find(|(id, ..)| *id == ibox.id)
+                .map(|(_, _, width, _)| *width)
+        };
+        if !floats.is_empty() {
+            for ibox in self.layout.inline_boxes_mut() {
+                if let Some(width) = measured_as_floats(ibox) {
+                    ibox.kind = parley::InlineBoxKind::InFlow;
+                    ibox.width = width;
+                }
+            }
+        }
+        let widths = self.layout.calculate_content_widths();
+        if !self.floats.is_empty() {
+            let floats = &self.floats;
+            for ibox in self.layout.inline_boxes_mut() {
+                if floats.iter().any(|(id, ..)| *id == ibox.id) {
+                    ibox.kind = parley::InlineBoxKind::CustomOutOfFlow;
+                    ibox.width = 0.0;
+                }
+            }
+        }
+        ContentWidths {
+            min: widths.min,
+            max: widths.max,
+        }
+    }
+
+    /// Breaks the lines around the floats, and aligns them.
+    pub(super) fn break_into_lines(
+        &mut self,
+        width: f32,
+        style: Option<&ComputedValues>,
+        exclusions: &mut impl LineExclusions,
+    ) {
+        // Percentage indents are of the content box the lines are broken in.
+        self.set_indent(style, width / self.layout.scale());
+
+        #[cfg(not(feature = "floats"))]
+        {
+            let _ = exclusions;
+            self.layout.break_all_lines(Some(width));
+        }
+
+        #[cfg(feature = "floats")]
+        {
+            let mut breaker = self.layout.break_lines();
+            let (left, right) = exclusions.band(0.0, 0.0);
+            let state = breaker.state_mut();
+            state.set_layout_max_advance(width);
+            state.set_line_max_advance(right - left);
+            state.set_line_x(left);
+            state.set_line_y(0.0);
+
+            while let Some(yield_data) = breaker.break_next() {
+                match yield_data {
+                    YieldData::LineBreak(_line_break_data) => {
+                        let state = breaker.state_mut();
+                        let top = state.line_y() as f32;
+                        let (left, right) = exclusions.band(top, top);
+                        state.set_line_max_advance(right - left);
+                        state.set_line_x(left);
+                    }
+                    YieldData::MaxHeightExceeded(_data) => {
+                        // TODO
+                        continue;
+                    }
+                    YieldData::InlineBoxBreak(box_break_data) => {
+                        // Only floats break the lines at their boxes.
+                        let state = breaker.state_mut();
+                        let top = state.line_y() as f32;
+                        let key = box_break_data.inline_box_id;
+                        if let Some(&(_, side, inline_size, block_size)) =
+                            self.floats.iter().find(|(id, ..)| *id == key)
+                        {
+                            exclusions.place(FloatRequest {
+                                key,
+                                side,
+                                inline_size,
+                                block_size,
+                                block_start: top,
+                                initial_letter: false,
+                            });
+                        }
+                        let (left, right) = exclusions.band(top, top);
+                        state.set_line_max_advance(right - left);
+                        state.set_line_x(left);
+
+                        // Floats are out-of-flow and must not contribute to the line's height.
+                        state.append_inline_box_to_line(
+                            box_break_data.advance,
+                            f32::NEG_INFINITY,
+                            f32::NEG_INFINITY,
+                        );
+                    }
+                }
+            }
+            breaker.finish();
+        }
+
+        let (alignment, last_line_alignment) = style
+            .map(|s| {
+                (
+                    stylo_to_parley::text_align(s.slow_clone_text_align()),
+                    stylo_to_parley::text_align_last(s.slow_clone_text_align_last()),
+                )
+            })
+            .unwrap_or((parley::layout::Alignment::Start, None));
+
+        self.layout.align(
+            alignment,
+            AlignmentOptions {
+                align_when_overflowing: false,
+                last_line_alignment,
+            },
+        );
+    }
+
+    /// How far the lines reach, and where their baselines are.
+    pub(super) fn lines_extent(&self) -> LinesExtent {
+        // Parley lays out empty text as a single strut-height line (text-editor semantics),
+        // but a line box containing no text, inline boxes or other in-flow content is a
+        // zero-height line box in CSS (CSS2 §9.4.2).
+        let has_inline_content = !self.holds_nothing();
+
+        let mut height = if has_inline_content {
+            self.layout.height()
+        } else {
+            0.0
+        };
+
+        // A forced line break (e.g. `<br>` or a preserved newline) at the end of the inline
+        // content ends the final line box without starting a new one. Parley still emits an
+        // empty line after it (so that editors have a line to place the cursor on), so that
+        // line is excluded from the measured height (and from the last baseline).
+        let line_count = self.layout.len();
+        let mut trailing_empty_line = None;
+        if line_count >= 2
+            && let (Some(prev_line), Some(last_line)) = (
+                self.layout.get(line_count - 2),
+                self.layout.get(line_count - 1),
+            )
+            && prev_line.break_reason() == BreakReason::Explicit
+            && last_line.text_range().is_empty()
+            && last_line.items().next().is_none()
+        {
+            height -= last_line.metrics().line_height;
+            trailing_empty_line = Some(line_count - 1);
+        }
+
+        let line_baseline = |line: parley::Line<'_, _>| line.metrics().baseline;
+        let first_baseline = has_inline_content
+            .then(|| self.layout.lines().next().map(line_baseline))
+            .flatten();
+        let last_line_index = trailing_empty_line.unwrap_or(line_count).checked_sub(1);
+        let last_baseline = has_inline_content
+            .then(|| last_line_index.and_then(|i| self.layout.get(i)))
+            .flatten()
+            .map(line_baseline);
+
+        LinesExtent {
+            height,
+            width: self.layout.width(),
+            first_baseline,
+            last_baseline,
+        }
+    }
+
+    /// Where the lines put each inline box.
+    pub(super) fn box_placements(&self) -> impl Iterator<Item = Placement> + '_ {
+        self.layout.lines().flat_map(|line| {
+            let metrics = *line.metrics();
+            line.items().filter_map(move |item| match item {
+                parley::layout::PositionedLayoutItem::InlineBox(ibox) => Some(Placement {
+                    node: NodeId::from_u64(ibox.id),
+                    x: ibox.x,
+                    // An out-of-flow box is zero-sized, so this is the baseline for it.
+                    top: ibox.y,
+                    line_top: metrics.block_min_coord,
+                    line_bottom: metrics.block_max_coord,
+                    // A block-level box's static position is below its line.
+                    block_start: metrics.block_max_coord,
+                    rtl: None,
+                }),
+                parley::layout::PositionedLayoutItem::GlyphRun(_) => None,
+            })
+        })
+    }
+}
diff --git a/packages/blitz-dom/src/text/parley/mod.rs b/packages/blitz-dom/src/text/parley/mod.rs
new file mode 100644
index 0000000000..325a1a2fe8
--- /dev/null
+++ b/packages/blitz-dom/src/text/parley/mod.rs
@@ -0,0 +1,502 @@
+//! The Parley text backend.
+
+mod build;
+mod editor;
+mod fonts;
+mod layout;
+pub(crate) mod style;
+
+#[cfg(feature = "parallel-construct")]
+use std::cell::RefCell;
+use std::sync::{Arc, Mutex};
+
+use std::ops::Range;
+
+use blitz_traits::node_id::NodeId;
+use kurbo::Rect;
+use parley::{
+    Affinity, BreakReason, Cluster, ClusterSide, Cursor, LayoutContext, PositionedLayoutItem, Run,
+    Selection,
+};
+#[cfg(feature = "parallel-construct")]
+use thread_local::ThreadLocal;
+
+use super::{
+    ContentWidths, FloatSide, InlineLayoutEngine, InlineText, LastBaseline, LineArea,
+    LineExclusions, LineFlow, LinesExtent, LinesInputs, Placement,
+};
+use crate::node::{InlineContent, InlineTextHit, Node};
+
+/// The Parley crate, for the renderer's Parley painter.
+pub use ::parley;
+pub use ::parley::FontContext;
+pub use editor::TextEditor;
+
+/// Parley Brush type for Blitz which contains the Blitz node id
+#[derive(Debug, Clone, Copy, Default, PartialEq)]
+pub struct TextBrush {
+    /// The node id for the span
+    pub id: NodeId,
+}
+
+impl TextBrush {
+    pub(crate) fn from_id(id: NodeId) -> Self {
+        Self { id }
+    }
+}
+
+/// An outside list marker, laid out by Parley.
+pub type MarkerLayout = parley::Layout<TextBrush>;
+
+/// What a document keeps for its text under Parley.
+pub struct TextContext {
+    /// A Parley font context
+    pub(crate) font_ctx: Arc<Mutex<FontContext>>,
+    #[cfg(feature = "parallel-construct")]
+    /// Thread-and-document-local copies to the font context
+    pub(crate) thread_font_contexts: ThreadLocal<RefCell<Box<FontContext>>>,
+    /// A Parley layout context
+    pub(crate) layout_ctx: LayoutContext<TextBrush>,
+}
+
+// FIXME: static thread_local FontCtx isn't necessarily correct in multi-document context.
+// Should use thread_local crate with ThreadLocal value store in the Document.
+#[cfg(feature = "parallel-construct")]
+thread_local! {
+    static LAYOUT_CTX: RefCell<Option<Box<LayoutContext<TextBrush>>>> = const { RefCell::new(None) };
+}
+
+/// An inline formatting context laid out by Parley.
+#[derive(Clone, Default)]
+pub struct TextLayout {
+    pub(crate) text: String,
+    /// Parley's layout of the text and inline boxes, which the renderer paints.
+    pub layout: parley::Layout<TextBrush>,
+    /// Block-axis offset (in CSS px) of the line boxes from the top of the container's content
+    /// box, as applied by `align-content`.
+    pub(crate) block_offset: f32,
+    /// The out-of-flow positions for which some inline span with an inline box below it is a
+    /// containing block (as `SPAN_*_CB` flags). The inline root claims those boxes in its place.
+    /// Set by each `RunMode::PerformLayout` run of inline layout.
+    pub(crate) span_cb_flags: stylo_taffy::StyleFlags,
+    /// The floats, as the lines place them: each one's node, side and margin box's size in device
+    /// pixels.
+    floats: Vec<(u64, FloatSide, f32, f32)>,
+}
+
+impl std::fmt::Debug for TextLayout {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        write!(f, "TextLayout")
+    }
+}
+
+impl InlineText for TextLayout {
+    #[inline]
+    fn scale(&self) -> f32 {
+        self.layout.scale()
+    }
+
+    #[inline]
+    fn block_offset(&self) -> f32 {
+        self.block_offset
+    }
+
+    #[inline]
+    fn text(&self) -> &str {
+        &self.text
+    }
+
+    #[inline]
+    fn text_len(&self) -> usize {
+        self.text.len()
+    }
+
+    #[inline]
+    fn selected_text(&self, start: usize, end: usize) -> impl Iterator<Item = &str> {
+        self.text.get(start..end).into_iter()
+    }
+
+    fn logical_content(&self) -> impl Iterator<Item = InlineContent> {
+        let mut lines = self.layout.lines();
+        let mut boxes = self.layout.inline_boxes().peekable();
+        // The current line's runs, sorted from visual into logical order for bidi text
+        let mut runs: Vec<Run<'_, TextBrush>> = Vec::new();
+        let mut next_run = 0;
+        let mut clusters = None;
+        // The node of the last cluster's style, which the clusters after it mostly share
+        let mut style = None;
+        // A cluster read but not yet taken in, which waits for the items before it
+        let mut held: Option<(NodeId, Range<usize>)> = None;
+        // The text taken in since the last item, all of one node
+        let mut pending: Option<(NodeId, Range<usize>)> = None;
+        let text = |(node_id, range)| InlineContent::Text { node_id, range };
+        std::iter::from_fn(move || {
+            loop {
+                let (node_id, range) = match held.take() {
+                    Some(cluster) => cluster,
+                    None => {
+                        let Some(cluster) = clusters.as_mut().and_then(Iterator::next) else {
+                            while next_run >= runs.len() {
+                                let Some(line) = lines.next() else {
+                                    // The text read last, then the boxes after the last line
+                                    if let Some(read) = pending.take() {
+                                        return Some(text(read));
+                                    }
+                                    let ibox = boxes.next()?;
+                                    return Some(InlineContent::Box(NodeId::from_u64(ibox.id)));
+                                };
+                                runs.clear();
+                                runs.extend(line.runs());
+                                runs.sort_by_key(|run| run.text_range().start);
+                                next_run = 0;
+                            }
+                            clusters = runs.get(next_run).map(Run::clusters);
+                            next_run += 1;
+                            continue;
+                        };
+                        let index = cluster.style_index();
+                        let node_id = match style {
+                            Some((styled, node_id)) if styled == index => node_id,
+                            _ => {
+                                let node_id = cluster.style().brush.id;
+                                style = Some((index, node_id));
+                                node_id
+                            }
+                        };
+                        (node_id, cluster.text_range())
+                    }
+                };
+                // The boxes before the cluster come first, after the text read before them
+                if boxes.peek().is_some_and(|ibox| ibox.index <= range.start) {
+                    held = Some((node_id, range));
+                    if let Some(read) = pending.take() {
+                        return Some(text(read));
+                    }
+                    if let Some(ibox) = boxes.next() {
+                        return Some(InlineContent::Box(NodeId::from_u64(ibox.id)));
+                    }
+                    continue;
+                }
+                match &mut pending {
+                    Some((read_id, read)) if *read_id == node_id && read.end == range.start => {
+                        read.end = range.end;
+                    }
+                    _ => {
+                        if let Some(read) = pending.replace((node_id, range)) {
+                            return Some(text(read));
+                        }
+                    }
+                }
+            }
+        })
+    }
+
+    #[inline]
+    fn source_offset(&self, node_id: NodeId, offset: usize) -> Option<usize> {
+        let _ = (node_id, offset);
+        None
+    }
+
+    #[inline]
+    fn maps_source(&self) -> bool {
+        false
+    }
+
+    fn first_baseline(&self) -> Option<f32> {
+        let line = self.layout.lines().next()?;
+        Some(line.metrics().baseline / self.layout.scale() + self.block_offset)
+    }
+
+    fn hit_test(&self, x: f32, y: f32, exact: bool) -> Option<InlineTextHit> {
+        let layout = &self.layout;
+        let point = (x * layout.scale(), (y - self.block_offset) * layout.scale());
+        let (cluster, side) = if exact {
+            Cluster::from_point_exact(layout, point.0, point.1)?
+        } else {
+            Cluster::from_point(layout, point.0, point.1)?
+        };
+        let leading = side == ClusterSide::Left;
+        let byte_offset = if cluster.is_rtl() {
+            if leading {
+                cluster.text_range().end
+            } else {
+                cluster.text_range().start
+            }
+        } else if leading || cluster.is_line_break() == Some(BreakReason::Explicit) {
+            cluster.text_range().start
+        } else {
+            cluster.text_range().end
+        };
+        Some(InlineTextHit {
+            node_id: cluster.style().brush.id,
+            byte_offset,
+        })
+    }
+
+    fn for_each_selection_rect(&self, start: usize, end: usize, mut f: impl FnMut(Rect)) {
+        let layout = &self.layout;
+        let anchor = Cursor::from_byte_index(layout, start, Affinity::Downstream);
+        let focus = Cursor::from_byte_index(layout, end, Affinity::Downstream);
+        let selection = Selection::new(anchor, focus);
+        selection.geometry_with(layout, |rect, _| {
+            f(Rect::new(rect.x0, rect.y0, rect.x1, rect.y1));
+        });
+    }
+
+    fn fragment_rects(&self, root: &Node, node: &Node) -> impl Iterator<Item = taffy::Rect<f32>> {
+        let layout = &self.layout;
+        let scale = layout.scale();
+
+        // Walk up the DOM parent chain from `id` to check whether it is (or is
+        // inside) the target node, stopping at the inline root.
+        let root_id = root.id;
+        let is_in_target = move |mut id: NodeId| -> bool {
+            loop {
+                if id == node.id {
+                    return true;
+                }
+                if id == root_id {
+                    return false;
+                }
+                match node.with(id).parent {
+                    Some(parent) => id = parent,
+                    None => return false,
+                }
+            }
+        };
+
+        let root_layout = root.unrounded_layout();
+        let content_box_inset = root_layout.padding + root_layout.border;
+        let origin_x = content_box_inset.left;
+        let origin_y = content_box_inset.top + self.block_offset;
+
+        fn union(acc: &mut Option<taffy::Rect<f32>>, left: f32, top: f32, right: f32, bottom: f32) {
+            *acc = Some(match *acc {
+                Some(rect) => taffy::Rect {
+                    left: rect.left.min(left),
+                    top: rect.top.min(top),
+                    right: rect.right.max(right),
+                    bottom: rect.bottom.max(bottom),
+                },
+                None => taffy::Rect {
+                    left,
+                    top,
+                    right,
+                    bottom,
+                },
+            });
+        }
+
+        // One rect per line box: the union of all of the target's fragments on that line
+        layout.lines().filter_map(move |line| {
+            let line_metrics = line.metrics();
+            let mut line_rect: Option<taffy::Rect<f32>> = None;
+
+            for item in line.items() {
+                match item {
+                    PositionedLayoutItem::GlyphRun(glyph_run) => {
+                        if !is_in_target(glyph_run.style().brush.id) {
+                            continue;
+                        }
+                        let x0 = glyph_run.offset();
+                        let x1 = x0 + glyph_run.advance();
+                        // Use the line box's block extent rather than the
+                        // run's font ascent/descent: fonts with small
+                        // typographic metrics would otherwise produce rects
+                        // that clip the rendered glyphs. This matches the
+                        // geometry used for text selection highlights.
+                        let y0 = line_metrics.block_min_coord;
+                        let y1 = line_metrics.block_max_coord;
+                        union(&mut line_rect, x0, y0, x1, y1);
+                    }
+                    PositionedLayoutItem::InlineBox(inline_box) => {
+                        if !is_in_target(NodeId::from_u64(inline_box.id)) {
+                            continue;
+                        }
+                        let x0 = inline_box.x;
+                        let y0 = inline_box.y;
+                        union(
+                            &mut line_rect,
+                            x0,
+                            y0,
+                            x0 + inline_box.width,
+                            y0 + inline_box.height,
+                        );
+                    }
+                }
+            }
+
+            line_rect.map(|rect| taffy::Rect {
+                left: origin_x + rect.left / scale,
+                top: origin_y + rect.top / scale,
+                right: origin_x + rect.right / scale,
+                bottom: origin_y + rect.bottom / scale,
+            })
+        })
+    }
+
+    fn debug_print(&self) {
+        println!("Size: {}x{}", self.layout.width(), self.layout.height());
+        println!("Text content: {:?}", self.text);
+        println!("Inline Boxes:");
+        for ibox in self.layout.inline_boxes() {
+            print!("(id: {}) ", ibox.id);
+        }
+        println!();
+        println!("Lines:");
+        for (i, line) in self.layout.lines().enumerate() {
+            let metrics = line.metrics();
+            let x = metrics.inline_min_coord;
+            let y = metrics.block_min_coord;
+            let w = metrics.inline_max_coord - metrics.inline_min_coord;
+            let h = metrics.block_max_coord - metrics.block_min_coord;
+            println!("Line {i}: x:{x} y:{y} width:{w} height:{h}");
+            for item in line.items() {
+                print!("  ");
+                match item {
+                    PositionedLayoutItem::GlyphRun(run) => {
+                        print!(
+                            "RUN (x: {}, w: {}) ",
+                            run.offset().round(),
+                            run.run().advance()
+                        )
+                    }
+                    PositionedLayoutItem::InlineBox(ibox) => print!(
+                        "BOX {:?} (id: {} x: {} y: {} w: {}, h: {})",
+                        ibox.kind,
+                        ibox.id,
+                        ibox.x.round(),
+                        ibox.y.round(),
+                        ibox.width.round(),
+                        ibox.height.round()
+                    ),
+                }
+                println!();
+            }
+        }
+    }
+}
+
+impl InlineLayoutEngine for TextLayout {
+    const SETS_WRITING_MODES: bool = false;
+    const READS_ROOM_ABOVE: bool = false;
+
+    fn build_layouts(
+        cx: &mut TextContext,
+        nodes: &crate::NodeTree,
+        _cascade: crate::text::DocumentCascade<'_>,
+        scale: f32,
+        layouts: &mut [(NodeId, Box<Self>)],
+    ) {
+        #[cfg(feature = "parallel-construct")]
+        {
+            use rayon::prelude::*;
+            let cx = &*cx;
+            layouts.par_iter_mut().for_each(|(node_id, layout)| {
+                let mut layout_ctx = LAYOUT_CTX
+                    .take()
+                    .unwrap_or_else(|| Box::new(LayoutContext::new()));
+                let mut font_ctx = cx
+                    .thread_font_contexts
+                    .get_or(|| RefCell::new(Box::new(cx.font_ctx.lock().unwrap().clone())))
+                    .borrow_mut();
+                build::build_inline_layout_into(
+                    nodes,
+                    &mut layout_ctx,
+                    &mut font_ctx,
+                    layout,
+                    scale,
+                    *node_id,
+                );
+                LAYOUT_CTX.set(Some(layout_ctx));
+            });
+        }
+        #[cfg(not(feature = "parallel-construct"))]
+        for (node_id, layout) in layouts {
+            build::build_inline_layout_into(
+                nodes,
+                &mut cx.layout_ctx,
+                &mut cx.font_ctx.lock().unwrap(),
+                layout,
+                scale,
+                *node_id,
+            );
+        }
+    }
+
+    #[inline]
+    fn is_empty(&self) -> bool {
+        self.holds_nothing()
+    }
+
+    fn prepare(&mut self, doc: &mut crate::BaseDocument, root: NodeId, lines: LinesInputs<'_>) {
+        let style = doc.nodes[root].primary_styles();
+        self.prepare_lines(lines.sizes, style.as_deref().map(|style| &**style));
+    }
+
+    #[inline]
+    fn content_widths(&mut self) -> ContentWidths {
+        self.widths()
+    }
+
+    fn break_lines(
+        &mut self,
+        _cx: &mut TextContext,
+        area: LineArea,
+        style: Option<&::style::properties::ComputedValues>,
+        exclusions: &mut impl LineExclusions,
+    ) {
+        self.break_into_lines(area.width, style, exclusions);
+    }
+
+    #[inline]
+    fn extent(&self, _end_padding: f32) -> LinesExtent {
+        self.lines_extent()
+    }
+
+    #[inline]
+    fn set_frame(&mut self, block_offset: f32, _content: taffy::Size<f32>) {
+        self.block_offset = block_offset;
+    }
+
+    fn placements(&self) -> impl Iterator<Item = Placement> {
+        self.box_placements()
+    }
+
+    fn last_line_baseline(&self) -> LastBaseline {
+        match self.lines_extent().last_baseline {
+            Some(baseline) => LastBaseline::At(baseline),
+            None => LastBaseline::None,
+        }
+    }
+
+    #[inline]
+    fn line_flow(&self) -> LineFlow {
+        LineFlow::Horizontal
+    }
+
+    #[inline]
+    fn place_on_page(&self, along: [f32; 2], across: [f32; 2]) -> (f32, f32) {
+        (along[0], across[0])
+    }
+
+    #[inline]
+    fn room_below(&self) -> f32 {
+        0.0
+    }
+
+    #[inline]
+    fn float_node(key: u64) -> Option<NodeId> {
+        Some(NodeId::from_u64(key))
+    }
+
+    #[inline]
+    fn inline_shift(
+        _doc: &crate::BaseDocument,
+        _node: NodeId,
+        _containing: taffy::Size<f32>,
+        _rtl: bool,
+    ) -> taffy::Point<f32> {
+        taffy::Point::ZERO
+    }
+}
diff --git a/packages/blitz-dom/src/stylo_to_parley.rs b/packages/blitz-dom/src/text/parley/style.rs
similarity index 94%
rename from packages/blitz-dom/src/stylo_to_parley.rs
rename to packages/blitz-dom/src/text/parley/style.rs
index 5876f8bcbb..aa7e7324d3 100644
--- a/packages/blitz-dom/src/stylo_to_parley.rs
+++ b/packages/blitz-dom/src/text/parley/style.rs
@@ -4,7 +4,7 @@ use std::borrow::Cow;
 
 use style::values::computed::Length;
 
-use crate::node::TextBrush;
+use super::TextBrush;
 
 // Module of type aliases so we can refer to stylo types with nicer names
 pub(crate) mod stylo {
@@ -174,9 +174,22 @@ pub(crate) fn font_variant_ligatures(
 
 /// Map the `font-variant-caps` property to OpenType features.
 pub(crate) fn font_variant_caps(input: stylo::FontVariantCaps, out: &mut Vec<parley::FontFeature>) {
+    // The stylo fork computes every value, where Servo's computes the first
+    // two. Parley synthesizes none of them: each is its font feature.
     match input {
         stylo::FontVariantCaps::Normal => {}
         stylo::FontVariantCaps::SmallCaps => out.push(feature(b"smcp", 1)),
+        stylo::FontVariantCaps::AllSmallCaps => {
+            out.push(feature(b"c2sc", 1));
+            out.push(feature(b"smcp", 1));
+        }
+        stylo::FontVariantCaps::PetiteCaps => out.push(feature(b"pcap", 1)),
+        stylo::FontVariantCaps::AllPetiteCaps => {
+            out.push(feature(b"c2pc", 1));
+            out.push(feature(b"pcap", 1));
+        }
+        stylo::FontVariantCaps::Unicase => out.push(feature(b"unic", 1)),
+        stylo::FontVariantCaps::TitlingCaps => out.push(feature(b"titl", 1)),
     }
 }
 
@@ -342,6 +355,9 @@ pub(crate) fn white_space_collapse(input: stylo::WhiteSpaceCollapse) -> parley::
 
         stylo::WhiteSpaceCollapse::PreserveBreaks => parley::WhiteSpaceCollapse::PreserveBreaks,
         stylo::WhiteSpaceCollapse::BreakSpaces => parley::WhiteSpaceCollapse::BreakSpaces,
+        // Parley has no mode that keeps spaces but turns segment breaks
+        // into spaces.
+        stylo::WhiteSpaceCollapse::PreserveSpaces => parley::WhiteSpaceCollapse::Preserve,
     }
 }
 
@@ -351,13 +367,13 @@ pub(crate) fn white_space_collapse(input: stylo::WhiteSpaceCollapse) -> parley::
 /// Percentages are resolved against the element's own `line-height`.
 pub(crate) fn vertical_align(style: &stylo::ComputedValues) -> parley::VerticalAlign {
     let box_styles = style.get_box();
-    let alignment = match box_styles.clone_alignment_baseline() {
+    let alignment = match box_styles.slow_clone_alignment_baseline() {
         stylo::AlignmentBaseline::Baseline => parley::AlignmentBaseline::Baseline,
         stylo::AlignmentBaseline::TextTop => parley::AlignmentBaseline::TextTop,
         stylo::AlignmentBaseline::TextBottom => parley::AlignmentBaseline::TextBottom,
         stylo::AlignmentBaseline::Middle => parley::AlignmentBaseline::Middle,
     };
-    let shift = match box_styles.clone_baseline_shift() {
+    let shift = match box_styles.slow_clone_baseline_shift() {
         stylo::BaselineShift::Keyword(stylo::BaselineShiftKeyword::Sub) => {
             parley::BaselineShift::Sub
         }
@@ -469,6 +485,7 @@ pub(crate) fn style(
         stylo::WordBreak::Normal => parley::WordBreak::Normal,
         stylo::WordBreak::BreakAll => parley::WordBreak::BreakAll,
         stylo::WordBreak::KeepAll => parley::WordBreak::KeepAll,
+        stylo::WordBreak::BreakWord => parley::WordBreak::Normal,
     };
     let line_break = match itext_styles.line_break {
         stylo::LineBreak::Loose => parley::LineBreak::Loose,
@@ -476,10 +493,12 @@ pub(crate) fn style(
         stylo::LineBreak::Auto | stylo::LineBreak::Strict => parley::LineBreak::Strict,
         stylo::LineBreak::Anywhere => parley::LineBreak::Anywhere,
     };
-    let overflow_wrap = match itext_styles.overflow_wrap {
-        stylo::OverflowWrap::Normal => parley::OverflowWrap::Normal,
-        stylo::OverflowWrap::BreakWord => parley::OverflowWrap::BreakWord,
-        stylo::OverflowWrap::Anywhere => parley::OverflowWrap::Anywhere,
+    // `word-break: break-word` is `word-break: normal` with `overflow-wrap: anywhere`.
+    let overflow_wrap = match (itext_styles.word_break, itext_styles.overflow_wrap) {
+        (stylo::WordBreak::BreakWord, _) => parley::OverflowWrap::Anywhere,
+        (_, stylo::OverflowWrap::Normal) => parley::OverflowWrap::Normal,
+        (_, stylo::OverflowWrap::BreakWord) => parley::OverflowWrap::BreakWord,
+        (_, stylo::OverflowWrap::Anywhere) => parley::OverflowWrap::Anywhere,
     };
     let text_wrap_mode = text_wrap_mode(itext_styles.text_wrap_mode);
 
@@ -542,8 +561,7 @@ mod tests {
                     tag: FontTag(u32::from_be_bytes(**tag)),
                     value: *value,
                 })
-                .collect::<Vec<_>>()
-                .into_boxed_slice(),
+                .collect(),
         )
     }
 
diff --git a/packages/blitz-dom/src/text/winkin/editor.rs b/packages/blitz-dom/src/text/winkin/editor.rs
new file mode 100644
index 0000000000..e57188d6d1
--- /dev/null
+++ b/packages/blitz-dom/src/text/winkin/editor.rs
@@ -0,0 +1,643 @@
+//! The text of an `<input>` or `<textarea>` under winkin.
+//!
+//! The value is laid out by winkin as plain text in the control's style, on one line or wrapped
+//! at the control's width, with white space preserved. Text is inserted and deleted at the
+//! selection, which winkin's selection motions move by character, word, line, paragraph and the
+//! whole text, and points are hit tested against the lines. Text an input method is composing is
+//! laid out in place of the selection, underlined, until it is committed or cancelled. Every
+//! change to the text can be undone and redone.
+//!
+//! Where the style masks the text (`-webkit-text-security`, which a password field has), the
+//! layout holds a mask for each grapheme, and the editor maps positions between the text and the
+//! layout through winkin's offset map. The selection and the composition stay in the text.
+
+use std::borrow::Cow;
+use std::ops::Range;
+
+use blitz_traits::node_id::NodeId;
+use kurbo::{Rect, Size};
+use style::properties::ComputedValues;
+use style::servo_arc::Arc as ServoArc;
+use winkin::NodeKey;
+use winkin::config::PastLines;
+use winkin::selection::{Affinity, Granularity, MotionDirection, Position, Selection};
+
+use super::{PIECE_KEYS, PIECE_SHIFT, TextContext, TextLayout};
+use crate::text::{Edit, EditEngine, EditableText, EditorMetrics, Motion};
+
+/// How many changes can be undone.
+const HISTORY_LIMIT: usize = 100;
+
+/// The text and selection an undo or a redo returns to.
+#[derive(Clone)]
+struct Snapshot {
+    text: String,
+    selection: Selection,
+}
+
+/// Text an input method is composing, laid out in the text in place of the selection it began
+/// at.
+struct Composition {
+    /// The text and selection before composing began, which cancelling returns to.
+    original: Snapshot,
+    /// Where the composing text is in the text.
+    range: Range<usize>,
+    /// Whether the input method shows a caret in the composing text.
+    caret_visible: bool,
+}
+
+/// Where the pieces of the text the layout was built in start: the text before, inside and after
+/// the composing text or the text shown in the clear.
+#[derive(Clone, Copy, Debug, Default)]
+struct Pieces {
+    starts: [usize; 3],
+    len: usize,
+}
+
+impl Pieces {
+    /// The pieces of text `len` bytes long around `middle`, or the whole text as the first.
+    fn new(len: usize, middle: Option<Range<usize>>) -> Self {
+        let middle = middle.unwrap_or(len..len);
+        Self {
+            starts: [0, middle.start, middle.end],
+            len,
+        }
+    }
+
+    /// The bytes of the text piece `piece` holds.
+    fn range(&self, piece: usize) -> Range<usize> {
+        let end = self.starts.get(piece + 1).copied().unwrap_or(self.len);
+        self.starts[piece]..end
+    }
+}
+
+/// The text of an `<input>` or `<textarea>`, laid out by winkin.
+pub struct TextEditor {
+    /// The text, with any text an input method is composing.
+    text: String,
+    selection: Selection,
+    is_multiline: bool,
+    /// The control, and its computed style, which the text is set in.
+    style: Option<(NodeId, ServoArc<ComputedValues>)>,
+    scale: f32,
+    /// The width lines wrap at in a `<textarea>`, in device pixels.
+    width: Option<f32>,
+    layout: TextLayout,
+    /// Whether a setter changed what the text is laid out with since it was last laid out.
+    dirty: bool,
+    undo: Vec<Snapshot>,
+    redo: Vec<Snapshot>,
+    composition: Option<Composition>,
+    /// The text a password field shows in the clear: the character typed last.
+    revealed: Option<Range<usize>>,
+    /// Whether the layout masks or transforms the text, and so maps its positions through its
+    /// offset map.
+    masked: bool,
+    /// The pieces the layout was built in.
+    pieces: Pieces,
+    /// How many times the text has been laid out.
+    builds: u64,
+}
+
+impl TextEditor {
+    /// The laid-out text, which the renderer paints, once it is laid out.
+    pub fn text_layout(&self) -> &TextLayout {
+        &self.layout
+    }
+
+    /// The selection, in bytes of the text.
+    pub fn selection_range(&self) -> Range<usize> {
+        self.selection.range()
+    }
+
+    /// The selection, in bytes of the layout's text, which differs from the text where the layout
+    /// masks it.
+    pub fn layout_selection_range(&self) -> Range<usize> {
+        let Some(layout) = self.layout.layout() else {
+            return self.selection.range();
+        };
+        let range = self.selection.range();
+        let start = self
+            .layout_position(layout, Position::from(range.start))
+            .offset;
+        let end = self
+            .layout_position(layout, Position::new(range.end, Affinity::Upstream))
+            .offset;
+        start..end.max(start)
+    }
+
+    /// Where `position` in the text is in `layout`, the layout of the text.
+    fn layout_position(&self, layout: &winkin::Layout, position: Position) -> Position {
+        if !self.masked {
+            return position;
+        }
+        let offset = position.offset.min(self.pieces.len);
+        // At a boundary between pieces, upstream takes the piece before it and downstream the
+        // one after. A piece holding no text has no node.
+        let mut holding = (0..3).filter(|&piece| {
+            let range = self.pieces.range(piece);
+            !range.is_empty() && range.start <= offset && offset <= range.end
+        });
+        let piece = match position.affinity {
+            Affinity::Upstream => holding.next(),
+            Affinity::Downstream => holding.next_back(),
+        };
+        let Some(piece) = piece else {
+            return Position::new(0, position.affinity);
+        };
+        let key = NodeKey(self.node_key() | (piece as u64) << PIECE_SHIFT);
+        let start = self.pieces.starts[piece];
+        layout
+            .position(key, offset - start, position.affinity)
+            .unwrap_or(Position::new(0, position.affinity))
+    }
+
+    /// Where `position` in `layout`, the layout of the text, is in the text.
+    fn text_position(&self, layout: &winkin::Layout, position: Position) -> Position {
+        if !self.masked {
+            return position;
+        }
+        let Some(source) = layout.node_position(position) else {
+            return Position::new(0, position.affinity);
+        };
+        let piece = ((source.key.0 & PIECE_KEYS) >> PIECE_SHIFT).min(2) as usize;
+        let offset = (self.pieces.starts[piece] + source.offset).min(self.text.len());
+        Position::new(offset, position.affinity)
+    }
+
+    /// The key the layout gives the control's node, without a piece's number.
+    fn node_key(&self) -> u64 {
+        self.style.as_ref().map_or(0, |(node, _)| node.as_u64())
+    }
+
+    /// Where the text an input method is composing is, in bytes of the text, while it composes.
+    pub fn composition_range(&self) -> Option<Range<usize>> {
+        self.composition
+            .as_ref()
+            .map(|composition| composition.range.clone())
+    }
+
+    /// Lays the text out again in the control's style.
+    fn relayout(&mut self, cx: &mut TextContext) {
+        self.dirty = false;
+        let Some((node, style)) = &self.style else {
+            return;
+        };
+        let width = if self.is_multiline { self.width } else { None };
+        let composition = self.composition_range();
+        let revealed = self.revealed.clone().filter(|_| composition.is_none());
+        self.pieces = Pieces::new(self.text.len(), composition.clone().or(revealed.clone()));
+        self.builds += 1;
+        self.masked = super::build_plain_text(
+            cx,
+            &mut self.layout,
+            *node,
+            style,
+            &self.text,
+            composition,
+            revealed,
+            self.scale,
+            width,
+        );
+    }
+
+    /// Clamps the selection to the text, at character boundaries.
+    fn clamp_selection(&mut self) {
+        let clamp = |position: Position| {
+            let mut offset = position.offset.min(self.text.len());
+            while !self.text.is_char_boundary(offset) {
+                offset -= 1;
+            }
+            Position::new(offset, position.affinity)
+        };
+        self.selection = Selection::new(
+            clamp(self.selection.anchor()),
+            clamp(self.selection.focus()),
+        );
+    }
+
+    fn snapshot(&self) -> Snapshot {
+        Snapshot {
+            text: self.text.clone(),
+            selection: self.selection,
+        }
+    }
+
+    /// Returns the text and the selection to `snapshot`, and lays the text out again.
+    fn restore(&mut self, cx: &mut TextContext, snapshot: Snapshot) {
+        self.text = snapshot.text;
+        self.selection = snapshot.selection;
+        self.clamp_selection();
+        self.relayout(cx);
+    }
+
+    /// Records `before` as the state an undo returns to, which drops what could be redone.
+    fn remember(&mut self, before: Snapshot) {
+        if self.undo.len() == HISTORY_LIMIT {
+            self.undo.remove(0);
+        }
+        self.undo.push(before);
+        self.redo.clear();
+    }
+
+    /// Drops the history, as a change of the text from outside the editor does.
+    fn forget(&mut self) {
+        self.undo.clear();
+        self.redo.clear();
+    }
+
+    /// Removes the text an input method is composing, returning the text and the selection to
+    /// what they were before it began.
+    fn cancel_composition(&mut self, cx: &mut TextContext) {
+        if let Some(composition) = self.composition.take() {
+            self.restore(cx, composition.original);
+        }
+    }
+
+    /// Replaces the selection with `text`, leaving a caret after it, as one change to undo.
+    fn replace_selection(&mut self, cx: &mut TextContext, text: &str) {
+        self.cancel_composition(cx);
+        let range = self.selection.range();
+        if range.is_empty() && text.is_empty() {
+            return;
+        }
+        let before = self.snapshot();
+        self.replace(cx, range, text, before);
+    }
+
+    /// Replaces `range` with `text`, leaving a caret after it, as one change, which an undo
+    /// takes back to `before`.
+    fn replace(&mut self, cx: &mut TextContext, range: Range<usize>, text: &str, before: Snapshot) {
+        self.remember(before);
+        self.text.replace_range(range.clone(), text);
+        self.selection = Selection::from(Position::from(range.start + text.len()));
+        self.relayout(cx);
+    }
+
+    /// Deletes the selection or, where it is a caret, what `granularity` takes in `direction`.
+    fn delete(
+        &mut self,
+        cx: &mut TextContext,
+        direction: MotionDirection,
+        granularity: Granularity,
+    ) {
+        self.cancel_composition(cx);
+        let before = self.snapshot();
+        if self.selection.is_collapsed() {
+            self.modify(direction.extending(granularity));
+        }
+        let range = self.selection.range();
+        if range.is_empty() {
+            self.selection = before.selection;
+        } else {
+            self.replace(cx, range, "", before);
+        }
+    }
+
+    /// Lays out `text` as what an input method is composing, in place of the selection or of the
+    /// text it composed before, with the selection `cursor` sets inside it.
+    fn compose(&mut self, cx: &mut TextContext, text: &str, cursor: Option<(usize, usize)>) {
+        if text.is_empty() {
+            self.cancel_composition(cx);
+            return;
+        }
+        let composition = self.composition.take().unwrap_or_else(|| Composition {
+            original: self.snapshot(),
+            range: self.selection.range(),
+            caret_visible: true,
+        });
+        let start = composition.range.start;
+        self.text.replace_range(composition.range, text);
+        // The input method's offsets are bytes of the composing text.
+        let boundary = |offset: usize| {
+            let mut offset = offset.min(text.len());
+            while !text.is_char_boundary(offset) {
+                offset -= 1;
+            }
+            start + offset
+        };
+        let (anchor, focus) = cursor.unwrap_or((text.len(), text.len()));
+        self.selection = Selection::new(
+            Position::from(boundary(anchor)),
+            Position::from(boundary(focus)),
+        );
+        self.composition = Some(Composition {
+            original: composition.original,
+            range: start..start + text.len(),
+            caret_visible: cursor.is_some(),
+        });
+        self.relayout(cx);
+    }
+
+    /// Returns to the state before the last change, keeping the present one to redo.
+    fn undo(&mut self, cx: &mut TextContext) {
+        self.cancel_composition(cx);
+        if let Some(snapshot) = self.undo.pop() {
+            self.redo.push(self.snapshot());
+            self.restore(cx, snapshot);
+        }
+    }
+
+    /// Makes the last change undone again.
+    fn redo(&mut self, cx: &mut TextContext) {
+        self.cancel_composition(cx);
+        if let Some(snapshot) = self.redo.pop() {
+            self.undo.push(self.snapshot());
+            self.restore(cx, snapshot);
+        }
+    }
+
+    /// Moves or extends the selection by `motion`, where the text is laid out.
+    ///
+    /// Where the layout masks the text, the selection moves in the layout and is mapped back, so
+    /// it keeps no column for line motion.
+    fn modify(&mut self, motion: winkin::selection::Motion) {
+        let Some(layout) = self.layout.layout() else {
+            return;
+        };
+        if !self.masked {
+            self.selection.modify(layout, motion);
+            return;
+        }
+        let mut selection = Selection::new(
+            self.layout_position(layout, self.selection.anchor()),
+            self.layout_position(layout, self.selection.focus()),
+        );
+        selection.modify(layout, motion);
+        self.selection = Selection::new(
+            self.text_position(layout, selection.anchor()),
+            self.text_position(layout, selection.focus()),
+        );
+    }
+
+    /// The text position nearest the point, where the text is laid out.
+    fn hit(&self, x: f32, y: f32) -> Option<Position> {
+        let layout = self.layout.layout()?;
+        let position = layout.hit_test(x, y, PastLines::Column)?;
+        Some(self.text_position(layout, position))
+    }
+
+    /// The byte range of what is around `offset` up to the nearest boundaries `is_boundary`
+    /// finds on either side.
+    fn expand(&self, offset: usize, is_boundary: impl Fn(char) -> bool) -> Range<usize> {
+        let start = self.text[..offset]
+            .char_indices()
+            .rev()
+            .find(|(_, ch)| is_boundary(*ch))
+            .map_or(0, |(at, ch)| at + ch.len_utf8());
+        let end = self.text[offset..]
+            .char_indices()
+            .find(|(_, ch)| is_boundary(*ch))
+            .map_or(self.text.len(), |(at, _)| offset + at);
+        start..end
+    }
+}
+
+/// Where `motion` moves a caret, as winkin's selection motions do it.
+fn motion(motion: Motion, extend: bool) -> winkin::selection::Motion {
+    use MotionDirection::{Backward, Forward, Left, Right};
+    let (direction, granularity) = match motion {
+        Motion::Left => (Left, Granularity::Character),
+        Motion::Right => (Right, Granularity::Character),
+        Motion::WordLeft => (Left, Granularity::Word),
+        Motion::WordRight => (Right, Granularity::Word),
+        Motion::Up => (Backward, Granularity::Line),
+        Motion::Down => (Forward, Granularity::Line),
+        Motion::LineStart => (Backward, Granularity::LineBoundary),
+        Motion::LineEnd => (Forward, Granularity::LineBoundary),
+        Motion::HardLineStart => (Backward, Granularity::ParagraphBoundary),
+        Motion::HardLineEnd => (Forward, Granularity::ParagraphBoundary),
+        Motion::TextStart => (Backward, Granularity::DocumentBoundary),
+        Motion::TextEnd => (Forward, Granularity::DocumentBoundary),
+    };
+    if extend {
+        direction.extending(granularity)
+    } else {
+        direction.moving(granularity)
+    }
+}
+
+impl EditableText for TextEditor {
+    fn raw_text(&self) -> &str {
+        &self.text
+    }
+
+    fn text(&self) -> Cow<'_, str> {
+        match &self.composition {
+            Some(composition) => {
+                let mut text = self.text.clone();
+                text.replace_range(composition.range.clone(), "");
+                Cow::Owned(text)
+            }
+            None => Cow::Borrowed(&self.text),
+        }
+    }
+
+    fn selection(&self) -> Range<usize> {
+        self.selection.range()
+    }
+
+    fn selected_text(&self) -> Option<&str> {
+        let range = self.selection.range();
+        (self.composition.is_none() && !range.is_empty()).then(|| &self.text[range])
+    }
+
+    fn is_selection_collapsed(&self) -> bool {
+        self.selection.is_collapsed()
+    }
+
+    fn revealed_range(&self) -> Option<Range<usize>> {
+        self.revealed.clone()
+    }
+
+    fn metrics(&self) -> Option<EditorMetrics> {
+        let layout = self.layout.layout().filter(|_| !self.dirty)?;
+        let width = layout
+            .lines()
+            .map(|line| {
+                let metrics = line.metrics();
+                metrics.left + metrics.width
+            })
+            .fold(0.0, f32::max);
+        Some(EditorMetrics {
+            size: Size::new(f64::from(width), f64::from(layout.metrics().block_end)),
+            scale: self.scale,
+        })
+    }
+
+    fn caret_rect(&self) -> Option<Rect> {
+        if self
+            .composition
+            .as_ref()
+            .is_some_and(|composition| !composition.caret_visible)
+        {
+            return None;
+        }
+        let layout = self.layout.layout().filter(|_| !self.dirty)?;
+        let caret = layout.caret(self.layout_position(layout, self.selection.focus()))?;
+        let metrics = layout.line(caret.line)?.metrics();
+        let x = f64::from(metrics.left + caret.inline.left);
+        Some(Rect::new(
+            x,
+            f64::from(metrics.top + caret.block.over),
+            x + 1.5,
+            f64::from(metrics.top + caret.block.under),
+        ))
+    }
+}
+
+impl EditEngine for TextEditor {
+    fn new(is_multiline: bool) -> Self {
+        Self {
+            text: String::new(),
+            selection: Selection::default(),
+            is_multiline,
+            style: None,
+            scale: 1.0,
+            width: None,
+            layout: TextLayout::default(),
+            dirty: false,
+            undo: Vec::new(),
+            redo: Vec::new(),
+            composition: None,
+            revealed: None,
+            masked: false,
+            pieces: Pieces::default(),
+            builds: 0,
+        }
+    }
+
+    fn set_initial_text(&mut self, text: &str) {
+        self.text = text.to_string();
+        self.selection = Selection::from(Position::from(text.len()));
+        self.composition = None;
+        self.revealed = None;
+        self.forget();
+    }
+
+    fn set_text(&mut self, text: &str) {
+        if self.revealed.take().is_some() {
+            self.dirty = true;
+        }
+        if self.text != text {
+            self.text = text.to_string();
+            self.composition = None;
+            self.forget();
+            self.clamp_selection();
+            self.dirty = true;
+        }
+    }
+
+    fn set_style(&mut self, node: NodeId, style: Option<&ComputedValues>, scale: f32) {
+        self.style = style.map(|style| (node, ServoArc::new(style.clone())));
+        self.scale = scale;
+        self.width = None;
+        self.dirty = true;
+    }
+
+    fn restyle(&mut self, node: NodeId, style: &ServoArc<ComputedValues>) -> bool {
+        // The alignment, indent, wrap style and fit change without a new box.
+        let changed = self.style.as_ref().is_some_and(|(_, held)| {
+            !ServoArc::ptr_eq(held, style) && super::block_text_differs(held, style)
+        });
+        if changed {
+            self.style = Some((node, style.clone()));
+            self.dirty = true;
+        }
+        changed
+    }
+
+    fn set_scale(&mut self, scale: f32) {
+        if self.scale != scale {
+            self.scale = scale;
+            self.dirty = true;
+        }
+    }
+
+    fn set_width(&mut self, width: Option<f32>) {
+        if self.width != width {
+            self.width = width;
+            self.dirty |= self.is_multiline;
+        }
+    }
+
+    fn refresh(&mut self, cx: &mut TextContext) {
+        if self.dirty {
+            self.relayout(cx);
+        }
+    }
+
+    fn edit(&mut self, cx: &mut TextContext, edit: Edit<'_>) {
+        self.refresh(cx);
+        // Composing ends where anything but the input method changes the text or the selection.
+        if !matches!(edit, Edit::SetCompose(..)) {
+            self.cancel_composition(cx);
+        }
+        // Any change masks the text shown in the clear. The edit lays the text out again without
+        // it, or else it is laid out again after the edit, which reads the layout it was in.
+        let concealed = self.revealed.take().is_some();
+        let builds = self.builds;
+        match edit {
+            Edit::Insert(text) => self.replace_selection(cx, text),
+            Edit::InsertRevealed(text) => {
+                let start = self.selection.range().start;
+                self.revealed = (!text.is_empty()).then_some(start..start + text.len());
+                self.replace_selection(cx, text);
+            }
+            Edit::Conceal => {}
+            Edit::Delete => self.delete(cx, MotionDirection::Forward, Granularity::Character),
+            Edit::Backdelete => self.delete(cx, MotionDirection::Backward, Granularity::Character),
+            Edit::DeleteWord => self.delete(cx, MotionDirection::Forward, Granularity::Word),
+            Edit::BackdeleteWord => self.delete(cx, MotionDirection::Backward, Granularity::Word),
+            Edit::DeleteSelection => self.replace_selection(cx, ""),
+            Edit::Move(to) => self.modify(motion(to, false)),
+            Edit::Extend(to) => self.modify(motion(to, true)),
+            Edit::Select(from, to) => {
+                self.modify(motion(from, false));
+                self.modify(motion(to, true));
+            }
+            Edit::SelectAll => {
+                self.selection = Selection::new(Position::from(0), Position::from(self.text.len()));
+            }
+            Edit::CollapseSelection => {
+                self.selection = Selection::from(self.selection.focus());
+            }
+            Edit::SelectByteRange(start, end) => {
+                self.selection = Selection::new(Position::from(start), Position::from(end));
+                self.clamp_selection();
+            }
+            Edit::SetCompose(text, cursor) => self.compose(cx, text, cursor),
+            // Cancelled above.
+            Edit::ClearCompose => {}
+            Edit::Undo => self.undo(cx),
+            Edit::Redo => self.redo(cx),
+            Edit::MoveToPoint(x, y) => {
+                if let Some(position) = self.hit(x, y) {
+                    self.selection = Selection::from(position);
+                }
+            }
+            Edit::ExtendSelectionToPoint(x, y) | Edit::ShiftClickExtension(x, y) => {
+                if let Some(position) = self.hit(x, y) {
+                    self.selection = Selection::new(self.selection.anchor(), position);
+                }
+            }
+            Edit::SelectWordAtPoint(x, y) => {
+                if let Some(position) = self.hit(x, y) {
+                    let range = self.expand(position.offset, |ch| !ch.is_alphanumeric());
+                    self.selection =
+                        Selection::new(Position::from(range.start), Position::from(range.end));
+                }
+            }
+            Edit::SelectHardLineAtPoint(x, y) => {
+                if let Some(position) = self.hit(x, y) {
+                    let range = self.expand(position.offset, |ch| ch == '\n');
+                    self.selection =
+                        Selection::new(Position::from(range.start), Position::from(range.end));
+                }
+            }
+        }
+        if concealed && self.builds == builds {
+            self.relayout(cx);
+        }
+    }
+}
diff --git a/packages/blitz-dom/src/text/winkin/fonts.rs b/packages/blitz-dom/src/text/winkin/fonts.rs
new file mode 100644
index 0000000000..77fc4c2ca7
--- /dev/null
+++ b/packages/blitz-dom/src/text/winkin/fonts.rs
@@ -0,0 +1,374 @@
+//! winkin's fonts: the collection documents lay text out with, `@font-face` registration, and
+//! the font metrics Stylo resolves font-relative units with.
+
+use std::sync::{Arc, RwLock};
+
+use app_units::Au;
+use blitz_traits::net::Bytes;
+use fontwich::{
+    Attributes, Collection, FallbackKey, FallbackOverride, FallbackRequest, Family, FontBytes,
+    FontStyle, FontWeight, FontWidth, LayerBuilder, Role,
+};
+use skrifa::MetadataProvider as _;
+use skrifa::instance::{LocationRef, Size};
+use skrifa::metrics::{GlyphMetrics, Metrics};
+use style::device::servo::FontMetricsProvider;
+use style::font_metrics::FontMetrics;
+use style::properties::style_structs::Font as FontStyles;
+use style::values::computed::font::{
+    FontSizeAdjust, FontStyle as StyloFontStyle, QueryFontMetricsFlags,
+};
+use style::values::computed::{CSSPixelLength, Length};
+use winkin::style::FontFamilyName;
+use winkin::{Context, SharedFonts};
+
+use super::TextContext;
+use crate::net::FontFaceOverrides;
+use crate::text::{DocumentText, TextFonts};
+
+/// The fonts documents lay text out with: a fontwich collection and the parsed fonts every
+/// context shares. Clones share loaded fonts, fallback answers and parsed fonts, so hand a clone
+/// of one to every document rather than listing the platform's fonts for each.
+#[derive(Clone)]
+pub struct FontContext {
+    collection: Collection,
+    shared: SharedFonts,
+}
+
+impl FontContext {
+    /// The platform's fonts, where Blitz is built to read them (`system-fonts`), and no fonts
+    /// otherwise.
+    pub fn new() -> Self {
+        #[cfg(all(feature = "system-fonts", not(target_arch = "wasm32")))]
+        let collection = Collection::system();
+        #[cfg(not(all(feature = "system-fonts", not(target_arch = "wasm32"))))]
+        let collection = Collection::new();
+        Self::from_collection(collection)
+    }
+
+    /// The fonts in `collection`.
+    pub fn from_collection(collection: Collection) -> Self {
+        Self {
+            collection,
+            shared: SharedFonts::default(),
+        }
+    }
+
+    /// The fontwich collection.
+    pub fn collection(&self) -> &Collection {
+        &self.collection
+    }
+
+    /// The parsed fonts every context made from this one shares.
+    pub(crate) fn shared_fonts(&self) -> &SharedFonts {
+        &self.shared
+    }
+}
+
+impl Default for FontContext {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+/// Fallback to the families of one layer, for every request: every generic family, and every
+/// character, resolves to them.
+struct OnlyFamilies(Vec<String>);
+
+impl FallbackOverride for OnlyFamilies {
+    fn families(&self, _key: &FallbackKey, collection: &Collection, out: &mut Vec<Family>) {
+        out.extend(self.0.iter().filter_map(|name| collection.family(name)));
+    }
+}
+
+impl TextFonts for FontContext {
+    fn with_single_font(font_data: &[u8]) -> Self {
+        let mut layer = LayerBuilder::new(Role::Application);
+        let decoded = crate::decode_font_bytes(font_data).into_owned();
+        let families = layer.add_data(FontBytes::new(decoded)).unwrap_or_default();
+        let names = families
+            .iter()
+            .map(|family| family.name().to_string())
+            .collect();
+        layer.set_fallback_override(OnlyFamilies(names));
+        Self::from_collection(Collection::new().with_layer(layer.snapshot()))
+    }
+
+    fn add_fonts(&mut self, font_data: impl Into<Bytes>) {
+        let mut layer = LayerBuilder::new(Role::Application);
+        let font_data = font_data.into();
+        let bytes = match crate::decode_font_bytes(&font_data) {
+            std::borrow::Cow::Owned(decoded) => FontBytes::new(decoded),
+            std::borrow::Cow::Borrowed(_) => FontBytes::new(font_data),
+        };
+        if layer.add_data(bytes).is_ok() {
+            self.collection.push(layer.snapshot());
+        }
+    }
+}
+
+impl DocumentText for TextContext {
+    fn new(fonts: Option<FontContext>) -> Self {
+        let given = fonts.unwrap_or_default();
+        let mut shipped = LayerBuilder::new(Role::Application);
+        let _ = shipped.add_data(FontBytes::from(crate::BULLET_FONT));
+        let base = given.collection.clone().with_layer(shipped.snapshot());
+        let document = LayerBuilder::new(Role::Document);
+        let collection = base.clone().with_layer(document.snapshot());
+        Self {
+            cx: Context::with_shared_fonts(collection.clone(), given.shared.clone()),
+            generation: 0,
+            #[cfg(feature = "parallel-construct")]
+            threads: thread_local::ThreadLocal::new(),
+            metrics: Arc::new(RwLock::new(collection)),
+            given,
+            base,
+            document,
+        }
+    }
+
+    fn fonts(&self) -> FontContext {
+        self.given.clone()
+    }
+
+    fn add_web_font(&mut self, bytes: Bytes, overrides: &FontFaceOverrides) {
+        // A rule with no family, or bytes that are not a font, adds nothing, as CSS falls back
+        // past a face whose download is no font.
+        let bytes = FontBytes::new(bytes);
+        let added = match overrides.family_name.as_deref() {
+            Some(family) => self
+                .document
+                .add_face(
+                    family,
+                    fontwich_descriptors(&overrides.descriptors),
+                    Some((bytes, 0)),
+                )
+                .is_ok(),
+            None => self.document.add_data(bytes).is_ok(),
+        };
+        if added {
+            let collection = self.base.clone().with_layer(self.document.snapshot());
+            self.cx.set_collection(collection.clone());
+            self.generation += 1;
+            *self.metrics.write().unwrap() = collection;
+        }
+    }
+
+    fn font_metrics_provider(&self) -> Box<dyn FontMetricsProvider> {
+        Box::new(WinkinFontMetricsProvider {
+            fonts: self.metrics.clone(),
+        })
+    }
+}
+
+/// Font metrics from the fonts a document's text is laid out with: the first font in the family
+/// list that maps the character measured, then the platform's standard font.
+struct WinkinFontMetricsProvider {
+    fonts: Arc<RwLock<Collection>>,
+}
+
+impl core::fmt::Debug for WinkinFontMetricsProvider {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        write!(f, "WinkinFontMetricsProvider")
+    }
+}
+
+/// The bytes of a font, and its index in them.
+type LoadedFont = (FontBytes, u32);
+
+impl WinkinFontMetricsProvider {
+    /// The first font of `families`, matched to `attributes`, that maps `ch`; or else the
+    /// standard font's.
+    fn font_for(
+        fonts: &Collection,
+        families: &[FontFamilyName<'_>],
+        attributes: Attributes,
+        ch: char,
+    ) -> Option<LoadedFont> {
+        let request = FallbackRequest::Standard(None);
+        let standard = fonts.fallback(&fonts.key(&request)).first().cloned();
+        families
+            .iter()
+            .filter_map(|name| fonts.resolve(name, &request))
+            .chain(standard)
+            .find_map(|family| {
+                let font = family.match_font(attributes, true)?;
+                if font.is_pending() || !font.serves(ch) || !font.charset().contains(ch) {
+                    return None;
+                }
+                Some((font.load()?, font.index()))
+            })
+    }
+}
+
+impl FontMetricsProvider for WinkinFontMetricsProvider {
+    fn query_font_metrics(
+        &self,
+        vertical: bool,
+        font_styles: &FontStyles,
+        font_size: CSSPixelLength,
+        _flags: QueryFontMetricsFlags,
+    ) -> FontMetrics {
+        let fonts = self.fonts.read().unwrap();
+        let families: Vec<FontFamilyName<'_>> = font_styles
+            .font_family
+            .families
+            .list
+            .iter()
+            .map(super::style::font_family_name)
+            .collect();
+        let attributes = Attributes {
+            width: FontWidth::from_percentage(font_styles.font_width.0.to_float()),
+            weight: FontWeight::new(font_styles.font_weight.value()),
+            style: match font_styles.font_style {
+                StyloFontStyle::NORMAL => FontStyle::Normal,
+                StyloFontStyle::ITALIC => FontStyle::Italic,
+                oblique => FontStyle::Oblique(Some(oblique.oblique_degrees())),
+            },
+        };
+        let variations: Vec<(skrifa::Tag, f32)> = font_styles
+            .font_variation_settings
+            .0
+            .iter()
+            .map(|setting| {
+                (
+                    skrifa::Tag::from_be_bytes(setting.tag.0.to_be_bytes()),
+                    setting.value,
+                )
+            })
+            .collect();
+
+        // The advance of `ch`, scaled as winkin scales a shaped advance: font units times size
+        // over units per em. Text set upright in a vertical line advances down it: by the
+        // glyph's `vmtx` height, or else by the font's ascent and descent, as HarfBuzz
+        // advances a glyph vertically without one.
+        let advance_of = |ch: char| -> Option<f32> {
+            let (bytes, index) = Self::font_for(&fonts, &families, attributes, ch)?;
+            let font = skrifa::FontRef::from_index(bytes.data(), index).ok()?;
+            let location = font.axes().location(variations.iter().copied());
+            let location = LocationRef::from(&location);
+            let upem = Metrics::new(&font, Size::unscaled(), location).units_per_em;
+            if upem == 0 {
+                return None;
+            }
+            let glyph = font.charmap().map(ch)?;
+            let advance = if vertical {
+                use skrifa::raw::TableProvider as _;
+                match font.vmtx().ok().and_then(|vmtx| vmtx.advance(glyph)) {
+                    Some(advance) => f32::from(advance),
+                    None => {
+                        let metrics = Metrics::new(&font, Size::unscaled(), location);
+                        metrics.ascent - metrics.descent
+                    }
+                }
+            } else {
+                GlyphMetrics::new(&font, Size::unscaled(), location).advance_width(glyph)?
+            };
+            Some(advance * (font_size.px() / f32::from(upem)))
+        };
+        let metrics_of = |ch: char| -> Option<(f32, Option<f32>, Option<f32>)> {
+            let (bytes, index) = Self::font_for(&fonts, &families, attributes, ch)?;
+            let font = skrifa::FontRef::from_index(bytes.data(), index).ok()?;
+            let location = font.axes().location(variations.iter().copied());
+            let metrics = Metrics::new(
+                &font,
+                Size::new(font_size.px()),
+                LocationRef::from(&location),
+            );
+            Some((metrics.ascent, metrics.x_height, metrics.cap_height))
+        };
+
+        let zero_advance = advance_of('0');
+        let ic_advance = advance_of('\u{6C34}');
+        let (ascent, x_height, cap_height) = metrics_of(' ').unwrap_or((0.0, None, None));
+
+        let x_height = x_height.filter(|xh| *xh != 0.0);
+        // `font-size-adjust` scales the font to its used size, which the font-relative units
+        // measure: the metric it names, over the size, is set to its value.
+        let metric = match font_styles.font_size_adjust {
+            FontSizeAdjust::None => None,
+            FontSizeAdjust::ExHeight(value) => x_height.map(|metric| (value, metric)),
+            FontSizeAdjust::CapHeight(value) => cap_height.map(|metric| (value, metric)),
+            FontSizeAdjust::ChWidth(value) => zero_advance.map(|metric| (value, metric)),
+            FontSizeAdjust::IcWidth(value) | FontSizeAdjust::IcHeight(value) => {
+                ic_advance.map(|metric| (value, metric))
+            }
+        };
+        let scale = metric
+            .map(|(value, metric)| value.0 * font_size.px() / metric)
+            .filter(|scale| scale.is_finite() && *scale >= 0.0)
+            .unwrap_or(1.0);
+        let scaled = |metric: f32| CSSPixelLength::new(metric * scale);
+
+        FontMetrics {
+            ascent: scaled(ascent),
+            x_height: x_height.map(scaled),
+            cap_height: cap_height.map(scaled),
+            zero_advance_measure: zero_advance.map(scaled),
+            ic_width: ic_advance.map(scaled),
+            script_percent_scale_down: None,
+            script_script_percent_scale_down: None,
+        }
+    }
+
+    fn base_size_for_generic(
+        &self,
+        generic: style::values::computed::font::GenericFontFamily,
+    ) -> Length {
+        let size = match generic {
+            style::values::computed::font::GenericFontFamily::Monospace => 13.0,
+            _ => 16.0,
+        };
+        Length::from(Au::from_f32_px(size))
+    }
+}
+
+/// An `@font-face` rule's descriptors as fontwich declares a face with them.
+fn fontwich_descriptors(descriptors: &crate::text::FaceDescriptors) -> fontwich::FaceDescriptors {
+    use crate::text::parlance::FontStyle;
+    use fontwich::{FaceStyle, FontWeight, FontWidth};
+    use winkin::style::{FontFeature, FontVariation, Tag};
+
+    /// The angle CSS gives an `oblique` that names none.
+    const OBLIQUE: f32 = 14.0;
+    fontwich::FaceDescriptors {
+        weight: descriptors
+            .weight
+            .map(|(min, max)| (FontWeight::new(min.value()), FontWeight::new(max.value()))),
+        width: descriptors.width.map(|(min, max)| {
+            (
+                FontWidth::from_ratio(min.ratio()),
+                FontWidth::from_ratio(max.ratio()),
+            )
+        }),
+        style: descriptors.style.map(|style| match style {
+            (FontStyle::Normal, _) => FaceStyle::Normal,
+            (FontStyle::Italic, _) => FaceStyle::Italic,
+            (FontStyle::Oblique(min), max) => {
+                let max = match max {
+                    FontStyle::Oblique(max) => max.or(min),
+                    _ => min,
+                };
+                FaceStyle::Oblique(min.unwrap_or(OBLIQUE), max.unwrap_or(OBLIQUE))
+            }
+        }),
+        unicode_range: descriptors.unicode_range.clone(),
+        feature_settings: descriptors
+            .feature_settings
+            .iter()
+            .map(|feature| FontFeature::new(Tag::from_bytes(feature.tag.to_bytes()), feature.value))
+            .collect(),
+        variation_settings: descriptors
+            .variation_settings
+            .iter()
+            .map(|variation| FontVariation {
+                tag: Tag::from_bytes(variation.tag.to_bytes()),
+                value: variation.value,
+            })
+            .collect(),
+        size_adjust: descriptors.size_adjust,
+        ascent_override: descriptors.ascent_override,
+        descent_override: descriptors.descent_override,
+        line_gap_override: descriptors.line_gap_override,
+    }
+}
diff --git a/packages/blitz-dom/src/text/winkin/mod.rs b/packages/blitz-dom/src/text/winkin/mod.rs
new file mode 100644
index 0000000000..21a8da525c
--- /dev/null
+++ b/packages/blitz-dom/src/text/winkin/mod.rs
@@ -0,0 +1,2281 @@
+//! The winkin text backend.
+//!
+//! The content of an inline formatting context is built from the DOM the
+//! first time it is laid out, and again whenever it changes or its atomic
+//! inlines measure differently: winkin takes each atomic inline's size as it
+//! is pushed, and Blitz only knows it once taffy has measured the box.
+
+mod editor;
+mod fonts;
+pub(crate) mod style;
+
+use ::style::context::{CascadeInputs, TreeCountingCaches};
+use ::style::properties::{ComputedValues, FirstLineReparenting};
+use ::style::rule_cache::RuleCacheConditions;
+use ::style::selector_parser::PseudoElement;
+use ::style::servo_arc::Arc as ServoArc;
+use ::style::shared_lock::StylesheetGuards;
+use ::style::stylist::Stylist;
+use ::style::values::computed::Float;
+use ::style::values::specified::box_::{DisplayInside, DisplayOutside};
+use ::style::values::specified::position::PositionTryFallbacksTryTactic;
+use blitz_traits::node_id::NodeId;
+use fontwich::{Collection, LayerBuilder};
+use kurbo::Affine;
+use markup5ever::{local_name, ns};
+use winkin::style::{
+    BaseDirection, BidiGroup, EdgesGroup, FontFamilyName, GenericFamily, Language, LineGroup,
+    UnicodeBidi, VerticalAlign, WritingMode,
+};
+use winkin::{
+    Area, BlockExtents, BoxSize, BuildOptions, ComputedBlockStyle, ComputedStyle, Context,
+    Exclusions, ExclusionsCheckpoint, FloatSide, InlineExtents, IntrinsicSizes, Item, Layout,
+    LayoutBuilder, LineMetrics, NodeKey, OriginalDisplay, PlacedFloat,
+};
+
+use super::{
+    ContentWidths, FloatRequest, InlineBoxKind, InlineBuilder, InlineLayoutEngine, InlineText,
+    LastBaseline, LineArea, LineExclusions, LineFlow, LinesExtent, LinesInputs, MarkerEngine,
+    Measure, Placement, SpanKind,
+};
+use crate::layout::inline::push_inline_content;
+use crate::layout::text_transform::PushedText;
+use crate::node::{InlineContent, InlineTextHit, Marker};
+use crate::{BaseDocument, Node, NodeData};
+
+/// The fontwich crate, for the renderer and for hosts that build fonts.
+pub use ::fontwich;
+/// The winkin crate, for the renderer's winkin painter.
+pub use ::winkin;
+pub use editor::TextEditor;
+pub use fonts::FontContext;
+
+/// An outside list marker, laid out by winkin.
+pub type MarkerLayout = TextLayout;
+
+/// The key of a block's `::first-letter` box, which has no node of its own:
+/// the block's node with this bit set.
+pub const FIRST_LETTER_KEY: u64 = 1 << 62;
+
+/// The key of a block's inside list marker, which has no node of its own:
+/// the block's node with this bit set.
+pub const MARKER_KEY: u64 = 1 << 61;
+
+/// The key of the box holding the text an input method is composing in an `<input>` or a
+/// `<textarea>`, which has no node of its own: the control's node with this bit set.
+pub const COMPOSE_KEY: u64 = 1 << 60;
+
+/// The bits that number the pieces an `<input>` or a `<textarea>` lays its text out in.
+///
+/// The editor lays the text out in up to three pieces: before, inside and after the text an input
+/// method is composing or a password field shows in the clear. Each piece is a text node keyed
+/// by the control's node with its number in these bits, so that offsets in each map back to the
+/// text. The box of a password's character shown in the clear is keyed by both bits.
+pub const PIECE_KEYS: u64 = 3 << 58;
+
+/// The number [`PIECE_KEYS`] gives the first piece of an editor's text.
+const PIECE_SHIFT: u32 = 58;
+
+/// What a document keeps for its text under winkin: the fonts winkin chooses from, and the
+/// context it builds and breaks in.
+///
+/// The platform's fonts and the fonts Blitz ships are the collection's
+/// lower layers; a document's `@font-face` fonts are a layer of their own
+/// above them, which a face joins as it loads, the context being handed
+/// the new collection.
+pub struct TextContext {
+    /// What every layout is broken with, and built with outside box
+    /// construction.
+    pub(crate) cx: Context,
+    /// How many times the context's collection has changed, which a
+    /// thread's context catches up with before it builds.
+    pub(crate) generation: u64,
+    /// The context each thread builds with in box construction, and the
+    /// generation of its collection.
+    #[cfg(feature = "parallel-construct")]
+    pub(crate) threads: thread_local::ThreadLocal<std::cell::RefCell<(u64, Context)>>,
+    /// The fonts the document was handed, which its iframes are handed too.
+    given: FontContext,
+    /// The installed and shipped fonts.
+    base: Collection,
+    /// The document's `@font-face` faces.
+    document: LayerBuilder,
+    /// The collection the context has, which font metrics are read from.
+    metrics: std::sync::Arc<std::sync::RwLock<Collection>>,
+}
+
+/// An inline formatting context laid out by winkin.
+#[derive(Default)]
+pub struct TextLayout {
+    /// The content, and its lines once they are broken. Its allocations are
+    /// reused by the next build.
+    layout: Layout,
+    /// Whether the layout holds content built for the node as it is now.
+    built: bool,
+    /// The computed style the content was last built in, which its
+    /// alignment and the block's other text properties were read from.
+    built_style: Option<ServoArc<ComputedValues>>,
+    /// Whether the content has been broken into lines since it was built.
+    laid: bool,
+    /// The layout pass its lines were last placed in.
+    placed_in: Option<u64>,
+    /// What the atomic inlines and floats were last measured at, in content
+    /// order, and the width in device pixels that percentages of the
+    /// containing block were last taken of.
+    boxes: Vec<BuiltBox>,
+    basis: f32,
+    /// The computed styles painted with that no node of the content's is
+    /// styled in.
+    styles: PaintStyles,
+    /// Which way the content's lines run.
+    writing_mode: WritingMode,
+    /// Device pixels per CSS pixel used to build the layout.
+    scale: f32,
+    /// Block-axis offset (in CSS px) of the line boxes from the top of the
+    /// container's content box, as applied by `align-content`.
+    pub(crate) block_offset: f32,
+    /// The out-of-flow positions for which some inline span with an inline box below it is a
+    /// containing block (as `SPAN_*_CB` flags). The inline root claims those boxes in its place.
+    /// Set by each `RunMode::PerformLayout` run of inline layout.
+    pub(crate) span_cb_flags: stylo_taffy::StyleFlags,
+    /// The size of the content box the lines were last placed in, in device pixels.
+    content_size: kurbo::Size,
+}
+
+/// A copy starts empty, and is built again the first time it is laid out.
+impl Clone for TextLayout {
+    fn clone(&self) -> Self {
+        Self::default()
+    }
+}
+
+/// The computed styles a context's text is painted with where they are not
+/// its nodes' own.
+#[derive(Default)]
+struct PaintStyles {
+    /// Each element's computed style on the first formatted line, by node,
+    /// where the block has a `::first-line`. The block's own is its
+    /// `::first-line` style.
+    first_line: Vec<(u64, ServoArc<ComputedValues>)>,
+    /// The `::first-letter` box's style, and its style on the first line
+    /// where the block has a `::first-line`.
+    first_letter: Option<(ServoArc<ComputedValues>, Option<ServoArc<ComputedValues>>)>,
+    /// The inside list marker's style.
+    marker: Option<ServoArc<ComputedValues>>,
+    /// Each element's emphasis mark, by node, where its text takes marks:
+    /// the mark's string laid out on one line in the element's fonts at the
+    /// marks' size, which a mark is drawn as.
+    marks: Vec<(u64, Layout)>,
+}
+
+/// An atomic inline or a float as the content was last measured with it.
+#[derive(Copy, Clone, PartialEq, Debug)]
+pub(crate) struct BuiltBox {
+    pub(crate) node: u64,
+    /// Its border box in device pixels, and its baseline where it has one.
+    pub(crate) size: BoxSize,
+}
+
+impl std::fmt::Debug for TextLayout {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        write!(f, "TextLayout")
+    }
+}
+
+impl TextLayout {
+    /// Whether the content, as it was last built, has lines that run down the
+    /// page.
+    pub(crate) fn is_vertical(&self) -> bool {
+        self.writing_mode != WritingMode::HorizontalTb
+    }
+
+    /// Which way the content's lines run, as it was last built.
+    pub fn writing_mode(&self) -> WritingMode {
+        self.writing_mode
+    }
+
+    /// The computed style `node` is set in on the block's first formatted
+    /// line, where `::first-line` restyles it: the block's own is its
+    /// `::first-line` style.
+    pub fn first_line_style_of(&self, node: u64) -> Option<ServoArc<ComputedValues>> {
+        self.first_line_style(node).cloned()
+    }
+
+    /// Returns the last layout, where there is one.
+    pub fn layout(&self) -> Option<&Layout> {
+        self.laid.then_some(&self.layout)
+    }
+
+    /// The emphasis mark the text of element `node` is marked with, laid
+    /// out on one line at the marks' size, where its text takes marks.
+    pub fn emphasis_mark(&self, node: u64) -> Option<&Layout> {
+        self.styles
+            .marks
+            .iter()
+            .find(|(held, _)| *held == node)
+            .map(|(_, layout)| layout)
+    }
+
+    /// The computed style the text and boxes of `key` are painted in, on the
+    /// block's first formatted line where `first_line`.
+    ///
+    /// A text node's is the element it is in. The block's `::first-letter`
+    /// box and its inside list marker have styles of their own, and on the
+    /// first line every element is set in its style reparented onto its
+    /// parent's `::first-line` style.
+    pub fn computed_style(
+        &self,
+        doc: &BaseDocument,
+        key: u64,
+        first_line: bool,
+    ) -> Option<ServoArc<ComputedValues>> {
+        if key & FIRST_LETTER_KEY != 0 {
+            let (letter, on_first_line) = self.styles.first_letter.as_ref()?;
+            return Some(
+                on_first_line
+                    .as_ref()
+                    .filter(|_| first_line)
+                    .unwrap_or(letter)
+                    .clone(),
+            );
+        }
+        if key & MARKER_KEY != 0 {
+            let node = key & !MARKER_KEY;
+            if first_line && let Some(style) = self.first_line_style(node) {
+                return Some(style.clone());
+            }
+            return self.styles.marker.clone();
+        }
+        // The composing text's box, and each piece of an editor's text, are set in the control's
+        // style.
+        let node = doc.get_node(NodeId::from_u64(key & !(COMPOSE_KEY | PIECE_KEYS)))?;
+        let styled = match &node.data {
+            NodeData::Text(_) => doc.get_node(node.parent?)?,
+            _ => node,
+        };
+        if first_line && let Some(style) = self.first_line_style(styled.id.as_u64()) {
+            return Some(style.clone());
+        }
+        styled.primary_styles().map(|style| (*style).clone())
+    }
+
+    /// The computed style `node` is set in on the first line, if
+    /// `::first-line` restyles it.
+    fn first_line_style(&self, node: u64) -> Option<&ServoArc<ComputedValues>> {
+        self.styles
+            .first_line
+            .iter()
+            .find(|(held, _)| *held == node)
+            .map(|(_, style)| style)
+    }
+
+    /// Measures the content again with its atomic inlines and floats
+    /// measured as `sizes` are, and percentages of the containing block
+    /// taken of `basis` device pixels.
+    ///
+    /// winkin keeps the content's analysis, fonts and shaping, and keeps the
+    /// lines where nothing changed.
+    pub(crate) fn measure(&mut self, cx: &mut Context, sizes: &[BuiltBox], basis: f32) {
+        let pairs = sizes.iter().map(|built| (NodeKey(built.node), built.size));
+        if self.layout.measure(cx, basis, pairs) {
+            self.laid = false;
+        }
+        self.boxes.clear();
+        self.boxes.extend_from_slice(sizes);
+        self.basis = basis;
+    }
+
+    /// Gives each of `sizes`, measured along the line alone, the block size
+    /// and baseline its box was last measured with, where it was.
+    pub(crate) fn keep_built_extents(&self, sizes: &mut [BuiltBox]) {
+        for (at, size) in sizes.iter_mut().enumerate() {
+            // The boxes keep their order, so a box is mostly where it was.
+            let built = self
+                .boxes
+                .get(at)
+                .filter(|built| built.node == size.node)
+                .or_else(|| self.boxes.iter().find(|built| built.node == size.node));
+            if let Some(built) = built {
+                size.size.block = built.size.block;
+                size.size.baseline = built.size.baseline;
+            }
+        }
+    }
+
+    /// Returns the content's min-content and max-content widths.
+    pub(crate) fn intrinsic_widths(&self) -> IntrinsicSizes {
+        if self.built {
+            self.layout.intrinsic_sizes()
+        } else {
+            IntrinsicSizes::default()
+        }
+    }
+
+    /// Breaks the content into lines in `area`, in the room `exclusions`
+    /// leaves, and returns the layout.
+    pub(crate) fn lay_out(
+        &mut self,
+        cx: &mut Context,
+        area: Area,
+        exclusions: &mut dyn Exclusions,
+    ) -> Option<&Layout> {
+        if !self.built {
+            return None;
+        }
+        self.layout.break_lines(cx, area, exclusions);
+        self.laid = true;
+        Some(&self.layout)
+    }
+}
+
+/// What restyles an element for the first formatted line, and a block's
+/// `::first-letter` for the box its letter is in.
+#[derive(Copy, Clone)]
+pub(crate) struct Cascade<'a> {
+    pub(crate) stylist: &'a Stylist,
+    pub(crate) guards: &'a StylesheetGuards<'a>,
+}
+
+impl Cascade<'_> {
+    /// `style`, the computed style of `node`, with its inherited properties
+    /// taken from `parent` instead of its parent's style.
+    ///
+    /// This is what an element on the first formatted line is set in: it
+    /// inherits from its parent's `::first-line` style, and keeps its own
+    /// reset properties.
+    fn reparent(
+        self,
+        node: &Node,
+        style: &ComputedValues,
+        parent: &ComputedValues,
+    ) -> ServoArc<ComputedValues> {
+        self.stylist.cascade_style_and_visited(
+            Some(node),
+            None,
+            &CascadeInputs::new_from_style(style),
+            self.guards,
+            Some(parent),
+            Some(parent),
+            FirstLineReparenting::Yes {
+                style_to_reparent: style,
+            },
+            &PositionTryFallbacksTryTactic::default(),
+            None,
+            &mut RuleCacheConditions::default(),
+            &mut TreeCountingCaches::default(),
+        )
+    }
+
+    /// The block `block`'s `::first-letter` style, `letter`, cascaded again
+    /// to inherit from `parent`, the style of the box the letter is in.
+    ///
+    /// Stylo cascades the pseudo-element against the block, where CSS has it
+    /// inherit from the innermost box its text is in.
+    fn first_letter(
+        self,
+        block: &Node,
+        letter: &ComputedValues,
+        parent: &ComputedValues,
+    ) -> ServoArc<ComputedValues> {
+        self.stylist.cascade_style_and_visited(
+            Some(block),
+            Some(&PseudoElement::FirstLetter),
+            &CascadeInputs::new_from_style(letter),
+            self.guards,
+            Some(parent),
+            Some(parent),
+            FirstLineReparenting::No,
+            &PositionTryFallbacksTryTactic::default(),
+            None,
+            &mut RuleCacheConditions::default(),
+            &mut TreeCountingCaches::default(),
+        )
+    }
+}
+
+/// The content language of `node`: its nearest `lang`, its own or an
+/// ancestor's. An empty `lang` is no language.
+fn language_of(nodes: &crate::NodeTree, mut node: Option<NodeId>) -> Option<Language> {
+    while let Some(id) = node {
+        let held = &nodes[id];
+        if let Some(language) = own_language(held) {
+            return language;
+        }
+        node = held.parent;
+    }
+    None
+}
+
+/// What `node`'s own `lang` says, where it has one: `Some(None)` for an
+/// empty or unreadable one, which is no language.
+fn own_language(node: &Node) -> Option<Option<Language>> {
+    let element = node.element_data()?;
+    let lang = element.attrs.iter().find(|attr| {
+        attr.name.local == local_name!("lang")
+            && (attr.name.ns == ns!() || attr.name.ns == ns!(xml))
+    })?;
+    Some(Language::parse(lang.value.trim()).ok())
+}
+
+/// The font families a list marker's bullet is set in before the block's
+/// own: Blitz's bullet font, which Parley's list markers ask for too.
+const BULLET_FAMILIES: [FontFamilyName<'static>; 2] = [
+    FontFamilyName::Named(std::borrow::Cow::Borrowed("Bullet")),
+    FontFamilyName::Generic(GenericFamily::Monospace),
+];
+
+/// Builds the content of the inline formatting context rooted at `root_id`.
+///
+/// The atomic inlines and floats take the sizes `text` last measured them
+/// at, and percentages of the containing block its last basis: none before
+/// the first measure, which then sets them.
+pub(crate) fn build(
+    nodes: &crate::NodeTree,
+    cascade: Cascade<'_>,
+    cx: &mut Context,
+    text: &mut TextLayout,
+    scale: f32,
+    root_id: NodeId,
+) {
+    crate::text::PERF_COUNTS[0].fetch_add(1, core::sync::atomic::Ordering::Relaxed);
+    let root = &nodes[root_id];
+    let key = NodeKey(root_id.as_u64());
+    text.built = false;
+    text.laid = false;
+    text.scale = scale;
+    text.styles.first_line.clear();
+    text.styles.first_letter = None;
+    text.styles.marker = None;
+    text.styles.marks.clear();
+
+    let root_computed = root_style(nodes, root);
+    text.built_style = root_computed.clone();
+    let Some(root_computed) = root_computed else {
+        // Nothing styled: an empty layout, so that reading it reads nothing.
+        let initial = ComputedStyle::initial();
+        text.layout
+            .builder(
+                cx,
+                key,
+                &ComputedBlockStyle::new(&initial),
+                BuildOptions::default(),
+            )
+            .finish();
+        text.built = true;
+        return;
+    };
+    let container = match &root.data {
+        NodeData::AnonymousBlock(_) => root
+            .parent
+            .and_then(|parent| nodes[parent].primary_styles().map(|style| (*style).clone()))
+            .unwrap_or_else(|| root_computed.clone()),
+        _ => root_computed.clone(),
+    };
+    let language = language_of(nodes, Some(root_id));
+    let feature_values = style::FeatureValues::of(cascade.stylist);
+    let root_lists = style::FontLists::of(&root_computed, &feature_values);
+    let mut root_style = style::computed_style(&root_lists, &root_computed, scale, language);
+    // An anonymous block's lines are the element's around it, whose
+    // `unicode-bidi` applies to them: an override, or `plaintext`.
+    if matches!(root.data, NodeData::AnonymousBlock(_)) {
+        root_style.bidi.unicode_bidi = style::unicode_bidi(&container);
+    }
+    // The block's `::first-line`, which the first line's elements inherit
+    // from.
+    let first_line_computed = root
+        .try_stylo_element_data()
+        .and_then(|data| data.get())
+        .and_then(|data| data.styles.pseudos.get(&PseudoElement::FirstLine).cloned());
+    let first_line_lists = first_line_computed
+        .as_deref()
+        .map(|computed| style::FontLists::of(computed, &feature_values));
+    let first_line_style = match (&first_line_computed, &first_line_lists) {
+        (Some(computed), Some(lists)) => {
+            Some(style::computed_style(lists, computed, scale, language))
+        }
+        _ => None,
+    };
+    let first_letter_computed = root
+        .try_stylo_element_data()
+        .and_then(|data| data.get())
+        .and_then(|data| {
+            data.styles
+                .pseudos
+                .get(&PseudoElement::FirstLetter)
+                .cloned()
+        });
+    if let Some(computed) = &first_line_computed {
+        text.styles
+            .first_line
+            .push((root_id.as_u64(), computed.clone()));
+    }
+
+    let mut block = style::block_style(
+        &root_style,
+        first_line_style.as_ref(),
+        &root_computed,
+        &container,
+        scale,
+    );
+    // The root element's lines run in the body's direction, which CSS
+    // Writing Modes propagates to the root as its used value.
+    let element = match &root.data {
+        NodeData::AnonymousBlock(_) => root.parent,
+        _ => Some(root_id),
+    };
+    if block.direction != BaseDirection::Auto
+        && let Some(rtl) = element.and_then(|element| body_is_rtl(nodes, element))
+    {
+        block.direction = if rtl {
+            BaseDirection::Rtl
+        } else {
+            BaseDirection::Ltr
+        };
+    }
+    // `text-indent` indents the element's first formatted line, which an
+    // anonymous block after another box of the element's does not hold.
+    if matches!(root.data, NodeData::AnonymousBlock(_))
+        && !block.text_indent.hanging
+        && follows_a_box(nodes, root)
+    {
+        block.text_indent.amount = winkin::style::LengthPercentage::default();
+    }
+    text.writing_mode = block.writing_mode;
+
+    let TextLayout {
+        layout,
+        styles,
+        boxes,
+        basis,
+        ..
+    } = text;
+    let mut options = BuildOptions::default();
+    options.percentage_basis = *basis;
+    // Hit testing needs to map a layout position back to its DOM node.
+    options.map_source = true;
+    let mut builder = WinkinBuilder {
+        builder: layout.builder(cx, key, &block, options),
+        cascade,
+        root,
+        boxes: boxes.as_slice(),
+        styles,
+        first_letter: first_letter_computed,
+        feature_values,
+        marked: Vec::new(),
+        scale,
+        parents: vec![Parent {
+            computed: root_computed,
+            first_line: first_line_computed,
+            language,
+            is_root: true,
+        }],
+    };
+    push_inline_content(nodes, root, &mut builder);
+    // Moving the builder whole drops its other fields here, ending its
+    // borrow of `cx`.
+    let WinkinBuilder {
+        builder,
+        marked,
+        feature_values,
+        styles,
+        ..
+    } = { builder };
+    builder.finish();
+    for (node, computed, language) in marked {
+        if let Some(layout) = emphasis_mark(cx, &computed, &feature_values, scale, language) {
+            styles.marks.push((node, layout));
+        }
+    }
+    text.built = true;
+}
+
+/// The computed style the content of the inline formatting context rooted at
+/// `root` is built in.
+///
+/// An anonymous block has no style of its own worth reading: its text is set
+/// in the box around it.
+fn root_style(nodes: &crate::NodeTree, root: &Node) -> Option<ServoArc<ComputedValues>> {
+    root.primary_styles()
+        .map(|style| (*style).clone())
+        .or_else(|| {
+            root.parent
+                .and_then(|parent| nodes[parent].primary_styles().map(|style| (*style).clone()))
+        })
+}
+
+/// Whether `old` and `new` differ in the inherited text properties winkin
+/// reads only into the block's facts, from the root of the inline formatting
+/// context: its alignment, indent, wrap style and fit.
+fn block_text_differs(old: &ComputedValues, new: &ComputedValues) -> bool {
+    let (old, new) = (old.get_inherited_text(), new.get_inherited_text());
+    old.text_align != new.text_align
+        || old.text_align_last != new.text_align_last
+        || old.text_indent != new.text_indent
+        || old.text_wrap_style != new.text_wrap_style
+        || old.text_fit != new.text_fit
+}
+
+/// Whether, of the properties [`block_text_differs`] compares, `old` and
+/// `new` differ only in `text-align` and `text-align-last`.
+fn alignment_alone_differs(old: &ComputedValues, new: &ComputedValues) -> bool {
+    let (old, new) = (old.get_inherited_text(), new.get_inherited_text());
+    old.text_indent == new.text_indent
+        && old.text_wrap_style == new.text_wrap_style
+        && old.text_fit == new.text_fit
+}
+
+/// Whether `old` and `new` differ in an inherited text property other than
+/// those [`block_text_differs`] compares.
+fn inline_text_differs(old: &ComputedValues, new: &ComputedValues) -> bool {
+    let new = new.get_inherited_text();
+    let old = old.get_inherited_text();
+    if old == new {
+        return false;
+    }
+    let mut masked = old.clone();
+    masked.text_align = new.text_align;
+    masked.text_align_last = new.text_align_last;
+    masked.text_indent = new.text_indent.clone();
+    masked.text_wrap_style = new.text_wrap_style;
+    masked.text_fit = new.text_fit;
+    masked != *new
+}
+
+/// The emphasis mark of text set in `computed`, laid out on one line: the
+/// style's mark string in its fonts at half its size, rounded to a pixel,
+/// as Chrome draws the string in the text's font at that size.
+fn emphasis_mark(
+    cx: &mut Context,
+    computed: &ComputedValues,
+    feature_values: &style::FeatureValues,
+    scale: f32,
+    language: Option<Language>,
+) -> Option<Layout> {
+    let string = style::emphasis_mark_string(computed)?;
+    let lists = style::FontLists::of(computed, feature_values);
+    let own = unboxed(style::computed_style(&lists, computed, scale, language));
+    let mark = ComputedStyle {
+        font: winkin::style::FontGroup {
+            size: (own.font.size / 2.0).round(),
+            ..own.font
+        },
+        text: winkin::style::TextGroup {
+            language: own.text.language,
+            white_space_collapse: winkin::style::WhiteSpaceCollapse::Preserve,
+            wrap_mode: winkin::style::TextWrapMode::NoWrap,
+            ..winkin::style::TextGroup::INITIAL
+        },
+        line: LineGroup::INITIAL,
+        decorates: false,
+        ..own
+    };
+    let block = ComputedBlockStyle {
+        writing_mode: WritingMode::HorizontalTb,
+        direction: BaseDirection::Ltr,
+        ..ComputedBlockStyle::new(&mark)
+    };
+    let mut layout = Layout::default();
+    let key = NodeKey(0);
+    let mut builder = layout.builder(cx, key, &block, BuildOptions::default());
+    builder.text(key, &string);
+    builder.finish();
+    layout.break_lines(cx, Area::new(f32::MAX / 4.0), &mut winkin::NoExclusions);
+    Some(layout)
+}
+
+/// `style` as the style of a box that has no box: no edges, nothing
+/// painted, and the properties that do not inherit at their initial
+/// values, so that the text inside it is set in `style` and nothing else of
+/// it shows.
+fn unboxed(style: ComputedStyle<'_>) -> ComputedStyle<'_> {
+    ComputedStyle {
+        edges: EdgesGroup::INITIAL,
+        paints: false,
+        line: LineGroup {
+            vertical_align: VerticalAlign::Baseline,
+            ..style.line
+        },
+        bidi: BidiGroup {
+            unicode_bidi: UnicodeBidi::Normal,
+            ..style.bidi
+        },
+        ..style
+    }
+}
+
+/// What a box's children are set in: the box around them.
+struct Parent {
+    computed: ServoArc<ComputedValues>,
+    /// Its style on the first formatted line, where the block has a
+    /// `::first-line`.
+    first_line: Option<ServoArc<ComputedValues>>,
+    language: Option<Language>,
+    /// Whether it is the block itself.
+    is_root: bool,
+}
+
+/// A winkin layout builder, as the walk of the DOM pushes into it.
+struct WinkinBuilder<'a, 'b, 'c> {
+    builder: LayoutBuilder<'c>,
+    cascade: Cascade<'a>,
+    /// The block the content is for.
+    root: &'a Node,
+    boxes: &'a [BuiltBox],
+    styles: &'b mut PaintStyles,
+    /// The block's `::first-letter` style, until its letter is found.
+    first_letter: Option<ServoArc<ComputedValues>>,
+    /// The document's `@font-feature-values` rules.
+    feature_values: style::FeatureValues,
+    /// The elements whose text takes emphasis marks, in the styles and
+    /// languages their marks are set in.
+    marked: Vec<(u64, ServoArc<ComputedValues>, Option<Language>)>,
+    scale: f32,
+    /// The boxes open around what is pushed next, the block's first.
+    parents: Vec<Parent>,
+}
+
+impl WinkinBuilder<'_, '_, '_> {
+    /// The box what is pushed next is in.
+    fn parent(&self) -> &Parent {
+        // The block itself is never popped.
+        &self.parents[self.parents.len() - 1]
+    }
+
+    /// The size taffy measured `node` at.
+    fn measured(&self, node: u64) -> BoxSize {
+        self.boxes
+            .iter()
+            .find(|size| size.node == node)
+            .map_or(BoxSize::default(), |size| size.size)
+    }
+
+    /// The style of an atomic inline or a float, `computed`, as winkin sets
+    /// it: where it sits on the line and its margins. Its border and padding
+    /// are inside the border box taffy measured, and taffy paints it.
+    fn boxed_style<'s>(
+        &self,
+        lists: &'s style::FontLists,
+        computed: &'s ComputedValues,
+        language: Option<Language>,
+    ) -> ComputedStyle<'s> {
+        let own = style::computed_style(lists, computed, self.scale, language);
+        ComputedStyle {
+            edges: EdgesGroup {
+                border: EdgesGroup::INITIAL.border,
+                padding: EdgesGroup::INITIAL.padding,
+                ..own.edges
+            },
+            paints: false,
+            ..own
+        }
+    }
+
+    /// Asks for the block's `::first-letter` before `text`, in the style the
+    /// pseudo-element has in the box the text is in, until the letter is
+    /// found.
+    ///
+    /// The builder finds the letter as the text is written; it is found once
+    /// a text holds anything but white space and punctuation, and asking
+    /// again after is ignored, so the asking stops there.
+    fn arm_first_letter(&mut self, text: &str) {
+        let Some(pseudo) = &self.first_letter else {
+            return;
+        };
+        let parent = self.parent();
+        let letter = if parent.is_root {
+            pseudo.clone()
+        } else {
+            self.cascade
+                .first_letter(self.root, pseudo, &parent.computed)
+        };
+        let letter_first_line = parent
+            .first_line
+            .as_ref()
+            .map(|first_line| self.cascade.first_letter(self.root, pseudo, first_line));
+        let language = parent.language;
+        {
+            let lists = style::FontLists::of(&letter, &self.feature_values);
+            let style = style::computed_style(&lists, &letter, self.scale, language);
+            let first_line_lists = letter_first_line
+                .as_deref()
+                .map(|computed| style::FontLists::of(computed, &self.feature_values));
+            let first_line_style = match (&letter_first_line, &first_line_lists) {
+                (Some(computed), Some(lists)) => {
+                    Some(style::computed_style(lists, computed, self.scale, language))
+                }
+                _ => None,
+            };
+            self.builder.set_first_letter(
+                NodeKey(FIRST_LETTER_KEY | self.root.id.as_u64()),
+                &style,
+                first_line_style.as_ref(),
+            );
+        }
+        self.styles.first_letter = Some((letter, letter_first_line));
+        if text
+            .chars()
+            .any(|ch| !ch.is_whitespace() && !is_punctuation(ch))
+        {
+            self.first_letter = None;
+        }
+    }
+}
+
+/// winkin reads no text back: it applies `text-transform` itself.
+impl PushedText for WinkinBuilder<'_, '_, '_> {
+    fn text(&self) -> &str {
+        ""
+    }
+
+    fn has_pending_whitespace(&self) -> bool {
+        false
+    }
+}
+
+impl InlineBuilder for WinkinBuilder<'_, '_, '_> {
+    const TRANSFORMS_TEXT: bool = true;
+    const SETS_RUBY: bool = true;
+
+    /// A marker inside the list item comes before its content, in the bullet
+    /// font where it is a bullet.
+    fn push_marker(&mut self, marker: &Marker) {
+        let root_id = self.root.id;
+        let marker_key = NodeKey(MARKER_KEY | root_id.as_u64());
+        let root = &self.parents[0];
+        let root_computed = root.computed.clone();
+        let language = root.language;
+        self.styles.marker = Some(root_computed.clone());
+        match marker {
+            Marker::Char(char) => {
+                let lists = style::FontLists::of(&root_computed, &self.feature_values)
+                    .with_families_first(&BULLET_FAMILIES);
+                let bullet = unboxed(style::computed_style(
+                    &lists,
+                    &root_computed,
+                    self.scale,
+                    language,
+                ));
+                self.builder.open_box(marker_key, &bullet, None);
+                self.builder.text(marker_key, &format!("{char} "));
+                self.builder.close_box();
+            }
+            Marker::String(string) => self.builder.text(marker_key, string),
+        }
+    }
+
+    /// Opens an inline box -- a span, a ruby container, an annotation, or
+    /// the box a `display: contents` element's children inherit from.
+    fn push_span(&mut self, node: &Node, _style: &ComputedValues, kind: SpanKind) {
+        let Some(computed) = node.primary_styles().map(|style| (*style).clone()) else {
+            return;
+        };
+        let parent = self.parent();
+        let language = own_language(node).unwrap_or(parent.language);
+        let key = NodeKey(node.id.as_u64());
+        // On the first line, the same element inheriting from its parent's
+        // `::first-line` instead.
+        let first_line = parent
+            .first_line
+            .as_ref()
+            .map(|first_line| self.cascade.reparent(node, &computed, first_line));
+        // An `<rt>` in an `<rtc>` takes the side of its container, which
+        // `ruby-position` applies to.
+        let position = match kind {
+            SpanKind::Annotation { in_container: true } => {
+                Some(style::ruby_position(&parent.computed))
+            }
+            _ => None,
+        };
+        if kind == SpanKind::Ruby {
+            self.first_letter = None;
+        }
+        if let Some(style) = &first_line {
+            self.styles
+                .first_line
+                .push((node.id.as_u64(), style.clone()));
+        }
+        {
+            let lists = style::FontLists::of(&computed, &self.feature_values);
+            let own = style::computed_style(&lists, &computed, self.scale, language);
+            let first_line_lists = first_line
+                .as_deref()
+                .map(|computed| style::FontLists::of(computed, &self.feature_values));
+            let first_line_style = match (&first_line, &first_line_lists) {
+                (Some(computed), Some(lists)) => {
+                    Some(style::computed_style(lists, computed, self.scale, language))
+                }
+                _ => None,
+            };
+            let builder = &mut self.builder;
+            match (kind, position) {
+                (SpanKind::Span, _) => builder.open_box(key, &own, first_line_style.as_ref()),
+                (SpanKind::Ruby, _) => builder.open_ruby(key, &own, first_line_style.as_ref()),
+                (SpanKind::Annotation { .. }, Some(position)) => builder
+                    .open_annotation_with_position(key, &own, first_line_style.as_ref(), position),
+                (SpanKind::Annotation { .. }, None) => {
+                    builder.open_annotation(key, &own, first_line_style.as_ref())
+                }
+                // No box, but its children inherit from it: a box with no
+                // edges and nothing painted, in its style.
+                (SpanKind::Contents, _) => {
+                    let first_line_style = first_line_style.map(unboxed);
+                    builder.open_box(key, &unboxed(own), first_line_style.as_ref());
+                }
+            }
+        }
+        self.parents.push(Parent {
+            computed,
+            first_line,
+            language,
+            is_root: false,
+        });
+    }
+
+    fn pop_span(&mut self, kind: SpanKind) {
+        if self.parents.len() > 1 {
+            self.parents.pop();
+        }
+        match kind {
+            SpanKind::Span | SpanKind::Contents => self.builder.close_box(),
+            SpanKind::Ruby => self.builder.close_ruby(),
+            SpanKind::Annotation { .. } => self.builder.close_annotation(),
+        }
+    }
+
+    /// A text node carries no style of its own: the box it is in is what sets
+    /// it, and a painter reads the element it is in.
+    fn push_text(&mut self, node: &Node, text: &str) {
+        if text.is_empty() {
+            return;
+        }
+        self.arm_first_letter(text);
+        let parent = self.parent();
+        if let Some(element) = node.parent
+            && style::emphasis_mark_string(&parent.computed).is_some()
+            && !self
+                .marked
+                .iter()
+                .any(|(held, ..)| *held == element.as_u64())
+        {
+            let marked = (element.as_u64(), parent.computed.clone(), parent.language);
+            self.marked.push(marked);
+        }
+        self.builder.text(NodeKey(node.id.as_u64()), text);
+    }
+
+    /// Pushes an atomic inline or a float, sized as taffy measured it, or the
+    /// anchor of an absolutely positioned box, which takes no room and whose
+    /// static position the lines find.
+    fn push_inline_box(&mut self, node: &Node, computed: &ComputedValues, kind: InlineBoxKind) {
+        let key = NodeKey(node.id.as_u64());
+        let language = own_language(node).unwrap_or(self.parent().language);
+        match kind {
+            InlineBoxKind::Absolute => {
+                let display =
+                    if computed.get_box().original_display.outside() == DisplayOutside::Inline {
+                        OriginalDisplay::Inline
+                    } else {
+                        OriginalDisplay::Block
+                    };
+                self.builder.absolute(key, display);
+            }
+            InlineBoxKind::Atomic => {
+                // A block has one first letter, and it comes before any atomic
+                // inline.
+                self.first_letter = None;
+                let lists = style::FontLists::of(computed, &self.feature_values);
+                let own = self.boxed_style(&lists, computed, language);
+                let size = self.measured(node.id.as_u64());
+                self.builder.atomic(key, &own, None, size);
+            }
+            InlineBoxKind::Float => {
+                // `inline-start` and `inline-end` are the containing block's
+                // sides, as its direction has them.
+                let rtl = self.root.primary_styles().is_some_and(|block| {
+                    block.get_inherited_box().direction
+                        == ::style::computed_values::direction::T::Rtl
+                });
+                let side = match (computed.slow_clone_float(), rtl) {
+                    (Float::Right, _) | (Float::InlineStart, true) | (Float::InlineEnd, false) => {
+                        FloatSide::Right
+                    }
+                    _ => FloatSide::Left,
+                };
+                let lists = style::FontLists::of(computed, &self.feature_values);
+                let own = self.boxed_style(&lists, computed, language);
+                let size = self.measured(node.id.as_u64());
+                self.builder.float(key, &own, side, size);
+            }
+        }
+    }
+
+    fn push_line_break(&mut self, node: &Node, computed: &ComputedValues) {
+        self.first_letter = None;
+        let key = NodeKey(node.id.as_u64());
+        match node
+            .element_data()
+            .and_then(|element| br_clear(computed, element))
+        {
+            Some(clear) => self.builder.line_break_clearing(key, clear),
+            None => self.builder.line_break(key),
+        }
+    }
+
+    fn push_break_opportunity(&mut self, _node: &Node) -> bool {
+        self.builder.break_opportunity();
+        true
+    }
+}
+
+/// Whether `ch` is punctuation, which a first letter may take before it
+/// and goes on looking past.
+fn is_punctuation(ch: char) -> bool {
+    ch.is_ascii_punctuation()
+        || matches!(
+            ch,
+            '\u{00A1}' | '\u{00A7}' | '\u{00AB}' | '\u{00B6}' | '\u{00B7}' | '\u{00BB}' | '\u{00BF}'
+                | '\u{2010}'..='\u{2027}'
+                | '\u{2030}'..='\u{205E}'
+                | '\u{3001}'..='\u{3003}'
+                | '\u{3008}'..='\u{3011}'
+                | '\u{3014}'..='\u{301F}'
+                | '\u{FF01}'..='\u{FF0F}'
+        )
+}
+
+/// Whether `node` comes after another box among its parent's layout
+/// children, where the parent is a block container: one in the flow, not
+/// floated or absolutely positioned. A flex or grid item is a block of
+/// its own, with a first line of its own.
+fn follows_a_box(nodes: &crate::NodeTree, node: &Node) -> bool {
+    let Some(parent) = node.parent else {
+        return false;
+    };
+    let in_block_container = nodes[parent].display_style().is_some_and(|display| {
+        matches!(
+            display.inside(),
+            DisplayInside::Flow | DisplayInside::FlowRoot
+        )
+    });
+    if !in_block_container {
+        return false;
+    }
+    let children = nodes[parent].layout_children.borrow();
+    let Some(children) = children.as_ref() else {
+        return false;
+    };
+    children
+        .iter()
+        .take_while(|&&child| child != node.id)
+        .any(|&child| {
+            nodes[child].primary_styles().is_none_or(|computed| {
+                !computed.slow_clone_position().is_absolutely_positioned()
+                    && computed.slow_clone_float() == Float::None
+            })
+        })
+}
+
+/// The floats a `<br>` clears: its `clear`, or its `clear` attribute,
+/// which Chrome maps to the property: `left`, `right`, and `all` or `both`.
+fn br_clear(
+    computed: &ComputedValues,
+    element: &crate::node::ElementData,
+) -> Option<winkin::Clear> {
+    use ::style::values::computed::Clear as StyloClear;
+    match computed.slow_clone_clear() {
+        StyloClear::Left | StyloClear::InlineStart if !is_rtl(computed) => {
+            return Some(winkin::Clear::Left);
+        }
+        StyloClear::Right | StyloClear::InlineEnd if !is_rtl(computed) => {
+            return Some(winkin::Clear::Right);
+        }
+        StyloClear::Left | StyloClear::InlineEnd => return Some(winkin::Clear::Left),
+        StyloClear::Right | StyloClear::InlineStart => return Some(winkin::Clear::Right),
+        StyloClear::Both => return Some(winkin::Clear::Both),
+        StyloClear::None => {}
+    }
+    let clear = element.attr(local_name!("clear"))?.trim();
+    if clear.eq_ignore_ascii_case("left") {
+        Some(winkin::Clear::Left)
+    } else if clear.eq_ignore_ascii_case("right") {
+        Some(winkin::Clear::Right)
+    } else if clear.eq_ignore_ascii_case("all") || clear.eq_ignore_ascii_case("both") {
+        Some(winkin::Clear::Both)
+    } else {
+        None
+    }
+}
+
+/// Whether `computed` is right-to-left.
+fn is_rtl(computed: &ComputedValues) -> bool {
+    computed.slow_clone_direction() == ::style::computed_values::direction::T::Rtl
+}
+
+/// What takes a point of the area the lines were broken in -- along the lines
+/// from their line-left end, across them from the block-start edge -- onto the
+/// content box, which is `content_width` device pixels wide and
+/// `content_height` tall.
+///
+/// The identity for horizontal text. A vertical block's lines run down the
+/// box and stack across it, from the right in `vertical-rl` and from the left
+/// in `vertical-lr`; `sideways-lr` runs its lines up the box, so its origin is
+/// the bottom edge.
+pub fn page(writing_mode: WritingMode, content_width: f64, content_height: f64) -> Affine {
+    match writing_mode {
+        WritingMode::VerticalRl | WritingMode::SidewaysRl => {
+            Affine::new([0.0, 1.0, -1.0, 0.0, content_width, 0.0])
+        }
+        WritingMode::VerticalLr => Affine::new([0.0, 1.0, 1.0, 0.0, 0.0, 0.0]),
+        WritingMode::SidewaysLr => Affine::new([0.0, -1.0, 1.0, 0.0, 0.0, content_height]),
+        WritingMode::HorizontalTb => Affine::IDENTITY,
+    }
+}
+
+/// What takes a point of a line -- along it from its line box's left, across
+/// it from its over edge -- onto the content box.
+///
+/// `vertical-lr` stacks its lines from the left while each line's over side
+/// is its right, so a line is mirrored across its own box there.
+pub fn line_frame(writing_mode: WritingMode, page: Affine, metrics: &LineMetrics) -> Affine {
+    let placed = Affine::translate((f64::from(metrics.left), f64::from(metrics.top)));
+    if writing_mode == WritingMode::VerticalLr {
+        let across = f64::from(2.0 * metrics.top + metrics.height());
+        page * Affine::new([1.0, 0.0, 0.0, -1.0, 0.0, across]) * placed
+    } else {
+        page * placed
+    }
+}
+
+/// Whether the body is right-to-left, where `element` is the root element,
+/// has a body, and neither is contained; `None` otherwise.
+fn body_is_rtl(nodes: &crate::NodeTree, element: NodeId) -> Option<bool> {
+    let html = &nodes[element];
+    let parent = html.parent?;
+    if !matches!(nodes[parent].data, NodeData::Document(_))
+        || html
+            .data
+            .downcast_element()
+            .is_none_or(|data| data.name.local != local_name!("html"))
+    {
+        return None;
+    }
+    let body = html
+        .children
+        .iter()
+        .map(|&child| &nodes[child])
+        .find(|child| {
+            child
+                .data
+                .downcast_element()
+                .is_some_and(|data| data.name.local == local_name!("body"))
+        })?;
+    // Containment on either keeps the body's direction its own.
+    let contained = |node: &Node| {
+        node.primary_styles()
+            .is_some_and(|computed| !computed.slow_clone_contain().is_empty())
+    };
+    if contained(html) || contained(body) {
+        return None;
+    }
+    let computed = body.primary_styles()?;
+    Some(computed.slow_clone_direction() == ::style::computed_values::direction::T::Rtl)
+}
+
+/// How far `position: relative` moves what `key` paints, in CSS pixels:
+/// the offsets of its inline box and every inline box it is in, up to the
+/// block the lines belong to, whose own offset moves its whole box.
+///
+/// `containing` is the block's content box in CSS pixels, which percentages
+/// are of, and `rtl` its direction, under which `right` outweighs `left`.
+pub fn relative_shift(
+    doc: &BaseDocument,
+    key: u64,
+    containing: kurbo::Size,
+    rtl: bool,
+) -> kurbo::Vec2 {
+    relative_shift_of(doc.get_node(NodeId::from_u64(key)), key, containing, rtl)
+}
+
+/// [`relative_shift`] from `key`'s node, where there is one.
+pub(crate) fn relative_shift_of(
+    node: Option<&Node>,
+    key: u64,
+    containing: kurbo::Size,
+    rtl: bool,
+) -> kurbo::Vec2 {
+    use ::style::computed_values::position::T as Position;
+    use ::style::values::computed::{CSSPixelLength, Inset};
+    let mut shift = kurbo::Vec2::ZERO;
+    if key & (FIRST_LETTER_KEY | MARKER_KEY | COMPOSE_KEY | PIECE_KEYS) != 0 {
+        return shift;
+    }
+    let resolve = |inset: &Inset, basis: f64| match inset {
+        Inset::LengthPercentage(length) => Some(f64::from(
+            length.resolve(CSSPixelLength::new(basis as f32)).px(),
+        )),
+        _ => None,
+    };
+    let mut at = node;
+    while let Some(node) = at {
+        match &node.data {
+            NodeData::Text(_) => {}
+            NodeData::Element(_) => {
+                let Some(computed) = node.primary_styles() else {
+                    break;
+                };
+                let display = computed.slow_clone_display();
+                if !display.is_contents() {
+                    // An atomic inline or a block moves as a box of its own.
+                    if (display.outside(), display.inside())
+                        != (DisplayOutside::Inline, DisplayInside::Flow)
+                    {
+                        break;
+                    }
+                    if computed.slow_clone_position() == Position::Relative {
+                        let insets = computed.get_position();
+                        let left = resolve(&insets.left, containing.width);
+                        let right = resolve(&insets.right, containing.width);
+                        shift.x += match (left, right) {
+                            (Some(left), Some(_)) if !rtl => left,
+                            (_, Some(right)) => -right,
+                            (Some(left), None) => left,
+                            (None, None) => 0.0,
+                        };
+                        let top = resolve(&insets.top, containing.height);
+                        let bottom = resolve(&insets.bottom, containing.height);
+                        shift.y += top.or(bottom.map(|bottom| -bottom)).unwrap_or(0.0);
+                    }
+                }
+            }
+            _ => break,
+        }
+        at = node.parent.map(|parent| node.with(parent));
+    }
+    shift
+}
+
+/// The parts of `key`'s inline box on each line, as rects in the content
+/// box, in device pixels: one a line, the union of its parts there, as
+/// `getClientRects` answers.
+///
+/// The content box is `content` device pixels in size, which the vertical
+/// writing modes place their lines in from the right or the bottom.
+pub(crate) fn box_rects(
+    layout: &Layout,
+    writing_mode: WritingMode,
+    content: kurbo::Size,
+    key: u64,
+) -> impl Iterator<Item = kurbo::Rect> + '_ {
+    let page = page(writing_mode, content.width, content.height);
+    let mut fragments = layout.box_fragments(NodeKey(key)).peekable();
+    core::iter::from_fn(move || {
+        let first = fragments.next()?;
+        let line = first.line();
+        let mut united = fragment_rect(&first);
+        while let Some(next) = fragments.next_if(|fragment| fragment.line() == line) {
+            united = united.union(fragment_rect(&next));
+        }
+        let metrics = layout.line(line)?.metrics();
+        Some(line_frame(writing_mode, page, &metrics).transform_rect_bbox(united))
+    })
+}
+
+/// A box part's border box in its line's terms: along the line from its
+/// line box's left, across it from its over edge.
+fn fragment_rect(fragment: &winkin::BoxFragment<'_>) -> kurbo::Rect {
+    let inline = fragment.inline();
+    let block = fragment.block();
+    kurbo::Rect::new(
+        f64::from(inline.left),
+        f64::from(block.over),
+        f64::from(inline.right),
+        f64::from(block.under),
+    )
+}
+
+/// A piece of a line's content, as [`logical_content`] reads it.
+#[derive(Clone)]
+enum LinePiece {
+    /// The text between these byte offsets of the layout text, of the node the key names, or of
+    /// the node the layout maps its start to.
+    Text(Option<u64>, core::ops::Range<usize>),
+    /// An atomic inline, a float or an absolutely positioned box.
+    Box(u64),
+}
+
+/// The laid-out text and inline boxes of `layout` in logical order, as its lines place them, read
+/// as it is walked: each stretch of the layout text one node holds as one item. A float or an
+/// absolutely positioned box follows the content of the line it is anchored on, and one anchored
+/// on no line follows the last line.
+pub(crate) fn logical_content(
+    layout: &Layout,
+) -> impl Iterator<Item = crate::node::InlineContent> + '_ {
+    coalesce(content_pieces(layout))
+}
+
+/// Joins each run of text items of one node that follow on in the text into one item.
+fn coalesce(
+    mut items: impl Iterator<Item = crate::node::InlineContent>,
+) -> impl Iterator<Item = crate::node::InlineContent> {
+    use crate::node::InlineContent;
+    let mut pending: Option<InlineContent> = None;
+    core::iter::from_fn(move || {
+        loop {
+            let Some(item) = items.next() else {
+                return pending.take();
+            };
+            if let (
+                Some(InlineContent::Text { node_id, range }),
+                InlineContent::Text {
+                    node_id: next_id,
+                    range: next,
+                },
+            ) = (&mut pending, &item)
+                && node_id == next_id
+                && range.end == next.start
+            {
+                range.end = next.end;
+                continue;
+            }
+            if let Some(read) = pending.replace(item) {
+                return Some(read);
+            }
+        }
+    })
+}
+
+/// The pieces of `layout`'s content in logical order: each slice the text copies as, and each
+/// box.
+fn content_pieces(layout: &Layout) -> impl Iterator<Item = crate::node::InlineContent> + '_ {
+    use crate::node::InlineContent;
+    use winkin::Item;
+    use winkin::selection::{Affinity, CopyKind, Position};
+    let shown = |key: u64| key & (FIRST_LETTER_KEY | MARKER_KEY) == 0;
+    let text = layout.text();
+    let mut lines = layout.lines();
+    let mut statics = layout.static_positions().peekable();
+    let mut line_floats = 0;
+    let mut past_lines = false;
+    // The current line's items, sorted into logical order, and its pieces
+    let mut items: Vec<(core::ops::Range<usize>, u64, bool)> = Vec::new();
+    let mut pieces = Vec::new();
+    let mut next_piece = 0;
+    // The current text piece's node, its start and the slices it copies as
+    let mut slices = None;
+    core::iter::from_fn(move || {
+        loop {
+            if slices.is_none() {
+                while next_piece == pieces.len() {
+                    pieces.clear();
+                    next_piece = 0;
+                    if let Some(line) = lines.next() {
+                        items.clear();
+                        items.extend(line.all_items().filter_map(|item| match item {
+                            Item::Text(run) => Some((run.text_range(), run.key().0, false)),
+                            Item::Atomic(atomic) => {
+                                Some((atomic.text_range(), atomic.key().0, true))
+                            }
+                            _ => None,
+                        }));
+                        items.sort_by_key(|(range, ..)| range.start);
+                        // What the runs leave of the line, such as a forced break or a space the
+                        // line wraps at, goes with the node the layout maps it to.
+                        let line_range = line.text_range();
+                        let mut cursor = line_range.start;
+                        for (range, key, atomic) in items.drain(..) {
+                            if range.start > cursor {
+                                pieces.push(LinePiece::Text(None, cursor..range.start));
+                            }
+                            if !atomic {
+                                pieces.push(LinePiece::Text(Some(key), range.clone()));
+                            } else if shown(key) {
+                                pieces.push(LinePiece::Box(key));
+                            }
+                            cursor = cursor.max(range.end);
+                        }
+                        if line_range.end > cursor {
+                            pieces.push(LinePiece::Text(None, cursor..line_range.end));
+                        }
+                        for float in line.floats() {
+                            line_floats += 1;
+                            if shown(float.key.0) {
+                                pieces.push(LinePiece::Box(float.key.0));
+                            }
+                        }
+                        let index = line.index();
+                        while let Some(position) = statics
+                            .next_if(|position| position.line.is_some_and(|line| line <= index))
+                        {
+                            pieces.push(LinePiece::Box(position.key.0));
+                        }
+                    } else if !past_lines {
+                        past_lines = true;
+                        let floats = layout.floats().skip(line_floats);
+                        pieces.extend(
+                            floats
+                                .map(|float| float.key.0)
+                                .filter(|&key| shown(key))
+                                .map(LinePiece::Box),
+                        );
+                        pieces.extend(
+                            statics
+                                .by_ref()
+                                .map(|position| LinePiece::Box(position.key.0)),
+                        );
+                    } else {
+                        return None;
+                    }
+                }
+                let piece = pieces[next_piece].clone();
+                next_piece += 1;
+                match piece {
+                    LinePiece::Box(key) => {
+                        return Some(InlineContent::Box(NodeId::from_u64(key)));
+                    }
+                    LinePiece::Text(key, range) => {
+                        let key = key.or_else(|| {
+                            let position = Position::new(range.start, Affinity::Downstream);
+                            layout.node_position(position).map(|node| node.key.0)
+                        });
+                        let Some(key) = key.filter(|&key| shown(key)) else {
+                            continue;
+                        };
+                        let copied = layout.selected_text(range, CopyKind::Text);
+                        slices = Some((NodeId::from_u64(key), copied));
+                    }
+                }
+            }
+            let (node_id, copied) = slices.as_mut()?;
+            let Some(slice) = copied.next() else {
+                slices = None;
+                continue;
+            };
+            // The slices borrow from the layout text, which says where each is.
+            let at = (slice.as_ptr() as usize).wrapping_sub(text.as_ptr() as usize);
+            if slice.is_empty() || at >= text.len() {
+                continue;
+            }
+            return Some(InlineContent::Text {
+                node_id: *node_id,
+                range: at..at + slice.len(),
+            });
+        }
+    })
+}
+
+/// Hit tests physical CSS-pixel coordinates relative to the inline root's content box. `exact`
+/// requires the point to be within a line and its text extent.
+pub(crate) fn hit_test(
+    text: &TextLayout,
+    x: f32,
+    y: f32,
+    exact: bool,
+) -> Option<crate::node::InlineTextHit> {
+    let layout = text.layout()?;
+    let scale = text.scale;
+    let page = page(
+        text.writing_mode(),
+        text.content_size.width,
+        text.content_size.height,
+    );
+    let point = page.inverse()
+        * kurbo::Point::new(
+            f64::from(x * scale),
+            f64::from((y - text.block_offset) * scale),
+        );
+    let (inline, block) = (point.x as f32, point.y as f32);
+    if exact
+        && !layout.lines().any(|line| {
+            let metrics = line.metrics();
+            block >= metrics.top
+                && block < metrics.top + metrics.height()
+                && inline >= metrics.left
+                && inline < metrics.left + metrics.width
+        })
+    {
+        return None;
+    }
+    let position = layout.hit_test(inline, block, winkin::config::PastLines::Column)?;
+    let node = layout.node_position(position)?;
+    let node_id = NodeId::from_u64(node.key.0);
+    Some(crate::node::InlineTextHit {
+        node_id,
+        byte_offset: position.offset,
+    })
+}
+
+/// Calls `f` with each rectangle that highlights the text between `start` and `end`, in physical
+/// device pixels relative to the content box.
+pub(crate) fn for_each_selection_rect(
+    text: &TextLayout,
+    start: usize,
+    end: usize,
+    mut f: impl FnMut(kurbo::Rect),
+) {
+    let Some(layout) = text.layout() else {
+        return;
+    };
+    let mode = text.writing_mode();
+    let page = page(mode, text.content_size.width, text.content_size.height);
+    for selection in layout.selection_rects(start..end) {
+        let Some(line) = layout.line(selection.line) else {
+            continue;
+        };
+        let rect = kurbo::Rect::new(
+            f64::from(selection.inline.left),
+            f64::from(selection.block.over),
+            f64::from(selection.inline.right),
+            f64::from(selection.block.under),
+        );
+        f(line_frame(mode, page, &line.metrics()).transform_rect_bbox(rect));
+    }
+}
+
+/// The text between byte offsets `start` and `end` of the laid-out text, as it is copied, in the
+/// pieces of the text it is made of.
+pub(crate) fn selected_text(
+    text: &TextLayout,
+    start: usize,
+    end: usize,
+) -> impl Iterator<Item = &str> {
+    text.layout()
+        .filter(|layout| start < end && end <= layout.text().len())
+        .into_iter()
+        .flat_map(move |layout| layout.selected_text(start..end, winkin::selection::CopyKind::Text))
+}
+
+/// The parts of `node`'s inline box on each line, in CSS pixels relative to the border box of the
+/// inline root `root`, whose content box starts at `origin_x` and `origin_y`, computed as they are
+/// walked.
+pub(crate) fn fragment_rects(
+    layout: &Layout,
+    writing_mode: WritingMode,
+    root: &Node,
+    node: &Node,
+    origin_x: f32,
+    origin_y: f32,
+    scale: f32,
+) -> impl Iterator<Item = taffy::Rect<f32>> {
+    let root_layout = root.unrounded_layout();
+    let scale = f64::from(scale);
+    let content = kurbo::Size::new(
+        f64::from(root_layout.content_box_width()) * scale,
+        f64::from(root_layout.content_box_height()) * scale,
+    );
+    // `position: relative` moves the box and the boxes it is in.
+    let shift = relative_shift_of(
+        Some(node),
+        node.id.as_u64(),
+        content / scale,
+        root.primary_styles().is_some_and(|styles| {
+            styles.slow_clone_direction() == ::style::computed_values::direction::T::Rtl
+        }),
+    );
+    box_rects(layout, writing_mode, content, node.id.as_u64()).map(move |rect| taffy::Rect {
+        left: origin_x + (shift.x + rect.x0 / scale) as f32,
+        top: origin_y + (shift.y + rect.y0 / scale) as f32,
+        right: origin_x + (shift.x + rect.x1 / scale) as f32,
+        bottom: origin_y + (shift.y + rect.y1 / scale) as f32,
+    })
+}
+
+impl InlineText for TextLayout {
+    #[inline]
+    fn scale(&self) -> f32 {
+        self.scale
+    }
+
+    #[inline]
+    fn block_offset(&self) -> f32 {
+        self.block_offset
+    }
+
+    #[inline]
+    fn text(&self) -> &str {
+        self.layout().map_or("", |layout| layout.text())
+    }
+
+    #[inline]
+    fn text_len(&self) -> usize {
+        self.text().len()
+    }
+
+    fn selected_text(&self, start: usize, end: usize) -> impl Iterator<Item = &str> {
+        selected_text(self, start, end)
+    }
+
+    fn logical_content(&self) -> impl Iterator<Item = InlineContent> {
+        self.layout().into_iter().flat_map(logical_content)
+    }
+
+    fn source_offset(&self, node_id: NodeId, offset: usize) -> Option<usize> {
+        let layout = self.layout()?;
+        let position = layout.position(
+            NodeKey(node_id.as_u64()),
+            offset,
+            winkin::selection::Affinity::Downstream,
+        )?;
+        Some(position.offset)
+    }
+
+    #[inline]
+    fn maps_source(&self) -> bool {
+        true
+    }
+
+    fn first_baseline(&self) -> Option<f32> {
+        let line = self.layout()?.lines().next()?;
+        Some(line.metrics().baseline / self.scale + self.block_offset)
+    }
+
+    fn hit_test(&self, x: f32, y: f32, exact: bool) -> Option<InlineTextHit> {
+        hit_test(self, x, y, exact)
+    }
+
+    fn for_each_selection_rect(&self, start: usize, end: usize, f: impl FnMut(kurbo::Rect)) {
+        for_each_selection_rect(self, start, end, f);
+    }
+
+    fn fragment_rects(&self, root: &Node, node: &Node) -> impl Iterator<Item = taffy::Rect<f32>> {
+        let root_layout = root.unrounded_layout();
+        let content_box_inset = root_layout.padding + root_layout.border;
+        self.layout().into_iter().flat_map(move |layout| {
+            fragment_rects(
+                layout,
+                self.writing_mode,
+                root,
+                node,
+                content_box_inset.left,
+                content_box_inset.top + self.block_offset,
+                self.scale,
+            )
+        })
+    }
+
+    fn debug_print(&self) {
+        let Some(layout) = self.layout() else {
+            println!("Not laid out");
+            return;
+        };
+        println!("Text content: {:?}", layout.text());
+        println!("Lines:");
+        for line in layout.lines() {
+            let metrics = line.metrics();
+            println!(
+                "Line {}: left:{} top:{} width:{} height:{} text:{:?}",
+                line.index(),
+                metrics.left,
+                metrics.top,
+                metrics.width,
+                metrics.height(),
+                line.text_range(),
+            );
+        }
+    }
+}
+
+impl InlineLayoutEngine for TextLayout {
+    const SETS_WRITING_MODES: bool = true;
+    const READS_ROOM_ABOVE: bool = true;
+
+    fn style_change_rebuilds(old: &ComputedValues, new: &ComputedValues) -> bool {
+        // The build reads every inherited text and box property, the text
+        // properties that do not inherit, and an inline-level element's box,
+        // margins, borders and padding; measuring takes only the boxes'
+        // sizes and the basis percentages are taken of. The properties read
+        // only into the block's facts are the root's alone, which `prepare`
+        // compares and builds again for in place.
+        if inline_text_differs(old, new)
+            || old.get_inherited_box() != new.get_inherited_box()
+            || old.get_text() != new.get_text()
+        {
+            return true;
+        }
+        let inline = |style: &ComputedValues| {
+            style.get_box().display.outside()
+                == ::style::values::specified::box_::DisplayOutside::Inline
+        };
+        (inline(old) || inline(new))
+            && (old.get_box() != new.get_box()
+                || old.get_margin() != new.get_margin()
+                || old.get_border() != new.get_border()
+                || old.get_padding() != new.get_padding())
+    }
+
+    fn takes_room_above(&self) -> bool {
+        self.built && self.layout.has_annotations()
+    }
+
+    fn build_layouts(
+        cx: &mut TextContext,
+        nodes: &crate::NodeTree,
+        cascade: crate::text::DocumentCascade<'_>,
+        scale: f32,
+        layouts: &mut [(NodeId, Box<Self>)],
+    ) {
+        // Each atomic inline and float takes the size it was last measured
+        // at, which the first measure in layout replaces.
+        let cascade = Cascade {
+            stylist: cascade.stylist,
+            guards: cascade.guards,
+        };
+        #[cfg(feature = "parallel-construct")]
+        {
+            use rayon::prelude::*;
+            // Each thread builds with a context of its own, which takes the
+            // document's collection and configuration. Its caches stay warm
+            // from one construction to the next.
+            let (generation, threads) = (cx.generation, &cx.threads);
+            let (collection, config) = (cx.cx.collection(), *cx.cx.config());
+            let shared = cx.given.shared_fonts();
+            layouts.par_iter_mut().for_each(|(node, layout)| {
+                let mut thread = threads
+                    .get_or(|| {
+                        let mut own =
+                            Context::with_shared_fonts(collection.clone(), shared.clone());
+                        own.set_config(config);
+                        std::cell::RefCell::new((generation, own))
+                    })
+                    .borrow_mut();
+                let (held, own) = &mut *thread;
+                if *held != generation {
+                    own.set_collection(collection.clone());
+                    *held = generation;
+                }
+                build(nodes, cascade, own, layout, scale, *node);
+            });
+        }
+        #[cfg(not(feature = "parallel-construct"))]
+        for (node, layout) in layouts {
+            build(nodes, cascade, &mut cx.cx, layout, scale, *node);
+        }
+    }
+
+    fn is_empty(&self) -> bool {
+        // The content is built when it is laid out.
+        false
+    }
+
+    fn prepare(&mut self, doc: &mut BaseDocument, root: NodeId, lines: LinesInputs<'_>) {
+        let scale = doc.viewport.scale();
+        // Each border box, and where an atomic inline's baseline is, in device
+        // pixels. In a vertical line a box's height is along it, and it sits on
+        // no baseline of its own.
+        let mut sizes: Vec<BuiltBox> = lines
+            .sizes
+            .iter()
+            .map(|measured| BuiltBox {
+                node: measured.node.as_u64(),
+                size: if lines.vertical {
+                    BoxSize {
+                        inline: measured.size.height * scale,
+                        block: measured.size.width * scale,
+                        baseline: None,
+                    }
+                } else {
+                    BoxSize {
+                        inline: measured.size.width * scale,
+                        block: measured.size.height * scale,
+                        baseline: measured.baseline.map(|baseline| baseline * scale),
+                    }
+                },
+            })
+            .collect();
+        // An inline-size pass reads only how far each box reaches along the
+        // line: each box keeps the block size and baseline it was last
+        // measured with, which a later pass that sets the lines checks.
+        if lines.pass == Measure::InlineSizes {
+            self.keep_built_extents(&mut sizes);
+        }
+        // Box construction builds the content. A context it left unbuilt is
+        // built here, as is one whose root's indent, wrap style or fit changed
+        // since it was built, which keeps its box. A change to the alignment
+        // alone is set on the built content, whose lines are then broken
+        // again.
+        if self.built
+            && let Some(built) = &self.built_style
+            && let Some(now) = root_style(&doc.nodes, &doc.nodes[root])
+            && !ServoArc::ptr_eq(built, &now)
+            && block_text_differs(built, &now)
+        {
+            if alignment_alone_differs(built, &now) {
+                let (align, last) = style::text_align(&now);
+                if self.layout.set_text_align(align, last) {
+                    self.laid = false;
+                    self.placed_in = None;
+                }
+                self.built_style = Some(now);
+            } else {
+                self.built = false;
+            }
+        }
+        if !self.built {
+            let guard = doc.guard.read();
+            build(
+                &doc.nodes,
+                Cascade {
+                    stylist: &doc.stylist,
+                    guards: &StylesheetGuards::same(&guard),
+                },
+                &mut doc.text.cx,
+                self,
+                scale,
+                root,
+            );
+        }
+        self.measure(&mut doc.text.cx, &sizes, lines.basis * scale);
+    }
+
+    fn content_widths(&mut self) -> ContentWidths {
+        let widths = self.intrinsic_widths();
+        ContentWidths {
+            min: widths.min_content,
+            max: widths.max_content,
+        }
+    }
+
+    fn break_lines(
+        &mut self,
+        cx: &mut TextContext,
+        line_area: LineArea,
+        _style: Option<&ComputedValues>,
+        exclusions: &mut impl LineExclusions,
+    ) {
+        let area = Area {
+            room_above: line_area.room_above,
+            block_end: line_area.block_end,
+            ..Area::new(line_area.width)
+        };
+        // A pass that only sizes the block breaks without placing, unless the block was placed in
+        // this pass already: its lines then stay placed for painting.
+        let pass = Some(line_area.pass);
+        if line_area.sizes_only && self.placed_in != pass {
+            if self.built {
+                self.layout
+                    .size_lines(&mut cx.cx, area, &mut ExclusionsOf(exclusions));
+                self.laid = true;
+            }
+        } else {
+            self.lay_out(&mut cx.cx, area, &mut ExclusionsOf(exclusions));
+            self.placed_in = pass;
+        }
+    }
+
+    fn extent(&self, end_padding: f32) -> LinesExtent {
+        let Some(layout) = self.layout() else {
+            return LinesExtent::default();
+        };
+        let metrics = layout.metrics();
+        // Only annotations reaching under the last line reach into the padding, so with none
+        // there is nothing to work out.
+        let into_padding = if end_padding > 0.0 && layout.has_annotations() {
+            into_end_padding(layout.room_below(), end_padding)
+        } else {
+            0.0
+        };
+        LinesExtent {
+            height: metrics.block_end - into_padding,
+            width: layout
+                .lines()
+                .map(|line| {
+                    let metrics = line.metrics();
+                    metrics.left + metrics.width
+                })
+                .fold(0.0, f32::max),
+            first_baseline: metrics.first_baseline,
+            last_baseline: metrics.last_baseline,
+        }
+    }
+
+    fn set_frame(&mut self, block_offset: f32, content: taffy::Size<f32>) {
+        self.block_offset = block_offset;
+        self.content_size = kurbo::Size::new(f64::from(content.width), f64::from(content.height));
+    }
+
+    fn placements(&self) -> impl Iterator<Item = Placement> {
+        let mut placed = Vec::new();
+        if let Some(layout) = self.layout() {
+            if self.is_vertical() {
+                self.vertical_placements(layout, &mut placed);
+            } else {
+                horizontal_placements(layout, &mut placed);
+            }
+        }
+        placed.into_iter()
+    }
+
+    fn line_flow(&self) -> LineFlow {
+        match self.writing_mode {
+            WritingMode::HorizontalTb => LineFlow::Horizontal,
+            WritingMode::VerticalRl => LineFlow::VerticalRl,
+            WritingMode::VerticalLr => LineFlow::VerticalLr,
+            WritingMode::SidewaysRl => LineFlow::SidewaysRl,
+            WritingMode::SidewaysLr => LineFlow::SidewaysLr,
+        }
+    }
+
+    fn place_on_page(&self, along: [f32; 2], across: [f32; 2]) -> (f32, f32) {
+        let content = self.content_size;
+        let (width, height) = (content.width as f32, content.height as f32);
+        let [left, right] = along;
+        let [start, end] = across;
+        match self.writing_mode {
+            WritingMode::VerticalRl | WritingMode::SidewaysRl => (width - end, left),
+            WritingMode::VerticalLr => (start, left),
+            WritingMode::SidewaysLr => (start, height - right),
+            WritingMode::HorizontalTb => (left, start),
+        }
+    }
+
+    fn last_line_baseline(&self) -> LastBaseline {
+        let Some(layout) = self.layout() else {
+            return LastBaseline::Unknown;
+        };
+        if self.is_vertical() {
+            return LastBaseline::Unknown;
+        }
+        match layout.metrics().last_baseline {
+            Some(baseline) => LastBaseline::At(baseline),
+            None => LastBaseline::None,
+        }
+    }
+
+    fn room_below(&self) -> f32 {
+        self.layout().map_or(0.0, |layout| layout.room_below())
+    }
+
+    fn float_node(key: u64) -> Option<NodeId> {
+        // The block's initial letter and its inside marker have no node.
+        (key & (FIRST_LETTER_KEY | MARKER_KEY) == 0).then(|| NodeId::from_u64(key))
+    }
+
+    fn inline_shift(
+        doc: &BaseDocument,
+        node: NodeId,
+        containing: taffy::Size<f32>,
+        rtl: bool,
+    ) -> taffy::Point<f32> {
+        let shift =
+            doc.get_node(node)
+                .and_then(|node| node.parent)
+                .map_or(kurbo::Vec2::ZERO, |parent| {
+                    relative_shift(
+                        doc,
+                        parent.as_u64(),
+                        kurbo::Size::new(f64::from(containing.width), f64::from(containing.height)),
+                        rtl,
+                    )
+                });
+        taffy::Point {
+            x: shift.x as f32,
+            y: shift.y as f32,
+        }
+    }
+}
+
+impl TextLayout {
+    /// What the lines of a vertical layout placed, turned onto the page: each
+    /// atomic inline's margin box, and where each absolutely positioned box
+    /// would have been.
+    fn vertical_placements(&self, layout: &Layout, placed: &mut Vec<Placement>) {
+        let writing_mode = self.writing_mode;
+        let at = |node: u64, (x, y): (f32, f32), rtl| Placement {
+            node: NodeId::from_u64(node),
+            x,
+            top: y,
+            line_top: y,
+            line_bottom: y,
+            block_start: y,
+            rtl,
+        };
+        for line in layout.lines() {
+            let metrics = line.metrics();
+            // `vertical-lr` stacks its lines from the left while each line's
+            // over side is its right.
+            let block = |over: f32, under: f32| {
+                if writing_mode == WritingMode::VerticalLr {
+                    let bottom = metrics.top + metrics.height();
+                    [bottom - under, bottom - over]
+                } else {
+                    [metrics.top + over, metrics.top + under]
+                }
+            };
+            for item in line.items() {
+                if let Item::Atomic(atomic) = item {
+                    let inline = atomic.inline();
+                    let cross = atomic.block();
+                    let page = self.place_on_page(
+                        [metrics.left + inline.left, metrics.left + inline.right],
+                        block(cross.over, cross.under),
+                    );
+                    placed.push(at(atomic.key().0, page, None));
+                }
+            }
+        }
+        // An absolutely positioned box's block-start edge, across the page,
+        // faces right where the lines stack from the right.
+        let from_right = matches!(
+            writing_mode,
+            WritingMode::VerticalRl | WritingMode::SidewaysRl
+        );
+        for position in layout.static_positions() {
+            let page = self.place_on_page(
+                [position.inline, position.inline],
+                [position.block, position.block],
+            );
+            placed.push(at(position.key.0, page, Some(from_right)));
+        }
+    }
+}
+
+/// What the lines of a horizontal layout placed: each atomic inline's margin
+/// box on its line, and where each absolutely positioned box would have been,
+/// as winkin finds its static position: its line box spans the block axis of
+/// an inline-level box's static-position rectangle.
+fn horizontal_placements(layout: &Layout, placed: &mut Vec<Placement>) {
+    for line in layout.lines() {
+        let metrics = line.metrics();
+        for item in line.items() {
+            if let Item::Atomic(atomic) = item {
+                let inline = atomic.inline();
+                let block = atomic.block();
+                placed.push(Placement {
+                    node: NodeId::from_u64(atomic.key().0),
+                    x: metrics.left + inline.left,
+                    top: metrics.top + block.over,
+                    line_top: metrics.top,
+                    line_bottom: metrics.top + metrics.height(),
+                    block_start: metrics.top,
+                    rtl: None,
+                });
+            }
+        }
+    }
+    for at in layout.static_positions() {
+        let bottom = at
+            .line
+            .and_then(|line| layout.line(line))
+            .map_or(at.block, |line| {
+                let metrics = line.metrics();
+                (metrics.top + metrics.height()).max(at.block)
+            });
+        placed.push(Placement {
+            node: NodeId::from_u64(at.key.0),
+            x: at.inline,
+            top: at.block,
+            line_top: at.block,
+            line_bottom: bottom,
+            block_start: at.block,
+            rtl: Some(at.direction == winkin::style::Direction::Rtl),
+        });
+    }
+}
+
+/// How far the last line's ruby annotations and emphasis marks reach into
+/// the block's end padding, `padding` device pixels, where they reach past
+/// its line box: the layout's end counts them, and Chrome lets them into
+/// the padding rather than make the block taller.
+fn into_end_padding(room_below: f32, padding: f32) -> f32 {
+    (-room_below).clamp(0.0, padding.max(0.0))
+}
+
+/// The floats Blitz keeps an inline formatting context's lines clear of, as
+/// winkin asks after them.
+struct ExclusionsOf<'a, E>(&'a mut E);
+
+impl<E: LineExclusions> Exclusions for ExclusionsOf<'_, E> {
+    fn band(&self, _line: usize, block: BlockExtents) -> InlineExtents {
+        let (left, right) = self.0.band(block.start, block.end);
+        InlineExtents { left, right }
+    }
+
+    fn below(&self, top: f32) -> Option<f32> {
+        self.0.below(top)
+    }
+
+    fn place(&mut self, float: winkin::FloatRequest) -> PlacedFloat {
+        let placed = self.0.place(FloatRequest {
+            key: float.key.0,
+            side: match float.side {
+                FloatSide::Left => super::FloatSide::Left,
+                FloatSide::Right => super::FloatSide::Right,
+            },
+            inline_size: float.inline_size,
+            block_size: float.block_size,
+            block_start: float.block_start,
+            initial_letter: float.key.0 & FIRST_LETTER_KEY != 0,
+        });
+        PlacedFloat {
+            inline: InlineExtents {
+                left: placed.left,
+                right: placed.right,
+            },
+            block: BlockExtents {
+                start: placed.top,
+                end: placed.bottom,
+            },
+        }
+    }
+
+    fn checkpoint(&self) -> ExclusionsCheckpoint {
+        ExclusionsCheckpoint(self.0.checkpoint() as u64)
+    }
+
+    fn rewind(&mut self, to: ExclusionsCheckpoint) {
+        self.0.rewind(to.0 as usize);
+    }
+}
+
+/// Builds `content`, the value of the `<input>` or `<textarea>` `node`, into `text`: set in
+/// `computed`, its computed style, with white space preserved (as `break-spaces` where the style
+/// asks for it). The lines wrap at `width` device pixels as the style wraps them, or not at all
+/// where it is `None`.
+///
+/// The text is laid out in up to three pieces, keyed as [`PIECE_KEYS`] says: before, inside and
+/// after `composition`, the text an input method is composing, which is underlined, or else
+/// `revealed`, the text a password field shows in the clear. Where the style masks the text
+/// (`-webkit-text-security`) or transforms it (`text-transform`), the layout maps each piece's
+/// offsets back to `content`, and this returns true. Otherwise offsets in the layout's text are
+/// offsets in `content`.
+#[allow(clippy::too_many_arguments)]
+pub(crate) fn build_plain_text(
+    cx: &mut TextContext,
+    text: &mut TextLayout,
+    node: NodeId,
+    computed: &ComputedValues,
+    content: &str,
+    composition: Option<std::ops::Range<usize>>,
+    revealed: Option<std::ops::Range<usize>>,
+    scale: f32,
+    width: Option<f32>,
+) -> bool {
+    let feature_values = style::FeatureValues::default();
+    let lists = style::FontLists::of(computed, &feature_values);
+    let own = style::computed_style(&lists, computed, scale, None);
+    let own = ComputedStyle {
+        text: winkin::style::TextGroup {
+            white_space_collapse: match own.text.white_space_collapse {
+                winkin::style::WhiteSpaceCollapse::BreakSpaces => {
+                    winkin::style::WhiteSpaceCollapse::BreakSpaces
+                }
+                _ => winkin::style::WhiteSpaceCollapse::Preserve,
+            },
+            wrap_mode: match width {
+                Some(_) => own.text.wrap_mode,
+                None => winkin::style::TextWrapMode::NoWrap,
+            },
+            ..own.text
+        },
+        ..own
+    };
+    let masked = own.text.security != winkin::style::TextSecurity::None;
+    let mapped = masked || own.text.transform != winkin::style::TextGroup::INITIAL.transform;
+    let block = style::block_style(&own, None, computed, computed, scale);
+    let key = NodeKey(node.as_u64());
+    text.built = false;
+    text.laid = false;
+    text.boxes.clear();
+    text.basis = 0.0;
+    text.scale = scale;
+    text.writing_mode = block.writing_mode;
+    text.styles.first_line.clear();
+    text.styles.first_letter = None;
+    text.styles.marker = None;
+    text.styles.marks.clear();
+    let mut options = BuildOptions::default();
+    options.map_source = mapped;
+    let mut builder = text.layout.builder(&mut cx.cx, key, &block, options);
+    let piece = |number: u64| NodeKey(node.as_u64() | number << PIECE_SHIFT);
+    // The piece in the middle, in a box of its own: the composing text, which the renderer
+    // underlines, or the text shown in the clear.
+    let middle = match (composition, revealed.filter(|_| masked)) {
+        (Some(range), _) => Some((
+            range,
+            NodeKey(COMPOSE_KEY | node.as_u64()),
+            ComputedStyle {
+                decorates: true,
+                ..unboxed(own)
+            },
+        )),
+        (None, Some(range)) => Some((
+            range,
+            NodeKey(PIECE_KEYS | node.as_u64()),
+            ComputedStyle {
+                text: winkin::style::TextGroup {
+                    security: winkin::style::TextSecurity::None,
+                    ..own.text
+                },
+                ..unboxed(own)
+            },
+        )),
+        (None, None) => None,
+    };
+    match middle {
+        Some((range, box_key, box_style)) => {
+            for (number, part, boxed) in [
+                (0, &content[..range.start], false),
+                (1, &content[range.clone()], true),
+                (2, &content[range.end..], false),
+            ] {
+                if boxed {
+                    builder.open_box(box_key, &box_style, None);
+                }
+                if !part.is_empty() {
+                    builder.text(piece(number), part);
+                }
+                if boxed {
+                    builder.close_box();
+                }
+            }
+        }
+        None => builder.text(key, content),
+    }
+    builder.finish();
+    text.built = true;
+    let area = Area::new(width.unwrap_or(f32::MAX / 4.0));
+    text.lay_out(&mut cx.cx, area, &mut winkin::NoExclusions);
+    mapped
+}
+
+impl MarkerEngine for TextLayout {
+    fn build(
+        cx: &mut TextContext,
+        node: NodeId,
+        computed: &ComputedValues,
+        marker: &Marker,
+        bullet: bool,
+        scale: f32,
+    ) -> Self {
+        let mut text = TextLayout {
+            scale,
+            ..TextLayout::default()
+        };
+        let key = NodeKey(MARKER_KEY | node.as_u64());
+        text.styles.marker = Some(ServoArc::new(computed.clone()));
+        let feature_values = style::FeatureValues::default();
+        let mut lists = style::FontLists::of(computed, &feature_values);
+        if bullet {
+            lists = lists.with_families_first(&BULLET_FAMILIES);
+        }
+        let own = unboxed(style::computed_style(&lists, computed, scale, None));
+        let block = ComputedBlockStyle {
+            writing_mode: WritingMode::HorizontalTb,
+            ..ComputedBlockStyle::new(&own)
+        };
+        let mut builder = text
+            .layout
+            .builder(&mut cx.cx, key, &block, BuildOptions::default());
+        match marker {
+            Marker::Char(char) => builder.text(key, char.encode_utf8(&mut [0; 4])),
+            Marker::String(string) => builder.text(key, string),
+        }
+        builder.finish();
+        text.built = true;
+        text.lay_out(
+            &mut cx.cx,
+            Area::new(f32::MAX / 4.0),
+            &mut winkin::NoExclusions,
+        );
+        text
+    }
+}
diff --git a/packages/blitz-dom/src/text/winkin/style.rs b/packages/blitz-dom/src/text/winkin/style.rs
new file mode 100644
index 0000000000..214913ebae
--- /dev/null
+++ b/packages/blitz-dom/src/text/winkin/style.rs
@@ -0,0 +1,1180 @@
+//! Conversion from Stylo computed values to winkin's styles.
+//!
+//! Every length is in device pixels, which is what Blitz lays text out in.
+//! A percentage only layout can resolve is passed on as a fraction: a
+//! margin's or padding's of the containing block, a `word-spacing`
+//! percentage of the space it widens, a `text-indent` percentage of the
+//! line.
+//!
+//! What Stylo does not compute stays at winkin's initial value:
+//! `white-space-trim`, `text-emphasis-skip`, `line-padding`,
+//! `line-fit-edge`, `initial-letter-align` and `text-group-align`.
+
+use std::borrow::Cow;
+
+use style::Atom;
+use style::computed_values::box_decoration_break::T as StyloBoxDecorationBreak;
+use style::computed_values::direction::T as StyloDirection;
+use style::computed_values::font_kerning::T as StyloFontKerning;
+use style::computed_values::font_optical_sizing::T as StyloFontOpticalSizing;
+use style::computed_values::font_variant_caps::T as StyloFontVariantCaps;
+use style::computed_values::font_variant_emoji::T as StyloFontVariantEmoji;
+use style::computed_values::font_variant_position::T as StyloFontVariantPosition;
+use style::computed_values::hyphens::T as StyloHyphens;
+use style::computed_values::ruby_align::T as StyloRubyAlign;
+use style::computed_values::ruby_overhang::T as StyloRubyOverhang;
+use style::computed_values::text_orientation::T as StyloTextOrientation;
+use style::computed_values::text_spacing_trim::T as StyloTextSpacingTrim;
+use style::computed_values::text_wrap_mode::T as StyloTextWrapMode;
+use style::computed_values::text_wrap_style::T as StyloTextWrapStyle;
+use style::computed_values::unicode_bidi::T as StyloUnicodeBidi;
+use style::computed_values::white_space_collapse::T as StyloWhiteSpace;
+use style::logical_geometry::WritingMode as StyloWritingMode;
+use style::properties::ComputedValues;
+use style::servo_arc::Arc as ServoArc;
+use style::stylesheets::FontFeatureValuesRule;
+use style::stylesheets::font_feature_values_rule::{FFVDeclaration, PairValues, SingleValue};
+use style::stylist::Stylist;
+use style::values::CustomIdent;
+use style::values::computed::font::{
+    FontFamily as StyloFontFamily, FontStyle as StyloFontStyle,
+    GenericFontFamily as StyloGenericFontFamily,
+};
+use style::values::computed::font::{
+    FontSynthesis as StyloFontSynthesis, FontSynthesisStyle as StyloFontSynthesisStyle,
+    FontVariantEastAsian, FontVariantLigatures, FontVariantNumeric, LineHeight as StyloLineHeight,
+    SingleFontFamily,
+};
+use style::values::computed::length_percentage::Unpacked;
+use style::values::computed::text::TextAlignLast as StyloTextAlignLast;
+use style::values::computed::text::TextEmphasisStyle as StyloTextEmphasisStyle;
+use style::values::computed::text::{
+    TextFit as StyloTextFit, TextFitKind as StyloTextFitKind, TextFitTarget as StyloTextFitTarget,
+};
+use style::values::computed::{
+    BorderSideWidth, Length, LengthPercentage as StyloLengthPercentage,
+    TextTransform as StyloTextTransform,
+};
+use style::values::computed::{
+    HangingPunctuation as StyloHangingPunctuation, TextCombineUpright as StyloTextCombineUpright,
+    TextSecurity as StyloTextSecurity,
+};
+use style::values::generics::box_::{BaselineShiftKeyword, GenericBaselineShift};
+use style::values::generics::font::GenericFontSizeAdjust;
+use style::values::generics::length::GenericLengthOrNumber as StyloLengthOrNumber;
+use style::values::generics::length::GenericMargin;
+use style::values::generics::text::InitialLetterSink as StyloInitialLetterSink;
+use style::values::specified::HyphenateCharacter;
+use style::values::specified::TextAlignKeyword;
+use style::values::specified::border::BorderStyle;
+use style::values::specified::box_::{
+    AlignmentBaseline, DominantBaseline as StyloDominantBaseline,
+};
+use style::values::specified::font::VariantAlternates;
+use style::values::specified::text::{
+    RubyPosition as StyloRubyPosition, TextAutospace as StyloTextAutospace,
+    TextBoxEdge as StyloTextBoxEdge, TextBoxTrim as StyloTextBoxTrim, TextDecorationLine,
+    TextEdgeKeyword, TextEmphasisPosition as StyloTextEmphasisPosition,
+    TextJustify as StyloTextJustify, TextOverflowSide as StyloTextOverflowSide,
+};
+use winkin::style::{
+    AdjustMetric, BaseDirection, BidiGroup, BoxDecorationBreak, Direction, DominantBaseline,
+    EdgesGroup, EmphasisPosition, EmphasisSide, EmphasisSkip, EmphasisVerticalSide, FontFamilyName,
+    FontFeature, FontGroup, FontKerning, FontLanguageOverride, FontOpticalSizing, FontSizeAdjust,
+    FontSynthesis, FontVariantCaps, FontVariantEmoji, FontVariantPosition, FontVariants,
+    FontVariation, HangEnd, HangingPunctuation, Hyphens, InitialLetter, InitialLetterAlign,
+    Language, LengthPercentage, LineBreak, LineClamp, LineGroup, LineHeight, OrientationGroup,
+    OverflowWrap, RubyAlign, RubyGroup, RubyOverhang, RubyPosition, Sides, TabSize, Tag, TextAlign,
+    TextAlignLast, TextAutospace, TextBoxEdge, TextBoxTrim, TextCase, TextCombineUpright,
+    TextEdgeOver, TextEdgeUnder, TextEmphasis, TextGroup, TextIndent, TextJustify, TextOrientation,
+    TextOverflow, TextSpacingTrim, TextTransform, TextWrapMode, TextWrapStyle, UnicodeBidi,
+    VerticalAlign, WhiteSpaceCollapse, WordBreak, WritingMode,
+};
+use winkin::style::{
+    FontStyle, FontWeight, FontWidth, GenericFamily, TextFit, TextFitKind, TextFitTarget,
+};
+use winkin::{ComputedBlockStyle, ComputedStyle};
+
+/// The document's `@font-feature-values` rules, which name the values
+/// `font-variant-alternates` asks for, the least precedent first.
+#[derive(Default)]
+pub(crate) struct FeatureValues(Vec<ServoArc<FontFeatureValuesRule>>);
+
+impl FeatureValues {
+    /// The rules in effect in `stylist`, in cascade order: by origin, then
+    /// by layer.
+    pub(crate) fn of(stylist: &Stylist) -> Self {
+        Self(
+            stylist
+                .iter_extra_data_origins_rev()
+                .flat_map(|(data, _)| data.font_feature_values.iter())
+                .map(|(rule, _)| rule.clone())
+                .collect(),
+        )
+    }
+
+    /// Adds the features `computed`'s `font-variant-alternates` resolves to.
+    ///
+    /// Chrome resolves a name against the rules for the family a font is
+    /// taken from. Here it is the first family in `font-family` that any
+    /// rule names, and a name no rule for it defines adds nothing.
+    fn resolve(&self, computed: &ComputedValues, out: &mut Vec<FontFeature>) {
+        if self.0.is_empty() {
+            return;
+        }
+        let alternates = computed.slow_clone_font_variant_alternates();
+        if alternates
+            .iter()
+            .all(|alternate| matches!(alternate, VariantAlternates::HistoricalForms))
+        {
+            return;
+        }
+        let names_family = |rule: &FontFeatureValuesRule, family: &str| {
+            rule.family_names
+                .iter()
+                .any(|name| name.name.as_str().eq_ignore_ascii_case(family))
+        };
+        let Some(family) = computed
+            .get_font()
+            .font_family
+            .families
+            .list
+            .iter()
+            .filter_map(|family| match family {
+                SingleFontFamily::FamilyName(name) => Some(&*name.name),
+                SingleFontFamily::Generic(_) => None,
+            })
+            .find(|family| self.0.iter().any(|rule| names_family(rule, family)))
+        else {
+            return;
+        };
+        // A later rule outweighs an earlier one, name by name.
+        let find = |name: &CustomIdent, block: Block| {
+            self.0
+                .iter()
+                .rev()
+                .filter(|rule| names_family(rule, family))
+                .find_map(|rule| block.find(rule, &name.0))
+        };
+        let feature = |tag: [u8; 4], value: u32| FontFeature {
+            tag: Tag::from_bytes(tag),
+            value: value.min(u32::from(u16::MAX)) as u16,
+        };
+        // `ssNN` and `cvNN`, for a number from 1 to 99.
+        let numbered = |prefix: [u8; 2], number: u32| {
+            (1..=99).contains(&number).then(|| {
+                [
+                    prefix[0],
+                    prefix[1],
+                    b'0' + (number / 10) as u8,
+                    b'0' + (number % 10) as u8,
+                ]
+            })
+        };
+        for alternate in alternates.iter() {
+            match alternate {
+                VariantAlternates::Stylistic(name) => {
+                    if let Some(value) = find(name, Block::Stylistic) {
+                        out.push(feature(*b"salt", value[0]));
+                    }
+                }
+                VariantAlternates::Swash(name) => {
+                    if let Some(value) = find(name, Block::Swash) {
+                        out.push(feature(*b"swsh", value[0]));
+                        out.push(feature(*b"cswh", value[0]));
+                    }
+                }
+                VariantAlternates::Ornaments(name) => {
+                    if let Some(value) = find(name, Block::Ornaments) {
+                        out.push(feature(*b"ornm", value[0]));
+                    }
+                }
+                VariantAlternates::Annotation(name) => {
+                    if let Some(value) = find(name, Block::Annotation) {
+                        out.push(feature(*b"nalt", value[0]));
+                    }
+                }
+                VariantAlternates::Styleset(names) => {
+                    for name in names.iter() {
+                        for set in find(name, Block::Styleset).unwrap_or_default() {
+                            if let Some(tag) = numbered(*b"ss", set) {
+                                out.push(feature(tag, 1));
+                            }
+                        }
+                    }
+                }
+                VariantAlternates::CharacterVariant(names) => {
+                    for name in names.iter() {
+                        let Some(variant) = find(name, Block::CharacterVariant) else {
+                            continue;
+                        };
+                        if let Some(tag) = numbered(*b"cv", variant[0]) {
+                            out.push(feature(tag, variant.get(1).copied().unwrap_or(1)));
+                        }
+                    }
+                }
+                VariantAlternates::HistoricalForms => {}
+            }
+        }
+    }
+}
+
+/// A block of an `@font-feature-values` rule, which one function of
+/// `font-variant-alternates` reads.
+#[derive(Copy, Clone)]
+enum Block {
+    Stylistic,
+    Swash,
+    Ornaments,
+    Annotation,
+    Styleset,
+    CharacterVariant,
+}
+
+impl Block {
+    /// The values `rule` gives `name` in this block, where it gives any.
+    fn find(self, rule: &FontFeatureValuesRule, name: &Atom) -> Option<Vec<u32>> {
+        let single = |declarations: &[FFVDeclaration<SingleValue>]| {
+            declarations
+                .iter()
+                .find(|declaration| declaration.name == *name)
+                .map(|declaration| vec![declaration.value.0])
+        };
+        match self {
+            Self::Stylistic => single(&rule.stylistic),
+            Self::Swash => single(&rule.swash),
+            Self::Ornaments => single(&rule.ornaments),
+            Self::Annotation => single(&rule.annotation),
+            Self::Styleset => rule
+                .styleset
+                .iter()
+                .find(|declaration| declaration.name == *name)
+                .map(|declaration| declaration.value.0.clone()),
+            Self::CharacterVariant => rule
+                .character_variant
+                .iter()
+                .find(|declaration| declaration.name == *name)
+                .map(|declaration| {
+                    let PairValues(first, second) = declaration.value;
+                    std::iter::once(first).chain(second).collect()
+                }),
+        }
+    }
+}
+
+/// The lists an element's style borrows: its families, and the features
+/// and variations it asks for.
+///
+/// The features are what `font-variant-alternates` names through
+/// `@font-feature-values`, then `font-feature-settings`, as Chrome orders
+/// them: the other `font-variant-*` properties are winkin's to turn into
+/// features, and to synthesize where the font has none.
+pub(crate) struct FontLists<'a> {
+    families: Vec<FontFamilyName<'a>>,
+    features: Vec<FontFeature>,
+    variations: Vec<FontVariation>,
+}
+
+impl<'a> FontLists<'a> {
+    /// The lists `computed` asks for, borrowing its family names.
+    pub(crate) fn of(computed: &'a ComputedValues, values: &FeatureValues) -> Self {
+        let font = computed.get_font();
+        // The initial `font-family` names no family: winkin then sets the text in the language's
+        // standard font, as Chrome sets it, where `serif` would take the serif setting, which
+        // differs for Chinese, Japanese and Korean.
+        let families = if is_initial_family(&font.font_family) {
+            Vec::new()
+        } else {
+            font.font_family
+                .families
+                .list
+                .iter()
+                .map(font_family_name)
+                .collect()
+        };
+        let mut features = Vec::new();
+        values.resolve(computed, &mut features);
+        features.extend(font.font_feature_settings.0.iter().map(|setting| {
+            FontFeature::new(
+                Tag::from_bytes(setting.tag.0.to_be_bytes()),
+                setting.value as u16,
+            )
+        }));
+        Self {
+            families,
+            features,
+            variations: font
+                .font_variation_settings
+                .0
+                .iter()
+                .map(|setting| FontVariation {
+                    tag: Tag::from_bytes(setting.tag.0.to_be_bytes()),
+                    value: setting.value,
+                })
+                .collect(),
+        }
+    }
+
+    /// These lists with `families` tried first, as a list marker's bullet
+    /// font is.
+    pub(crate) fn with_families_first(mut self, first: &[FontFamilyName<'static>]) -> Self {
+        let rest = std::mem::take(&mut self.families);
+        self.families = first.iter().cloned().chain(rest).collect();
+        self
+    }
+}
+
+/// Whether `family` is the initial `font-family`.
+///
+/// Stylo's initial value is `serif`, held in one shared list that inheriting and `initial` keep;
+/// a `serif` a style sheet names is parsed into a list of its own.
+fn is_initial_family(family: &StyloFontFamily) -> bool {
+    std::ptr::eq(
+        family.families.list.as_ptr(),
+        StyloFontFamily::generic(StyloGenericFontFamily::Serif)
+            .families
+            .list
+            .as_ptr(),
+    )
+}
+
+/// A family of `font-family`, as fontwich names it.
+pub(crate) fn font_family_name(family: &SingleFontFamily) -> FontFamilyName<'_> {
+    match family {
+        SingleFontFamily::FamilyName(name) => family_name(name.name.as_str()),
+        SingleFontFamily::Generic(generic) => FontFamilyName::Generic(generic_family(*generic)),
+    }
+}
+
+/// A named family, as Blitz names it to Parley: the Apple system font's
+/// legacy names are the `system-ui` generic.
+fn family_name(name: &str) -> FontFamilyName<'_> {
+    #[cfg(target_vendor = "apple")]
+    if name == "-apple-system" || name == "BlinkMacSystemFont" {
+        return FontFamilyName::Generic(winkin::style::GenericFamily::SystemUi);
+    }
+    FontFamilyName::Named(Cow::Borrowed(name))
+}
+
+/// A length-percentage as a length in device pixels and a fraction of
+/// whatever layout resolves it against.
+///
+/// `calc()` mixing the two is split by resolving it against two bases: the
+/// value is linear in its basis.
+fn length_percentage(value: &StyloLengthPercentage, scale: f32) -> LengthPercentage {
+    let at_zero = value.resolve(Length::new(0.0)).px();
+    let at_hundred = value.resolve(Length::new(100.0)).px();
+    LengthPercentage {
+        px: at_zero * scale,
+        fraction: (at_hundred - at_zero) / 100.0,
+    }
+}
+
+/// Converts an element's computed style, its lists borrowed from `lists`.
+///
+/// Lengths are scaled by `scale` into device pixels. Percentages of the
+/// containing block stay percentages, which winkin resolves against the
+/// basis each measure gives it. `language` is the content language from the
+/// nearest `lang`.
+pub(crate) fn computed_style<'a>(
+    lists: &'a FontLists<'_>,
+    computed: &'a ComputedValues,
+    scale: f32,
+    language: Option<Language>,
+) -> ComputedStyle<'a> {
+    ComputedStyle {
+        font: font_group(computed, lists, scale),
+        text: text_group(computed, scale, language),
+        line: line_group(computed, scale),
+        bidi: BidiGroup {
+            direction: if computed.get_inherited_box().direction == StyloDirection::Rtl {
+                Direction::Rtl
+            } else {
+                Direction::Ltr
+            },
+            unicode_bidi: unicode_bidi(computed),
+        },
+        orientation: OrientationGroup {
+            // Which way each character stands in a vertical line. It
+            // inherits, so a span may set it against the block around it.
+            text_orientation: match computed.slow_clone_text_orientation() {
+                StyloTextOrientation::Mixed => TextOrientation::Mixed,
+                StyloTextOrientation::Upright => TextOrientation::Upright,
+                StyloTextOrientation::Sideways => TextOrientation::Sideways,
+            },
+            text_combine_upright: match computed.slow_clone_text_combine_upright() {
+                StyloTextCombineUpright::None => TextCombineUpright::None,
+                StyloTextCombineUpright::All => TextCombineUpright::All,
+                StyloTextCombineUpright::Digits(count) => TextCombineUpright::Digits(count),
+            },
+        },
+        edges: edges_group(computed, scale),
+        ruby: RubyGroup {
+            position: ruby_position(computed),
+            align: match computed.slow_clone_ruby_align() {
+                StyloRubyAlign::SpaceAround => RubyAlign::SpaceAround,
+                StyloRubyAlign::SpaceBetween => RubyAlign::SpaceBetween,
+                StyloRubyAlign::Center => RubyAlign::Center,
+                StyloRubyAlign::Start => RubyAlign::Start,
+            },
+            overhang: match computed.slow_clone_ruby_overhang() {
+                StyloRubyOverhang::Auto => RubyOverhang::Auto,
+                StyloRubyOverhang::Spaces => RubyOverhang::Spaces,
+            },
+        },
+        paints: paints(computed),
+        decorates: decorates(computed),
+    }
+}
+
+/// `unicode-bidi`.
+pub(crate) fn unicode_bidi(computed: &ComputedValues) -> UnicodeBidi {
+    match computed.slow_clone_unicode_bidi() {
+        StyloUnicodeBidi::Normal => UnicodeBidi::Normal,
+        StyloUnicodeBidi::Embed => UnicodeBidi::Embed,
+        StyloUnicodeBidi::Isolate => UnicodeBidi::Isolate,
+        StyloUnicodeBidi::BidiOverride => UnicodeBidi::BidiOverride,
+        StyloUnicodeBidi::IsolateOverride => UnicodeBidi::IsolateOverride,
+        StyloUnicodeBidi::Plaintext => UnicodeBidi::Plaintext,
+    }
+}
+
+/// Whether the box draws something of its own -- a background, a border,
+/// an outline -- which is what keeps its fragment in the layout. A
+/// decoration line doesn't count. What it draws is read from the node when
+/// painting.
+fn paints(computed: &ComputedValues) -> bool {
+    let current_color = computed.slow_clone_color();
+    let background = computed.get_background();
+    let fills = background
+        .background_color
+        .resolve_to_absolute(&current_color)
+        .alpha
+        > 0.0;
+    let images = background
+        .background_image
+        .0
+        .iter()
+        .any(|image| !matches!(image, style::values::computed::Image::None));
+    let border = computed.get_border();
+    let bordered = [
+        (&border.border_top_width, border.border_top_style),
+        (&border.border_right_width, border.border_right_style),
+        (&border.border_bottom_width, border.border_bottom_style),
+        (&border.border_left_width, border.border_left_style),
+    ]
+    .into_iter()
+    .any(|(width, style)| !style.none_or_hidden() && width.0.to_f32_px() > 0.0);
+    let outline = computed.get_outline();
+    let outlined =
+        !outline.outline_style.none_or_hidden() && outline.outline_width.0.to_f32_px() > 0.0;
+    fills || images || bordered || outlined
+}
+
+/// Whether the element sets a decoration line that is drawn.
+pub(crate) fn decorates(computed: &ComputedValues) -> bool {
+    computed.slow_clone_text_decoration_line().intersects(
+        TextDecorationLine::UNDERLINE
+            | TextDecorationLine::OVERLINE
+            | TextDecorationLine::LINE_THROUGH,
+    )
+}
+
+fn font_group<'a>(
+    computed: &ComputedValues,
+    lists: &'a FontLists<'_>,
+    scale: f32,
+) -> FontGroup<'a> {
+    let font = computed.get_font();
+    let synthesis = |value: StyloFontSynthesis| value == StyloFontSynthesis::Auto;
+    FontGroup {
+        families: &lists.families,
+        features: &lists.features,
+        variations: &lists.variations,
+        size: font.font_size.used_size.0.px() * scale,
+        weight: FontWeight::new(font.font_weight.value()),
+        width: FontWidth::from_percentage(font.font_width.0.to_float()),
+        style: match font.font_style {
+            StyloFontStyle::NORMAL => FontStyle::Normal,
+            StyloFontStyle::ITALIC => FontStyle::Italic,
+            oblique => FontStyle::Oblique(Some(oblique.oblique_degrees())),
+        },
+        synthesis: FontSynthesis {
+            weight: synthesis(computed.slow_clone_font_synthesis_weight()),
+            // `oblique-only` allows a slant only where one was asked for.
+            style: match computed.slow_clone_font_synthesis_style() {
+                StyloFontSynthesisStyle::Auto => true,
+                StyloFontSynthesisStyle::None => false,
+                StyloFontSynthesisStyle::ObliqueOnly => !matches!(
+                    font.font_style,
+                    style::values::computed::font::FontStyle::NORMAL
+                        | style::values::computed::font::FontStyle::ITALIC
+                ),
+            },
+            small_caps: synthesis(computed.slow_clone_font_synthesis_small_caps()),
+            position: synthesis(computed.slow_clone_font_synthesis_position()),
+        },
+        variant_caps: match computed.slow_clone_font_variant_caps() {
+            StyloFontVariantCaps::Normal => FontVariantCaps::Normal,
+            StyloFontVariantCaps::SmallCaps => FontVariantCaps::SmallCaps,
+            StyloFontVariantCaps::AllSmallCaps => FontVariantCaps::AllSmallCaps,
+            StyloFontVariantCaps::PetiteCaps => FontVariantCaps::PetiteCaps,
+            StyloFontVariantCaps::AllPetiteCaps => FontVariantCaps::AllPetiteCaps,
+            StyloFontVariantCaps::Unicase => FontVariantCaps::Unicase,
+            StyloFontVariantCaps::TitlingCaps => FontVariantCaps::TitlingCaps,
+        },
+        variant_position: match computed.slow_clone_font_variant_position() {
+            StyloFontVariantPosition::Normal => FontVariantPosition::Normal,
+            StyloFontVariantPosition::Sub => FontVariantPosition::Sub,
+            StyloFontVariantPosition::Super => FontVariantPosition::Super,
+        },
+        variants: variants(computed),
+        variant_emoji: match computed.slow_clone_font_variant_emoji() {
+            StyloFontVariantEmoji::Normal => FontVariantEmoji::Normal,
+            StyloFontVariantEmoji::Text => FontVariantEmoji::Text,
+            StyloFontVariantEmoji::Emoji => FontVariantEmoji::Emoji,
+            StyloFontVariantEmoji::Unicode => FontVariantEmoji::Unicode,
+        },
+        optical_sizing: match computed.slow_clone_font_optical_sizing() {
+            StyloFontOpticalSizing::Auto => FontOpticalSizing::Auto,
+            StyloFontOpticalSizing::None => FontOpticalSizing::None,
+        },
+        kerning: match computed.slow_clone_font_kerning() {
+            StyloFontKerning::Auto => FontKerning::Auto,
+            StyloFontKerning::Normal => FontKerning::Normal,
+            StyloFontKerning::None => FontKerning::None,
+        },
+        language_override: match computed.slow_clone_font_language_override().0 {
+            0 => FontLanguageOverride::Normal,
+            tag => FontLanguageOverride::System(Tag::from_bytes(tag.to_be_bytes())),
+        },
+        size_adjust: match computed.slow_clone_font_size_adjust() {
+            GenericFontSizeAdjust::None => FontSizeAdjust::None,
+            GenericFontSizeAdjust::ExHeight(value) => adjust(AdjustMetric::ExHeight, value.0),
+            GenericFontSizeAdjust::CapHeight(value) => adjust(AdjustMetric::CapHeight, value.0),
+            GenericFontSizeAdjust::ChWidth(value) => adjust(AdjustMetric::ChWidth, value.0),
+            GenericFontSizeAdjust::IcWidth(value) => adjust(AdjustMetric::IcWidth, value.0),
+            GenericFontSizeAdjust::IcHeight(value) => adjust(AdjustMetric::IcHeight, value.0),
+        },
+    }
+}
+
+fn adjust(metric: AdjustMetric, value: f32) -> FontSizeAdjust {
+    FontSizeAdjust::Hold { metric, value }
+}
+
+/// The keywords of `font-variant-ligatures`, `-numeric`, `-east-asian` and
+/// `-alternates` as one set.
+fn variants(computed: &ComputedValues) -> FontVariants {
+    let mut set = FontVariants::NORMAL;
+    let mut add = |on: bool, keyword: FontVariants| {
+        if on {
+            set = set.union(keyword);
+        }
+    };
+    let ligatures = computed.slow_clone_font_variant_ligatures();
+    if ligatures.contains(FontVariantLigatures::NONE) {
+        // `none` is every `no-` keyword.
+        add(true, FontVariants::NO_COMMON_LIGATURES);
+        add(true, FontVariants::NO_DISCRETIONARY_LIGATURES);
+        add(true, FontVariants::NO_HISTORICAL_LIGATURES);
+        add(true, FontVariants::NO_CONTEXTUAL);
+    }
+    for (bit, keyword) in [
+        (
+            FontVariantLigatures::COMMON_LIGATURES,
+            FontVariants::COMMON_LIGATURES,
+        ),
+        (
+            FontVariantLigatures::NO_COMMON_LIGATURES,
+            FontVariants::NO_COMMON_LIGATURES,
+        ),
+        (
+            FontVariantLigatures::DISCRETIONARY_LIGATURES,
+            FontVariants::DISCRETIONARY_LIGATURES,
+        ),
+        (
+            FontVariantLigatures::NO_DISCRETIONARY_LIGATURES,
+            FontVariants::NO_DISCRETIONARY_LIGATURES,
+        ),
+        (
+            FontVariantLigatures::HISTORICAL_LIGATURES,
+            FontVariants::HISTORICAL_LIGATURES,
+        ),
+        (
+            FontVariantLigatures::NO_HISTORICAL_LIGATURES,
+            FontVariants::NO_HISTORICAL_LIGATURES,
+        ),
+        (FontVariantLigatures::CONTEXTUAL, FontVariants::CONTEXTUAL),
+        (
+            FontVariantLigatures::NO_CONTEXTUAL,
+            FontVariants::NO_CONTEXTUAL,
+        ),
+    ] {
+        add(ligatures.contains(bit), keyword);
+    }
+    let numeric = computed.slow_clone_font_variant_numeric();
+    for (bit, keyword) in [
+        (FontVariantNumeric::LINING_NUMS, FontVariants::LINING_NUMS),
+        (
+            FontVariantNumeric::OLDSTYLE_NUMS,
+            FontVariants::OLDSTYLE_NUMS,
+        ),
+        (
+            FontVariantNumeric::PROPORTIONAL_NUMS,
+            FontVariants::PROPORTIONAL_NUMS,
+        ),
+        (FontVariantNumeric::TABULAR_NUMS, FontVariants::TABULAR_NUMS),
+        (
+            FontVariantNumeric::DIAGONAL_FRACTIONS,
+            FontVariants::DIAGONAL_FRACTIONS,
+        ),
+        (
+            FontVariantNumeric::STACKED_FRACTIONS,
+            FontVariants::STACKED_FRACTIONS,
+        ),
+        (FontVariantNumeric::ORDINAL, FontVariants::ORDINAL),
+        (FontVariantNumeric::SLASHED_ZERO, FontVariants::SLASHED_ZERO),
+    ] {
+        add(numeric.contains(bit), keyword);
+    }
+    let east_asian = computed.slow_clone_font_variant_east_asian();
+    for (bit, keyword) in [
+        (FontVariantEastAsian::JIS78, FontVariants::JIS78),
+        (FontVariantEastAsian::JIS83, FontVariants::JIS83),
+        (FontVariantEastAsian::JIS90, FontVariants::JIS90),
+        (FontVariantEastAsian::JIS04, FontVariants::JIS04),
+        (FontVariantEastAsian::SIMPLIFIED, FontVariants::SIMPLIFIED),
+        (FontVariantEastAsian::TRADITIONAL, FontVariants::TRADITIONAL),
+        (FontVariantEastAsian::FULL_WIDTH, FontVariants::FULL_WIDTH),
+        (
+            FontVariantEastAsian::PROPORTIONAL_WIDTH,
+            FontVariants::PROPORTIONAL_WIDTH,
+        ),
+        (FontVariantEastAsian::RUBY, FontVariants::RUBY),
+    ] {
+        add(east_asian.contains(bit), keyword);
+    }
+    // The other alternates name `@font-feature-values`, and are features
+    // of the font lists.
+    let historical = computed
+        .slow_clone_font_variant_alternates()
+        .iter()
+        .any(|alternate| matches!(alternate, VariantAlternates::HistoricalForms));
+    add(historical, FontVariants::HISTORICAL_FORMS);
+    set
+}
+
+fn text_group(computed: &ComputedValues, scale: f32, language: Option<Language>) -> TextGroup<'_> {
+    let text = computed.get_inherited_text();
+    let transform = computed.slow_clone_text_transform();
+    let emphasis = emphasis(computed, language.as_ref());
+    TextGroup {
+        language,
+        hyphenate_character: match &text.hyphenate_character {
+            HyphenateCharacter::Auto => None,
+            HyphenateCharacter::String(string) => Some(&**string),
+        },
+        white_space_collapse: match text.white_space_collapse {
+            StyloWhiteSpace::Collapse => WhiteSpaceCollapse::Collapse,
+            StyloWhiteSpace::Preserve => WhiteSpaceCollapse::Preserve,
+            StyloWhiteSpace::PreserveBreaks => WhiteSpaceCollapse::PreserveBreaks,
+            StyloWhiteSpace::BreakSpaces => WhiteSpaceCollapse::BreakSpaces,
+            StyloWhiteSpace::PreserveSpaces => WhiteSpaceCollapse::PreserveSpaces,
+        },
+        wrap_mode: match text.text_wrap_mode {
+            StyloTextWrapMode::Wrap => TextWrapMode::Wrap,
+            StyloTextWrapMode::Nowrap => TextWrapMode::NoWrap,
+        },
+        // math-auto excludes the other transforms.
+        transform: if transform.contains(StyloTextTransform::MATH_AUTO) {
+            TextTransform::MATH_AUTO
+        } else {
+            TextTransform {
+                case: if transform.contains(StyloTextTransform::UPPERCASE) {
+                    TextCase::Uppercase
+                } else if transform.contains(StyloTextTransform::LOWERCASE) {
+                    TextCase::Lowercase
+                } else if transform.contains(StyloTextTransform::CAPITALIZE) {
+                    TextCase::Capitalize
+                } else {
+                    TextCase::None
+                },
+                full_width: transform.contains(StyloTextTransform::FULL_WIDTH),
+                full_size_kana: transform.contains(StyloTextTransform::FULL_SIZE_KANA),
+            }
+        },
+        security: match text._webkit_text_security {
+            StyloTextSecurity::None => winkin::style::TextSecurity::None,
+            StyloTextSecurity::Disc => winkin::style::TextSecurity::Disc,
+            StyloTextSecurity::Circle => winkin::style::TextSecurity::Circle,
+            StyloTextSecurity::Square => winkin::style::TextSecurity::Square,
+        },
+        word_break: match text.word_break {
+            style::values::computed::WordBreak::Normal => WordBreak::Normal,
+            style::values::computed::WordBreak::BreakAll => WordBreak::BreakAll,
+            style::values::computed::WordBreak::KeepAll => WordBreak::KeepAll,
+            style::values::computed::WordBreak::BreakWord => WordBreak::Normal,
+        },
+        line_break: match computed.slow_clone_line_break() {
+            style::values::computed::LineBreak::Auto
+            | style::values::computed::LineBreak::Normal => LineBreak::Normal,
+            style::values::computed::LineBreak::Loose => LineBreak::Loose,
+            style::values::computed::LineBreak::Strict => LineBreak::Strict,
+            style::values::computed::LineBreak::Anywhere => LineBreak::Anywhere,
+        },
+        // `word-break: break-word` is `word-break: normal` with `overflow-wrap: anywhere`.
+        overflow_wrap: match (text.word_break, text.overflow_wrap) {
+            (style::values::computed::WordBreak::BreakWord, _) => OverflowWrap::Anywhere,
+            (_, style::values::computed::OverflowWrap::Normal) => OverflowWrap::Normal,
+            (_, style::values::computed::OverflowWrap::BreakWord) => OverflowWrap::BreakWord,
+            (_, style::values::computed::OverflowWrap::Anywhere) => OverflowWrap::Anywhere,
+        },
+        hyphens: match computed.slow_clone_hyphens() {
+            StyloHyphens::None => Hyphens::None,
+            StyloHyphens::Manual => Hyphens::Manual,
+            StyloHyphens::Auto => Hyphens::Auto,
+        },
+        tab_size: match text.tab_size {
+            StyloLengthOrNumber::Number(spaces) => TabSize::Spaces(spaces.0),
+            StyloLengthOrNumber::Length(length) => TabSize::Px(length.0.px() * scale),
+        },
+        // A percentage is of the font size, which layout takes it of.
+        letter_spacing: length_percentage(&text.letter_spacing.0, scale),
+        // A percentage is of the font size, which layout takes it of.
+        word_spacing: length_percentage(&text.word_spacing, scale),
+        autospace: {
+            let autospace = computed.slow_clone_text_autospace();
+            if autospace.intersects(StyloTextAutospace::NORMAL | StyloTextAutospace::AUTO) {
+                TextAutospace::NORMAL
+            } else {
+                TextAutospace {
+                    ideograph_alpha: autospace.contains(StyloTextAutospace::IDEOGRAPH_ALPHA),
+                    ideograph_numeric: autospace.contains(StyloTextAutospace::IDEOGRAPH_NUMERIC),
+                }
+            }
+        },
+        justify: match text.text_justify {
+            StyloTextJustify::Auto => TextJustify::Auto,
+            StyloTextJustify::None => TextJustify::None,
+            StyloTextJustify::InterWord => TextJustify::InterWord,
+            StyloTextJustify::InterCharacter => TextJustify::InterCharacter,
+        },
+        spacing_trim: match computed.slow_clone_text_spacing_trim() {
+            StyloTextSpacingTrim::Normal => TextSpacingTrim::Normal,
+            StyloTextSpacingTrim::SpaceAll => TextSpacingTrim::SpaceAll,
+            StyloTextSpacingTrim::SpaceFirst => TextSpacingTrim::SpaceFirst,
+            StyloTextSpacingTrim::TrimStart => TextSpacingTrim::TrimStart,
+        },
+        hanging_punctuation: {
+            let hanging = computed.slow_clone_hanging_punctuation();
+            HangingPunctuation {
+                first: hanging.contains(StyloHangingPunctuation::FIRST),
+                last: hanging.contains(StyloHangingPunctuation::LAST),
+                end: if hanging.contains(StyloHangingPunctuation::FORCE_END) {
+                    HangEnd::Force
+                } else if hanging.contains(StyloHangingPunctuation::ALLOW_END) {
+                    HangEnd::Allow
+                } else {
+                    HangEnd::None
+                },
+            }
+        },
+        emphasis,
+        ..TextGroup::INITIAL
+    }
+}
+
+/// The string `text-emphasis-style` marks text with, where it marks it:
+/// a string's first character, or a keyword's character.
+pub(crate) fn emphasis_mark_string(computed: &ComputedValues) -> Option<String> {
+    use style::values::specified::text::{TextEmphasisFillMode, TextEmphasisShapeKeyword};
+    match computed.get_inherited_text().text_emphasis_style {
+        StyloTextEmphasisStyle::None => None,
+        StyloTextEmphasisStyle::String(ref string) => string.chars().next().map(String::from),
+        StyloTextEmphasisStyle::Keyword { fill, shape } => {
+            let (filled, open) = match shape {
+                TextEmphasisShapeKeyword::Dot => ('\u{2022}', '\u{25E6}'),
+                TextEmphasisShapeKeyword::Circle => ('\u{25CF}', '\u{25CB}'),
+                TextEmphasisShapeKeyword::DoubleCircle => ('\u{25C9}', '\u{25CE}'),
+                TextEmphasisShapeKeyword::Triangle => ('\u{25B2}', '\u{25B3}'),
+                TextEmphasisShapeKeyword::Sesame => ('\u{FE45}', '\u{FE46}'),
+            };
+            Some(String::from(if fill == TextEmphasisFillMode::Open {
+                open
+            } else {
+                filled
+            }))
+        }
+    }
+}
+
+/// `text-emphasis` as far as layout reads it: whether marks are set, and on
+/// which side. `auto` is `under right` where the content `language` is
+/// Chinese and `over right` otherwise, as CSS Text Decoration 4 and Chrome
+/// have it.
+fn emphasis(computed: &ComputedValues, language: Option<&Language>) -> TextEmphasis {
+    let marks = !matches!(
+        computed.slow_clone_text_emphasis_style(),
+        StyloTextEmphasisStyle::None
+    );
+    let position = computed.slow_clone_text_emphasis_position();
+    TextEmphasis {
+        marks,
+        position: EmphasisPosition {
+            side: if position.contains(StyloTextEmphasisPosition::UNDER)
+                || (position.contains(StyloTextEmphasisPosition::AUTO)
+                    && language
+                        .is_some_and(|language| language.language().eq_ignore_ascii_case("zh")))
+            {
+                EmphasisSide::Under
+            } else {
+                EmphasisSide::Over
+            },
+            vertical_side: if position.contains(StyloTextEmphasisPosition::LEFT) {
+                EmphasisVerticalSide::Left
+            } else {
+                EmphasisVerticalSide::Right
+            },
+        },
+        skip: EmphasisSkip::INITIAL,
+    }
+}
+
+fn line_group(computed: &ComputedValues, scale: f32) -> LineGroup {
+    let font = computed.get_font();
+    let initial_letter = computed.slow_clone_initial_letter();
+    LineGroup {
+        height: match font.line_height {
+            StyloLineHeight::Normal => LineHeight::Normal,
+            StyloLineHeight::Number(number) => LineHeight::Factor(number.0),
+            StyloLineHeight::Length(length) => LineHeight::Px(length.0.px() * scale),
+        },
+        vertical_align: vertical_align(computed, scale),
+        dominant_baseline: match computed.slow_clone_dominant_baseline() {
+            StyloDominantBaseline::Alphabetic => DominantBaseline::Alphabetic,
+            StyloDominantBaseline::Ideographic => DominantBaseline::Ideographic,
+            StyloDominantBaseline::Central | StyloDominantBaseline::Middle => {
+                DominantBaseline::Central
+            }
+            StyloDominantBaseline::Mathematical => DominantBaseline::Mathematical,
+            _ => DominantBaseline::Auto,
+        },
+        // A sink left out, or `drop`, is the size, floored; `raise` is 1.
+        initial_letter: if initial_letter.size > 0.0 {
+            InitialLetter {
+                size: initial_letter.size,
+                sink: match initial_letter.sink {
+                    StyloInitialLetterSink::Integer(sink) if sink > 0 => sink as u32,
+                    StyloInitialLetterSink::Raise => 1,
+                    _ => (initial_letter.size.floor() as u32).max(1),
+                },
+                align: InitialLetterAlign::Alphabetic,
+            }
+        } else {
+            InitialLetter::NONE
+        },
+        text_box_trim: text_box_trim(computed.slow_clone_text_box_trim()),
+        text_box_edge: text_box_edge(computed.slow_clone_text_box_edge()),
+        ..LineGroup::INITIAL
+    }
+}
+
+fn text_box_trim(trim: StyloTextBoxTrim) -> TextBoxTrim {
+    match (
+        trim.contains(StyloTextBoxTrim::TRIM_START),
+        trim.contains(StyloTextBoxTrim::TRIM_END),
+    ) {
+        (true, true) => TextBoxTrim::TrimBoth,
+        (true, false) => TextBoxTrim::TrimStart,
+        (false, true) => TextBoxTrim::TrimEnd,
+        (false, false) => TextBoxTrim::None,
+    }
+}
+
+fn text_box_edge(edge: StyloTextBoxEdge) -> TextBoxEdge {
+    match edge {
+        StyloTextBoxEdge::Auto => TextBoxEdge::AUTO,
+        StyloTextBoxEdge::TextEdge(edge) => TextBoxEdge {
+            over: match edge.over {
+                TextEdgeKeyword::Cap => TextEdgeOver::Cap,
+                TextEdgeKeyword::Ex => TextEdgeOver::Ex,
+                TextEdgeKeyword::Ideographic => TextEdgeOver::Ideographic,
+                TextEdgeKeyword::IdeographicInk => TextEdgeOver::IdeographicInk,
+                _ => TextEdgeOver::Text,
+            },
+            under: match edge.under {
+                TextEdgeKeyword::Alphabetic => TextEdgeUnder::Alphabetic,
+                TextEdgeKeyword::Ideographic => TextEdgeUnder::Ideographic,
+                TextEdgeKeyword::IdeographicInk => TextEdgeUnder::IdeographicInk,
+                _ => TextEdgeUnder::Text,
+            },
+        },
+    }
+}
+
+/// Margin, border and padding, and `box-decoration-break`.
+///
+/// A border width is snapped as CSS snaps it, in device pixels: one under a
+/// pixel to a pixel, and any other down to a whole one.
+fn edges_group(computed: &ComputedValues, scale: f32) -> EdgesGroup {
+    let margin = computed.get_margin();
+    let padding = computed.get_padding();
+    let border = computed.get_border();
+    let margin_side = |value: &GenericMargin<StyloLengthPercentage>| match value {
+        GenericMargin::LengthPercentage(length) => length_percentage(length, scale),
+        _ => LengthPercentage::default(),
+    };
+    let border_side = |width: &BorderSideWidth, style: BorderStyle| {
+        let width = width.0.to_f32_px() * scale;
+        if style.none_or_hidden() || width <= 0.0 {
+            0.0
+        } else {
+            width.floor().max(1.0)
+        }
+    };
+    EdgesGroup {
+        margin: Sides {
+            top: margin_side(&margin.margin_top),
+            right: margin_side(&margin.margin_right),
+            bottom: margin_side(&margin.margin_bottom),
+            left: margin_side(&margin.margin_left),
+        },
+        border: Sides {
+            top: border_side(&border.border_top_width, border.border_top_style),
+            right: border_side(&border.border_right_width, border.border_right_style),
+            bottom: border_side(&border.border_bottom_width, border.border_bottom_style),
+            left: border_side(&border.border_left_width, border.border_left_style),
+        },
+        padding: Sides {
+            top: length_percentage(&padding.padding_top.0, scale),
+            right: length_percentage(&padding.padding_right.0, scale),
+            bottom: length_percentage(&padding.padding_bottom.0, scale),
+            left: length_percentage(&padding.padding_left.0, scale),
+        },
+        decoration_break: match computed.slow_clone_box_decoration_break() {
+            StyloBoxDecorationBreak::Slice => BoxDecorationBreak::Slice,
+            StyloBoxDecorationBreak::Clone => BoxDecorationBreak::Clone,
+        },
+    }
+}
+
+/// `vertical-align`, which Stylo keeps as its two longhands.
+fn vertical_align(computed: &ComputedValues, scale: f32) -> VerticalAlign {
+    match computed.slow_clone_baseline_shift() {
+        GenericBaselineShift::Keyword(BaselineShiftKeyword::Sub) => return VerticalAlign::Sub,
+        GenericBaselineShift::Keyword(BaselineShiftKeyword::Super) => return VerticalAlign::Super,
+        GenericBaselineShift::Keyword(BaselineShiftKeyword::Top) => return VerticalAlign::Top,
+        GenericBaselineShift::Keyword(BaselineShiftKeyword::Bottom) => {
+            return VerticalAlign::Bottom;
+        }
+        GenericBaselineShift::Keyword(BaselineShiftKeyword::Center) => {
+            return VerticalAlign::Middle;
+        }
+        GenericBaselineShift::Length(shift) => match shift.unpack() {
+            Unpacked::Length(length) if length.px() != 0.0 => {
+                return VerticalAlign::Px(length.px() * scale);
+            }
+            Unpacked::Percentage(percentage) if percentage.0 != 0.0 => {
+                return VerticalAlign::Fraction(percentage.0);
+            }
+            _ => {}
+        },
+    }
+    #[allow(unreachable_patterns)]
+    match computed.slow_clone_alignment_baseline() {
+        AlignmentBaseline::TextTop => VerticalAlign::TextTop,
+        AlignmentBaseline::TextBottom => VerticalAlign::TextBottom,
+        AlignmentBaseline::Middle => VerticalAlign::Middle,
+        _ => VerticalAlign::Baseline,
+    }
+}
+
+/// Which way the block's lines run. The vendored Stylo computes the
+/// sideways modes and `text-orientation`.
+///
+/// `is_sideways` is not the question here: it also answers yes to
+/// `text-orientation: sideways`, which turns the glyphs of a vertical block
+/// without changing which way its lines run. Only the writing mode's own
+/// sideways values reverse the lines, and that is `VERTICAL_SIDEWAYS`.
+pub(crate) fn writing_mode(computed: &ComputedValues) -> WritingMode {
+    let mode = computed.writing_mode;
+    if mode.intersects(StyloWritingMode::VERTICAL_SIDEWAYS) {
+        if mode.is_vertical_lr() {
+            WritingMode::SidewaysLr
+        } else {
+            WritingMode::SidewaysRl
+        }
+    } else if mode.is_vertical_lr() {
+        WritingMode::VerticalLr
+    } else if mode.is_vertical() {
+        WritingMode::VerticalRl
+    } else {
+        WritingMode::HorizontalTb
+    }
+}
+
+/// The block's `text-align` and `text-align-last`, read from `computed`.
+pub(crate) fn text_align(computed: &ComputedValues) -> (TextAlign, TextAlignLast) {
+    let align = match computed.slow_clone_text_align() {
+        TextAlignKeyword::Start => TextAlign::Start,
+        TextAlignKeyword::End => TextAlign::End,
+        TextAlignKeyword::Left | TextAlignKeyword::MozLeft => TextAlign::Left,
+        TextAlignKeyword::Right | TextAlignKeyword::MozRight => TextAlign::Right,
+        TextAlignKeyword::Center | TextAlignKeyword::MozCenter => TextAlign::Center,
+        TextAlignKeyword::Justify => TextAlign::Justify,
+    };
+    let last = match computed.get_inherited_text().text_align_last {
+        StyloTextAlignLast::Auto => TextAlignLast::Auto,
+        StyloTextAlignLast::Start => TextAlignLast::Start,
+        StyloTextAlignLast::End => TextAlignLast::End,
+        StyloTextAlignLast::Left => TextAlignLast::Left,
+        StyloTextAlignLast::Right => TextAlignLast::Right,
+        StyloTextAlignLast::Center => TextAlignLast::Center,
+        StyloTextAlignLast::Justify => TextAlignLast::Justify,
+    };
+    (align, last)
+}
+
+/// The block's styling: its own style and its `::first-line` style, and the
+/// properties with one value per block container, read from `computed`.
+///
+/// `container` is the box whose overflow decides whether `text-overflow`
+/// applies, which is the block itself or, for an anonymous block, the box
+/// around it.
+pub(crate) fn block_style<'a>(
+    style: &'a ComputedStyle<'a>,
+    first_line: Option<&'a ComputedStyle<'a>>,
+    computed: &ComputedValues,
+    container: &ComputedValues,
+    scale: f32,
+) -> ComputedBlockStyle<'a> {
+    let text = computed.get_inherited_text();
+    let (text_align, text_align_last) = text_align(computed);
+    let indent = computed.slow_clone_text_indent();
+    // `plaintext` on the block takes each paragraph's direction from its own
+    // first strong character.
+    let direction = if style.bidi.unicode_bidi == UnicodeBidi::Plaintext {
+        BaseDirection::Auto
+    } else if style.bidi.direction == Direction::Rtl {
+        BaseDirection::Rtl
+    } else {
+        BaseDirection::Ltr
+    };
+    // An ellipsis where the block clips what overflows it, as Chrome's
+    // `ShouldTruncateOverflowingText` asks. The end side's value, which is
+    // the only side a line overflows at: Stylo keeps it in `second` either
+    // way, a single value being the end with the start left at `clip`.
+    let clips = !matches!(
+        container.slow_clone_overflow_x(),
+        style::values::computed::Overflow::Visible
+    );
+    let text_overflow = match &computed.get_text().text_overflow.second {
+        StyloTextOverflowSide::Ellipsis | StyloTextOverflowSide::String(_) if clips => {
+            TextOverflow::Ellipsis
+        }
+        _ => TextOverflow::Clip,
+    };
+    ComputedBlockStyle {
+        first_line,
+        direction,
+        writing_mode: writing_mode(computed),
+        text_align,
+        text_align_last,
+        text_indent: TextIndent {
+            amount: length_percentage(&indent.length, scale),
+            hanging: indent.hanging,
+            each_line: indent.each_line,
+        },
+        text_wrap_style: match computed.slow_clone_text_wrap_style() {
+            StyloTextWrapStyle::Auto => TextWrapStyle::Auto,
+            StyloTextWrapStyle::Stable => TextWrapStyle::Stable,
+            StyloTextWrapStyle::Balance => TextWrapStyle::Balance,
+            StyloTextWrapStyle::Pretty => TextWrapStyle::Pretty,
+        },
+        text_overflow,
+        // `line-clamp`, or where it is `none`, `-webkit-line-clamp`, which
+        // Chrome applies to a `-webkit-box`; the box is not required here,
+        // Stylo's servo build having no `-webkit-box` to ask for.
+        line_clamp: {
+            let clamp = computed.slow_clone_line_clamp();
+            match clamp.max_lines.lines_value() {
+                Some(lines) => LineClamp::Lines(lines.0.max(0) as u32),
+                None if clamp.max_lines.is_auto() => LineClamp::Auto,
+                None => LineClamp::None,
+            }
+        },
+        text_box_trim: text_box_trim(computed.slow_clone_text_box_trim()),
+        text_box_edge: text_box_edge(computed.slow_clone_text_box_edge()),
+        text_fit: text_fit(&text.text_fit),
+        ..ComputedBlockStyle::new(style)
+    }
+}
+
+/// `text-fit`, its limit as a fraction.
+fn text_fit(fit: &StyloTextFit) -> TextFit {
+    TextFit {
+        kind: match fit.kind {
+            StyloTextFitKind::None => TextFitKind::None,
+            StyloTextFitKind::Grow => TextFitKind::Grow,
+            StyloTextFitKind::Shrink => TextFitKind::Shrink,
+        },
+        target: match fit.target {
+            StyloTextFitTarget::Consistent => TextFitTarget::Consistent,
+            StyloTextFitTarget::PerLine => TextFitTarget::PerLine,
+            StyloTextFitTarget::PerLineAll => TextFitTarget::PerLineAll,
+        },
+        limit: fit.limit.map(|limit| limit.0.0),
+    }
+}
+
+/// `ruby-position`.
+///
+/// `alternate` alone is Stylo's `AlternateOver`; the vendored Stylo's initial
+/// value is Chrome's `over`, so the two are told apart.
+pub(super) fn ruby_position(computed: &ComputedValues) -> RubyPosition {
+    match computed.slow_clone_ruby_position() {
+        StyloRubyPosition::AlternateOver => RubyPosition::Alternate,
+        StyloRubyPosition::AlternateUnder => RubyPosition::AlternateUnder,
+        StyloRubyPosition::Over => RubyPosition::Over,
+        StyloRubyPosition::Under => RubyPosition::Under,
+    }
+}
+
+/// A generic family as fontwich names it.
+fn generic_family(generic: StyloGenericFontFamily) -> GenericFamily {
+    match generic {
+        StyloGenericFontFamily::None | StyloGenericFontFamily::SansSerif => {
+            GenericFamily::SansSerif
+        }
+        StyloGenericFontFamily::Serif => GenericFamily::Serif,
+        StyloGenericFontFamily::Monospace => GenericFamily::Monospace,
+        StyloGenericFontFamily::Cursive => GenericFamily::Cursive,
+        StyloGenericFontFamily::Fantasy => GenericFamily::Fantasy,
+        StyloGenericFontFamily::SystemUi => GenericFamily::SystemUi,
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use style::ArcSlice;
+    use style::values::computed::font::{FontFamilyList, SingleFontFamily};
+
+    use super::{StyloFontFamily, StyloGenericFontFamily, is_initial_family};
+
+    #[test]
+    fn only_the_initial_family_is_the_initial_family() {
+        assert!(is_initial_family(&StyloFontFamily::serif()));
+        // A style sheet's `serif`, in a list of its own as Stylo parses it.
+        let named = StyloFontFamily {
+            families: FontFamilyList {
+                list: ArcSlice::from_iter(std::iter::once(SingleFontFamily::Generic(
+                    StyloGenericFontFamily::Serif,
+                ))),
+            },
+            is_system_font: false,
+            is_initial: false,
+        };
+        assert!(!is_initial_family(&named));
+    }
+}
diff --git a/packages/blitz-dom/src/traversal.rs b/packages/blitz-dom/src/traversal.rs
index bbab931581..3c85c33de8 100644
--- a/packages/blitz-dom/src/traversal.rs
+++ b/packages/blitz-dom/src/traversal.rs
@@ -5,18 +5,6 @@ use style::dom::TNode as _;
 
 use crate::{BaseDocument, Node};
 
-macro_rules! iter_children {
-    ($node_expr:expr, $cb:expr) => {{
-        let node = &mut $node_expr;
-        let children = core::mem::take(&mut node.children);
-        for child_id in children.iter().copied() {
-            $cb(child_id)
-        }
-        $node_expr.children = children;
-    }};
-}
-pub(crate) use iter_children;
-
 macro_rules! iter_children_and_pseudos {
     ($node_expr:expr, $cb:expr) => {{
         // Load node
@@ -44,7 +32,7 @@ macro_rules! iter_children_and_pseudos {
 pub(crate) use iter_children_and_pseudos;
 
 #[derive(Clone)]
-/// An pre-order tree traverser for a [BaseDocument](crate::document::BaseDocument).
+/// An pre-order tree traverser for a [BaseDocument].
 pub struct TreeTraverser<'a> {
     doc: &'a BaseDocument,
     stack: Vec<NodeId>,
@@ -75,7 +63,7 @@ impl Iterator for TreeTraverser<'_> {
 }
 
 #[derive(Clone)]
-/// An ancestor traverser for a [BaseDocument](crate::document::BaseDocument).
+/// An ancestor traverser for a [BaseDocument].
 pub struct AncestorTraverser<'a> {
     doc: &'a BaseDocument,
     current: NodeId,
diff --git a/packages/blitz-html/Cargo.toml b/packages/blitz-html/Cargo.toml
index 9813fc2e8a..1f9a532bec 100644
--- a/packages/blitz-html/Cargo.toml
+++ b/packages/blitz-html/Cargo.toml
@@ -11,6 +11,10 @@ edition.workspace = true
 rust-version.workspace = true
 
 [features]
+default = ["parley"]
+# The text backend: Parley (the default) or winkin. With both, Parley is used.
+parley = ["blitz-dom/parley"]
+winkin = ["blitz-dom/winkin"]
 accessibility = ["blitz-dom/accessibility"]
 tracing = ["dep:tracing", "blitz-dom/tracing"]
 
diff --git a/packages/blitz-paint/Cargo.toml b/packages/blitz-paint/Cargo.toml
index 7fb7d046d0..b247110855 100644
--- a/packages/blitz-paint/Cargo.toml
+++ b/packages/blitz-paint/Cargo.toml
@@ -11,7 +11,10 @@ edition.workspace = true
 rust-version.workspace = true
 
 [features]
-default = ["svg"]
+default = ["svg", "parley"]
+# The text backend, as blitz-dom's features select it: Parley or winkin.
+parley = ["blitz-dom/parley"]
+winkin = ["blitz-dom/winkin"]
 tracing = ["dep:tracing"]
 svg = ["dep:anyrender_svg", "dep:usvg", "blitz-dom/svg"]
 custom-widget = ["blitz-dom/custom-widget"]
@@ -37,7 +40,6 @@ euclid = { workspace = true }
 taffy = { workspace = true }
 
 # Linebender + WGPU dependencies
-parley = { workspace = true, features = ["bytemuck"] }
 skrifa = { workspace = true }
 color = { workspace = true }
 peniko = { workspace = true }
diff --git a/packages/blitz-paint/src/lib.rs b/packages/blitz-paint/src/lib.rs
index afae3e2a28..58ed874169 100644
--- a/packages/blitz-paint/src/lib.rs
+++ b/packages/blitz-paint/src/lib.rs
@@ -19,12 +19,6 @@ use anyrender::{PaintScene, Scene};
 use blitz_dom::{BaseDocument, NodeId, util::Color};
 use render::BlitzDomPainter;
 
-const FONT_EMBOLDEN_ENABLED: bool = cfg!(any(
-    feature = "font-embolden",
-    all(feature = "apple-font-embolden", target_os = "macos"),
-    all(feature = "apple-font-embolden", target_os = "ios"),
-));
-
 /// The default color for text selection highlights
 const SELECTION_COLOR: Color = Color::from_rgb8(180, 213, 255);
 
diff --git a/packages/blitz-paint/src/render.rs b/packages/blitz-paint/src/render.rs
index 407fd1abd3..813e688de4 100644
--- a/packages/blitz-paint/src/render.rs
+++ b/packages/blitz-paint/src/render.rs
@@ -10,6 +10,7 @@ use std::collections::HashMap;
 use std::sync::Arc;
 
 use super::kurbo_css::CssBox;
+use crate::CustomWidgetSceneMap;
 use crate::color::{Color, ToColorColor};
 use crate::debug_overlay::render_debug_overlay;
 use crate::filters::convert_filters;
@@ -17,12 +18,11 @@ use crate::kurbo_css::NonUniformRoundedRectRadii;
 use crate::layers::LayerManager;
 use crate::sizing::compute_object_fit;
 use crate::text::DrawTextContext;
-use crate::{CustomWidgetSceneMap, SELECTION_COLOR};
 use anyrender::{PaintScene, Scene};
 use blitz_dom::node::{
-    ListItemLayout, ListItemLayoutPosition, Marker, NodeData, RasterImageData, TextInputData,
-    TextNodeData,
+    ListItemLayout, ListItemLayoutPosition, NodeData, RasterImageData, TextInputData, TextNodeData,
 };
+use blitz_dom::text::InlineText as _;
 use blitz_dom::{BaseDocument, ElementData, Node, NodeId, local_name};
 use blitz_traits::devtools::DevtoolSettings;
 
@@ -193,7 +193,7 @@ impl<'dom, 'a> BlitzDomPainter<'dom, 'a> {
         let background_color = {
             let html_color = root_element
                 .primary_styles()
-                .map(|s| s.clone_background_color())
+                .map(|s| s.slow_clone_background_color())
                 .unwrap_or(GenericColor::TRANSPARENT_BLACK);
             if html_color == GenericColor::TRANSPARENT_BLACK {
                 root_element
@@ -207,13 +207,13 @@ impl<'dom, 'a> BlitzDomPainter<'dom, 'a> {
                     })
                     .and_then(|body| body.primary_styles())
                     .map(|style| {
-                        let current_color = style.clone_color();
+                        let current_color = style.slow_clone_color();
                         style
-                            .clone_background_color()
+                            .slow_clone_background_color()
                             .resolve_to_absolute(&current_color)
                     })
             } else {
-                let current_color = root_element.primary_styles().unwrap().clone_color();
+                let current_color = root_element.primary_styles().unwrap().slow_clone_color();
                 Some(html_color.resolve_to_absolute(&current_color))
             }
         };
@@ -327,13 +327,17 @@ impl<'dom, 'a> BlitzDomPainter<'dom, 'a> {
         // `contain: paint` (and stronger values like `strict`/`content`) clips the element's
         // contents to its padding box. Paint containment does not apply to non-atomic inlines
         // or internal table boxes other than table-cell.
-        let contain_paint = styles.get_box().clone_contain().contains(Contain::PAINT) && {
-            let display = styles.clone_display();
-            let is_internal_table_box_other_than_cell = display.outside()
-                == DisplayOutside::InternalTable
-                && display.inside() != DisplayInside::TableCell;
-            !display.is_inline_flow() && !is_internal_table_box_other_than_cell
-        };
+        let contain_paint = styles
+            .get_box()
+            .slow_clone_contain()
+            .contains(Contain::PAINT)
+            && {
+                let display = styles.slow_clone_display();
+                let is_internal_table_box_other_than_cell = display.outside()
+                    == DisplayOutside::InternalTable
+                    && display.inside() != DisplayInside::TableCell;
+                !display.is_inline_flow() && !is_internal_table_box_other_than_cell
+            };
         let is_image = node
             .element_data()
             .and_then(|e| e.raster_image_data())
@@ -388,7 +392,11 @@ impl<'dom, 'a> BlitzDomPainter<'dom, 'a> {
             x: -self.initial_x,
             y: -self.initial_y,
         }) * transform;
-        let screen_bbox = screen_transform.transform_rect_bbox(overflow.union(border_box));
+        // A thick or offset decoration's ink reaches past the overflow.
+        let reach = crate::text::decoration_reach(&styles) * self.scale;
+        let screen_bbox = screen_transform
+            .transform_rect_bbox(overflow.union(border_box))
+            .inflate(reach, reach);
 
         // Cull elements that fall entirely outside the current clip rectangle. In addition to
         // the viewport, `clip_rect` is narrowed by any ancestor scrollport (see below), so this
@@ -568,9 +576,10 @@ impl<'dom, 'a> BlitzDomPainter<'dom, 'a> {
                                 cx.draw_sub_document(scene);
                                 cx.draw_input(scene);
                                 cx.draw_text_input_text(scene, content_position);
-                                cx.draw_inline_layout(scene, content_position);
+                                let painted =
+                                    cx.draw_inline_layout(scene, content_position, child_clip_rect);
                                 cx.draw_marker(scene, content_position);
-                                cx.draw_children(scene, cx.transform, child_clip_rect);
+                                cx.draw_children(scene, cx.transform, child_clip_rect, &painted);
                             },
                         );
 
@@ -716,11 +725,6 @@ struct ElementCx<'dom, 'a> {
     custom_widget_scene: Option<&'a Scene>,
 }
 
-/// Converts parley BoundingBox into peniko Rect
-fn convert_rect(rect: &parley::BoundingBox) -> kurbo::Rect {
-    peniko::kurbo::Rect::new(rect.x0, rect.y0, rect.x1, rect.y1)
-}
-
 impl ElementCx<'_, '_> {
     /// Paint overlay scrollbar thumbs for scroll containers: `overflow:
     /// scroll`, or `auto` when the content overflows (never `hidden`/`clip`,
@@ -847,7 +851,17 @@ impl ElementCx<'_, '_> {
         }
     }
 
-    fn draw_inline_layout(&self, scene: &mut impl PaintScene, pos: Point) {
+    /// Paints the element's inline formatting context, and the atomic inlines among its
+    /// in-flow children in their places in it, as CSS 2's Appendix E paints them: an
+    /// atomic inline covers what comes before it on its line and lies under what comes
+    /// after. Returns the children painted, which `draw_children` then skips.
+    fn draw_inline_layout<S: PaintScene>(
+        &self,
+        scene: &mut S,
+        pos: Point,
+        clip_rect: Rect,
+    ) -> Vec<NodeId> {
+        let mut painted = Vec::new();
         if self.node.flags.is_inline_root() {
             let text_layout = self.element
                 .inline_layout_data
@@ -858,44 +872,47 @@ impl ElementCx<'_, '_> {
 
             let pos = Point {
                 x: pos.x,
-                y: pos.y + text_layout.block_offset as f64,
+                y: pos.y + text_layout.block_offset() as f64,
             };
             let transform =
                 self.transform * Affine::translate((pos.x * self.scale, pos.y * self.scale));
 
-            // Render inline element backgrounds (e.g. `<span style="background: ...">`)
-            // behind the text and selection highlight.
-            crate::text::draw_inline_backgrounds(
-                scene,
-                text_layout.layout.lines(),
-                self.context.dom,
-                transform,
-                self.node.id,
-            );
-
-            // Render text selection highlight (if any) using cached selection ranges
-            if let Some(&(sel_start, sel_end)) = self.context.selection_ranges.get(&self.node.id) {
-                crate::text::draw_text_selection(
-                    scene,
-                    &text_layout.layout,
-                    transform,
-                    sel_start,
-                    sel_end,
-                );
-            }
-
-            // Render text
-            let mut draw_text_context = self.context.draw_text_context.borrow_mut();
-            crate::text::stroke_text(
+            let paint_children = self.node.paint_children.borrow();
+            let tree = self.context.dom.as_ref().tree();
+            let mut paint_atomic = |scene: &mut S, child_id: NodeId| {
+                // Positioned children paint later, above in-flow content; children
+                // listed elsewhere are another box's to paint.
+                let in_flow = tree.get(child_id).is_some_and(|child| {
+                    child.primary_styles().is_some_and(|style| {
+                        style.slow_clone_position() == style::computed_values::position::T::Static
+                    })
+                });
+                let listed = paint_children
+                    .as_ref()
+                    .is_some_and(|children| children.contains(&child_id));
+                if in_flow && listed && !painted.contains(&child_id) {
+                    self.context
+                        .render_node(scene, child_id, self.transform, clip_rect);
+                    painted.push(child_id);
+                }
+            };
+            crate::text::paint_inline_layout(
                 scene,
-                text_layout.layout.lines(),
+                text_layout,
                 self.context.dom,
                 transform,
+                Size::new(
+                    self.frame.content_box.width(),
+                    self.frame.content_box.height(),
+                ),
                 self.scale,
                 self.node.id,
-                &mut draw_text_context,
+                self.context.selection_ranges.get(&self.node.id).copied(),
+                &self.context.draw_text_context,
+                &mut paint_atomic,
             );
         }
+        painted
     }
 
     fn draw_text_input_text(&self, scene: &mut impl PaintScene, pos: Point) {
@@ -922,39 +939,18 @@ impl ElementCx<'_, '_> {
             let transform = self.transform
                 * Affine::translate((pos.x * self.scale - scroll_x, pos.y * self.scale - scroll_y));
 
-            if self.node.is_focussed() {
-                // Render selection/caret
-                for (rect, _line_idx) in input_data.editor.selection_geometry().iter() {
-                    scene.fill(
-                        Fill::NonZero,
-                        transform,
-                        SELECTION_COLOR,
-                        None,
-                        &convert_rect(rect),
-                    );
-                }
-                if let Some(cursor) = input_data.editor.cursor_geometry(1.5) {
-                    let color = self.style.get_inherited_text().color;
-                    let caret_color = match &self.style.get_inherited_ui().caret_color.0 {
-                        ColorOrAuto::Auto => color,
-                        ColorOrAuto::Color(caret_color) => caret_color.resolve_to_absolute(&color),
-                    };
-
-                    scene.fill(
-                        Fill::NonZero,
-                        transform,
-                        caret_color.as_srgb_color(),
-                        None,
-                        &convert_rect(&cursor),
-                    );
-                };
-            }
+            let color = self.style.get_inherited_text().color;
+            let caret_color = match &self.style.get_inherited_ui().caret_color.0 {
+                ColorOrAuto::Auto => color,
+                ColorOrAuto::Color(caret_color) => caret_color.resolve_to_absolute(&color),
+            };
 
-            // Render text
             let mut draw_text_context = self.context.draw_text_context.borrow_mut();
-            crate::text::stroke_text(
+            crate::text::paint_text_input(
                 scene,
-                input_data.editor.try_layout().unwrap().lines(),
+                &input_data.editor,
+                self.node.is_focussed(),
+                caret_color.as_srgb_color(),
                 self.context.dom,
                 transform,
                 self.scale,
@@ -970,48 +966,16 @@ impl ElementCx<'_, '_> {
             position: ListItemLayoutPosition::Outside(layout),
         }) = self.list_item
         {
-            // Right align and pad the bullet when rendering outside
-            let x_padding = match marker {
-                Marker::Char(_) => 8.0,
-                Marker::String(_) => 0.0,
-            };
-            // Outside markers are placed outside the list item's border box
-            // (`pos` is the origin of its content box)
-            let item_layout = self.node.final_layout();
-            let x_offset = -(layout.full_width() / layout.scale()
-                + x_padding
-                + item_layout.padding.left
-                + item_layout.border.left);
-
-            // Align the marker with the baseline of the first line of text in the list item
-            let y_offset = if let Some((text_layout, first_text_line)) = &self
-                .element
-                .inline_layout_data
-                .as_ref()
-                .and_then(|text_layout| Some((text_layout, text_layout.layout.lines().next()?)))
-            {
-                (first_text_line.metrics().baseline
-                    - layout.lines().next().unwrap().metrics().baseline)
-                    / layout.scale()
-                    + text_layout.block_offset
-            } else {
-                0.0
-            };
-
-            let pos = Point {
-                x: pos.x + x_offset as f64,
-                y: pos.y + y_offset as f64,
-            };
-
-            let transform =
-                self.transform * Affine::translate((pos.x * self.scale, pos.y * self.scale));
-
             let mut draw_text_context = self.context.draw_text_context.borrow_mut();
-            crate::text::stroke_text(
+            crate::text::paint_marker(
                 scene,
-                layout.lines(),
+                marker,
+                layout,
+                self.element.inline_layout_data.as_deref(),
+                self.node.final_layout(),
                 self.context.dom,
-                transform,
+                pos,
+                self.transform,
                 self.scale,
                 self.node.id,
                 &mut draw_text_context,
@@ -1024,6 +988,7 @@ impl ElementCx<'_, '_> {
         scene: &mut impl PaintScene,
         parent_style_transform: Affine,
         clip_rect: Rect,
+        painted: &[NodeId],
     ) {
         // Negative z_index hoisted nodes
 
@@ -1046,6 +1011,9 @@ impl ElementCx<'_, '_> {
         // Regular children
         if let Some(children) = &*self.node.paint_children.borrow() {
             for child_id in children {
+                if painted.contains(child_id) {
+                    continue;
+                }
                 // Fixed-position children of the root element are positioned against
                 // the viewport and do not scroll with it, so cancel out the viewport
                 // scroll (applied in `paint_scene`). A fixed box contained by a
@@ -1101,7 +1069,7 @@ impl ElementCx<'_, '_> {
 
         // An SVG with an aspect ratio but no natural size is sized by the default sizing
         // algorithm, which for `none` and `scale-down` contains it within the content box.
-        let object_fit = match self.style.clone_object_fit() {
+        let object_fit = match self.style.slow_clone_object_fit() {
             ObjectFit::None | ObjectFit::ScaleDown
                 if svg.intrinsic_width().is_none()
                     && svg.intrinsic_height().is_none()
@@ -1111,7 +1079,7 @@ impl ElementCx<'_, '_> {
             }
             object_fit => object_fit,
         };
-        let object_position = self.style.clone_object_position();
+        let object_position = self.style.slow_clone_object_position();
 
         // Apply object-fit algorithm
         let container_size = taffy::Size { width, height };
@@ -1180,9 +1148,9 @@ impl ElementCx<'_, '_> {
             let x = self.frame.content_box.origin().x;
             let y = self.frame.content_box.origin().y;
 
-            let object_fit = self.style.clone_object_fit();
-            let object_position = self.style.clone_object_position();
-            let image_rendering = self.style.clone_image_rendering();
+            let object_fit = self.style.slow_clone_object_fit();
+            let object_position = self.style.slow_clone_object_position();
+            let image_rendering = self.style.slow_clone_image_rendering();
             let quality = to_image_quality(image_rendering);
 
             // Apply object-fit algorithm
diff --git a/packages/blitz-paint/src/render/background.rs b/packages/blitz-paint/src/render/background.rs
index e5e048e816..9071241502 100644
--- a/packages/blitz-paint/src/render/background.rs
+++ b/packages/blitz-paint/src/render/background.rs
@@ -13,7 +13,6 @@ use style::{
             background_attachment::single_value::computed_value::T as StyloBackgroundAttachment,
             background_clip::single_value::computed_value::T as StyloBackgroundClip,
             background_origin::single_value::computed_value::T as StyloBackgroundOrigin,
-            mask_origin::single_value::computed_value::T as StyloMaskOrigin,
         },
         style_structs::{Background, SVG},
     },
@@ -65,16 +64,6 @@ impl From<StyloBackgroundOrigin> for BoxModelBox {
     }
 }
 
-impl From<StyloMaskOrigin> for BoxModelBox {
-    fn from(value: StyloMaskOrigin) -> Self {
-        match value {
-            StyloMaskOrigin::BorderBox => Self::BorderBox,
-            StyloMaskOrigin::PaddingBox => Self::PaddingBox,
-            StyloMaskOrigin::ContentBox => Self::ContentBox,
-        }
-    }
-}
-
 /// The styles and image data for a single layer of a CSS image layer list
 /// (`background-image` or `mask-image`). The `background-*` and `mask-*`
 /// properties share computed value types, which allows the layer painting code
@@ -235,7 +224,7 @@ impl ElementCx<'_, '_> {
         let background_color = |node_id: NodeId| -> Option<Color> {
             let node = self.context.dom.get_node(node_id)?;
             let style = node.primary_styles()?;
-            let current_color = style.clone_color();
+            let current_color = style.slow_clone_color();
             let color = style
                 .get_background()
                 .background_color
@@ -331,7 +320,7 @@ impl ElementCx<'_, '_> {
     }
 
     fn draw_solid_bg(&self, scene: &mut impl PaintScene, shape: &BezPath) {
-        let current_color = self.style.clone_color();
+        let current_color = self.style.slow_clone_color();
         let background_color = &self.style.get_background().background_color;
         let bg_color = background_color
             .resolve_to_absolute(&current_color)
@@ -463,7 +452,7 @@ impl ElementCx<'_, '_> {
             return;
         };
 
-        let image_rendering = self.style.clone_image_rendering();
+        let image_rendering = self.style.slow_clone_image_rendering();
         let quality = to_image_quality(image_rendering);
 
         let (origin_rect, base_transform) = if self.layer_is_fixed(layer) {
@@ -593,7 +582,7 @@ impl ElementCx<'_, '_> {
 
         let tile_rect = Rect::new(0.0, 0.0, x.rect_len, y.rect_len);
         let bounding_box = self.frame.border_box.bounding_box();
-        let current_color = self.style.clone_color();
+        let current_color = self.style.slow_clone_color();
 
         let (gradient, gradient_transform) = to_peniko_gradient(
             gradient,
diff --git a/packages/blitz-paint/src/render/border.rs b/packages/blitz-paint/src/render/border.rs
index c7ecb2ef74..925c14802e 100644
--- a/packages/blitz-paint/src/render/border.rs
+++ b/packages/blitz-paint/src/render/border.rs
@@ -149,7 +149,7 @@ impl ElementCx<'_, '_> {
     pub(crate) fn draw_border(&self, scene: &mut impl PaintScene) {
         let style = &*self.style;
         let border = style.get_border();
-        let current_color = style.clone_color();
+        let current_color = style.slow_clone_color();
 
         // Fast path: a uniform-width, single-color solid border whose corners are
         // all circular arcs (equal x and y radius — sharp rectangles, ordinary
@@ -531,7 +531,7 @@ impl ElementCx<'_, '_> {
         let rows = PhysicalTracks::from_tracks(&grid_info.rows);
 
         // TODO: support different colors for different borders
-        let current_color = self.style.clone_color();
+        let current_color = self.style.slow_clone_color();
         let border_color = border_style
             .border_top_color
             .resolve_to_absolute(&current_color)
@@ -601,7 +601,7 @@ impl ElementCx<'_, '_> {
     pub(crate) fn draw_outline(&self, scene: &mut impl PaintScene) {
         let outline = self.style.get_outline();
 
-        let current_color = self.style.clone_color();
+        let current_color = self.style.slow_clone_color();
         let color = outline
             .outline_color
             .resolve_to_absolute(&current_color)
diff --git a/packages/blitz-paint/src/render/box_shadow.rs b/packages/blitz-paint/src/render/box_shadow.rs
index 0e728204ad..6dfbb9f154 100644
--- a/packages/blitz-paint/src/render/box_shadow.rs
+++ b/packages/blitz-paint/src/render/box_shadow.rs
@@ -12,7 +12,7 @@ impl ElementCx<'_, '_> {
             return;
         }
 
-        let current_color = self.style.clone_color();
+        let current_color = self.style.slow_clone_color();
         let opacity = self.style.get_effects().opacity;
         let bg_color = self
             .style
@@ -87,7 +87,7 @@ impl ElementCx<'_, '_> {
     }
 
     pub(super) fn draw_inset_box_shadow(&self, scene: &mut impl PaintScene) {
-        let current_color = self.style.clone_color();
+        let current_color = self.style.slow_clone_color();
         let box_shadow = &self.style.get_effects().box_shadow.0;
         let has_inset_shadow = box_shadow.iter().any(|s| s.inset);
         if !has_inset_shadow {
diff --git a/packages/blitz-paint/src/render/clip_path.rs b/packages/blitz-paint/src/render/clip_path.rs
index 9f23e03dae..10ab767d7b 100644
--- a/packages/blitz-paint/src/render/clip_path.rs
+++ b/packages/blitz-paint/src/render/clip_path.rs
@@ -3,7 +3,7 @@ use kurbo::{BezPath, Circle, Ellipse, Point, Rect, Shape, SvgArc, Vec2};
 use style::values::computed::basic_shape::{BasicShape, ClipPath};
 use style::values::computed::{Angle, CSSPixelLength, LengthPercentage};
 use style::values::generics::basic_shape::{
-    ArcSize, ArcSweep, AxisEndPoint, AxisPosition, CommandEndPoint, ControlPoint, ControlReference,
+    ArcSize, ArcSweep, AxisEndPoint, CommandEndPoint, ControlPoint, ControlReference,
     GenericBasicShape, GenericPathOrShapeFunction, GenericShapeCommand, GenericShapeRadius,
     ShapeBox, ShapeGeometryBox,
 };
@@ -44,7 +44,7 @@ impl ElementCx<'_, '_> {
     /// Compute the clip-path BezPath (if any) for this element.
     /// Returns `None` if clip-path is `none` or unsupported.
     pub(super) fn clip_path_shape(&self) -> Option<BezPath> {
-        let clip_path = self.style.clone_clip_path();
+        let clip_path = self.style.slow_clone_clip_path();
         match clip_path {
             ClipPath::None => None,
             ClipPath::Url(_) => {
@@ -170,8 +170,6 @@ impl ElementCx<'_, '_> {
             GenericBasicShape::PathOrShape(path_or_shape) => match path_or_shape {
                 GenericPathOrShapeFunction::Path(path) => svg_path_to_bezpath(
                     path.commands(),
-                    w,
-                    h,
                     |v| *v as f64,
                     |v| *v as f64,
                     |v| *v as f64,
@@ -182,8 +180,6 @@ impl ElementCx<'_, '_> {
                 }),
                 GenericPathOrShapeFunction::Shape(shape) => svg_path_to_bezpath(
                     &shape.commands,
-                    w,
-                    h,
                     move |v: &LengthPercentage| {
                         v.resolve(CSSPixelLength::new(w as f32)).px() as f64
                     },
@@ -282,15 +278,13 @@ fn resolve_shape_radius(
     }
 }
 
-type GenericPathCommand<Angle, N> = GenericShapeCommand<Angle, GenericPosition<N, N>, N>;
+type GenericPathCommand<Angle, N> = GenericShapeCommand<Angle, N, GenericPosition<N, N>, N>;
 
 /// Convert an SVG path() to a kurbo BezPath.
 /// The returned path is in the path's own coordinate system (origin at 0,0).
 /// The caller is responsible for translating it to the reference box origin.
 fn svg_path_to_bezpath<Angle: Copy, N>(
     commands: &[GenericPathCommand<Angle, N>],
-    w: f64,
-    h: f64,
     resolve_x: impl Fn(&N) -> f64,
     resolve_y: impl Fn(&N) -> f64,
     resolve_angle: impl Fn(&Angle) -> f64,
@@ -326,12 +320,12 @@ fn svg_path_to_bezpath<Angle: Copy, N>(
                 last_control = None;
             }
             GenericShapeCommand::HLine { x } => {
-                cur.x = resolve_axis_endpoint(x, cur.x, w, &resolve_x);
+                cur.x = resolve_axis_endpoint(x, cur.x, &resolve_x);
                 bez.line_to(cur);
                 last_control = None;
             }
             GenericShapeCommand::VLine { y } => {
-                cur.y = resolve_axis_endpoint(y, cur.y, h, &resolve_y);
+                cur.y = resolve_axis_endpoint(y, cur.y, &resolve_y);
                 bez.line_to(cur);
                 last_control = None;
             }
@@ -470,23 +464,15 @@ fn reflect_point(last_control: Option<Point>, cur: Point) -> Point {
 
 /// Resolve an AxisEndPoint to an absolute value.
 /// `ToPosition` is absolute; `ByCoordinate` is relative to `cur_val`.
-/// `w` and `h` are the reference box dimensions so keywords resolve against the correct axis.
+/// Position keywords arrive computed to percentages, which `resolve` takes
+/// against the reference box axis.
 fn resolve_axis_endpoint<N>(
-    endpoint: &AxisEndPoint<N>,
+    endpoint: &AxisEndPoint<N, N>,
     cur_val: f64,
-    basis: f64,
     resolve: impl Fn(&N) -> f64,
 ) -> f64 {
-    use style::values::generics::basic_shape::AxisPositionKeyword;
     match endpoint {
-        AxisEndPoint::ToPosition(AxisPosition::LengthPercent(lp)) => resolve(lp),
-        AxisEndPoint::ToPosition(AxisPosition::Keyword(kw)) => match kw {
-            AxisPositionKeyword::Left | AxisPositionKeyword::XStart => 0.0,
-            AxisPositionKeyword::Right | AxisPositionKeyword::XEnd => basis,
-            AxisPositionKeyword::Top | AxisPositionKeyword::YStart => 0.0,
-            AxisPositionKeyword::Bottom | AxisPositionKeyword::YEnd => basis,
-            AxisPositionKeyword::Center => basis / 2.0,
-        },
+        AxisEndPoint::ToPosition(pos) => resolve(pos),
         AxisEndPoint::ByCoordinate(val) => cur_val + resolve(val),
     }
 }
diff --git a/packages/blitz-paint/src/render/form_controls.rs b/packages/blitz-paint/src/render/form_controls.rs
index fc4f0ad2f6..939a1f98f9 100644
--- a/packages/blitz-paint/src/render/form_controls.rs
+++ b/packages/blitz-paint/src/render/form_controls.rs
@@ -2,14 +2,23 @@ use super::ElementCx;
 use crate::color::{Color, ToColorColor as _};
 use anyrender::PaintScene;
 use blitz_dom::local_name;
-use kurbo::{Affine, BezPath, Cap, Circle, Join, Point, RoundedRect, Stroke, Vec2};
+use kurbo::{Affine, BezPath, Cap, Circle, Join, Point, Rect, RoundedRect, Stroke, Vec2};
 use peniko::Fill;
 use style::dom::TElement as _;
+use style::values::specified::box_::Appearance;
 
 impl ElementCx<'_, '_> {
     pub(super) fn draw_input(&self, scene: &mut impl PaintScene) {
-        if self.node.local_name() != "input" {
-            return;
+        match &**self.node.local_name() {
+            "input" => {}
+            "progress" => return self.draw_progress(scene),
+            "meter" => return self.draw_meter(scene),
+            _ => return,
+        }
+        match self.node.attr(local_name!("type")) {
+            Some("range") => return self.draw_range(scene),
+            Some("color") => return self.draw_color_well(scene),
+            _ => {}
         }
         let Some(checked) = self.element.checkbox_input_checked() else {
             return;
@@ -22,7 +31,7 @@ impl ElementCx<'_, '_> {
         let accent_color = if disabled {
             Color::from_rgba8(209, 209, 209, 255)
         } else {
-            self.style.clone_color().as_srgb_color()
+            self.style.slow_clone_color().as_srgb_color()
         };
 
         let width = self.frame.border_box.width();
@@ -101,3 +110,280 @@ fn draw_radio_button(
         scene.fill(Fill::NonZero, transform, Color::WHITE, None, &gap);
     }
 }
+
+/// The blue of a native progress bar's value and a slider's thumb and fill, as Chrome draws them.
+const ACCENT: Color = Color::from_rgb8(0, 117, 255);
+/// The fill of a native bar's empty track.
+const TRACK: Color = Color::from_rgb8(239, 239, 239);
+/// The border of a native progress bar's or slider's empty track.
+const TRACK_BORDER: Color = Color::from_rgb8(178, 178, 178);
+/// The border of a native meter's empty track.
+const METER_TRACK_BORDER: Color = Color::from_rgb8(203, 203, 203);
+
+/// An element's content box laid along its inline axis.
+struct InlineAxis {
+    /// The rectangle the axis runs along.
+    rect: Rect,
+    /// Whether the inline axis is vertical.
+    vertical: bool,
+    /// Whether the inline axis runs against the physical axis (right to left, or bottom to top).
+    reversed: bool,
+}
+
+impl InlineAxis {
+    /// Returns the length of the inline axis.
+    fn length(&self) -> f64 {
+        if self.vertical {
+            self.rect.height()
+        } else {
+            self.rect.width()
+        }
+    }
+
+    /// Returns the thickness across the inline axis.
+    fn thickness(&self) -> f64 {
+        if self.vertical {
+            self.rect.width()
+        } else {
+            self.rect.height()
+        }
+    }
+
+    /// Returns the band from `start` to `end` along the inline axis, `inset` in from both
+    /// sides across it.
+    fn band(&self, start: f64, end: f64, inset: f64) -> Rect {
+        let r = self.rect;
+        let (start, end) = if self.reversed {
+            (self.length() - end, self.length() - start)
+        } else {
+            (start, end)
+        };
+        if self.vertical {
+            Rect::new(r.x0 + inset, r.y0 + start, r.x1 - inset, r.y0 + end)
+        } else {
+            Rect::new(r.x0 + start, r.y0 + inset, r.x0 + end, r.y1 - inset)
+        }
+    }
+
+    /// Returns the point `along` the inline axis from its start, centred across it.
+    fn point(&self, along: f64) -> Point {
+        let r = self.rect;
+        let along = if self.reversed {
+            self.length() - along
+        } else {
+            along
+        };
+        if self.vertical {
+            Point::new(r.center().x, r.y0 + along)
+        } else {
+            Point::new(r.x0 + along, r.center().y)
+        }
+    }
+}
+
+impl ElementCx<'_, '_> {
+    /// Returns the element's content box laid along its inline axis.
+    fn inline_axis(&self) -> InlineAxis {
+        let wm = self.style.writing_mode;
+        let vertical = wm.is_vertical();
+        InlineAxis {
+            rect: self.frame.content_box,
+            vertical,
+            reversed: if vertical {
+                !wm.is_inline_tb()
+            } else {
+                !wm.is_bidi_ltr()
+            },
+        }
+    }
+
+    /// Returns whether the element draws its platform look rather than only its CSS.
+    fn has_native_appearance(&self) -> bool {
+        self.style.get_box().slow_clone_appearance() != Appearance::None
+    }
+
+    /// Returns a number attribute of the element, if it holds a finite number.
+    fn number_attr(&self, name: blitz_dom::LocalName) -> Option<f64> {
+        self.node
+            .attr(name)
+            .and_then(|value| value.trim().parse::<f64>().ok())
+            .filter(|value| value.is_finite())
+    }
+
+    /// Draws a progress bar: a rounded track filled from its inline start, or under
+    /// `appearance: none` a gray bar filled in green, as Chrome draws them.
+    fn draw_progress(&self, scene: &mut impl PaintScene) {
+        let max = self
+            .number_attr(local_name!("max"))
+            .filter(|max| *max > 0.0);
+        let max = max.unwrap_or(1.0);
+        // A progress element without a value is indeterminate, and shows no value.
+        let fraction = self
+            .number_attr(local_name!("value"))
+            .map(|value| (value / max).clamp(0.0, 1.0));
+        if self.has_native_appearance() {
+            self.draw_native_bar(scene, fraction.unwrap_or(0.0), ACCENT, TRACK_BORDER);
+        } else {
+            let axis = self.inline_axis();
+            let gray = Color::from_rgb8(128, 128, 128);
+            let green = Color::from_rgb8(0, 128, 0);
+            scene.fill(Fill::NonZero, self.transform, gray, None, &axis.rect);
+            if let Some(fraction) = fraction {
+                let value = axis.band(0.0, axis.length() * fraction, 0.0);
+                scene.fill(Fill::NonZero, self.transform, green, None, &value);
+            }
+        }
+    }
+
+    /// Draws a meter: a rounded track filled from its inline start, green where the value
+    /// lies in the optimum region, yellow next to it and red beyond.
+    fn draw_meter(&self, scene: &mut impl PaintScene) {
+        // https://html.spec.whatwg.org/#the-meter-element
+        let min = self.number_attr(local_name!("min")).unwrap_or(0.0);
+        let max = self.number_attr(local_name!("max")).unwrap_or(1.0).max(min);
+        let value = self
+            .number_attr(local_name!("value"))
+            .unwrap_or(0.0)
+            .clamp(min, max);
+        let low = self
+            .number_attr(local_name!("low"))
+            .unwrap_or(min)
+            .clamp(min, max);
+        let high = self
+            .number_attr(local_name!("high"))
+            .unwrap_or(max)
+            .clamp(low, max);
+        let optimum = self
+            .number_attr(local_name!("optimum"))
+            .unwrap_or((min + max) / 2.0)
+            .clamp(min, max);
+        let region = |v: f64| -> u8 {
+            if v < low {
+                0
+            } else if v > high {
+                2
+            } else {
+                1
+            }
+        };
+        let color = match region(optimum).abs_diff(region(value)) {
+            0 => Color::from_rgb8(16, 124, 16),
+            1 => Color::from_rgb8(255, 185, 0),
+            _ => Color::from_rgb8(209, 52, 56),
+        };
+        let fraction = if max > min {
+            (value - min) / (max - min)
+        } else {
+            0.0
+        };
+        self.draw_native_bar(scene, fraction, color, METER_TRACK_BORDER);
+    }
+
+    /// Draws a native bar: a track half as thick as the content box, rounded and centred in
+    /// it, filled `fraction` of its length from its inline start.
+    fn draw_native_bar(
+        &self,
+        scene: &mut impl PaintScene,
+        fraction: f64,
+        color: Color,
+        border: Color,
+    ) {
+        let axis = self.inline_axis();
+        let inset = axis.thickness() / 4.0;
+        let track = axis.band(0.0, axis.length(), inset);
+        let radius = track.width().min(track.height()) / 2.0;
+        let outline = track.inset(-self.scale / 2.0).to_rounded_rect(radius);
+        scene.fill(Fill::NonZero, self.transform, TRACK, None, &outline);
+        let stroke = Stroke::new(self.scale);
+        scene.stroke(&stroke, self.transform, border, None, &outline);
+        if fraction > 0.0 {
+            let value = axis.band(0.0, axis.length() * fraction, inset);
+            let value = value.to_rounded_rect(radius);
+            scene.fill(Fill::NonZero, self.transform, color, None, &value);
+        }
+    }
+
+    /// Draws a slider: a track filled up to its thumb, which sits at the value along the inline
+    /// axis. Under `appearance: none` only the thumb is drawn, as Chrome draws it.
+    fn draw_range(&self, scene: &mut impl PaintScene) {
+        // https://html.spec.whatwg.org/#range-state-(type=range)
+        let min = self.number_attr(local_name!("min")).unwrap_or(0.0);
+        let max = self
+            .number_attr(local_name!("max"))
+            .unwrap_or(100.0)
+            .max(min);
+        let value = self
+            .number_attr(local_name!("value"))
+            .unwrap_or(min + (max - min) / 2.0)
+            .clamp(min, max);
+        let fraction = if max > min {
+            (value - min) / (max - min)
+        } else {
+            0.0
+        };
+        let axis = self.inline_axis();
+        let radius = (8.0 * self.scale)
+            .min(axis.thickness() / 2.0)
+            .min(axis.length() / 2.0);
+        if radius <= 0.0 {
+            return;
+        }
+        let along = radius + (axis.length() - 2.0 * radius) * fraction;
+        if self.has_native_appearance() {
+            let inset = axis.thickness() / 4.0;
+            let track = axis.band(0.0, axis.length(), inset);
+            let track_radius = track.width().min(track.height()) / 2.0;
+            let outline = track.inset(-self.scale / 2.0).to_rounded_rect(track_radius);
+            scene.fill(Fill::NonZero, self.transform, TRACK, None, &outline);
+            let stroke = Stroke::new(self.scale);
+            scene.stroke(&stroke, self.transform, TRACK_BORDER, None, &outline);
+            let filled = axis.band(0.0, along, inset).to_rounded_rect(track_radius);
+            scene.fill(Fill::NonZero, self.transform, ACCENT, None, &filled);
+        }
+        let thumb = Circle::new(axis.point(along), radius);
+        scene.fill(Fill::NonZero, self.transform, ACCENT, None, &thumb);
+    }
+
+    /// Draws a color well's swatch: the value's color inside the content box, 4px in from its
+    /// block-axis sides and 2px from its inline-axis sides, with a gray border.
+    fn draw_color_well(&self, scene: &mut impl PaintScene) {
+        let color = self
+            .node
+            .attr(local_name!("value"))
+            .and_then(parse_simple_color)
+            .unwrap_or(Color::BLACK);
+        let content = self.frame.content_box;
+        let (inline, block) = (2.0 * self.scale, 4.0 * self.scale);
+        let (dx, dy) = if self.style.writing_mode.is_vertical() {
+            (block, inline)
+        } else {
+            (inline, block)
+        };
+        let swatch = Rect::new(
+            content.x0 + dx,
+            content.y0 + dy,
+            content.x1 - dx,
+            content.y1 - dy,
+        );
+        if swatch.width() <= 0.0 || swatch.height() <= 0.0 {
+            return;
+        }
+        scene.fill(Fill::NonZero, self.transform, color, None, &swatch);
+        let border = Color::from_rgb8(119, 119, 119);
+        let outline = swatch.inset(-self.scale / 2.0);
+        let stroke = Stroke::new(self.scale);
+        scene.stroke(&stroke, self.transform, border, None, &outline);
+    }
+}
+
+/// Parses a valid simple color, `#` and six hex digits.
+///
+/// https://html.spec.whatwg.org/#valid-simple-colour
+fn parse_simple_color(value: &str) -> Option<Color> {
+    let hex = value.strip_prefix('#')?;
+    if hex.len() != 6 || !hex.bytes().all(|b| b.is_ascii_hexdigit()) {
+        return None;
+    }
+    let channel = |i: usize| u8::from_str_radix(&hex[i..i + 2], 16).ok();
+    Some(Color::from_rgb8(channel(0)?, channel(2)?, channel(4)?))
+}
diff --git a/packages/blitz-paint/src/text.rs b/packages/blitz-paint/src/text/mod.rs
similarity index 60%
rename from packages/blitz-paint/src/text.rs
rename to packages/blitz-paint/src/text/mod.rs
index 8887f03349..3823d96e50 100644
--- a/packages/blitz-paint/src/text.rs
+++ b/packages/blitz-paint/src/text/mod.rs
@@ -1,8 +1,10 @@
+//! Painting text: the decorations every text backend's lines share, and a module for each
+//! backend that paints its own layouts.
+
 use anyrender::PaintScene;
-use blitz_dom::{BaseDocument, NodeId, node::TextBrush, util::ToColorColor};
+use blitz_dom::{NodeId, util::ToColorColor};
 use kurbo::{Affine, BezPath, Cap, Circle, Rect, Stroke};
-use parley::{Affinity, Cursor, Layout, Line, PositionedLayoutItem, Selection};
-use peniko::Fill;
+use peniko::{Fill, FontData};
 use std::collections::HashMap;
 use style::properties::generated::longhands::text_decoration_style::computed_value::T as TextDecorationStyle;
 use style::values::computed::{
@@ -10,60 +12,18 @@ use style::values::computed::{
 };
 use style::values::generics::text::{GenericTextDecorationInset, GenericTextDecorationLength};
 
-use crate::color::{Color, ToColorColor as _};
-use crate::{FONT_EMBOLDEN_ENABLED, SELECTION_COLOR};
-
-/// Draw the backgrounds of inline elements (e.g. `<span style="background: ...">`).
-///
-/// Each glyph run carries the node id of the innermost inline element it belongs to
-/// (via its brush). We look up that node's `background-color` and, if non-transparent,
-/// fill a rectangle covering the run's advance and its font's ascent/descent so that the
-/// background sits behind the text.
-///
-/// The inline root's own background is painted separately (as a normal block box), so
-/// runs belonging to the root are skipped to avoid drawing it twice.
-pub(crate) fn draw_inline_backgrounds<'a>(
-    scene: &mut impl PaintScene,
-    lines: impl Iterator<Item = Line<'a, TextBrush>>,
-    doc: &BaseDocument,
-    transform: Affine,
-    inline_root_id: NodeId,
-) {
-    for line in lines {
-        for item in line.items() {
-            let PositionedLayoutItem::GlyphRun(glyph_run) = item else {
-                continue;
-            };
-
-            let node_id = glyph_run.style().brush.id;
-            if node_id == inline_root_id {
-                continue;
-            }
+use crate::color::Color;
 
-            let Some(styles) = doc.get_node(node_id).and_then(|node| node.primary_styles()) else {
-                continue;
-            };
-
-            let current_color = styles.clone_color();
-            let bg_color = styles
-                .get_background()
-                .background_color
-                .resolve_to_absolute(&current_color)
-                .as_srgb_color();
-            if bg_color == Color::TRANSPARENT {
-                continue;
-            }
-
-            let metrics = glyph_run.run().font_metrics();
-            let x = glyph_run.offset() as f64;
-            let w = glyph_run.advance() as f64;
-            let baseline = glyph_run.baseline() as f64;
-            let y0 = baseline - metrics.ascent as f64;
-            let y1 = baseline + metrics.descent as f64;
-            let rect = Rect::new(x, y0, x + w, y1);
-
-            scene.fill(Fill::NonZero, transform, bg_color, None, &rect);
-        }
+blitz_dom::cfg_text_backend! {
+    parley => {
+        mod parley;
+        use self::parley::Scratch;
+        pub(crate) use self::parley::{paint_inline_layout, paint_marker, paint_text_input};
+    }
+    winkin => {
+        mod winkin;
+        use self::winkin::Scratch;
+        pub(crate) use self::winkin::{paint_inline_layout, paint_marker, paint_text_input};
     }
 }
 
@@ -75,9 +35,9 @@ type WinAscentCache = HashMap<(u64, u32), Option<f32>>;
 /// The font's OS/2 `usWinAscent`, in the same (device) pixels as `font_size`.
 ///
 /// This is the ascent browsers use as the top of the "em box" when positioning overlines. It
-/// is typically taller than the hhea ascent Parley exposes via [`parley::layout::run::RunMetrics`].
+/// is typically taller than the hhea ascent Parley exposes via its run metrics.
 /// Returns `None` when the font has no OS/2 table.
-fn win_ascent(cache: &mut WinAscentCache, font: &parley::FontData, font_size: f32) -> Option<f32> {
+fn win_ascent(cache: &mut WinAscentCache, font: &FontData, font_size: f32) -> Option<f32> {
     let ratio = *cache
         .entry((font.data.id(), font.index))
         .or_insert_with(|| win_ascent_ratio(font));
@@ -86,7 +46,7 @@ fn win_ascent(cache: &mut WinAscentCache, font: &parley::FontData, font_size: f3
 
 /// The unitless `usWinAscent / unitsPerEm` ratio for a font face, or `None` when the font
 /// has no usable head/OS/2 table.
-fn win_ascent_ratio(font: &parley::FontData) -> Option<f32> {
+fn win_ascent_ratio(font: &FontData) -> Option<f32> {
     use skrifa::raw::{FontRef, TableProvider as _};
     let font_ref = FontRef::from_index(font.data.as_ref(), font.index).ok()?;
     let units_per_em = font_ref.head().ok()?.units_per_em();
@@ -140,28 +100,8 @@ struct ResolvedDecoration {
     inset: GenericTextDecorationInset<LengthPercentage>,
 }
 
-/// An element on the current ancestor path (inline root -> run node), caching the
-/// values resolved from its computed style so descending into the same node across
-/// consecutive runs doesn't re-resolve them.
-struct DecorationStackEntry {
-    node_id: NodeId,
-    /// This node's (inherited) text colour, used for the glyphs of runs whose
-    /// innermost node is this one.
-    text_color: Color,
-    /// The decoration this node introduces as a decorating box, if any.
-    decoration: Option<ResolvedDecoration>,
-}
-
-/// Resolve the cached style values for a single node into a [`DecorationStackEntry`].
-fn resolve_decoration_entry(doc: &BaseDocument, node_id: NodeId) -> DecorationStackEntry {
-    let Some(styles) = doc.get_node(node_id).and_then(|node| node.primary_styles()) else {
-        return DecorationStackEntry {
-            node_id,
-            text_color: Color::BLACK,
-            decoration: None,
-        };
-    };
-
+/// The decoration an element draws as a decorating box, if it is one.
+fn resolve_decoration(styles: &style::properties::ComputedValues) -> Option<ResolvedDecoration> {
     let itext = styles.get_inherited_text();
     let text = styles.get_text();
     let text_color = itext.color.as_color_color();
@@ -172,8 +112,8 @@ fn resolve_decoration_entry(doc: &BaseDocument, node_id: NodeId) -> DecorationSt
     let line = text.text_decoration_line;
     // Decorations propagate through the box tree, and a `display: contents` element
     // generates no box, so its decorations have no effect on descendants.
-    let is_contents = styles.clone_display().is_contents();
-    let decoration = (!is_contents && line.intersects(drawn_lines)).then(|| {
+    let is_contents = styles.slow_clone_display().is_contents();
+    (!is_contents && line.intersects(drawn_lines)).then(|| {
         // `text-decoration-color: currentColor` (the initial value) resolves against
         // the decorating box's own colour, not the descendant run's.
         let color = text
@@ -196,13 +136,7 @@ fn resolve_decoration_entry(doc: &BaseDocument, node_id: NodeId) -> DecorationSt
                 .contains(TextUnderlinePosition::FROM_FONT),
             inset: text.text_decoration_inset.clone(),
         }
-    });
-
-    DecorationStackEntry {
-        node_id,
-        text_color,
-        decoration,
-    }
+    })
 }
 
 /// The run-dependent geometry used to position and size a decoration, captured from a
@@ -219,9 +153,15 @@ struct DecorationRunGeometry {
     underline_offset: f32,
     underline_size: f32,
     strikethrough_size: f32,
-    font: parley::FontData,
+    /// The font whose OS/2 ascent an overline and a line-through are placed
+    /// by, where `ascent` is not already the one to use.
+    font: Option<FontData>,
     font_size: f32,
     css_font_size: f64,
+    /// Whether `ascent` and `descent` are measured about a central baseline,
+    /// as a vertical line's are, so that the em box's edges are the overline's
+    /// place and its middle the line-through's.
+    centered: bool,
 }
 
 /// A decoration accumulated across the runs of a single line for one decorating box.
@@ -245,8 +185,9 @@ struct LineDecoration {
 /// document. The vectors are cleared between uses without releasing their allocations.
 #[derive(Default)]
 pub(crate) struct DrawTextContext {
-    stack: Vec<DecorationStackEntry>,
-    path_scratch: Vec<NodeId>,
+    /// What the text backend's painter keeps between uses.
+    #[allow(dead_code, reason = "the winkin painter keeps nothing here")]
+    backend: Scratch,
     deco_boxes: Vec<LineDecoration>,
     win_ascent_ratios: WinAscentCache,
 }
@@ -259,6 +200,27 @@ pub(crate) struct DrawTextContext {
 ///
 /// The result is floored to a whole number of device pixels (minimum 1), matching
 /// browsers, which snap decoration thickness to whole pixels.
+/// How far, in CSS pixels, the decorations an element draws may reach past its box: its font
+/// size, as far as a decoration sits from the text, plus its thickness and underline offset. The
+/// overflow the culling reads leaves this ink out.
+pub(crate) fn decoration_reach(styles: &style::properties::ComputedValues) -> f64 {
+    let text = styles.get_text();
+    if text.text_decoration_line.is_empty() {
+        return 0.0;
+    }
+    let font_size = Length::new(styles.get_font().font_size.computed_size().px());
+    let thickness = match &text.text_decoration_thickness {
+        GenericTextDecorationLength::LengthPercentage(lp) => lp.resolve(font_size).px().abs(),
+        GenericTextDecorationLength::FromFont | GenericTextDecorationLength::Auto => 0.0,
+    };
+    let offset = styles
+        .get_inherited_text()
+        .text_underline_offset
+        .non_auto()
+        .map_or(0.0, |lp| lp.resolve(font_size).px().abs());
+    f64::from(font_size.px() + thickness + offset)
+}
+
 fn decoration_size(
     thickness: &TextDecorationLength,
     metric_size: f32,
@@ -312,7 +274,7 @@ fn draw_decoration_line(
     let butt_stroke = Stroke::new(size).with_caps(Cap::Butt);
 
     match deco_style {
-        TextDecorationStyle::MozNone => {
+        TextDecorationStyle::None => {
             // no line. Equivalent to `text-decoration-line: none`
         }
         // `solid`
@@ -391,6 +353,9 @@ fn draw_decoration_line(
 }
 
 /// Paint the decorations accumulated for one line, one line per decorating box.
+///
+/// Only the kinds of line in `drawn` are painted: a caller painting the lines
+/// under the text apart from the one through it asks for each in turn.
 fn flush_line_decorations(
     scene: &mut impl PaintScene,
     transform: Affine,
@@ -399,6 +364,7 @@ fn flush_line_decorations(
     win_ascent_ratios: &mut WinAscentCache,
     inline_root_id: NodeId,
     line_baseline: f32,
+    drawn: TextDecorationLine,
 ) {
     // Draw innermost boxes first so ancestors' decorations paint on top, matching the
     // per-run drawing order this replaced (`stack.iter().rev()`).
@@ -442,7 +408,8 @@ fn flush_line_decorations(
             GenericTextDecorationInset::Auto => (0.0, 0.0),
         };
 
-        if deco.line.contains(TextDecorationLine::UNDERLINE) {
+        let lines = deco.line & drawn;
+        if lines.contains(TextDecorationLine::UNDERLINE) {
             let size = decoration_size(
                 &deco.thickness,
                 geom.underline_size,
@@ -472,7 +439,9 @@ fn flush_line_decorations(
             } else {
                 geom.underline_offset
             };
-            let offset = base_offset - extra_underline_offset as f32;
+            // The underline sits on a whole device pixel from the baseline, as
+            // Chrome's `TextDecorationOffset` rounds its offset.
+            let offset = (base_offset - extra_underline_offset as f32).round();
 
             // A `double` underline extends downward, away from the text.
             draw_decoration_line(
@@ -491,7 +460,7 @@ fn flush_line_decorations(
                 inset_end,
             );
         }
-        if deco.line.contains(TextDecorationLine::OVERLINE) {
+        if lines.contains(TextDecorationLine::OVERLINE) {
             // Fonts don't provide a dedicated overline metric, so reuse the underline
             // thickness. The line sits at the top of the "em box": its lower edge rests on
             // the ascent so it clears the glyphs, and it extends upward from there.
@@ -506,8 +475,12 @@ fn flush_line_decorations(
                 geom.css_font_size,
                 scale,
             );
-            let ascent =
-                win_ascent(win_ascent_ratios, &geom.font, geom.font_size).unwrap_or(geom.ascent);
+            let ascent = match &geom.font {
+                Some(font) if !geom.centered => {
+                    win_ascent(win_ascent_ratios, font, geom.font_size).unwrap_or(geom.ascent)
+                }
+                _ => geom.ascent,
+            };
             let offset = ascent + size;
 
             // A `double` overline extends upward, away from the text.
@@ -527,7 +500,7 @@ fn flush_line_decorations(
                 inset_end,
             );
         }
-        if deco.line.contains(TextDecorationLine::LINE_THROUGH) {
+        if lines.contains(TextDecorationLine::LINE_THROUGH) {
             let size = decoration_size(
                 &deco.thickness,
                 geom.strikethrough_size,
@@ -539,9 +512,18 @@ fn flush_line_decorations(
             // Chrome (which places it `2/3 * ascent` below the text-top). Parley's
             // `strikethrough_offset` (the font's `yStrikeoutPosition`) sits lower and would
             // draw the line too close to the baseline.
-            let ascent =
-                win_ascent(win_ascent_ratios, &geom.font, geom.font_size).unwrap_or(geom.ascent);
-            let offset = ascent / 3.0 + size / 2.0;
+            // A vertical line's is through the middle of the em box, which is
+            // its baseline.
+            let offset = if geom.centered {
+                size / 2.0
+            } else {
+                let ascent = geom
+                    .font
+                    .as_ref()
+                    .and_then(|font| win_ascent(win_ascent_ratios, font, geom.font_size))
+                    .unwrap_or(geom.ascent);
+                ascent / 3.0 + size / 2.0
+            };
 
             draw_decoration_line(
                 scene,
@@ -561,187 +543,3 @@ fn flush_line_decorations(
         }
     }
 }
-
-pub(crate) fn stroke_text<'a>(
-    scene: &mut impl PaintScene,
-    lines: impl Iterator<Item = Line<'a, TextBrush>>,
-    doc: &BaseDocument,
-    transform: Affine,
-    scale: f64,
-    inline_root_id: NodeId,
-    context: &mut DrawTextContext,
-) {
-    let DrawTextContext {
-        stack,
-        path_scratch,
-        deco_boxes,
-        win_ascent_ratios,
-    } = context;
-    stack.clear();
-    path_scratch.clear();
-    deco_boxes.clear();
-
-    // Persistent stack mirroring the ancestor path (inline root -> current run's
-    // node) as we walk the runs. The `text-decoration-*` properties are *not*
-    // inherited; instead a decoration set on an ancestor is propagated to the
-    // descendant text it wraps. Rather than re-resolving styles for the whole
-    // ancestor chain on every run, we cache each node's resolved values here and,
-    // for each run, only resolve styles for the nodes newly descended into (popping
-    // as we ascend). `path_scratch` is a reusable buffer for the run's node path.
-    for line in lines {
-        // Decorations accumulated for this line, keyed by decorating box, so each box is
-        // painted once (spanning all its runs) using its own font — matching Firefox, which
-        // draws one decoration per box rather than one stepped segment per differently-sized
-        // run. Clearing preserves the allocation for the next line and inline context.
-        deco_boxes.clear();
-
-        for item in line.items() {
-            if let PositionedLayoutItem::GlyphRun(glyph_run) = item {
-                let run = glyph_run.run();
-                let font = run.font();
-                let font_size = run.font_size();
-                let metrics = run.font_metrics();
-                let style = glyph_run.style();
-                let synthesis = run.synthesis();
-                let glyph_xform = synthesis
-                    .skew()
-                    .map(|angle| Affine::skew(angle.to_radians().tan() as f64, 0.0));
-
-                let css_font_size = font_size as f64 / scale;
-
-                // Reconcile the stack with this run's ancestor path. Build the path
-                // (inline root -> run node), keep the shared prefix already on the stack,
-                // pop the rest, and resolve styles only for the newly-descended nodes.
-                path_scratch.clear();
-                let mut walk_id = Some(style.brush.id);
-                while let Some(node_id) = walk_id {
-                    path_scratch.push(node_id);
-                    if node_id == inline_root_id {
-                        break;
-                    }
-                    walk_id = doc.get_node(node_id).and_then(|node| node.parent);
-                }
-                path_scratch.reverse();
-
-                let shared = stack
-                    .iter()
-                    .zip(path_scratch.iter())
-                    .take_while(|(entry, node_id)| entry.node_id == **node_id)
-                    .count();
-                stack.truncate(shared);
-                for &node_id in &path_scratch[shared..] {
-                    stack.push(resolve_decoration_entry(doc, node_id));
-                }
-
-                // The glyph colour comes from the run's own node (the stack top): `color`
-                // inherits, so the innermost inline element already carries the right value.
-                let text_color = stack.last().map(|e| e.text_color).unwrap_or(Color::BLACK);
-
-                let embolden = if FONT_EMBOLDEN_ENABLED {
-                    let fs = font_size as f64 / scale;
-                    kurbo::Vec2::new((0.015125 * fs).min(0.3), (0.0121 * fs).min(0.3))
-                } else {
-                    kurbo::Vec2::default()
-                };
-
-                let normalized_coords: &[i16] = bytemuck::cast_slice(run.normalized_coords());
-                scene.draw_glyphs(
-                    font,
-                    font_size,
-                    !FONT_EMBOLDEN_ENABLED, // hint
-                    normalized_coords,
-                    embolden,
-                    Fill::NonZero,
-                    &anyrender::Paint::from(text_color),
-                    1.0, // alpha
-                    transform,
-                    glyph_xform,
-                    glyph_run.positioned_glyphs().map(|glyph| anyrender::Glyph {
-                        id: glyph.id as _,
-                        x: glyph.x,
-                        y: glyph.y,
-                    }),
-                );
-
-                // Accumulate this run's contribution to each decorating box on its ancestor
-                // path. The decoration is drawn once per box after the whole line has been
-                // walked (see `flush_line_decorations`), so mixed font sizes within a box
-                // produce a single straight line rather than one stepped segment per run.
-                let geometry = DecorationRunGeometry {
-                    baseline: glyph_run.baseline(),
-                    ascent: metrics.ascent,
-                    descent: metrics.descent,
-                    underline_offset: metrics.underline_offset,
-                    underline_size: metrics.underline_size,
-                    strikethrough_size: metrics.strikethrough_size,
-                    font: font.clone(),
-                    font_size,
-                    css_font_size,
-                };
-                let run_node_id = style.brush.id;
-                let run_x0 = glyph_run.offset() as f64;
-                let run_x1 = run_x0 + glyph_run.advance() as f64;
-
-                for entry in stack.iter() {
-                    if entry.decoration.is_none() {
-                        continue;
-                    }
-                    let idx = match deco_boxes.iter().position(|d| d.node_id == entry.node_id) {
-                        Some(idx) => idx,
-                        None => {
-                            deco_boxes.push(LineDecoration {
-                                node_id: entry.node_id,
-                                deco: entry.decoration.clone().unwrap(),
-                                min_x: f64::INFINITY,
-                                max_x: f64::NEG_INFINITY,
-                                own: None,
-                                first: None,
-                            });
-                            deco_boxes.len() - 1
-                        }
-                    };
-                    let acc = &mut deco_boxes[idx];
-                    acc.min_x = acc.min_x.min(run_x0);
-                    acc.max_x = acc.max_x.max(run_x1);
-                    if acc.first.is_none() {
-                        acc.first = Some(geometry.clone());
-                    }
-                    // A run whose innermost node is the box itself is the box's own text, so
-                    // its font is the one Firefox positions and sizes the decoration with.
-                    if entry.node_id == run_node_id {
-                        acc.own = Some(geometry.clone());
-                    }
-                }
-            }
-        }
-
-        flush_line_decorations(
-            scene,
-            transform,
-            scale,
-            deco_boxes,
-            win_ascent_ratios,
-            inline_root_id,
-            line.metrics().baseline,
-        );
-    }
-}
-
-/// Draw selection highlight rectangles for the given byte range in a layout.
-/// Uses Parley's Selection type for accurate geometry calculation.
-pub(crate) fn draw_text_selection(
-    scene: &mut impl PaintScene,
-    layout: &Layout<TextBrush>,
-    transform: Affine,
-    selection_start: usize,
-    selection_end: usize,
-) {
-    let anchor = Cursor::from_byte_index(layout, selection_start, Affinity::Downstream);
-    let focus = Cursor::from_byte_index(layout, selection_end, Affinity::Downstream);
-    let selection = Selection::new(anchor, focus);
-
-    selection.geometry_with(layout, |rect, _line_idx| {
-        let rect = kurbo::Rect::new(rect.x0, rect.y0, rect.x1, rect.y1);
-        scene.fill(Fill::NonZero, transform, SELECTION_COLOR, None, &rect);
-    });
-}
diff --git a/packages/blitz-paint/src/text/parley.rs b/packages/blitz-paint/src/text/parley.rs
new file mode 100644
index 0000000000..f09f9c0803
--- /dev/null
+++ b/packages/blitz-paint/src/text/parley.rs
@@ -0,0 +1,508 @@
+//! Painting text laid out by Parley.
+
+use anyrender::PaintScene;
+use blitz_dom::node::Marker;
+use blitz_dom::text::InlineText as _;
+use blitz_dom::text::parley::parley::{Line, PositionedLayoutItem};
+use blitz_dom::text::parley::{MarkerLayout, TextBrush, TextEditor, TextLayout};
+use blitz_dom::util::ToColorColor as _;
+use blitz_dom::{BaseDocument, NodeId};
+use kurbo::{Affine, Point, Rect, Size};
+use peniko::Fill;
+use style::properties::generated::longhands::text_decoration_style::computed_value::T as TextDecorationStyle;
+use style::values::computed::TextDecorationLine;
+use style::values::generics::text::{GenericTextDecorationInset, GenericTextDecorationLength};
+
+use super::{
+    DecorationRunGeometry, DrawTextContext, LineDecoration, ResolvedDecoration,
+    flush_line_decorations, resolve_decoration,
+};
+use crate::SELECTION_COLOR;
+use crate::color::{Color, ToColorColor as _};
+
+const FONT_EMBOLDEN_ENABLED: bool = cfg!(any(
+    feature = "font-embolden",
+    all(feature = "apple-font-embolden", target_os = "macos"),
+    all(feature = "apple-font-embolden", target_os = "ios"),
+));
+
+/// What the Parley painter keeps between uses: the decorating boxes on the path from the inline
+/// root to the run being painted, and a buffer for that path.
+#[derive(Default)]
+pub(super) struct Scratch {
+    stack: Vec<DecorationStackEntry>,
+    path_scratch: Vec<NodeId>,
+}
+
+/// An element on the current ancestor path (inline root -> run node), caching the
+/// values resolved from its computed style so descending into the same node across
+/// consecutive runs doesn't re-resolve them.
+struct DecorationStackEntry {
+    node_id: NodeId,
+    /// This node's (inherited) text colour, used for the glyphs of runs whose
+    /// innermost node is this one.
+    text_color: Color,
+    /// The decoration this node introduces as a decorating box, if any.
+    decoration: Option<ResolvedDecoration>,
+}
+
+/// Resolve the cached style values for a single node into a [`DecorationStackEntry`].
+fn resolve_decoration_entry(doc: &BaseDocument, node_id: NodeId) -> DecorationStackEntry {
+    let Some(styles) = doc.get_node(node_id).and_then(|node| node.primary_styles()) else {
+        return DecorationStackEntry {
+            node_id,
+            text_color: Color::BLACK,
+            decoration: None,
+        };
+    };
+    DecorationStackEntry {
+        node_id,
+        text_color: styles.get_inherited_text().color.as_color_color(),
+        decoration: resolve_decoration(&styles),
+    }
+}
+
+
+/// Paints the highlight of the selected text between byte offsets `start` and `end` of an inline
+/// formatting context.
+///
+/// `transform` takes the content box's device pixels, moved down by the layout's block offset,
+/// onto the scene.
+fn paint_selection(
+    scene: &mut impl PaintScene,
+    layout: &TextLayout,
+    transform: Affine,
+    start: usize,
+    end: usize,
+) {
+    layout.for_each_selection_rect(start, end, |rect| {
+        scene.fill(Fill::NonZero, transform, SELECTION_COLOR, None, &rect);
+    });
+}
+
+/// Paints an inline formatting context: its inline elements' backgrounds, the selection
+/// highlight, and its text and decorations.
+///
+/// `transform` takes the content box's device pixels, moved down by the layout's block offset,
+/// onto the scene. `content_size` is the content box's size in device pixels, which every text
+/// backend's painter is handed and Parley's does not need.
+///
+/// Parley's painter leaves atomic inlines to be painted after the text, so `_paint_atomic` is
+/// never called.
+#[allow(clippy::too_many_arguments)]
+pub(crate) fn paint_inline_layout<S: PaintScene>(
+    scene: &mut S,
+    text_layout: &TextLayout,
+    doc: &BaseDocument,
+    transform: Affine,
+    _content_size: Size,
+    scale: f64,
+    root: NodeId,
+    selection: Option<(usize, usize)>,
+    context: &std::cell::RefCell<DrawTextContext>,
+    _paint_atomic: &mut impl FnMut(&mut S, NodeId),
+) {
+    let context = &mut *context.borrow_mut();
+    // Render inline element backgrounds (e.g. `<span style="background: ...">`)
+    // behind the text and selection highlight.
+    draw_inline_backgrounds(scene, text_layout.layout.lines(), doc, transform, root);
+
+    // Render text selection highlight (if any) using cached selection ranges
+    if let Some((sel_start, sel_end)) = selection {
+        paint_selection(scene, text_layout, transform, sel_start, sel_end);
+    }
+
+    // Render text
+    stroke_text(
+        scene,
+        text_layout.layout.lines(),
+        doc,
+        transform,
+        scale,
+        root,
+        context,
+    );
+}
+
+/// Paints the text of an `<input>` or `<textarea>`, and its selection and caret where it is
+/// focussed.
+///
+/// `transform` takes the text's device pixels onto the scene.
+#[allow(clippy::too_many_arguments)]
+pub(crate) fn paint_text_input(
+    scene: &mut impl PaintScene,
+    editor: &TextEditor,
+    focussed: bool,
+    caret_color: Color,
+    doc: &BaseDocument,
+    transform: Affine,
+    scale: f64,
+    node_id: NodeId,
+    context: &mut DrawTextContext,
+) {
+    let editor = editor.plain_editor();
+    if focussed {
+        // Render selection/caret
+        for (rect, _line_idx) in editor.selection_geometry().iter() {
+            scene.fill(
+                Fill::NonZero,
+                transform,
+                SELECTION_COLOR,
+                None,
+                &convert_rect(rect),
+            );
+        }
+        if let Some(cursor) = editor.cursor_geometry(1.5) {
+            scene.fill(
+                Fill::NonZero,
+                transform,
+                caret_color,
+                None,
+                &convert_rect(&cursor),
+            );
+        };
+    }
+
+    // Render text
+    let Some(layout) = editor.try_layout() else {
+        return;
+    };
+    stroke_text(
+        scene,
+        layout.lines(),
+        doc,
+        transform,
+        scale,
+        node_id,
+        context,
+    );
+}
+
+/// Paints a list item's outside marker, right-aligned before its border box, on the baseline of
+/// the item's first line of text.
+///
+/// `pos` is the item's content box origin in CSS pixels, and `transform` takes the element's CSS
+/// pixels, scaled to device pixels, onto the scene.
+#[allow(clippy::too_many_arguments)]
+pub(crate) fn paint_marker(
+    scene: &mut impl PaintScene,
+    marker: &Marker,
+    layout: &MarkerLayout,
+    text_layout: Option<&TextLayout>,
+    item_layout: &taffy::Layout,
+    doc: &BaseDocument,
+    pos: Point,
+    transform: Affine,
+    scale: f64,
+    node_id: NodeId,
+    context: &mut DrawTextContext,
+) {
+    // Right align and pad the bullet when rendering outside
+    let x_padding = match marker {
+        Marker::Char(_) => 8.0,
+        Marker::String(_) => 0.0,
+    };
+    // Outside markers are placed outside the list item's border box
+    // (`pos` is the origin of its content box)
+    let x_offset = -(layout.full_width() / layout.scale()
+        + x_padding
+        + item_layout.padding.left
+        + item_layout.border.left);
+
+    // Align the marker with the baseline of the first line of text in the list item
+    let y_offset = text_layout
+        .and_then(|text_layout| text_layout.first_baseline())
+        .zip(layout.lines().next())
+        .map_or(0.0, |(baseline, marker_line)| {
+            baseline - marker_line.metrics().baseline / layout.scale()
+        });
+
+    let pos = Point {
+        x: pos.x + x_offset as f64,
+        y: pos.y + y_offset as f64,
+    };
+
+    let transform = transform * Affine::translate((pos.x * scale, pos.y * scale));
+
+    stroke_text(
+        scene,
+        layout.lines(),
+        doc,
+        transform,
+        scale,
+        node_id,
+        context,
+    );
+}
+
+/// Converts parley BoundingBox into peniko Rect
+fn convert_rect(rect: &blitz_dom::text::parley::parley::BoundingBox) -> kurbo::Rect {
+    peniko::kurbo::Rect::new(rect.x0, rect.y0, rect.x1, rect.y1)
+}
+
+/// Draw the backgrounds of inline elements (e.g. `<span style="background: ...">`).
+///
+/// Each glyph run carries the node id of the innermost inline element it belongs to
+/// (via its brush). We look up that node's `background-color` and, if non-transparent,
+/// fill a rectangle covering the run's advance and its font's ascent/descent so that the
+/// background sits behind the text.
+///
+/// The inline root's own background is painted separately (as a normal block box), so
+/// runs belonging to the root are skipped to avoid drawing it twice.
+fn draw_inline_backgrounds<'a>(
+    scene: &mut impl PaintScene,
+    lines: impl Iterator<Item = Line<'a, TextBrush>>,
+    doc: &BaseDocument,
+    transform: Affine,
+    inline_root_id: NodeId,
+) {
+    for line in lines {
+        for item in line.items() {
+            let PositionedLayoutItem::GlyphRun(glyph_run) = item else {
+                continue;
+            };
+
+            let node_id = glyph_run.style().brush.id;
+            if node_id == inline_root_id {
+                continue;
+            }
+
+            let Some(styles) = doc.get_node(node_id).and_then(|node| node.primary_styles()) else {
+                continue;
+            };
+
+            let current_color = styles.slow_clone_color();
+            let bg_color = styles
+                .get_background()
+                .background_color
+                .resolve_to_absolute(&current_color)
+                .as_srgb_color();
+            if bg_color == Color::TRANSPARENT {
+                continue;
+            }
+
+            let metrics = glyph_run.run().font_metrics();
+            let x = glyph_run.offset() as f64;
+            let w = glyph_run.advance() as f64;
+            let baseline = glyph_run.baseline() as f64;
+            let y0 = baseline - metrics.ascent as f64;
+            let y1 = baseline + metrics.descent as f64;
+            let rect = Rect::new(x, y0, x + w, y1);
+
+            scene.fill(Fill::NonZero, transform, bg_color, None, &rect);
+        }
+    }
+}
+
+fn stroke_text<'a>(
+    scene: &mut impl PaintScene,
+    lines: impl Iterator<Item = Line<'a, TextBrush>>,
+    doc: &BaseDocument,
+    transform: Affine,
+    scale: f64,
+    inline_root_id: NodeId,
+    context: &mut DrawTextContext,
+) {
+    let DrawTextContext {
+        backend: Scratch {
+            stack,
+            path_scratch,
+        },
+        deco_boxes,
+        win_ascent_ratios,
+    } = context;
+    stack.clear();
+    path_scratch.clear();
+    deco_boxes.clear();
+
+    // Persistent stack mirroring the ancestor path (inline root -> current run's
+    // node) as we walk the runs. The `text-decoration-*` properties are *not*
+    // inherited; instead a decoration set on an ancestor is propagated to the
+    // descendant text it wraps. Rather than re-resolving styles for the whole
+    // ancestor chain on every run, we cache each node's resolved values here and,
+    // for each run, only resolve styles for the nodes newly descended into (popping
+    // as we ascend). `path_scratch` is a reusable buffer for the run's node path.
+    for line in lines {
+        // Decorations accumulated for this line, keyed by decorating box, so each box is
+        // painted once (spanning all its runs) using its own font — matching Firefox, which
+        // draws one decoration per box rather than one stepped segment per differently-sized
+        // run. Clearing preserves the allocation for the next line and inline context.
+        deco_boxes.clear();
+        // The composing text's underline on this line, spanning its runs.
+        let mut composing: Option<LineDecoration> = None;
+
+        for item in line.items() {
+            if let PositionedLayoutItem::GlyphRun(glyph_run) = item {
+                let run = glyph_run.run();
+                let font = run.font();
+                let font_size = run.font_size();
+                let metrics = run.font_metrics();
+                let style = glyph_run.style();
+                let synthesis = run.synthesis();
+                let glyph_xform = synthesis
+                    .skew()
+                    .map(|angle| Affine::skew(angle.to_radians().tan() as f64, 0.0));
+
+                let css_font_size = font_size as f64 / scale;
+
+                // Reconcile the stack with this run's ancestor path. Build the path
+                // (inline root -> run node), keep the shared prefix already on the stack,
+                // pop the rest, and resolve styles only for the newly-descended nodes.
+                path_scratch.clear();
+                let mut walk_id = Some(style.brush.id);
+                while let Some(node_id) = walk_id {
+                    path_scratch.push(node_id);
+                    if node_id == inline_root_id {
+                        break;
+                    }
+                    walk_id = doc.get_node(node_id).and_then(|node| node.parent);
+                }
+                path_scratch.reverse();
+
+                let shared = stack
+                    .iter()
+                    .zip(path_scratch.iter())
+                    .take_while(|(entry, node_id)| entry.node_id == **node_id)
+                    .count();
+                stack.truncate(shared);
+                for &node_id in &path_scratch[shared..] {
+                    stack.push(resolve_decoration_entry(doc, node_id));
+                }
+
+                // The glyph colour comes from the run's own node (the stack top): `color`
+                // inherits, so the innermost inline element already carries the right value.
+                let text_color = stack.last().map(|e| e.text_color).unwrap_or(Color::BLACK);
+
+                let embolden = if FONT_EMBOLDEN_ENABLED {
+                    let fs = font_size as f64 / scale;
+                    kurbo::Vec2::new((0.015125 * fs).min(0.3), (0.0121 * fs).min(0.3))
+                } else {
+                    kurbo::Vec2::default()
+                };
+
+                let normalized_coords: &[i16] = bytemuck::cast_slice(run.normalized_coords());
+                scene.draw_glyphs(
+                    font,
+                    font_size,
+                    !FONT_EMBOLDEN_ENABLED, // hint
+                    normalized_coords,
+                    embolden,
+                    Fill::NonZero,
+                    &anyrender::Paint::from(text_color),
+                    1.0, // alpha
+                    transform,
+                    glyph_xform,
+                    glyph_run.positioned_glyphs().map(|glyph| anyrender::Glyph {
+                        id: glyph.id as _,
+                        x: glyph.x,
+                        y: glyph.y,
+                    }),
+                );
+
+                // Accumulate this run's contribution to each decorating box on its ancestor
+                // path. The decoration is drawn once per box after the whole line has been
+                // walked (see `flush_line_decorations`), so mixed font sizes within a box
+                // produce a single straight line rather than one stepped segment per run.
+                let geometry = DecorationRunGeometry {
+                    baseline: glyph_run.baseline(),
+                    ascent: metrics.ascent,
+                    descent: metrics.descent,
+                    underline_offset: metrics.underline_offset,
+                    underline_size: metrics.underline_size,
+                    strikethrough_size: metrics.strikethrough_size,
+                    font: Some(font.clone()),
+                    font_size,
+                    css_font_size,
+                    centered: false,
+                };
+                let run_node_id = style.brush.id;
+                let run_x0 = glyph_run.offset() as f64;
+                let run_x1 = run_x0 + glyph_run.advance() as f64;
+
+                for entry in stack.iter() {
+                    if entry.decoration.is_none() {
+                        continue;
+                    }
+                    let idx = match deco_boxes.iter().position(|d| d.node_id == entry.node_id) {
+                        Some(idx) => idx,
+                        None => {
+                            deco_boxes.push(LineDecoration {
+                                node_id: entry.node_id,
+                                deco: entry.decoration.clone().unwrap(),
+                                min_x: f64::INFINITY,
+                                max_x: f64::NEG_INFINITY,
+                                own: None,
+                                first: None,
+                            });
+                            deco_boxes.len() - 1
+                        }
+                    };
+                    let acc = &mut deco_boxes[idx];
+                    acc.min_x = acc.min_x.min(run_x0);
+                    acc.max_x = acc.max_x.max(run_x1);
+                    if acc.first.is_none() {
+                        acc.first = Some(geometry.clone());
+                    }
+                    // A run whose innermost node is the box itself is the box's own text, so
+                    // its font is the one Firefox positions and sizes the decoration with.
+                    if entry.node_id == run_node_id {
+                        acc.own = Some(geometry.clone());
+                    }
+                }
+
+                // A text input's editor underlines the text an input method is composing.
+                if style.underline.is_some() {
+                    let acc = composing.get_or_insert_with(|| LineDecoration {
+                        node_id: run_node_id,
+                        deco: composition_underline(text_color),
+                        min_x: f64::INFINITY,
+                        max_x: f64::NEG_INFINITY,
+                        own: None,
+                        first: None,
+                    });
+                    acc.min_x = acc.min_x.min(run_x0);
+                    acc.max_x = acc.max_x.max(run_x1);
+                    acc.first.get_or_insert(geometry);
+                }
+            }
+        }
+
+        flush_line_decorations(
+            scene,
+            transform,
+            scale,
+            deco_boxes,
+            win_ascent_ratios,
+            inline_root_id,
+            line.metrics().baseline,
+            TextDecorationLine::all(),
+        );
+        if let Some(composing) = composing.take() {
+            flush_line_decorations(
+                scene,
+                transform,
+                scale,
+                std::slice::from_ref(&composing),
+                win_ascent_ratios,
+                inline_root_id,
+                line.metrics().baseline,
+                TextDecorationLine::all(),
+            );
+        }
+    }
+}
+
+/// The underline under the text an input method is composing: solid, `auto` thick, and in
+/// the text's colour.
+fn composition_underline(color: Color) -> ResolvedDecoration {
+    ResolvedDecoration {
+        line: TextDecorationLine::UNDERLINE,
+        style: TextDecorationStyle::Solid,
+        color,
+        thickness: GenericTextDecorationLength::Auto,
+        underline_offset: None,
+        underline_under: false,
+        underline_from_font: false,
+        inset: GenericTextDecorationInset::Auto,
+    }
+}
diff --git a/packages/blitz-paint/src/text/winkin.rs b/packages/blitz-paint/src/text/winkin.rs
new file mode 100644
index 0000000000..39b53e14a6
--- /dev/null
+++ b/packages/blitz-paint/src/text/winkin.rs
@@ -0,0 +1,1301 @@
+//! Painting text laid out by winkin.
+//!
+//! winkin hands out geometry and order, and nothing it hands out is drawn by
+//! it: each line's [`Line::paints`] walks what the line paints in Chrome's
+//! order, and this draws each with what the node it names is styled in.
+
+use core::cell::{Cell, RefCell};
+
+use anyrender::{Glyph, PaintScene};
+use blitz_dom::node::Marker;
+use blitz_dom::text::EditableText as _;
+use blitz_dom::text::winkin::winkin;
+use blitz_dom::text::winkin::{
+    COMPOSE_KEY, MarkerLayout, TextEditor, TextLayout, line_frame, page, relative_shift,
+};
+use blitz_dom::text::InlineText as _;
+use blitz_dom::{BaseDocument, NodeId};
+use kurbo::{Affine, Insets, Point, Rect, Vec2};
+use peniko::{Blob, Fill, FontData};
+use style::properties::ComputedValues;
+use style::servo_arc::Arc as ServoArc;
+use style::properties::generated::longhands::text_decoration_style::computed_value::T as TextDecorationStyle;
+use style::values::computed::{BorderCornerRadius, CSSPixelLength, TextDecorationLine};
+use style::values::generics::text::{GenericTextDecorationInset, GenericTextDecorationLength};
+use winkin::paint::{Decorates, Decoration, EmphasisMark, Paint};
+use winkin::style::WritingMode;
+use winkin::{BoxFragment, FontInstance, Layout, NodeKey, RunOrientation, TextRun};
+
+use crate::color::{Color, ToColorColor as _};
+use crate::kurbo_css::{CssBox, Edge, NonUniformRoundedRectRadii};
+use super::{DecorationRunGeometry, DrawTextContext, LineDecoration};
+
+/// What the winkin painter keeps between uses: nothing beyond the shared decoration buffers.
+#[derive(Default)]
+pub(super) struct Scratch;
+
+/// A box's four sides in a line's own terms, from its physical ones: its
+/// line-left and line-right, and its over and under sides.
+#[derive(Copy, Clone)]
+struct LineSides<T> {
+    left: T,
+    right: T,
+    over: T,
+    under: T,
+}
+
+impl<T> LineSides<T> {
+    /// `top`, `right`, `bottom` and `left` where a line in `writing_mode`
+    /// puts them.
+    fn from_physical(writing_mode: WritingMode, top: T, right: T, bottom: T, left: T) -> Self {
+        match writing_mode {
+            WritingMode::HorizontalTb => Self {
+                left,
+                right,
+                over: top,
+                under: bottom,
+            },
+            WritingMode::VerticalRl | WritingMode::VerticalLr | WritingMode::SidewaysRl => Self {
+                left: top,
+                right: bottom,
+                over: right,
+                under: left,
+            },
+            WritingMode::SidewaysLr => Self {
+                left: bottom,
+                right: top,
+                over: left,
+                under: right,
+            },
+        }
+    }
+}
+
+/// Lends the painter the shared text context for one draw at a time, so that
+/// an atomic inline painted between two draws can use it too.
+pub(crate) trait LendContext {
+    /// Calls `f` with the context.
+    fn lend<R>(&mut self, f: impl FnOnce(&mut DrawTextContext) -> R) -> R;
+}
+
+impl LendContext for &mut DrawTextContext {
+    fn lend<R>(&mut self, f: impl FnOnce(&mut DrawTextContext) -> R) -> R {
+        f(self)
+    }
+}
+
+impl LendContext for &RefCell<DrawTextContext> {
+    fn lend<R>(&mut self, f: impl FnOnce(&mut DrawTextContext) -> R) -> R {
+        f(&mut self.borrow_mut())
+    }
+}
+
+/// Paints every line of `layout`: the boxes, decorations, ruby annotations,
+/// text, emphasis marks and generated text of each, in Chrome's order.
+///
+/// `transform` takes the content box's device pixels onto the scene, and
+/// `root` is the block the layout was built for. `paint_atomic` paints an
+/// atomic inline where the line paints it, after what comes before it in
+/// tree order and under what comes after.
+#[allow(clippy::too_many_arguments)]
+pub(crate) fn paint<S: PaintScene>(
+    scene: &mut S,
+    text: &TextLayout,
+    layout: &Layout,
+    doc: &BaseDocument,
+    transform: Affine,
+    content_width: f64,
+    content_height: f64,
+    scale: f64,
+    root: NodeId,
+    mut context: impl LendContext,
+    selection: Option<(usize, usize)>,
+    paint_atomic: &mut impl FnMut(&mut S, NodeId),
+) {
+    let writing_mode = text.writing_mode();
+    let page = page(writing_mode, content_width, content_height);
+    let selection_rects: Vec<_> = selection
+        .map(|(start, end)| layout.selection_rects(start..end).collect())
+        .unwrap_or_default();
+    let root_key = root.as_u64();
+    let root_styles = doc
+        .get_node(root)
+        .and_then(|node| node.primary_styles())
+        .map(|styles| (*styles).clone());
+    // Whether glyphs stand upright on the line's central baseline, which
+    // decorations are measured about.
+    let centered = matches!(
+        writing_mode,
+        WritingMode::VerticalRl | WritingMode::VerticalLr
+    ) && root_styles.as_ref().is_none_or(|styles| {
+        styles.slow_clone_text_orientation() != style::computed_values::text_orientation::T::Sideways
+    });
+    let rtl = root_styles.as_ref().is_some_and(|styles| {
+        styles.slow_clone_direction() == style::computed_values::direction::T::Rtl
+    });
+    let propagated = propagated_decorations(doc, root);
+    let painter = Painter {
+        text,
+        doc,
+        transform,
+        containing: kurbo::Size::new(content_width / scale, content_height / scale),
+        rtl,
+        shifted: Cell::new(None),
+        scale,
+        writing_mode,
+        root_key,
+        root_styles,
+        propagated,
+        centered,
+        color: Cell::new(None),
+        line: Cell::new((Affine::IDENTITY, 0.0)),
+    };
+    let mut items = Vec::new();
+    for line in layout.lines() {
+        // The block's first formatted line is set in its `::first-line`
+        // styles, where it has them.
+        let first = line.index() == 0;
+        let metrics = line.metrics();
+        let frame = line_frame(writing_mode, page, &metrics);
+        painter.line.set((frame, f64::from(metrics.height())));
+        items.clear();
+        items.extend(line.paints(|key| painter.decorates(key, first)));
+        // Text shadows go under everything the line paints, the last of each
+        // list lowest, then the line is painted over them.
+        let shadows = items
+            .iter()
+            .filter_map(|item| painter.shadows_of(item, first))
+            .max()
+            .unwrap_or(0);
+        for pass in (0..shadows).rev().map(Some).chain([None]) {
+            // The run whose marks follow it, and whose font they are set in.
+            let mut marked: Option<TextRun<'_>> = None;
+            let mut selection_drawn = false;
+            for item in &items {
+                // Backgrounds precede the highlight; glyphs follow it.
+                if pass.is_none()
+                    && !selection_drawn
+                    && !matches!(item, Paint::Background(_) | Paint::Box(_))
+                {
+                    paint_selection(scene, &selection_rects, line.index(), frame, transform);
+                    selection_drawn = true;
+                }
+                match *item {
+                    Paint::Background(background) if pass.is_none() => {
+                        painter.paint_first_line_background(scene, frame, first, background);
+                    }
+                    Paint::Box(fragment) if pass.is_none() => {
+                        painter.paint_box(scene, frame, &fragment, first);
+                    }
+                    Paint::DecorationBeforeText(bar) => context.lend(|context| {
+                        painter.paint_decoration(scene, frame, &bar, first, false, pass, context)
+                    }),
+                    Paint::DecorationAfterText(bar) => context.lend(|context| {
+                        painter.paint_decoration(scene, frame, &bar, first, true, pass, context)
+                    }),
+                    Paint::Atomic(atomic) if pass.is_none() => {
+                        paint_atomic(scene, NodeId::from_u64(atomic.key().0));
+                    }
+                    Paint::Annotation(run) | Paint::Text(run) => {
+                        painter.draw_run(scene, frame, &run, first, pass);
+                        marked = Some(run);
+                    }
+                    Paint::Generated(run) => painter.draw_run(scene, frame, &run, first, pass),
+                    Paint::Emphasis(mark) => {
+                        painter.draw_emphasis(scene, frame, &mark, marked.as_ref(), first, pass);
+                    }
+                    // Anything else draws nothing in a shadow pass.
+                    _ => {}
+                }
+            }
+            if pass.is_none() && !selection_drawn {
+                paint_selection(scene, &selection_rects, line.index(), frame, transform);
+            }
+        }
+    }
+}
+
+fn paint_selection(
+    scene: &mut impl PaintScene,
+    rects: &[winkin::selection::SelectionRect],
+    line: usize,
+    frame: Affine,
+    transform: Affine,
+) {
+    for rect in rects.iter().filter(|rect| rect.line == line) {
+        let shape = Rect::new(
+            f64::from(rect.inline.left),
+            f64::from(rect.block.over),
+            f64::from(rect.inline.right),
+            f64::from(rect.block.under),
+        );
+        scene.fill(
+            Fill::NonZero,
+            transform * frame,
+            crate::SELECTION_COLOR,
+            None,
+            &shape,
+        );
+    }
+}
+
+/// What one layout is painted with.
+struct Painter<'a> {
+    text: &'a TextLayout,
+    doc: &'a BaseDocument,
+    transform: Affine,
+    /// The block's content box in CSS pixels, which relative offsets'
+    /// percentages are of.
+    containing: kurbo::Size,
+    /// Whether the block is right-to-left, where `right` outweighs `left`.
+    rtl: bool,
+    /// The scene transform `position: relative` moved last, and whose it was.
+    shifted: Cell<Option<(u64, Affine)>>,
+    scale: f64,
+    writing_mode: WritingMode,
+    root_key: u64,
+    root_styles: Option<ServoArc<ComputedValues>>,
+    /// The styles of the boxes around the block whose decorations it
+    /// draws, the outermost first.
+    propagated: Vec<ServoArc<ComputedValues>>,
+    centered: bool,
+    /// The text color painted last, and whose it was.
+    color: Cell<Option<(u64, bool, Color)>>,
+    /// The frame of the line being painted, and its height: what a blurred
+    /// shadow is drawn within is found from them.
+    line: Cell<(Affine, f64)>,
+}
+
+impl Painter<'_> {
+    /// What takes the content box's device pixels onto the scene for what
+    /// `key` paints: moved as `position: relative` moves its inline boxes.
+    fn transform(&self, key: u64) -> Affine {
+        if key == self.root_key {
+            return self.transform;
+        }
+        if let Some((held, transform)) = self.shifted.get()
+            && held == key
+        {
+            return transform;
+        }
+        let shift = relative_shift(self.doc, key, self.containing, self.rtl);
+        let transform = if shift == Vec2::ZERO {
+            self.transform
+        } else {
+            self.transform * Affine::translate(shift * self.scale)
+        };
+        self.shifted.set(Some((key, transform)));
+        transform
+    }
+
+    /// The computed style `key` is painted in, on the first line or not.
+    fn styles(&self, key: u64, first: bool) -> Option<ServoArc<ComputedValues>> {
+        self.text.computed_style(self.doc, key, first)
+    }
+
+    /// The color of `key`'s text, on the first line or not.
+    fn color(&self, key: u64, first: bool) -> Color {
+        if let Some((held, held_first, color)) = self.color.get()
+            && held == key
+            && held_first == first
+        {
+            return color;
+        }
+        let color = self
+            .styles(key, first)
+            .map_or(Color::BLACK, |styles| styles.slow_clone_color().as_srgb_color());
+        self.color.set(Some((key, first, color)));
+        color
+    }
+
+    /// The styles whose decorations `key` draws as a decorating box: its
+    /// own, and for the block, first those its ancestors propagate to it,
+    /// and on the first line its `::first-line` as well, whose decorations
+    /// do not inherit into the block's.
+    fn decorating_styles(
+        &self,
+        key: u64,
+        first: bool,
+    ) -> impl Iterator<Item = ServoArc<ComputedValues>> + '_ {
+        let (propagated, own, first_line) = if key == self.root_key {
+            let first_line = first.then(|| self.text.first_line_style_of(key)).flatten();
+            (&self.propagated[..], self.root_styles.clone(), first_line)
+        } else {
+            (&[][..], self.styles(key, first), None)
+        };
+        propagated.iter().cloned().chain(own).chain(first_line)
+    }
+
+    /// Which decoration lines `key` draws: the question [`Line::paints`]
+    /// asks of the block and each box.
+    fn decorates(&self, key: NodeKey, first: bool) -> Decorates {
+        if key.0 & COMPOSE_KEY != 0 {
+            return Decorates::BeforeText;
+        }
+        let mut before = false;
+        let mut after = false;
+        for styles in self.decorating_styles(key.0, first) {
+            // A `display: contents` element is no box, and decorates nothing.
+            if styles.slow_clone_display().is_contents() {
+                continue;
+            }
+            let lines = styles.slow_clone_text_decoration_line();
+            before |=
+                lines.intersects(TextDecorationLine::UNDERLINE | TextDecorationLine::OVERLINE);
+            after |= lines.contains(TextDecorationLine::LINE_THROUGH);
+        }
+        match (before, after) {
+            (true, true) => Decorates::Both,
+            (true, false) => Decorates::BeforeText,
+            (false, true) => Decorates::AfterText,
+            (false, false) => Decorates::None,
+        }
+    }
+
+    /// Paints the block's `::first-line` background behind the first line's
+    /// content, where it sets one. The block's own background is its box's,
+    /// which Blitz paints with the box.
+    fn paint_first_line_background(
+        &self,
+        scene: &mut impl PaintScene,
+        frame: Affine,
+        first: bool,
+        background: winkin::paint::Background<'_>,
+    ) {
+        if !first {
+            return;
+        }
+        let Some(styles) = self.text.first_line_style_of(self.root_key) else {
+            return;
+        };
+        let color = styles
+            .get_background()
+            .background_color
+            .resolve_to_absolute(&styles.slow_clone_color())
+            .as_srgb_color();
+        if color.components[3] <= 0.0 {
+            return;
+        }
+        let (inline, block) = (background.inline(), background.block());
+        let rect = Rect::new(
+            f64::from(inline.left),
+            f64::from(block.over),
+            f64::from(inline.right),
+            f64::from(block.under),
+        );
+        scene.fill(Fill::NonZero, self.transform * frame, color, None, &rect);
+    }
+
+    /// Draws a stretch of an inline box: its background and its borders,
+    /// and no border on a side where the box goes on past it.
+    fn paint_box(
+        &self,
+        scene: &mut impl PaintScene,
+        frame: Affine,
+        fragment: &BoxFragment<'_>,
+        first: bool,
+    ) {
+        let key = fragment.key().0;
+        let Some(styles) = self.styles(key, first) else {
+            return;
+        };
+        let current = styles.slow_clone_color();
+        let background = styles
+            .get_background()
+            .background_color
+            .resolve_to_absolute(&current)
+            .as_srgb_color();
+        let border = styles.get_border();
+        let scale = self.scale;
+        // Snapped as the layout took them: a width under a pixel to one, and
+        // any other down to a whole one.
+        let width = |width: &style::values::computed::BorderSideWidth,
+                     style: style::values::specified::border::BorderStyle| {
+            let width = f64::from(width.0.to_f32_px()) * scale;
+            if style.none_or_hidden() || width <= 0.0 {
+                0.0
+            } else {
+                width.floor().max(1.0)
+            }
+        };
+        let widths = LineSides::from_physical(
+            self.writing_mode,
+            width(&border.border_top_width, border.border_top_style),
+            width(&border.border_right_width, border.border_right_style),
+            width(&border.border_bottom_width, border.border_bottom_style),
+            width(&border.border_left_width, border.border_left_style),
+        );
+        let colors = LineSides::from_physical(
+            self.writing_mode,
+            &border.border_top_color,
+            &border.border_right_color,
+            &border.border_bottom_color,
+            &border.border_left_color,
+        );
+        let (inline, block) = (fragment.inline(), fragment.block());
+        let border_box = Rect::new(
+            f64::from(inline.left),
+            f64::from(block.over),
+            f64::from(inline.right),
+            f64::from(block.under),
+        );
+        if border_box.width() <= 0.0 && border_box.height() <= 0.0 {
+            return;
+        }
+        // Snapped to whole device pixels, as Chrome snaps a box's decorations, where the
+        // transform only moves and scales.
+        let transform = self.transform(key) * frame;
+        let [_, skew_y, skew_x, ..] = transform.as_coeffs();
+        let border_box = if skew_x == 0.0 && skew_y == 0.0 && transform.determinant() != 0.0 {
+            let snapped = transform.transform_rect_bbox(border_box).round();
+            transform.inverse().transform_rect_bbox(snapped)
+        } else {
+            border_box
+        };
+        let open_left = fragment.is_open_left();
+        let open_right = fragment.is_open_right();
+        let insets = Insets {
+            x0: if open_left { 0.0 } else { widths.left },
+            y0: widths.over,
+            x1: if open_right { 0.0 } else { widths.right },
+            y1: widths.under,
+        };
+        // Each corner of the stretch is a corner of the page's box, which one
+        // being the writing mode's; in a vertical line a corner's horizontal
+        // radius runs across the line.
+        let [left_over, right_over, right_under, left_under] =
+            line_corners(self.writing_mode, border);
+        let across_is_horizontal = self.writing_mode != WritingMode::HorizontalTb;
+        let radius = |corner: &BorderCornerRadius, open: bool| {
+            if open {
+                return Vec2::ZERO;
+            }
+            let resolve = |length: &style::values::computed::LengthPercentage, of: f64| {
+                scale
+                    * f64::from(
+                        length
+                            .resolve(CSSPixelLength::new((of / scale) as f32))
+                            .px(),
+                    )
+            };
+            let (physical_width, physical_height) = if across_is_horizontal {
+                (border_box.height(), border_box.width())
+            } else {
+                (border_box.width(), border_box.height())
+            };
+            let horizontal = resolve(&corner.0.width.0, physical_width);
+            let vertical = resolve(&corner.0.height.0, physical_height);
+            if across_is_horizontal {
+                Vec2::new(vertical, horizontal)
+            } else {
+                Vec2::new(horizontal, vertical)
+            }
+        };
+        let radii = NonUniformRoundedRectRadii {
+            top_left: radius(left_over, open_left),
+            top_right: radius(right_over, open_right),
+            bottom_right: radius(right_under, open_right),
+            bottom_left: radius(left_under, open_left),
+        };
+        let css_box = CssBox::new(border_box, insets, Insets::ZERO, 0.0, radii);
+        if background.components[3] > 0.0 {
+            scene.fill(
+                Fill::NonZero,
+                transform,
+                background,
+                None,
+                &css_box.border_box_path(),
+            );
+        }
+        let edges = [
+            (Edge::Top, insets.y0, colors.over),
+            (Edge::Right, insets.x1, colors.right),
+            (Edge::Bottom, insets.y1, colors.under),
+            (Edge::Left, insets.x0, colors.left),
+        ]
+        .map(|(edge, width, color)| (edge, width, color.resolve_to_absolute(&current).as_srgb_color()));
+        // Edges of one color around square corners are one ring, so no seam shows where two meet.
+        let drawn = edges.iter().filter(|(_, width, _)| *width > 0.0);
+        let mut colors_drawn = drawn.clone().map(|(_, _, color)| *color);
+        let one_color = colors_drawn
+            .next()
+            .filter(|first| colors_drawn.all(|color| color == *first));
+        match one_color {
+            Some(color) if !css_box.has_border_radius() => {
+                let mut ring = css_box.border_box_path();
+                ring.extend(css_box.padding_box_path());
+                scene.fill(Fill::EvenOdd, transform, color, None, &ring);
+            }
+            _ => {
+                for (edge, _, color) in drawn {
+                    let shape = css_box.border_edge_shape(*edge);
+                    scene.fill(Fill::NonZero, transform, *color, None, &shape);
+                }
+            }
+        }
+        // The outline round the stretch's border box, as a block's is drawn. Chrome draws one
+        // round an empty inline box too.
+        let outline = styles.get_outline();
+        if let style::values::computed::OutlineStyle::BorderStyle(outline_style) =
+            outline.outline_style
+        {
+            let outline_width = width(&outline.outline_width, outline_style);
+            if outline_width > 0.0 {
+                let color = outline
+                    .outline_color
+                    .resolve_to_absolute(&current)
+                    .as_srgb_color();
+                let outlined = CssBox::new(border_box, insets, Insets::ZERO, outline_width, radii);
+                scene.fill(Fill::NonZero, transform, color, None, &outlined.outline());
+            }
+        }
+    }
+
+    /// Draws one bar of a decoration, with the decoration `bar`'s box sets.
+    fn paint_decoration(
+        &self,
+        scene: &mut impl PaintScene,
+        frame: Affine,
+        bar: &Decoration,
+        first: bool,
+        after_text: bool,
+        pass: Option<usize>,
+        context: &mut DrawTextContext,
+    ) {
+        let inline = bar.inline();
+        let key = bar.key().0;
+        let geometry = WinkinDecoration {
+            left: f64::from(inline.left),
+            right: f64::from(inline.right),
+            baseline: bar.baseline(),
+            ascent: bar.ascent(),
+            descent: bar.descent(),
+            underline_gap: bar.underline_gap(),
+            thickness: bar.underline_thickness(),
+            font_underline_gap: bar.underline_gap_from_font(),
+            font_thickness: bar.underline_thickness_from_font(),
+            font_size: bar.font_size(),
+            centered: self.centered,
+        };
+        self.shadowed(
+            scene,
+            pass,
+            self.shadow_styles(key, first).as_deref(),
+            self.color(key, first),
+            self.transform(key),
+            (geometry.left, geometry.right),
+            None,
+            |scene, placed, color| {
+                if key & COMPOSE_KEY != 0 {
+                    if !after_text {
+                        context.draw_winkin_composition_underline(
+                            scene,
+                            placed * frame,
+                            self.scale,
+                            geometry,
+                            color.unwrap_or_else(|| self.color(key, first)),
+                        );
+                    }
+                    return;
+                }
+                for styles in self.decorating_styles(key, first) {
+                    context.draw_winkin_decoration(
+                        scene,
+                        placed * frame,
+                        self.scale,
+                        &styles,
+                        geometry,
+                        after_text,
+                        color,
+                    );
+                }
+            },
+        );
+    }
+
+    /// The style whose text shadows what `key` paints casts.
+    fn shadow_styles(&self, key: u64, first: bool) -> Option<ServoArc<ComputedValues>> {
+        self.styles(key, first)
+    }
+
+    /// How many text shadows `item` casts, where it casts any.
+    fn shadows_of(&self, item: &Paint<'_>, first: bool) -> Option<usize> {
+        let key = match item {
+            Paint::DecorationBeforeText(bar) | Paint::DecorationAfterText(bar) => bar.key(),
+            Paint::Annotation(run) | Paint::Text(run) | Paint::Generated(run) => run.key(),
+            Paint::Emphasis(mark) => mark.key,
+            _ => return None,
+        };
+        let styles = self.shadow_styles(key.0, first)?;
+        Some(styles.get_inherited_text().text_shadow.0.len())
+    }
+
+    /// Draws what `draw` paints: in the foreground pass, where `pass` is
+    /// `None`, in `own`; in a shadow pass, as the text shadow of that index
+    /// in `styles` casts it, moved by its offset, in its color and blurred
+    /// by its radius, where `styles` has that many.
+    ///
+    /// `draw` is handed the transform taking the content box's device pixels
+    /// onto the scene, `placed` moved by the shadow, and the color to paint
+    /// in where it is not its own; `current` is what `currentcolor` is.
+    /// `inline` is where along the line what it paints starts and ends,
+    /// which a blurred shadow is drawn around.
+    #[allow(clippy::too_many_arguments)]
+    fn shadowed<S: PaintScene>(
+        &self,
+        scene: &mut S,
+        pass: Option<usize>,
+        styles: Option<&ComputedValues>,
+        current: Color,
+        placed: Affine,
+        inline: (f64, f64),
+        own: Option<Color>,
+        mut draw: impl FnMut(&mut S, Affine, Option<Color>),
+    ) {
+        let Some(index) = pass else {
+            draw(scene, placed, own);
+            return;
+        };
+        if let Some(styles) = styles
+            && let Some(shadow) = styles.get_inherited_text().text_shadow.0.get(index)
+        {
+            {
+                let color = if shadow.color.is_currentcolor() {
+                    current
+                } else {
+                    shadow
+                        .color
+                        .resolve_to_absolute(&styles.slow_clone_color())
+                        .as_srgb_color()
+                };
+                if color.components[3] <= 0.0 {
+                    return;
+                }
+                let offset = Vec2::new(
+                    f64::from(shadow.horizontal.px()),
+                    f64::from(shadow.vertical.px()),
+                ) * self.scale;
+                let moved = placed * Affine::translate(offset);
+                // A blur radius is twice the deviation of its Gaussian.
+                let deviation = f64::from(shadow.blur.0.px()) * self.scale / 2.0;
+                if deviation > 0.0 {
+                    // Glyphs reach past the line box by up to about its
+                    // height, and the blur past them.
+                    let (frame, height) = self.line.get();
+                    let reach = 3.0 * deviation + height;
+                    let clip = frame
+                        .transform_rect_bbox(Rect::new(inline.0, 0.0, inline.1, height))
+                        .inflate(reach, reach);
+                    let filter = anyrender::filters::Filter::single(
+                        anyrender::filters::FilterEffect::blur(deviation as f32),
+                    );
+                    scene.push_layer(
+                        Fill::NonZero,
+                        peniko::Mix::Normal,
+                        1.0,
+                        moved,
+                        &clip,
+                        Some(std::sync::Arc::new(filter)),
+                        None,
+                    );
+                    draw(scene, moved, Some(color));
+                    scene.pop_layer();
+                } else {
+                    draw(scene, moved, Some(color));
+                }
+            }
+        }
+    }
+
+    /// Draws the glyphs of a run of text, in its node's color.
+    ///
+    /// A glyph standing upright in a vertical line, or combined into one em,
+    /// is not turned with the line: only the point it is drawn at is.
+    fn draw_run(
+        &self,
+        scene: &mut impl PaintScene,
+        frame: Affine,
+        run: &TextRun<'_>,
+        first: bool,
+        pass: Option<usize>,
+    ) {
+        let Some(font) = run.font() else {
+            return;
+        };
+        let key = run.key().0;
+        let color = self.color(key, first);
+        let upright = matches!(
+            run.orientation(),
+            RunOrientation::Upright | RunOrientation::Combined
+        );
+        // Combined text squeezed into its em: its places already are, and
+        // each glyph is drawn that much narrower about its own origin.
+        let squeeze = run.combine_scale();
+        let mut glyph_transform =
+            (squeeze < 1.0).then(|| Affine::scale_non_uniform(f64::from(squeeze), 1.0));
+        if let Some(skew) = font.skew {
+            // CSS's clockwise degrees lean the glyph's top to the right.
+            let lean = Affine::skew(-f64::from(skew.to_radians().tan()), 0.0);
+            glyph_transform = Some(glyph_transform.map_or(lean, |squeeze| squeeze * lean));
+        }
+        // The renderer walks the glyphs more than once, so the walk is cloned.
+        let glyphs = || {
+            run.glyphs().map(move |glyph| {
+                if upright {
+                    let at = frame * Point::new(f64::from(glyph.x), f64::from(glyph.y));
+                    Glyph {
+                        id: glyph.id,
+                        x: at.x as f32,
+                        y: at.y as f32,
+                    }
+                } else {
+                    Glyph {
+                        id: glyph.id,
+                        x: glyph.x,
+                        y: glyph.y,
+                    }
+                }
+            })
+        };
+        let data = font_data(&font);
+        let inline = if pass.is_some() {
+            run.glyphs()
+                .fold((f64::MAX, f64::MIN), |(start, end), glyph| {
+                    let x = f64::from(glyph.x);
+                    (start.min(x), end.max(x))
+                })
+        } else {
+            (0.0, 0.0)
+        };
+        self.shadowed(
+            scene,
+            pass,
+            self.styles(key, first).as_deref(),
+            color,
+            self.transform(key),
+            inline,
+            Some(color),
+            |scene, placed, color| {
+                // Transparent text draws nothing, colour glyphs included, as
+                // Chrome takes a colour glyph's alpha from its paint's. Its
+                // shadows still draw.
+                let color = color.unwrap_or(Color::BLACK);
+                if color.components[3] <= 0.0 {
+                    return;
+                }
+                scene.draw_glyphs(
+                    &data,
+                    font.size,
+                    true,
+                    font.coords,
+                    embolden(&font),
+                    Fill::NonZero,
+                    &anyrender::Paint::from(color),
+                    1.0,
+                    if upright { placed } else { placed * frame },
+                    glyph_transform,
+                    glyphs(),
+                );
+            },
+        );
+    }
+
+    /// Draws an emphasis mark where winkin put it: the mark string laid out
+    /// in the fonts of the text it marks, at the marks' size, its advance
+    /// centred on the mark's middle and standing on its baseline.
+    ///
+    /// Upright in a vertical line, the mark is drawn unturned, its em box
+    /// centred on the point winkin gives.
+    fn draw_emphasis(
+        &self,
+        scene: &mut impl PaintScene,
+        frame: Affine,
+        mark: &EmphasisMark,
+        run: Option<&TextRun<'_>>,
+        first: bool,
+        pass: Option<usize>,
+    ) {
+        let key = mark.key.0;
+        let Some(styles) = self.styles(key, first) else {
+            return;
+        };
+        // The marks are laid out per element: a text node's is its parent's.
+        let element = self
+            .doc
+            .get_node(NodeId::from_u64(key))
+            .and_then(|node| match node.data {
+                blitz_dom::NodeData::Text(_) => node.parent,
+                _ => Some(node.id),
+            });
+        let Some(layout) = element.and_then(|element| self.text.emphasis_mark(element.as_u64()))
+        else {
+            return;
+        };
+        let Some(line) = layout.lines().next() else {
+            return;
+        };
+        let metrics = line.metrics();
+        // Laid out at the size of the marks off the first line, which may
+        // differ on it.
+        let built = line
+            .paints(|_| Decorates::None)
+            .find_map(|item| match item {
+                Paint::Text(run) => run.font().map(|font| font.size),
+                _ => None,
+            })
+            .unwrap_or(mark.size);
+        let ratio = if built > 0.0 { mark.size / built } else { 1.0 };
+        // `currentcolor` is the text's own, which on the first line may be
+        // its `::first-line` color.
+        let text_color = self.color(key, first);
+        let emphasis_color = &styles.get_inherited_text().text_emphasis_color;
+        let color = if emphasis_color.is_currentcolor() {
+            text_color
+        } else {
+            emphasis_color
+                .resolve_to_absolute(&styles.slow_clone_color())
+                .as_srgb_color()
+        };
+        // A mark on combined text turns with the line, as Chrome draws it: the unit is set
+        // upright, but its mark is the line's.
+        let upright = run.is_some_and(|run| run.orientation() == RunOrientation::Upright);
+        let baseline = metrics.baseline - metrics.top;
+        let half = metrics.width / 2.0;
+        // Where the mark's own line's origin goes, and what it is drawn
+        // with: along the line's frame, or unturned about the point.
+        let (origin, frame_after) = if upright {
+            let center = frame * Point::new(f64::from(mark.x), f64::from(mark.baseline));
+            let middle = f64::from((metrics.ascent - metrics.descent) / 2.0 * ratio);
+            (Point::new(center.x, center.y + middle), Affine::IDENTITY)
+        } else {
+            (
+                Point::new(f64::from(mark.x), f64::from(mark.baseline)),
+                frame,
+            )
+        };
+        let place = move |x: f32, y: f32| Glyph {
+            id: 0,
+            x: (origin.x + f64::from((x - half) * ratio)) as f32,
+            y: (origin.y + f64::from((y - baseline) * ratio)) as f32,
+        };
+        self.shadowed(
+            scene,
+            pass,
+            Some(&styles),
+            text_color,
+            self.transform(key),
+            (f64::from(mark.x - mark.size), f64::from(mark.x + mark.size)),
+            Some(color),
+            |scene, placed, color| {
+                for item in line.paints(|_| Decorates::None) {
+                    let Paint::Text(mark_run) = item else {
+                        continue;
+                    };
+                    let Some(font) = mark_run.font() else {
+                        continue;
+                    };
+                    scene.draw_glyphs(
+                        &font_data(&font),
+                        font.size * ratio,
+                        true,
+                        font.coords,
+                        embolden(&font),
+                        Fill::NonZero,
+                        &anyrender::Paint::from(color.unwrap_or(Color::BLACK)),
+                        1.0,
+                        placed * frame_after,
+                        None,
+                        mark_run.glyphs().map(|glyph| Glyph {
+                            id: glyph.id,
+                            ..place(glyph.x, glyph.y)
+                        }),
+                    );
+                }
+            },
+        );
+    }
+}
+
+/// The styles of the boxes around `root` whose decorations propagate to its
+/// inline content, the outermost first.
+///
+/// Decorations propagate to in-flow children, so the walk stops at a box
+/// that is floated, absolutely positioned or an atomic inline: its own
+/// decorations are its content's, its ancestors' are not.
+fn propagated_decorations(doc: &BaseDocument, root: NodeId) -> Vec<ServoArc<ComputedValues>> {
+    use style::values::specified::box_::{DisplayInside, DisplayOutside};
+    let mut propagated = Vec::new();
+    let mut at = doc.get_node(root);
+    while let Some(node) = at {
+        let Some(styles) = node.primary_styles() else {
+            // An anonymous block may have no style of its own: it is in the
+            // flow of the box around it.
+            at = node.parent.and_then(|parent| doc.get_node(parent));
+            continue;
+        };
+        if node.id != root && !styles.slow_clone_text_decoration_line().is_empty() {
+            propagated.push((*styles).clone());
+        }
+        let display = styles.slow_clone_display();
+        let atomic = display.outside() == DisplayOutside::Inline
+            && display.inside() != DisplayInside::Flow
+            && !display.is_contents();
+        // A `display: contents` element generates no box, so its `float` and `position`
+        // take nothing out of the flow.
+        let out_of_flow = !display.is_contents()
+            && (styles.slow_clone_position().is_absolutely_positioned()
+                || styles.slow_clone_float() != style::values::computed::Float::None);
+        if atomic || out_of_flow {
+            break;
+        }
+        at = node.parent.and_then(|parent| doc.get_node(parent));
+    }
+    propagated.reverse();
+    propagated
+}
+
+/// A box's corners in a line's own terms: at its line-left end on its over
+/// side, at its line-right end on its over side, then under it at its
+/// line-right and line-left ends.
+fn line_corners(
+    writing_mode: WritingMode,
+    border: &style::properties::style_structs::Border,
+) -> [&BorderCornerRadius; 4] {
+    let (top_left, top_right, bottom_right, bottom_left) = (
+        &border.border_top_left_radius,
+        &border.border_top_right_radius,
+        &border.border_bottom_right_radius,
+        &border.border_bottom_left_radius,
+    );
+    match writing_mode {
+        WritingMode::HorizontalTb => [top_left, top_right, bottom_right, bottom_left],
+        // Lines down the page, over on their right.
+        WritingMode::VerticalRl | WritingMode::VerticalLr | WritingMode::SidewaysRl => {
+            [top_right, bottom_right, bottom_left, top_left]
+        }
+        // Lines up the page, over on their left.
+        WritingMode::SidewaysLr => [bottom_left, top_left, top_right, bottom_right],
+    }
+}
+
+/// A run's font as the renderer draws it, sharing its bytes and their id so
+/// the renderer's caches key it as fontwich does.
+fn font_data(font: &FontInstance<'_>) -> FontData {
+    FontData::new(
+        Blob::from_raw_parts(font.bytes.arc().clone(), font.bytes.id()),
+        font.index,
+    )
+}
+
+/// How far a glyph's outline is grown where its family has no bold and it
+/// is emboldened: Skia's fake bold, a 24th of the size at 9 pixels to a 32nd
+/// at 36, half each side.
+fn embolden(font: &FontInstance<'_>) -> Vec2 {
+    if !font.embolden {
+        return Vec2::ZERO;
+    }
+    let size = f64::from(font.size);
+    let ratio = {
+        let t = ((size - 9.0) / 27.0).clamp(0.0, 1.0);
+        (1.0 / 24.0) * (1.0 - t) + (1.0 / 32.0) * t
+    };
+    let extra = size * ratio / 2.0;
+    Vec2::new(extra, extra)
+}
+
+/// Paints an inline formatting context laid out by winkin.
+///
+/// `transform` takes the content box's device pixels, moved down by the layout's block offset,
+/// onto the scene, and `content_size` is the content box's size in device pixels.
+/// `paint_atomic` paints each atomic inline in its place in the line's paint order.
+#[allow(clippy::too_many_arguments)]
+pub(crate) fn paint_inline_layout<S: PaintScene>(
+    scene: &mut S,
+    text_layout: &TextLayout,
+    doc: &BaseDocument,
+    transform: Affine,
+    content_size: kurbo::Size,
+    scale: f64,
+    root: NodeId,
+    selection: Option<(usize, usize)>,
+    context: &RefCell<DrawTextContext>,
+    paint_atomic: &mut impl FnMut(&mut S, NodeId),
+) {
+    let Some(layout) = text_layout.layout() else {
+        return;
+    };
+    paint(
+        scene,
+        text_layout,
+        layout,
+        doc,
+        transform,
+        content_size.width,
+        content_size.height,
+        scale,
+        root,
+        context,
+        selection,
+        paint_atomic,
+    );
+}
+
+/// Paints the text of an `<input>` or `<textarea>`, and its selection and caret where it is
+/// focussed.
+///
+/// `transform` takes the text's device pixels onto the scene.
+#[allow(clippy::too_many_arguments)]
+pub(crate) fn paint_text_input(
+    scene: &mut impl PaintScene,
+    editor: &TextEditor,
+    focussed: bool,
+    caret_color: Color,
+    doc: &BaseDocument,
+    transform: Affine,
+    scale: f64,
+    node_id: NodeId,
+    context: &mut DrawTextContext,
+) {
+    let text_layout = editor.text_layout();
+    let Some(layout) = text_layout.layout() else {
+        return;
+    };
+    let size = editor.metrics().map(|metrics| metrics.size).unwrap_or_default();
+    let selection = editor.layout_selection_range();
+    let selection = (focussed && !selection.is_empty()).then_some((selection.start, selection.end));
+    paint(
+        scene,
+        text_layout,
+        layout,
+        doc,
+        transform,
+        size.width,
+        size.height,
+        scale,
+        node_id,
+        context,
+        selection,
+        &mut |_, _| {},
+    );
+    if focussed
+        && editor.is_selection_collapsed()
+        && let Some(caret) = editor.caret_rect()
+    {
+        scene.fill(Fill::NonZero, transform, caret_color, None, &caret);
+    }
+}
+
+/// Paints a list item's outside marker, right-aligned before its border box, on the baseline of
+/// the item's first line of text.
+///
+/// `pos` is the item's content box origin in CSS pixels, and `transform` takes the element's CSS
+/// pixels, scaled to device pixels, onto the scene.
+#[allow(clippy::too_many_arguments)]
+pub(crate) fn paint_marker(
+    scene: &mut impl PaintScene,
+    marker: &Marker,
+    marker_layout: &MarkerLayout,
+    text_layout: Option<&TextLayout>,
+    item_layout: &taffy::Layout,
+    doc: &BaseDocument,
+    pos: Point,
+    transform: Affine,
+    scale: f64,
+    node_id: NodeId,
+    context: &mut DrawTextContext,
+) {
+    let Some(layout) = marker_layout.layout() else {
+        return;
+    };
+    let Some(line) = layout.lines().next() else {
+        return;
+    };
+    let metrics = line.metrics();
+    let marker_scale = marker_layout.scale();
+    // Right align and pad the bullet when rendering outside
+    let x_padding = match marker {
+        Marker::Char(_) => 8.0,
+        Marker::String(_) => 0.0,
+    };
+    // Outside markers are placed outside the list item's border box
+    // (`pos` is the origin of its content box)
+    let x_offset = -((metrics.left + metrics.width) / marker_scale
+        + x_padding
+        + item_layout.padding.left
+        + item_layout.border.left);
+    // Align the marker with the baseline of the first line of text in the list item
+    let y_offset = text_layout
+        .and_then(|text_layout| {
+            let first = text_layout.layout()?.lines().next()?.metrics();
+            Some((first.baseline - metrics.baseline) / marker_scale + text_layout.block_offset())
+        })
+        .unwrap_or(0.0);
+    let pos = Point {
+        x: pos.x + f64::from(x_offset),
+        y: pos.y + f64::from(y_offset),
+    };
+    let transform = transform * Affine::translate((pos.x * scale, pos.y * scale));
+    paint(
+        scene,
+        marker_layout,
+        layout,
+        doc,
+        transform,
+        0.0,
+        0.0,
+        scale,
+        node_id,
+        context,
+        None,
+        &mut |_, _| {},
+    );
+}
+
+/// One bar of a decoration on a line of winkin-laid text, and the font
+/// geometry it is drawn with, in device pixels along and across its line.
+#[derive(Copy, Clone)]
+pub(crate) struct WinkinDecoration {
+    /// Where it starts and ends along the line.
+    pub(crate) left: f64,
+    pub(crate) right: f64,
+    /// Its box's baseline, and its primary font's ascent and descent about it.
+    pub(crate) baseline: f32,
+    pub(crate) ascent: f32,
+    pub(crate) descent: f32,
+    /// Where an `auto` underline's top is under the baseline, and how thick
+    /// an `auto` line is: Chrome's, as winkin works them out.
+    pub(crate) underline_gap: f32,
+    pub(crate) thickness: f32,
+    /// The font's own underline: where its top is under the baseline, and
+    /// how thick it is, for `from-font`. Each is the `auto` one where the
+    /// font gives none.
+    pub(crate) font_underline_gap: f32,
+    pub(crate) font_thickness: f32,
+    /// Its box's computed font size, scaled where `text-fit` scales its line.
+    pub(crate) font_size: f32,
+    /// Whether the metrics are measured about a central baseline, as a
+    /// vertical line's are.
+    pub(crate) centered: bool,
+}
+
+/// Painting the decorations of lines laid out by winkin, with the same
+/// resolution and drawing as the lines laid out by Parley.
+impl DrawTextContext {
+    /// Paints one bar of the decoration `styles` sets, as a decorating box:
+    /// its underline and overline where `after_text` is false, and its line
+    /// through where it is true. `color`, where given, is the color it is
+    /// drawn in instead of its own: a shadow's.
+    #[allow(clippy::too_many_arguments)]
+    pub(crate) fn draw_winkin_decoration(
+        &mut self,
+        scene: &mut impl PaintScene,
+        transform: Affine,
+        scale: f64,
+        styles: &style::properties::ComputedValues,
+        bar: WinkinDecoration,
+        after_text: bool,
+        color: Option<Color>,
+    ) {
+        let Some(mut deco) = super::resolve_decoration(styles) else {
+            return;
+        };
+        if let Some(color) = color {
+            deco.color = color;
+        }
+        self.draw_winkin_bar(scene, transform, scale, deco, bar, after_text);
+    }
+
+    /// Paints the underline under the text an input method is composing, in `color`: a solid
+    /// `auto` underline.
+    pub(crate) fn draw_winkin_composition_underline(
+        &mut self,
+        scene: &mut impl PaintScene,
+        transform: Affine,
+        scale: f64,
+        bar: WinkinDecoration,
+        color: Color,
+    ) {
+        let deco = super::ResolvedDecoration {
+            line: TextDecorationLine::UNDERLINE,
+            style: TextDecorationStyle::Solid,
+            color,
+            thickness: GenericTextDecorationLength::Auto,
+            underline_offset: None,
+            underline_under: false,
+            underline_from_font: false,
+            inset: GenericTextDecorationInset::Auto,
+        };
+        self.draw_winkin_bar(scene, transform, scale, deco, bar, false);
+    }
+
+    /// Paints one bar of `deco`: its underline and overline where `after_text` is false, and its
+    /// line through where it is true.
+    fn draw_winkin_bar(
+        &mut self,
+        scene: &mut impl PaintScene,
+        transform: Affine,
+        scale: f64,
+        deco: super::ResolvedDecoration,
+        bar: WinkinDecoration,
+        after_text: bool,
+    ) {
+        // An `auto` underline's gap is half its thickness, rounded up and at
+        // least a pixel, as Chrome's `ComputeUnderlineOffsetAuto` takes it:
+        // the thickness drawn, not the `auto` one, where the two differ.
+        let underline_offset = if deco.underline_from_font {
+            -bar.font_underline_gap
+        } else if matches!(deco.thickness, GenericTextDecorationLength::Auto) {
+            -bar.underline_gap
+        } else {
+            let size = super::decoration_size(
+                &deco.thickness,
+                bar.font_thickness,
+                f64::from(bar.font_size) / scale,
+                scale,
+            );
+            -(size / 2.0).ceil().max(1.0)
+        };
+        self.deco_boxes.clear();
+        self.deco_boxes.push(LineDecoration {
+            node_id: NodeId::from_u64(0),
+            deco,
+            min_x: bar.left,
+            max_x: bar.right,
+            own: Some(DecorationRunGeometry {
+                baseline: bar.baseline,
+                ascent: bar.ascent,
+                descent: bar.descent,
+                // Placed from the baseline, up: an underline's top is its gap
+                // under it. `from-font` takes the font's own place.
+                underline_offset,
+                // Read only for `from-font` thickness: `auto` and lengths are
+                // worked out from the font size.
+                underline_size: bar.font_thickness,
+                strikethrough_size: bar.font_thickness,
+                // winkin's ascent is already the one the platform's browser
+                // draws an overline against: its line metrics are.
+                font: None,
+                font_size: bar.font_size,
+                css_font_size: f64::from(bar.font_size) / scale,
+                centered: bar.centered,
+            }),
+            first: None,
+        });
+        let drawn = if after_text {
+            TextDecorationLine::LINE_THROUGH
+        } else {
+            TextDecorationLine::UNDERLINE | TextDecorationLine::OVERLINE
+        };
+        super::flush_line_decorations(
+            scene,
+            transform,
+            scale,
+            &self.deco_boxes,
+            &mut self.win_ascent_ratios,
+            NodeId::from_u64(0),
+            bar.baseline,
+            drawn,
+        );
+        self.deco_boxes.clear();
+    }
+}
diff --git a/packages/blitz-shell/Cargo.toml b/packages/blitz-shell/Cargo.toml
index 07cdca74cc..8fd25e6e53 100644
--- a/packages/blitz-shell/Cargo.toml
+++ b/packages/blitz-shell/Cargo.toml
@@ -11,7 +11,10 @@ edition.workspace = true
 rust-version.workspace = true
 
 [features]
-default = ["accessibility", "clipboard", "file-dialog"]
+default = ["accessibility", "clipboard", "file-dialog", "parley"]
+# The text backend: Parley (the default) or winkin. With both, Parley is used.
+parley = ["blitz-dom/parley", "blitz-paint/parley"]
+winkin = ["blitz-dom/winkin", "blitz-paint/winkin"]
 accessibility = [
     "dep:accesskit",
     "dep:accesskit_xplat",
diff --git a/packages/blitz-shell/src/application.rs b/packages/blitz-shell/src/application.rs
index 293dad2e3b..110da327fb 100644
--- a/packages/blitz-shell/src/application.rs
+++ b/packages/blitz-shell/src/application.rs
@@ -3,9 +3,10 @@ use crate::event::{BlitzShellEvent, BlitzShellProxy};
 use anyrender::WindowRenderer;
 use std::collections::HashMap;
 use std::sync::mpsc::Receiver;
+use web_time::Instant;
 use winit::application::ApplicationHandler;
 use winit::event::WindowEvent;
-use winit::event_loop::ActiveEventLoop;
+use winit::event_loop::{ActiveEventLoop, ControlFlow};
 use winit::window::WindowId;
 
 #[cfg(target_os = "macos")]
@@ -18,6 +19,8 @@ pub struct BlitzApplication<Rend: WindowRenderer> {
     pub pending_windows: Vec<WindowConfig<Rend>>,
     pub proxy: BlitzShellProxy,
     pub event_queue: Receiver<BlitzShellEvent>,
+    /// The deadline the event loop was last set to wake at, for a document's text input.
+    waiting_until: Option<Instant>,
 }
 
 impl<Rend: WindowRenderer> BlitzApplication<Rend> {
@@ -27,6 +30,7 @@ impl<Rend: WindowRenderer> BlitzApplication<Rend> {
             pending_windows: Vec::new(),
             proxy,
             event_queue,
+            waiting_until: None,
         }
     }
 
@@ -176,13 +180,39 @@ impl<Rend: WindowRenderer> ApplicationHandler for BlitzApplication<Rend> {
         Some(self)
     }
 
-    #[cfg(target_os = "ios")]
-    fn about_to_wait(&mut self, _event_loop: &dyn ActiveEventLoop) {
+    fn about_to_wait(&mut self, event_loop: &dyn ActiveEventLoop) {
+        #[cfg(target_os = "ios")]
         for view in self.windows.values_mut() {
             if view.ios_request_redraw.get() {
                 view.window.request_redraw();
             }
         }
+
+        // Wake for the next change a document makes on its own to a text input, such as a
+        // password field masking the character it shows in the clear: redraw a document whose
+        // time has come, and sleep until the earliest other.
+        let now = Instant::now();
+        let mut next: Option<Instant> = None;
+        for view in self.windows.values() {
+            let Some(deadline) = view.doc.inner().text_input_deadline() else {
+                continue;
+            };
+            if deadline <= now {
+                view.request_redraw();
+            } else {
+                next = Some(next.map_or(deadline, |next| next.min(deadline)));
+            }
+        }
+        match next {
+            Some(deadline) => {
+                event_loop.set_control_flow(ControlFlow::WaitUntil(deadline));
+                self.waiting_until = Some(deadline);
+            }
+            None if self.waiting_until.take().is_some() => {
+                event_loop.set_control_flow(ControlFlow::Wait);
+            }
+            None => {}
+        }
     }
 }
 
diff --git a/packages/blitz-test-harness/Cargo.toml b/packages/blitz-test-harness/Cargo.toml
index f93b6696d5..d274e68da1 100644
--- a/packages/blitz-test-harness/Cargo.toml
+++ b/packages/blitz-test-harness/Cargo.toml
@@ -10,6 +10,12 @@ categories.workspace = true
 edition.workspace = true
 rust-version.workspace = true
 
+[features]
+default = ["parley"]
+# The text backend: Parley (the default) or winkin. With both, Parley is used.
+parley = ["blitz-dom/parley", "blitz-html/parley", "dioxus-native-dom/parley"]
+winkin = ["blitz-dom/winkin", "blitz-html/winkin", "dioxus-native-dom/winkin"]
+
 [dependencies]
 # Blitz dependencies
 blitz-dom = { workspace = true, features = ["accessibility", "system-fonts"] }
diff --git a/packages/blitz-vibey-script/Cargo.toml b/packages/blitz-vibey-script/Cargo.toml
index 60fbf97f28..a58b9ea9c4 100644
--- a/packages/blitz-vibey-script/Cargo.toml
+++ b/packages/blitz-vibey-script/Cargo.toml
@@ -12,7 +12,10 @@ rust-version.workspace = true
 publish = false
 
 [features]
-default = []
+default = ["parley"]
+# The text backend: Parley (the default) or winkin. With both, Parley is used.
+parley = ["blitz-dom/parley", "blitz-html/parley"]
+winkin = ["blitz-dom/winkin", "blitz-html/winkin"]
 tracing = ["dep:tracing", "blitz-dom/tracing"]
 
 [dependencies]
diff --git a/packages/blitz-vibey-script/src/dom/element.rs b/packages/blitz-vibey-script/src/dom/element.rs
index c523c4e622..73f3e421b4 100644
--- a/packages/blitz-vibey-script/src/dom/element.rs
+++ b/packages/blitz-vibey-script/src/dom/element.rs
@@ -2,6 +2,7 @@
 //! `style`, `innerHTML` and friends.
 
 use crate::dom::define_value;
+use blitz_dom::text::EditableText as _;
 use blitz_dom::{LocalName, NodeId, QualName, ScrollBehavior, ScrollLogicalPosition};
 use boa_engine::object::{JsObject, ObjectInitializer};
 use boa_engine::property::Attribute as PropAttribute;
@@ -794,7 +795,7 @@ fn utf16_to_byte(text: &str, utf16_offset: usize) -> usize {
 fn selection_utf16_range(doc: &blitz_dom::BaseDocument, node_id: NodeId) -> Option<(usize, usize)> {
     let input = doc.get_node(node_id)?.element_data()?.text_input_data()?;
     let text = input.editor.raw_text();
-    let range = input.editor.raw_selection().text_range();
+    let range = input.editor.selection();
     Some((
         byte_to_utf16(text, range.start),
         byte_to_utf16(text, range.end),
@@ -809,7 +810,7 @@ fn set_selection_utf16_range(
     end: usize,
 ) {
     doc.with_text_input(node_id, |mut driver| {
-        let text = driver.editor.raw_text().to_string();
+        let text = driver.raw_text().to_string();
         let start_byte = utf16_to_byte(&text, start);
         let end_byte = utf16_to_byte(&text, start.max(end));
         driver.select_byte_range(start_byte, end_byte);
diff --git a/packages/blitz-vibey-script/src/dom/selection.rs b/packages/blitz-vibey-script/src/dom/selection.rs
index 199e84a011..fbf13c6840 100644
--- a/packages/blitz-vibey-script/src/dom/selection.rs
+++ b/packages/blitz-vibey-script/src/dom/selection.rs
@@ -2,6 +2,7 @@
 
 use std::cell::Cell;
 
+use blitz_dom::text::InlineText as _;
 use blitz_dom::{BaseDocument, Node, NodeId, node::NodeData};
 use boa_engine::{
     Context, Finalize, JsData, JsNativeError, JsResult, JsValue, Trace, object::JsObject,
@@ -193,18 +194,37 @@ fn rendered_point(doc: &BaseDocument, point: Point) -> Option<Point> {
             .element_data()?
             .inline_layout_data
             .as_ref()?;
-        let mut mapper = OffsetMapper {
-            doc,
-            root,
-            text: &layout.text,
-            cursor: 0,
-            collapsed_space: false,
-            point,
-            result: None,
-        };
-        mapper.visit(root);
-        if let Some(offset) = mapper.result {
-            return Some((root, offset));
+        if layout.maps_source() {
+            // The layout maps a text node's own offsets; a point between nodes takes the
+            // adjacent text's, below.
+            if let NodeData::Text(data) = &node.data {
+                let offset = utf16_to_byte_offset(&data.content, point.1);
+                return layout
+                    .source_offset(node.id, offset)
+                    .map(|offset| (root, offset));
+            }
+            // A point in a node with neither text nor children, such as a comment, stands
+            // where the node does.
+            if node.children.is_empty() {
+                if let Some(parent) = node.parent.and_then(|id| doc.get_node(id)) {
+                    let index = parent.children.iter().position(|&id| id == node.id)?;
+                    return rendered_point(doc, (parent.id, index + 1));
+                }
+            }
+        } else {
+            let mut mapper = OffsetMapper {
+                doc,
+                root,
+                text: layout.text(),
+                cursor: 0,
+                collapsed_space: false,
+                point,
+                result: None,
+            };
+            mapper.visit(root);
+            if let Some(offset) = mapper.result {
+                return Some((root, offset));
+            }
         }
     }
 
@@ -221,6 +241,18 @@ fn rendered_point(doc: &BaseDocument, point: Point) -> Option<Point> {
         })
 }
 
+/// The byte offset in `text` of UTF-16 offset `units`, clamped to its end.
+fn utf16_to_byte_offset(text: &str, units: usize) -> usize {
+    let mut count = 0;
+    for (index, c) in text.char_indices() {
+        if count >= units {
+            return index;
+        }
+        count += c.len_utf16();
+    }
+    text.len()
+}
+
 fn inline_root(doc: &BaseDocument, mut id: NodeId) -> Option<NodeId> {
     loop {
         let node = doc.get_node(id)?;
@@ -271,10 +303,9 @@ impl OffsetMapper<'_> {
         let Some(node) = self.doc.get_node(id) else {
             return;
         };
-        if node
-            .primary_styles()
-            .is_some_and(|style| style.clone_display() == style::values::computed::Display::None)
-        {
+        if node.primary_styles().is_some_and(|style| {
+            style.slow_clone_display() == style::values::computed::Display::None
+        }) {
             return;
         }
         if id != self.root
@@ -289,13 +320,13 @@ impl OffsetMapper<'_> {
                 .parent
                 .and_then(|id| self.doc.get_node(id))
                 .and_then(Node::primary_styles);
-            let transform = style
-                .as_ref()
-                .map_or(TextTransform::NONE, |style| style.clone_text_transform());
+            let transform = style.as_ref().map_or(TextTransform::NONE, |style| {
+                style.slow_clone_text_transform()
+            });
             let whitespace = style
                 .as_ref()
                 .map_or(WhiteSpaceCollapse::Collapse, |style| {
-                    style.clone_white_space_collapse()
+                    style.slow_clone_white_space_collapse()
                 });
             let mut units = 0;
             for c in data.content.chars() {
diff --git a/packages/blitz-vibey-script/src/inner_text.rs b/packages/blitz-vibey-script/src/inner_text.rs
index 12be936ab5..5da618a3fd 100644
--- a/packages/blitz-vibey-script/src/inner_text.rs
+++ b/packages/blitz-vibey-script/src/inner_text.rs
@@ -2,7 +2,8 @@
 //!
 //! Self-contained so that it can move into `blitz-dom` later.
 
-use blitz_dom::node::{ListItemLayoutPosition, Marker, TextBrush, TextLayout};
+use blitz_dom::node::{InlineContent, ListItemLayoutPosition, Marker, TextLayout};
+use blitz_dom::text::InlineText as _;
 use blitz_dom::{Node, NodeId};
 use markup5ever::local_name;
 use style::computed_values::visibility::T as Visibility;
@@ -48,7 +49,7 @@ pub(crate) fn inner_text(element: &Node) -> String {
 }
 
 fn display(node: &Node) -> Option<Display> {
-    Some(node.primary_styles()?.clone_display())
+    Some(node.primary_styles()?.slow_clone_display())
 }
 
 /// Whether `element` has a box. Stylo drops the styles of `display: none` subtrees, so the
@@ -138,7 +139,7 @@ impl InnerTextCollector {
 
         let is_visible = node
             .primary_styles()
-            .is_some_and(|s| s.clone_visibility() == Visibility::Visible);
+            .is_some_and(|s| s.slow_clone_visibility() == Visibility::Visible);
         let line_breaks = match (display.outside(), display.inside()) {
             _ if !is_visible => 0,
             _ if node.data.is_element_with_tag_name(&local_name!("p")) => 2,
@@ -184,53 +185,50 @@ impl InnerTextCollector {
     }
 
     fn visit_inline_layout(&mut self, root: &Node, layout: &TextLayout, filter: Option<NodeId>) {
-        let text = layout.text.as_str();
+        let text = layout.text();
         let marker_len = inside_marker_len(root, text);
 
-        let mut cached_brush: Option<(NodeId, bool)> = None;
-        let mut include = |brush: &TextBrush| -> bool {
-            if let Some((id, included)) = cached_brush {
-                if id == brush.id {
+        let mut cached_node: Option<(NodeId, bool)> = None;
+        let mut include = |id: NodeId| -> bool {
+            if let Some((cached, included)) = cached_node {
+                if cached == id {
                     return included;
                 }
             }
-            let node = root.with(brush.id);
+            // Text is attributed to a text node or to the element holding it.
+            let mut node = root.with(id);
+            if node.is_text_node() {
+                if let Some(parent) = node.parent {
+                    node = root.with(parent);
+                }
+            }
             let included = !is_generated_pseudo(node)
                 && filter.is_none_or(|target| is_inclusive_descendant_of(node, target))
                 && node
                     .primary_styles()
-                    .is_none_or(|s| s.clone_visibility() == Visibility::Visible);
-            cached_brush = Some((brush.id, included));
+                    .is_none_or(|s| s.slow_clone_visibility() == Visibility::Visible);
+            cached_node = Some((id, included));
             included
         };
 
-        let mut boxes = layout.layout.inline_boxes().peekable();
-        let mut runs = Vec::new();
-        for line in layout.layout.lines() {
-            // Runs are stored in visual order: restore logical order for bidi text
-            runs.clear();
-            runs.extend(line.runs());
-            runs.sort_by_key(|run| run.text_range().start);
-
-            for run in &runs {
-                for cluster in run.clusters() {
-                    let range = cluster.text_range();
-                    while let Some(ibox) = boxes.next_if(|ibox| ibox.index <= range.start) {
-                        self.visit_inline_box(root, ibox.id, filter);
-                    }
-                    if range.start >= marker_len && include(&cluster.style().brush) {
-                        self.push_str(&text[range]);
+        for content in layout.logical_content() {
+            match content {
+                InlineContent::Box(id) => self.visit_inline_box(root, id, filter),
+                InlineContent::Text { node_id, range } => {
+                    // The inside marker's text is not the element's
+                    let start = range.start.max(marker_len);
+                    if start < range.end && include(node_id) {
+                        if let Some(text) = text.get(start..range.end) {
+                            self.push_str(text);
+                        }
                     }
                 }
             }
         }
-        for ibox in boxes {
-            self.visit_inline_box(root, ibox.id, filter);
-        }
     }
 
-    fn visit_inline_box(&mut self, root: &Node, id: u64, filter: Option<NodeId>) {
-        let node = root.with(NodeId::from_u64(id));
+    fn visit_inline_box(&mut self, root: &Node, id: NodeId, filter: Option<NodeId>) {
+        let node = root.with(id);
         if filter.is_none_or(|target| is_inclusive_descendant_of(node, target)) {
             self.visit(node, None);
         }
diff --git a/packages/blitz-vibey-script/src/runtime.rs b/packages/blitz-vibey-script/src/runtime.rs
index 4cce1c0e09..2870380efe 100644
--- a/packages/blitz-vibey-script/src/runtime.rs
+++ b/packages/blitz-vibey-script/src/runtime.rs
@@ -418,6 +418,18 @@ const BOOTSTRAP_JS: &str = r#"
                         write(list);
                         return shouldHave;
                     },
+                    replace(token, newToken) {
+                        token = String(token);
+                        newToken = String(newToken);
+                        const list = classes();
+                        if (!list.includes(token)) return false;
+                        const first = list.findIndex((name) => name === token || name === newToken);
+                        write(list.flatMap((name, index) => {
+                            if (index === first) return [newToken];
+                            return name === token || name === newToken ? [] : [name];
+                        }));
+                        return true;
+                    },
                     contains(name) {
                         return classes().includes(String(name));
                     },
diff --git a/packages/blitz-vibey-script/tests/dom.rs b/packages/blitz-vibey-script/tests/dom.rs
index 657898647d..62336350b4 100644
--- a/packages/blitz-vibey-script/tests/dom.rs
+++ b/packages/blitz-vibey-script/tests/dom.rs
@@ -320,6 +320,41 @@ fn input_value_property() {
     assert_eq!(text_of_selector(&doc, "#out"), "initial|updated");
 }
 
+/// A password field's `value` is the text typed into it, which it draws masked.
+#[test]
+fn password_value_is_the_typed_text() {
+    use blitz_traits::events::{BlitzKeyEvent, KeyState, UiEvent};
+    use keyboard_types::{Code, Key, Location};
+
+    let mut doc = doc_from_html(
+        r#"
+        <html><body>
+            <input id="field" type="password">
+            <div id="out"></div>
+        </body></html>
+        "#,
+    );
+    doc.inner_mut().resolve(0.0);
+    let field = doc.inner().query_selector("#field").unwrap().unwrap();
+    doc.inner_mut().set_focus_to(field);
+    for ch in ["a", "b", "c", "\u{e9}"] {
+        doc.handle_ui_event(UiEvent::KeyDown(BlitzKeyEvent {
+            key: Key::Character(ch.into()),
+            code: Code::KeyC,
+            modifiers: Modifiers::empty(),
+            location: Location::Standard,
+            is_auto_repeating: false,
+            is_composing: false,
+            state: KeyState::Pressed,
+            text: Some(ch.into()),
+        }));
+    }
+    doc.eval(
+        r#"document.getElementById("out").textContent = document.getElementById("field").value;"#,
+    );
+    assert_eq!(text_of_selector(&doc, "#out"), "abc\u{e9}");
+}
+
 #[test]
 fn checkbox_click_fires_input_and_change_events() {
     let mut doc = doc_from_html(
@@ -696,7 +731,7 @@ fn cssom_font_face_and_keyframes() {
     );
     assert_eq!(
         text_of_selector(&doc, "#out"),
-        "CSSFontFaceRule|5|\"Foo\"|true|\"Foo\"\
+        "CSSFontFaceRule|5|Foo|true|Foo\
          |CSSKeyframesRule|spin|2|0%|1\
          |3|50% { opacity: 0.5; }|2|100%"
     );
diff --git a/packages/blitz-vibey-script/tests/inner_text.rs b/packages/blitz-vibey-script/tests/inner_text.rs
new file mode 100644
index 0000000000..5685994e4b
--- /dev/null
+++ b/packages/blitz-vibey-script/tests/inner_text.rs
@@ -0,0 +1,211 @@
+//! Behavioural tests for `HTMLElement.innerText`, and its cost.
+
+use std::alloc::{GlobalAlloc, Layout, System};
+use std::cell::Cell;
+
+use blitz_dom::DocumentConfig;
+use blitz_vibey_script::ScriptDocument;
+
+/// The allocator, counting the allocations and the bytes each thread asks for.
+struct Counting;
+
+thread_local! {
+    static ALLOCATIONS: Cell<(usize, usize)> = const { Cell::new((0, 0)) };
+}
+
+unsafe impl GlobalAlloc for Counting {
+    unsafe fn alloc(&self, layout: Layout) -> *mut u8 {
+        let _ = ALLOCATIONS.try_with(|count| {
+            let (allocations, bytes) = count.get();
+            count.set((allocations + 1, bytes + layout.size()));
+        });
+        unsafe { System.alloc(layout) }
+    }
+
+    unsafe fn dealloc(&self, ptr: *mut u8, layout: Layout) {
+        unsafe { System.dealloc(ptr, layout) }
+    }
+
+    unsafe fn realloc(&self, ptr: *mut u8, layout: Layout, new_size: usize) -> *mut u8 {
+        let _ = ALLOCATIONS.try_with(|count| {
+            let (allocations, bytes) = count.get();
+            count.set((allocations + 1, bytes + new_size));
+        });
+        unsafe { System.realloc(ptr, layout, new_size) }
+    }
+}
+
+#[global_allocator]
+static ALLOCATOR: Counting = Counting;
+
+/// A document whose body holds `html`, laid out 600px wide.
+fn document(html: &str) -> ScriptDocument {
+    let html = format!(
+        "<html><head><style>body {{ margin: 0; width: 600px; font: 16px sans-serif; }}</style></head><body>{html}</body></html>"
+    );
+    let mut doc = ScriptDocument::from_html(&html, DocumentConfig::default());
+    doc.execute_scripts();
+    doc
+}
+
+/// What the JavaScript expression `expression` gives, as a string.
+fn eval(doc: &mut ScriptDocument, expression: &str) -> String {
+    doc.eval(&format!("__blitz_send_message(String({expression}))"));
+    let errors = doc.take_js_errors();
+    assert!(errors.is_empty(), "{errors:?}");
+    doc.take_messages()
+        .pop()
+        .expect("the expression's value was sent")
+}
+
+/// `innerText` of the element with id `id`, in a body holding `html`.
+fn inner_text(html: &str, id: &str) -> String {
+    eval(
+        &mut document(html),
+        &format!("document.getElementById({id:?}).innerText"),
+    )
+}
+
+#[test]
+fn nested_and_empty_inline_boxes() {
+    let html = "<div id=t>a<span id=s>b<em>c</em><span></span>d</span><b></b>e</div>";
+    assert_eq!(inner_text(html, "t"), "abcde");
+    assert_eq!(inner_text(html, "s"), "bcd");
+    let html = "<div id=t><span></span>a<span><span></span></span>b<span></span></div>";
+    assert_eq!(inner_text(html, "t"), "ab");
+}
+
+#[test]
+fn inline_block() {
+    let html = "<div id=t>a <span style=\"display:inline-block\">b c</span> d</div>";
+    assert_eq!(inner_text(html, "t"), "a b c d");
+    let html = "<div id=t>a<span id=s style=\"display:inline-block\"><div>x</div><div>y</div></span>b</div>";
+    assert_eq!(inner_text(html, "t"), "a\nx\ny\nb");
+    assert_eq!(inner_text(html, "s"), "x\ny");
+}
+
+#[test]
+fn line_breaks() {
+    assert_eq!(
+        inner_text("<div id=t>a<br>b<br><br>c</div>", "t"),
+        "a\nb\n\nc"
+    );
+}
+
+#[test]
+fn block_inside_inline() {
+    let html = "<div id=t>a<span id=s>b<div>c</div>d</span>e</div>";
+    assert_eq!(inner_text(html, "t"), "ab\nc\nde");
+    assert_eq!(inner_text(html, "s"), "b\nc\nd");
+}
+
+#[test]
+fn display_none_children() {
+    let html = "<div id=t>a<span style=\"display:none\">x</span>b<div style=\"display:none\">y</div>c</div>";
+    assert_eq!(inner_text(html, "t"), "abc");
+}
+
+/// Whether the text backend is winkin, which places a float or an absolutely positioned box after
+/// the content of the line it is anchored on, where Parley places it where it is in the text.
+const WINKIN: bool = cfg!(all(feature = "winkin", not(feature = "parley")));
+
+/// `parley` under Parley, `winkin` under winkin.
+fn backend<'a>(parley: &'a str, winkin: &'a str) -> &'a str {
+    if WINKIN { winkin } else { parley }
+}
+
+#[test]
+fn absolutely_positioned_children() {
+    let html = "<div id=t>a b<span style=\"position:absolute\">abs</span></div>";
+    assert_eq!(inner_text(html, "t"), "a b\nabs");
+    let html = "<div id=t>a <span style=\"position:absolute\">abs</span> b</div>";
+    assert_eq!(inner_text(html, "t"), backend("a\nabs\n b", "a b\nabs"));
+    let html = "<div id=t style=\"width:40px\">aaa bbb <span style=\"position:absolute\">abs</span>ccc ddd</div>";
+    assert_eq!(
+        inner_text(html, "t"),
+        backend("aaa bbb\nabs\n ccc ddd", "aaa bbb \nabs\nccc ddd")
+    );
+}
+
+#[test]
+fn floated_children() {
+    let html = "<div id=t><span style=\"float:left\">flt</span>a b</div>";
+    assert_eq!(inner_text(html, "t"), backend("flt\na b", "a b\nflt"));
+    let html = "<div id=t>a <span style=\"float:left\">flt</span> b</div>";
+    assert_eq!(inner_text(html, "t"), backend("a\nflt\n b", "a b\nflt"));
+    let html = "<div>a <span id=s>b <span style=\"float:right\">flt</span> c</span> d</div>";
+    assert_eq!(inner_text(html, "s"), backend("b\nflt\n c", "b c\nflt"));
+    let html =
+        "<div id=t style=\"width:40px\">aaa bbb <span style=\"float:left\">flt</span>ccc ddd</div>";
+    assert_eq!(
+        inner_text(html, "t"),
+        backend("aaa bbb\nflt\n ccc ddd", "aaa bbb \nflt\nccc ddd")
+    );
+}
+
+#[test]
+fn bidi_text() {
+    let html = "<div id=t>abc <span>\u{5d0}\u{5d1}\u{5d2} \u{5d3}\u{5d4}</span> def</div>";
+    assert_eq!(
+        inner_text(html, "t"),
+        "abc \u{5d0}\u{5d1}\u{5d2} \u{5d3}\u{5d4} def"
+    );
+    let html = "<div id=t dir=rtl>\u{5d0}\u{5d1} abc \u{5d2}\u{5d3}</div>";
+    assert_eq!(inner_text(html, "t"), "\u{5d0}\u{5d1} abc \u{5d2}\u{5d3}");
+}
+
+#[test]
+fn inline_box_split_across_lines() {
+    let html = "<div id=t style=\"width:40px; line-height:18px\">aaa <span id=s>bbb ccc ddd</span> eee</div>";
+    assert_eq!(inner_text(html, "t"), "aaa bbb ccc ddd eee");
+    assert_eq!(inner_text(html, "s"), "bbb ccc ddd");
+    // The span has a box on each of three lines, and its offset is its first box's.
+    let geometry = eval(
+        &mut document(html),
+        "(() => { const s = document.getElementById('s'); const r = s.getClientRects(); \
+         return [r.length, r[0].top, r[0].left, s.offsetTop, s.offsetLeft].join(); })()",
+    );
+    assert_eq!(geometry, "3,18,0,18,0");
+}
+
+#[test]
+fn white_space_collapsing() {
+    let html = "<div id=t>   a   b  <span>  c </span>  </div>";
+    assert_eq!(inner_text(html, "t"), "a b c");
+    let html = "<div id=t>  <p>  a  </p>  b  <div> c </div>  </div>";
+    assert_eq!(inner_text(html, "t"), "a\n\nb\nc");
+}
+
+/// The allocations and bytes that reading `innerText` of `#t` asks for, once layout is done, and
+/// the length of the text.
+fn inner_text_cost(spans: usize) -> (usize, usize, usize) {
+    let html = format!("<div id=t>{}</div>", "<span>word</span> ".repeat(spans));
+    let mut doc = document(&html);
+    // The first read lays the document out.
+    eval(&mut doc, "document.getElementById('t').innerText");
+    doc.eval("globalThis.t = document.getElementById('t'); globalThis.text = ''");
+    let before = ALLOCATIONS.with(Cell::get);
+    doc.eval("text = t.innerText");
+    let after = ALLOCATIONS.with(Cell::get);
+    let len = eval(&mut doc, "text.length").parse().unwrap();
+    (after.0 - before.0, after.1 - before.1, len)
+}
+
+/// `innerText` of a long paragraph of many spans allocates nothing per cluster or span: four
+/// times the spans ask for about the same number of allocations, and for no more bytes than
+/// a few copies of the longer text.
+#[test]
+fn inner_text_does_not_allocate_per_cluster() {
+    let (allocations, bytes, len) = inner_text_cost(500);
+    let (allocations_4, bytes_4, len_4) = inner_text_cost(2000);
+    assert!(len_4 > len);
+    assert!(
+        allocations_4 <= allocations + 16,
+        "{allocations} allocations for 500 spans, {allocations_4} for 2000"
+    );
+    let extra = bytes_4.saturating_sub(bytes);
+    assert!(
+        extra <= 16 * (len_4 - len),
+        "{bytes} bytes for 500 spans, {bytes_4} for 2000"
+    );
+}
diff --git a/packages/blitz-vibey-script/tests/preact.rs b/packages/blitz-vibey-script/tests/preact.rs
index 13c8ec9c0d..c393466c50 100644
--- a/packages/blitz-vibey-script/tests/preact.rs
+++ b/packages/blitz-vibey-script/tests/preact.rs
@@ -3,6 +3,7 @@
 
 use std::path::PathBuf;
 
+use blitz_dom::text::EditableText as _;
 use blitz_dom::{Document, DocumentConfig, NodeId};
 use blitz_traits::events::{BlitzKeyEvent, DomEvent, KeyState, UiEvent};
 use blitz_vibey_script::ScriptDocument;
diff --git a/packages/blitz/Cargo.toml b/packages/blitz/Cargo.toml
index 98cb9b05d5..85a172ee65 100644
--- a/packages/blitz/Cargo.toml
+++ b/packages/blitz/Cargo.toml
@@ -11,7 +11,10 @@ edition.workspace = true
 rust-version.workspace = true
 
 [features]
-default = ["net", "accessibility", "text-transform-icu", "tracing"]
+default = ["net", "accessibility", "text-transform-icu", "tracing", "parley"]
+# The text backend: Parley (the default) or winkin. With both, Parley is used.
+parley = ["blitz-dom/parley", "blitz-paint/parley", "blitz-shell/parley", "blitz-html/parley"]
+winkin = ["blitz-dom/winkin", "blitz-paint/winkin", "blitz-shell/winkin", "blitz-html/winkin"]
 net = ["dep:tokio", "dep:url", "dep:blitz-net"]
 accessibility = ["blitz-shell/accessibility"]
 text-transform-icu = ["blitz-dom/text-transform-icu"]
diff --git a/packages/dioxus-native-dom/Cargo.toml b/packages/dioxus-native-dom/Cargo.toml
index 8bb92d2a43..048f1f17a3 100644
--- a/packages/dioxus-native-dom/Cargo.toml
+++ b/packages/dioxus-native-dom/Cargo.toml
@@ -10,7 +10,10 @@ homepage = "https://dioxuslabs.com/learn/0.7/getting_started"
 keywords = ["dom", "ui", "gui", "react"]
 
 [features]
-default = ["accessibility", "svg", "system-fonts", "text-transform-icu"]
+default = ["accessibility", "svg", "system-fonts", "text-transform-icu", "parley"]
+# The text backend: Parley (the default) or winkin. With both, Parley is used.
+parley = ["blitz-dom/parley"]
+winkin = ["blitz-dom/winkin"]
 
 # DOM features
 svg = ["blitz-dom/svg"]
diff --git a/packages/dioxus-native/Cargo.toml b/packages/dioxus-native/Cargo.toml
index f2656aa177..07c271aa68 100644
--- a/packages/dioxus-native/Cargo.toml
+++ b/packages/dioxus-native/Cargo.toml
@@ -10,10 +10,13 @@ homepage = "https://dioxuslabs.com/learn/0.7/getting_started"
 keywords = ["dom", "ui", "gui", "react"]
 
 [features]
-default = ["accessibility", "hot-reload", "net", "html", "svg", "system-fonts", "clipboard", "file-dialog", "vello-hybrid", "woff", "text-transform-icu", "apple-font-embolden"]
+default = ["accessibility", "hot-reload", "net", "html", "svg", "system-fonts", "clipboard", "file-dialog", "vello-hybrid", "woff", "text-transform-icu", "apple-font-embolden", "parley"]
 prelude = ["dep:dioxus-core-macro", "dep:dioxus-hooks", "dep:dioxus-signals", "dep:dioxus-stores", "dep:manganis"]
 
 # DOM features
+# The text backend: Parley (the default) or winkin. With both, Parley is used.
+parley = ["blitz-dom/parley", "blitz-paint?/parley", "blitz-shell/parley", "blitz-html?/parley", "dioxus-native-dom/parley"]
+winkin = ["blitz-dom/winkin", "blitz-paint?/winkin", "blitz-shell/winkin", "blitz-html?/winkin", "dioxus-native-dom/winkin"]
 svg = ["blitz-dom/svg", "blitz-paint/svg"]
 floats = ["blitz-dom/floats"]
 autofocus = ["blitz-dom/autofocus"]
diff --git a/packages/stylo_taffy/src/convert.rs b/packages/stylo_taffy/src/convert.rs
index 7b0107fe01..b807c5c693 100644
--- a/packages/stylo_taffy/src/convert.rs
+++ b/packages/stylo_taffy/src/convert.rs
@@ -507,8 +507,8 @@ pub fn content_alignment(
 pub fn table_cell_vertical_align(style: &stylo::ComputedValues) -> Option<taffy::AlignContent> {
     let box_styles = style.get_box();
     let mut align = match (
-        box_styles.clone_alignment_baseline(),
-        box_styles.clone_baseline_shift(),
+        box_styles.slow_clone_alignment_baseline(),
+        box_styles.slow_clone_baseline_shift(),
     ) {
         (_, stylo::BaselineShift::Keyword(stylo::BaselineShiftKeyword::Top)) => {
             taffy::AlignContent::START
@@ -808,9 +808,8 @@ pub fn grid_template_tracks(
             })
             .collect(),
 
-        // TODO: Implement subgrid and masonry
+        // TODO: Implement subgrid
         stylo::GenericGridTemplateComponent::Subgrid(_) => Vec::new(),
-        stylo::GenericGridTemplateComponent::Masonry => Vec::new(),
     }
 }
 
@@ -825,9 +824,8 @@ pub fn grid_template_line_names(
             Some(crate::wrapper::StyloLineNameIter::new(&list.line_names))
         }
 
-        // TODO: Implement subgrid and masonry
+        // TODO: Implement subgrid
         stylo::GenericGridTemplateComponent::Subgrid(_) => None,
-        stylo::GenericGridTemplateComponent::Masonry => None,
     }
 }
 
@@ -957,7 +955,7 @@ pub fn to_taffy_style_in(
 }
 
 pub fn to_taffy_style(style: &stylo::ComputedValues) -> taffy::Style<Atom> {
-    let display = style.clone_display();
+    let display = style.slow_clone_display();
     let pos = style.get_position();
     let margin = style.get_margin();
     let padding = style.get_padding();
@@ -966,23 +964,23 @@ pub fn to_taffy_style(style: &stylo::ComputedValues) -> taffy::Style<Atom> {
     taffy::Style {
         dummy: core::marker::PhantomData,
         display: self::display(display),
-        box_sizing: self::box_sizing(style.clone_box_sizing()),
+        box_sizing: self::box_sizing(style.slow_clone_box_sizing()),
         item_is_table: display.inside() == stylo::DisplayInside::Table,
         item_is_replaced: false,
         item_is_compressible_replaced: false,
-        position: self::position(style.clone_position()),
+        position: self::position(style.slow_clone_position()),
         overflow: taffy::Point {
-            x: self::overflow(style.clone_overflow_x()),
-            y: self::overflow(style.clone_overflow_y()),
+            x: self::overflow(style.slow_clone_overflow_x()),
+            y: self::overflow(style.slow_clone_overflow_y()),
         },
-        direction: self::direction(style.clone_direction()),
+        direction: self::direction(style.slow_clone_direction()),
         scrollbar_width: 0.0,
-        contain: self::contain(style.clone_contain(), style.clone_display()),
+        contain: self::contain(style.slow_clone_contain(), style.slow_clone_display()),
 
         #[cfg(feature = "floats")]
-        float: self::float(style.clone_float()),
+        float: self::float(style.slow_clone_float()),
         #[cfg(feature = "floats")]
-        clear: self::clear(style.clone_clear()),
+        clear: self::clear(style.slow_clone_clear()),
 
         size: taffy::Size {
             width: self::dimension(&pos.width),
@@ -1032,7 +1030,7 @@ pub fn to_taffy_style(style: &stylo::ComputedValues) -> taffy::Style<Atom> {
         justify_content: self::justify_content(
             pos.justify_content,
             pos.flex_direction,
-            style.clone_direction(),
+            style.slow_clone_direction(),
             display,
         ),
         #[cfg(any(feature = "flexbox", feature = "grid"))]
@@ -1042,15 +1040,15 @@ pub fn to_taffy_style(style: &stylo::ComputedValues) -> taffy::Style<Atom> {
         #[cfg(feature = "grid")]
         justify_items: self::default_item_alignment(
             (pos.justify_items.computed.0).0,
-            style.clone_direction() == stylo::Direction::Rtl,
+            style.slow_clone_direction() == stylo::Direction::Rtl,
         ),
         #[cfg(feature = "grid")]
         justify_self: self::item_alignment(
             pos.justify_self.0,
-            style.clone_direction() == stylo::Direction::Rtl,
+            style.slow_clone_direction() == stylo::Direction::Rtl,
         ),
         #[cfg(feature = "block")]
-        text_align: self::text_align(style.clone_text_align()),
+        text_align: self::text_align(style.slow_clone_text_align()),
 
         // Flexbox
         #[cfg(feature = "flexbox")]
diff --git a/packages/stylo_taffy/src/wrapper.rs b/packages/stylo_taffy/src/wrapper.rs
index aaa531b8dc..8e1dc68948 100644
--- a/packages/stylo_taffy/src/wrapper.rs
+++ b/packages/stylo_taffy/src/wrapper.rs
@@ -63,7 +63,7 @@ impl<T: Deref<Target = ComputedValues>> TaffyStyloStyle<T> {
     /// The display used for contents layout, including button-input fixups.
     #[inline]
     pub fn effective_display(&self) -> stylo::Display {
-        let display = self.style.clone_display();
+        let display = self.style.slow_clone_display();
         if self.flags.contains(StyleFlags::IS_BUTTON_INPUT) {
             convert::button_input_display(display)
         } else {
@@ -344,7 +344,7 @@ impl<T: Deref<Target = ComputedValues>> taffy::CoreStyle for TaffyStyloStyle<T>
 impl<T: Deref<Target = ComputedValues>> taffy::BlockContainerStyle for TaffyStyloStyle<T> {
     #[inline]
     fn text_align(&self) -> taffy::TextAlign {
-        let align = convert::text_align(self.style.clone_text_align());
+        let align = convert::text_align(self.style.slow_clone_text_align());
         self.layout_wm().logical_text_align(align)
     }
 
@@ -507,14 +507,14 @@ impl<T: Deref<Target = ComputedValues>> taffy::BlockItemStyle for TaffyStyloStyl
     #[cfg(feature = "floats")]
     #[inline]
     fn float(&self) -> taffy::Float {
-        let float = convert::float(self.style.clone_float());
+        let float = convert::float(self.style.slow_clone_float());
         self.layout_wm().logical_float(float)
     }
 
     #[cfg(feature = "floats")]
     #[inline]
     fn clear(&self) -> taffy::Clear {
-        let clear = convert::clear(self.style.clone_clear());
+        let clear = convert::clear(self.style.slow_clone_clear());
         self.layout_wm().logical_clear(clear)
     }
 }
@@ -550,7 +550,7 @@ impl<T: Deref<Target = ComputedValues>> taffy::FlexboxContainerStyle for TaffySt
     fn align_content(&self) -> taffy::AlignContent {
         convert::content_alignment(
             self.style.get_position().align_content,
-            self.style.clone_display(),
+            self.style.slow_clone_display(),
         )
     }
 
@@ -570,7 +570,7 @@ impl<T: Deref<Target = ComputedValues>> taffy::FlexboxContainerStyle for TaffySt
             convert::justify_content_in(
                 position_styles.justify_content,
                 self.content_left_is_end(main_is_inline),
-                self.style.clone_display(),
+                self.style.slow_clone_display(),
             )
         }
     }
@@ -788,9 +788,8 @@ impl<T: Deref<Target = ComputedValues>> taffy::GridContainerStyle for TaffyStylo
                 }))
             }
 
-            // TODO: Implement subgrid and masonry
+            // TODO: Implement subgrid
             stylo::GenericGridTemplateComponent::Subgrid(_) => None,
-            stylo::GenericGridTemplateComponent::Masonry => None,
         }
     }
 
@@ -809,9 +808,8 @@ impl<T: Deref<Target = ComputedValues>> taffy::GridContainerStyle for TaffyStylo
                 }))
             }
 
-            // TODO: Implement subgrid and masonry
+            // TODO: Implement subgrid
             stylo::GenericGridTemplateComponent::Subgrid(_) => None,
-            stylo::GenericGridTemplateComponent::Masonry => None,
         }
     }
 
@@ -854,9 +852,8 @@ impl<T: Deref<Target = ComputedValues>> taffy::GridContainerStyle for TaffyStylo
             stylo::GenericGridTemplateComponent::TrackList(list) => {
                 Some(StyloLineNameIter::new(&list.line_names))
             }
-            // TODO: Implement subgrid and masonry
+            // TODO: Implement subgrid
             stylo::GenericGridTemplateComponent::Subgrid(_) => None,
-            stylo::GenericGridTemplateComponent::Masonry => None,
         }
     }
 
@@ -866,9 +863,8 @@ impl<T: Deref<Target = ComputedValues>> taffy::GridContainerStyle for TaffyStylo
             stylo::GenericGridTemplateComponent::TrackList(list) => {
                 Some(StyloLineNameIter::new(&list.line_names))
             }
-            // TODO: Implement subgrid and masonry
+            // TODO: Implement subgrid
             stylo::GenericGridTemplateComponent::Subgrid(_) => None,
-            stylo::GenericGridTemplateComponent::Masonry => None,
         }
     }
 
@@ -890,7 +886,7 @@ impl<T: Deref<Target = ComputedValues>> taffy::GridContainerStyle for TaffyStylo
     fn align_content(&self) -> taffy::AlignContent {
         convert::content_alignment(
             self.style.get_position().align_content,
-            self.style.clone_display(),
+            self.style.slow_clone_display(),
         )
     }
 
@@ -905,7 +901,7 @@ impl<T: Deref<Target = ComputedValues>> taffy::GridContainerStyle for TaffyStylo
             convert::justify_content_in(
                 position_styles.justify_content,
                 self.content_left_is_end(main_is_inline),
-                self.style.clone_display(),
+                self.style.slow_clone_display(),
             )
         }
     }
diff --git a/tests/blitz-tests/Cargo.toml b/tests/blitz-tests/Cargo.toml
index 7b39bb89d1..513933017e 100644
--- a/tests/blitz-tests/Cargo.toml
+++ b/tests/blitz-tests/Cargo.toml
@@ -11,6 +11,12 @@ edition.workspace = true
 autotests = false
 rust-version.workspace = true
 
+[features]
+default = ["parley"]
+# The text backend: Parley (the default) or winkin. With both, Parley is used.
+parley = ["blitz-dom/parley", "blitz-paint/parley", "blitz-html/parley", "blitz-test-harness/parley", "dioxus-native-dom/parley"]
+winkin = ["blitz-dom/winkin", "blitz-paint/winkin", "blitz-html/winkin", "blitz-test-harness/winkin", "dioxus-native-dom/winkin"]
+
 [dev-dependencies]
 # Blitz dependencies
 blitz-test-harness = { workspace = true }
@@ -33,6 +39,7 @@ markup5ever = { workspace = true }
 cursor-icon = { workspace = true }
 keyboard-types = { workspace = true }
 taffy = { workspace = true }
+kurbo = { workspace = true }
 test-that = { workspace = true }
 usvg = { workspace = true }
 
diff --git a/tests/blitz-tests/tests/all.rs b/tests/blitz-tests/tests/all.rs
index bc3c26030c..bcc9034aa2 100644
--- a/tests/blitz-tests/tests/all.rs
+++ b/tests/blitz-tests/tests/all.rs
@@ -43,6 +43,7 @@ mod outset_box_shadow_shape;
 mod paint_order;
 mod paint_tree_bench;
 mod paint_tree_incremental;
+mod password_input;
 mod pointer_events;
 mod pointer_leave;
 mod pre_overflow_scroll;
@@ -60,6 +61,9 @@ mod stale_node_mapping;
 mod style_property_invalidation;
 mod svg_attr_sizing;
 mod svg_background_size;
+mod text_align_restyle;
+mod text_boundary;
+mod text_input_editing;
 mod text_selection_anonymous_block;
 mod text_transform;
 mod touch_action;
diff --git a/tests/blitz-tests/tests/anonymous_block_restyle.rs b/tests/blitz-tests/tests/anonymous_block_restyle.rs
index 60a5ee2d1e..e1b1e2bec6 100644
--- a/tests/blitz-tests/tests/anonymous_block_restyle.rs
+++ b/tests/blitz-tests/tests/anonymous_block_restyle.rs
@@ -2,6 +2,7 @@
 //! Use hover rather than attribute mutation, which would reconstruct them.
 
 use blitz_dom::DocumentConfig;
+use blitz_dom::text::InlineText as _;
 use blitz_html::{HtmlDocument, HtmlProvider};
 use blitz_traits::node_id::NodeId;
 use blitz_traits::shell::{ColorScheme, Viewport};
@@ -87,7 +88,7 @@ fn anonymous_children(doc: &HtmlDocument, owner: NodeId) -> Vec<NodeId> {
 
 fn color(doc: &HtmlDocument, node: NodeId) -> [u8; 3] {
     let styles = doc.get_node(node).unwrap().primary_styles().unwrap();
-    let color = styles.clone_color().into_srgb_legacy();
+    let color = styles.slow_clone_color().into_srgb_legacy();
     let [r, g, b, _] = color.raw_components();
     [r, g, b].map(|component| (component * 255.0).round() as u8)
 }
@@ -224,20 +225,19 @@ fn anonymous_text_tracks_intermediate_transition_frames() {
     assert_eq!(color(&doc, before[0]), [255, 0, 0]);
 }
 
+/// Where the text of `node`'s lines starts, in CSS pixels from its content box's left.
 fn line_offset(doc: &HtmlDocument, node: NodeId) -> f32 {
-    doc.get_node(node)
+    let layout = doc
+        .get_node(node)
         .unwrap()
         .element_data()
         .unwrap()
         .inline_layout_data
         .as_ref()
-        .unwrap()
-        .layout
-        .lines()
-        .next()
-        .unwrap()
-        .metrics()
-        .offset
+        .unwrap();
+    let mut left = f64::INFINITY;
+    layout.for_each_selection_rect(0, layout.text_len(), |rect| left = left.min(rect.x0));
+    (left / f64::from(layout.scale())) as f32
 }
 
 #[test]
diff --git a/tests/blitz-tests/tests/button_alignment.rs b/tests/blitz-tests/tests/button_alignment.rs
index d82d94af70..39170f970f 100644
--- a/tests/blitz-tests/tests/button_alignment.rs
+++ b/tests/blitz-tests/tests/button_alignment.rs
@@ -1,5 +1,26 @@
+use blitz_dom::node::TextLayout;
+use blitz_dom::text::InlineText as _;
 use blitz_test_harness::Harness;
 
+/// The extent of the text's lines, in CSS pixels relative to the content box moved down by the
+/// block offset: `(left, width, height)`.
+fn text_extent(layout: &TextLayout) -> (f64, f64, f64) {
+    let mut extent = None;
+    layout.for_each_selection_rect(0, layout.text_len(), |rect| {
+        extent = Some(match extent {
+            Some(extent) => rect.union(extent),
+            None => rect,
+        });
+    });
+    let extent = extent.expect("the layout holds text");
+    let scale = f64::from(layout.scale());
+    (
+        extent.x0 / scale,
+        extent.width() / scale,
+        extent.height() / scale,
+    )
+}
+
 fn button(css: &str, child_css: &str) -> Harness {
     Harness::from_html(&format!(
         r#"<!DOCTYPE html><style>
@@ -38,9 +59,10 @@ fn default_button_centers_text() {
         .inline_layout_data
         .as_ref()
         .unwrap();
-    assert!(layout.layout.width() > 0.0);
-    assert_eq!(layout.layout.height(), 20.0);
-    assert_eq!(layout.block_offset, 40.0);
+    let (_, width, height) = text_extent(layout);
+    assert!(width > 0.0);
+    assert_eq!(height, 20.0);
+    assert_eq!(layout.block_offset(), 40.0);
 }
 
 #[test]
@@ -188,8 +210,8 @@ fn button_like_inputs_use_block_centering_without_ua_flex_alignment() {
             .inline_layout_data
             .as_ref()
             .unwrap();
-        assert_eq!(layout.layout.height(), 20.0);
-        assert_eq!(layout.block_offset, 40.0);
+        assert_eq!(text_extent(layout).2, 20.0);
+        assert_eq!(layout.block_offset(), 40.0);
     }
 }
 
@@ -224,10 +246,10 @@ fn author_flex_and_grid_inputs_still_block_layout_their_labels() {
                 .inline_layout_data
                 .as_ref()
                 .unwrap();
-            assert_eq!(layout.layout.height(), 20.0);
-            assert_eq!(layout.block_offset, 40.0, "{input_type}, {display}");
-            let line = layout.layout.lines().next().unwrap();
-            assert!(line.metrics().offset > 0.0, "{input_type}, {display}");
+            let (left, _, height) = text_extent(layout);
+            assert_eq!(height, 20.0);
+            assert_eq!(layout.block_offset(), 40.0, "{input_type}, {display}");
+            assert!(left > 0.0, "{input_type}, {display}");
         }
     }
 }
@@ -255,7 +277,8 @@ fn button_input_block_alignment_overrides_and_overflow() {
                 .as_ref()
                 .unwrap();
             assert_eq!(
-                layout.block_offset, y,
+                layout.block_offset(),
+                y,
                 "{input_type}, {alignment}, {height}"
             );
         }
@@ -283,7 +306,7 @@ fn button_input_display_restyle_preserves_label_centering() {
             .inline_layout_data
             .as_ref()
             .unwrap()
-            .block_offset,
+            .block_offset(),
         40.0
     );
 }
diff --git a/tests/blitz-tests/tests/harness_smoke.rs b/tests/blitz-tests/tests/harness_smoke.rs
index 02d14967e0..244b5f4c0e 100644
--- a/tests/blitz-tests/tests/harness_smoke.rs
+++ b/tests/blitz-tests/tests/harness_smoke.rs
@@ -2,6 +2,7 @@
 //! document construction, inspection, and input synthesis for both
 //! `HtmlDocument` and `DioxusDocument` backed harnesses.
 
+use blitz_dom::text::EditableText as _;
 use blitz_test_harness::Harness;
 use dioxus::prelude::*;
 
diff --git a/tests/blitz-tests/tests/line_break.rs b/tests/blitz-tests/tests/line_break.rs
index d495199832..dfad5e3a6e 100644
--- a/tests/blitz-tests/tests/line_break.rs
+++ b/tests/blitz-tests/tests/line_break.rs
@@ -1,52 +1,59 @@
 //! The CSS `line-break` property controls the soft wrap opportunities used for
 //! inline layout.
+//!
+//! They read the Parley layout of an inline formatting context.
 
-use blitz_dom::{BaseDocument, node::TextLayout};
-use blitz_test_harness::Harness;
+blitz_dom::cfg_text_backend! {
+    parley => {
+        use blitz_dom::{BaseDocument, node::TextLayout};
+        use blitz_test_harness::Harness;
 
-fn inline<'a>(doc: &'a BaseDocument, selector: &str) -> &'a TextLayout {
-    let id = doc.query_selector(selector).unwrap().unwrap();
-    doc.get_node(id)
-        .unwrap()
-        .element_data()
-        .unwrap()
-        .inline_layout_data
-        .as_ref()
-        .unwrap()
-}
+        fn inline<'a>(doc: &'a BaseDocument, selector: &str) -> &'a TextLayout {
+            let id = doc.query_selector(selector).unwrap().unwrap();
+            doc.get_node(id)
+                .unwrap()
+                .element_data()
+                .unwrap()
+                .inline_layout_data
+                .as_ref()
+                .unwrap()
+        }
 
-fn line_count(line_break: &str, text: &str) -> usize {
-    let harness = Harness::from_html(&format!(
-        "<div id='test' style='width:1px;line-break:{line_break}'>{text}</div>",
-    ));
-    let doc = harness.base();
-    inline(&doc, "#test").layout.len()
-}
+        fn line_count(line_break: &str, text: &str) -> usize {
+            let harness = Harness::from_html(&format!(
+                "<div id='test' style='width:1px;line-break:{line_break}'>{text}</div>",
+            ));
+            let doc = harness.base();
+            inline(&doc, "#test").layout.len()
+        }
 
-#[test]
-fn strictness_controls_breaks_before_small_kana() {
-    // U+3041 HIRAGANA LETTER SMALL A may only start a line under `normal` and `loose`.
-    for (line_break, lines) in [("auto", 2), ("strict", 2), ("normal", 3), ("loose", 3)] {
-        assert_eq!(line_count(line_break, "文ぁ文"), lines, "{line_break}");
-    }
-}
+        #[test]
+        fn strictness_controls_breaks_before_small_kana() {
+            // U+3041 HIRAGANA LETTER SMALL A may only start a line under `normal` and `loose`.
+            for (line_break, lines) in [("auto", 2), ("strict", 2), ("normal", 3), ("loose", 3)] {
+                assert_eq!(line_count(line_break, "文ぁ文"), lines, "{line_break}");
+            }
+        }
 
-#[test]
-fn anywhere_breaks_between_letters() {
-    assert_eq!(line_count("normal", "abc"), 1);
-    assert_eq!(line_count("anywhere", "abc"), 3);
-}
+        #[test]
+        fn anywhere_breaks_between_letters() {
+            assert_eq!(line_count("normal", "abc"), 1);
+            assert_eq!(line_count("anywhere", "abc"), 3);
+        }
 
-#[test]
-fn changing_the_property_relayouts() {
-    let mut harness = Harness::from_html("<div id='test' style='width:1px'>abc</div>");
-    assert_eq!(inline(&harness.base(), "#test").layout.len(), 1);
+        #[test]
+        fn changing_the_property_relayouts() {
+            let mut harness = Harness::from_html("<div id='test' style='width:1px'>abc</div>");
+            assert_eq!(inline(&harness.base(), "#test").layout.len(), 1);
 
-    let id = harness.node("#test");
-    harness
-        .base_mut()
-        .mutate()
-        .set_style_property(id, "line-break", "anywhere");
-    harness.pump();
-    assert_eq!(inline(&harness.base(), "#test").layout.len(), 3);
+            let id = harness.node("#test");
+            harness
+                .base_mut()
+                .mutate()
+                .set_style_property(id, "line-break", "anywhere");
+            harness.pump();
+            assert_eq!(inline(&harness.base(), "#test").layout.len(), 3);
+        }
+    }
+    winkin => {}
 }
diff --git a/tests/blitz-tests/tests/password_input.rs b/tests/blitz-tests/tests/password_input.rs
new file mode 100644
index 0000000000..2620956c11
--- /dev/null
+++ b/tests/blitz-tests/tests/password_input.rs
@@ -0,0 +1,392 @@
+//! `<input type=password>`, as Chrome edits it: its text is never copied or cut, a word motion or
+//! a word deletion takes the whole text, and a double click selects it all. Under winkin the
+//! text is drawn as a disc for each grapheme, with the caret and the selection in the text, and
+//! optionally the character typed last is shown in the clear for a while, as iOS and Android
+//! show it.
+
+use std::sync::{Arc, Mutex};
+
+use blitz_dom::text::EditableText as _;
+use blitz_dom::{DocumentConfig, NodeId};
+use blitz_html::{HtmlDocument, HtmlProvider};
+use blitz_test_harness::Harness;
+use blitz_traits::navigation::{NavigationOptions, NavigationProvider};
+use blitz_traits::shell::{ClipboardError, ColorScheme, ShellProvider, Viewport};
+use keyboard_types::{Key, Modifiers};
+
+/// The modifier editing shortcuts and word motions are taken with.
+const ACTION: Modifiers = if cfg!(target_os = "macos") {
+    Modifiers::SUPER
+} else {
+    Modifiers::CONTROL
+};
+
+/// A shell whose clipboard is a string.
+#[derive(Default)]
+struct Clipboard(Mutex<String>);
+
+impl ShellProvider for Clipboard {
+    fn get_clipboard_text(&self) -> Result<String, ClipboardError> {
+        Ok(self.0.lock().unwrap().clone())
+    }
+
+    fn set_clipboard_text(&self, text: String) -> Result<(), ClipboardError> {
+        *self.0.lock().unwrap() = text;
+        Ok(())
+    }
+}
+
+/// A navigation provider that keeps the URL a form submits to.
+#[derive(Default)]
+struct Navigations(Mutex<Vec<String>>);
+
+impl NavigationProvider for Navigations {
+    fn navigate_to(&self, options: NavigationOptions) {
+        self.0.lock().unwrap().push(options.url.to_string());
+    }
+}
+
+/// A focused password field holding `value`, with the caret at its end, and the clipboard its
+/// document is handed. A typed character shows in the clear for `reveal` where it is set.
+fn password_with(
+    value: &str,
+    reveal: Option<std::time::Duration>,
+) -> (Harness, NodeId, Arc<Clipboard>) {
+    let clipboard = Arc::new(Clipboard::default());
+    let html = format!(
+        r#"<html><body style="margin:0"><input id="field" type="password" value="{value}" style="width:400px; height:24px; font-size:16px"></body></html>"#
+    );
+    let doc = HtmlDocument::from_html(
+        &html,
+        DocumentConfig {
+            viewport: Some(Viewport::new(800, 600, 1.0, ColorScheme::Light)),
+            html_parser_provider: Some(Arc::new(HtmlProvider) as _),
+            shell_provider: Some(clipboard.clone() as _),
+            reveal_typed_password_character: reveal,
+            ..Default::default()
+        },
+    );
+    let mut harness = Harness::wrap(doc);
+    harness.pump();
+    harness.click("#field");
+    let node = harness.node("#field");
+    harness.press_with(Key::End, ACTION);
+    (harness, node, clipboard)
+}
+
+fn password(value: &str) -> (Harness, NodeId, Arc<Clipboard>) {
+    password_with(value, None)
+}
+
+fn with_editor<T>(
+    harness: &Harness,
+    node: NodeId,
+    read: impl FnOnce(&blitz_dom::text::TextEditor) -> T,
+) -> T {
+    let doc = harness.base();
+    let element = doc.get_node(node).unwrap().element_data().unwrap();
+    read(&element.text_input_data().unwrap().editor)
+}
+
+fn value(harness: &Harness, node: NodeId) -> String {
+    with_editor(harness, node, |editor| editor.text().into_owned())
+}
+
+fn selection(harness: &Harness, node: NodeId) -> std::ops::Range<usize> {
+    with_editor(harness, node, |editor| editor.selection())
+}
+
+/// Moves the caret to byte `at` of the field's text.
+fn caret_at(harness: &mut Harness, node: NodeId, at: usize) {
+    harness.press(Key::Home);
+    while selection(harness, node).start < at {
+        harness.press(Key::ArrowRight);
+    }
+    assert_eq!(selection(harness, node), at..at);
+}
+
+/// Chrome copies and cuts nothing from a password field, and fires no event for it, but pastes
+/// into it.
+#[test]
+fn copy_and_cut_are_blocked() {
+    let (mut harness, node, clipboard) = password("secret");
+    *clipboard.0.lock().unwrap() = "before".into();
+    harness.press_with(Key::Character("a".into()), ACTION);
+    assert_eq!(selection(&harness, node), 0..6);
+    harness.press_with(Key::Character("c".into()), ACTION);
+    assert_eq!(*clipboard.0.lock().unwrap(), "before");
+    harness.press_with(Key::Character("x".into()), ACTION);
+    assert_eq!(*clipboard.0.lock().unwrap(), "before");
+    assert_eq!(value(&harness, node), "secret");
+    assert_eq!(selection(&harness, node), 0..6);
+    harness.press_with(Key::Character("v".into()), ACTION);
+    assert_eq!(value(&harness, node), "before");
+}
+
+/// A word motion goes to the start or the end of the text, as Chrome's Ctrl+arrows do in a
+/// password field, where `hello world foo.bar baz` from offset 8 goes to 23 and to 0.
+#[test]
+fn word_motion_goes_to_either_end() {
+    let (mut harness, node, _) = password("hello world foo.bar baz");
+    caret_at(&mut harness, node, 8);
+    harness.press_with(Key::ArrowRight, ACTION);
+    assert_eq!(selection(&harness, node), 23..23);
+    caret_at(&mut harness, node, 8);
+    harness.press_with(Key::ArrowLeft, ACTION);
+    assert_eq!(selection(&harness, node), 0..0);
+    caret_at(&mut harness, node, 8);
+    harness.press_with(Key::ArrowRight, ACTION | Modifiers::SHIFT);
+    assert_eq!(selection(&harness, node), 8..23);
+}
+
+/// A word deletion deletes to the start or the end of the text: in Chrome, Ctrl+Backspace at
+/// offset 8 leaves `rld foo.bar baz`, and Ctrl+Delete leaves `hello wo`.
+#[cfg(not(target_os = "macos"))]
+#[test]
+fn word_deletion_goes_to_either_end() {
+    let (mut harness, node, _) = password("hello world foo.bar baz");
+    caret_at(&mut harness, node, 8);
+    harness.press_with(Key::Backspace, ACTION);
+    assert_eq!(value(&harness, node), "rld foo.bar baz");
+    assert_eq!(selection(&harness, node), 0..0);
+    let (mut harness, node, _) = password("hello world foo.bar baz");
+    caret_at(&mut harness, node, 8);
+    harness.press_with(Key::Delete, ACTION);
+    assert_eq!(value(&harness, node), "hello wo");
+}
+
+/// A double click selects the whole text, as in Chrome.
+#[test]
+fn a_double_click_selects_everything() {
+    let (mut harness, node, _) = password("hello world");
+    harness.press(Key::Home);
+    let (x, y) = harness.center_of("#field");
+    harness.click_at(x - 150.0, y);
+    harness.click_at(x - 150.0, y);
+    assert_eq!(selection(&harness, node), 0..11);
+}
+
+/// The value a form submits is the text, not what is drawn.
+#[test]
+fn a_form_submits_the_text() {
+    let navigations = Arc::new(Navigations::default());
+    let html = r#"<html><body><form action="http://example.com/login"><input id="field" type="password" name="pw" value=""></form></body></html>"#;
+    let doc = HtmlDocument::from_html(
+        html,
+        DocumentConfig {
+            viewport: Some(Viewport::new(800, 600, 1.0, ColorScheme::Light)),
+            html_parser_provider: Some(Arc::new(HtmlProvider) as _),
+            navigation_provider: Some(navigations.clone() as _),
+            ..Default::default()
+        },
+    );
+    let mut harness = Harness::wrap(doc);
+    harness.pump();
+    harness.click("#field");
+    harness.type_text("hunter2");
+    harness.press(Key::Enter);
+    assert_eq!(
+        *navigations.0.lock().unwrap(),
+        ["http://example.com/login?pw=hunter2"]
+    );
+}
+
+/// winkin's layout of a password field, and the character shown in the clear.
+#[cfg(all(feature = "winkin", not(feature = "parley")))]
+mod winkin_masks {
+    use std::time::Duration;
+
+    use blitz_traits::events::BlitzImeEvent;
+    use keyboard_types::Key;
+
+    use super::*;
+
+    /// The text the field is drawn with.
+    fn drawn(harness: &Harness, node: NodeId) -> String {
+        with_editor(harness, node, |editor| {
+            editor.text_layout().layout().unwrap().text().to_owned()
+        })
+    }
+
+    /// `count` discs.
+    fn discs(count: usize) -> String {
+        "\u{2022}".repeat(count)
+    }
+
+    /// Typing draws a disc for each grapheme of the text, as Chrome does: a combining sequence or
+    /// an emoji is one.
+    #[test]
+    fn typing_draws_a_disc_a_grapheme() {
+        let (mut harness, node, _) = password("");
+        harness.type_text("ab e\u{301}\u{1F600}");
+        assert_eq!(value(&harness, node), "ab e\u{301}\u{1F600}");
+        assert_eq!(drawn(&harness, node), discs(5));
+    }
+
+    /// The caret steps over a grapheme at a time, at the grapheme's ends in the text, as Chrome's
+    /// arrow keys do in a password field.
+    #[test]
+    fn the_caret_steps_a_grapheme_at_a_time() {
+        let (mut harness, node, _) = password("ae\u{301}\u{1F600}b");
+        harness.press(Key::Home);
+        let mut stops = vec![selection(&harness, node).start];
+        for _ in 0..4 {
+            harness.press(Key::ArrowRight);
+            stops.push(selection(&harness, node).start);
+        }
+        assert_eq!(stops, [0, 1, 4, 8, 9]);
+        harness.press(Key::ArrowLeft);
+        assert_eq!(selection(&harness, node), 8..8);
+        let caret = with_editor(&harness, node, |editor| editor.caret_rect().unwrap());
+        harness.press(Key::ArrowLeft);
+        let before = with_editor(&harness, node, |editor| editor.caret_rect().unwrap());
+        assert!(before.x0 < caret.x0, "{before:?} {caret:?}");
+    }
+
+    /// The selection is in the text, and is drawn over the discs it covers.
+    #[test]
+    fn the_selection_is_in_the_text() {
+        let (mut harness, node, _) = password("ae\u{301}\u{1F600}b");
+        harness.press(Key::Home);
+        harness.press(Key::ArrowRight);
+        harness.press_with(Key::ArrowRight, Modifiers::SHIFT);
+        harness.press_with(Key::ArrowRight, Modifiers::SHIFT);
+        assert_eq!(selection(&harness, node), 1..8);
+        let drawn = with_editor(&harness, node, |editor| editor.layout_selection_range());
+        assert_eq!(drawn, 3..9);
+        harness.type_text("x");
+        assert_eq!(value(&harness, node), "axb");
+    }
+
+    /// A click puts the caret at the grapheme end nearest it.
+    #[test]
+    fn a_click_hits_a_grapheme_end() {
+        let (mut harness, node, _) = password("ae\u{301}\u{1F600}b");
+        let rect = harness.layout_rect("#field");
+        // Past the discs: the end.
+        harness.click_at(rect.x + 300.0, rect.y + 12.0);
+        assert_eq!(selection(&harness, node), 9..9);
+        // At the very start.
+        harness.click_at(rect.x + 1.0, rect.y + 12.0);
+        assert_eq!(selection(&harness, node), 0..0);
+    }
+
+    /// Text an input method composes is masked too, as Chrome masks it.
+    #[test]
+    fn composing_text_is_masked() {
+        let (mut harness, node, _) = password("abc");
+        harness.ime(BlitzImeEvent::Preedit("xy".into(), Some((2, 2))));
+        assert_eq!(drawn(&harness, node), discs(5));
+        harness.ime(BlitzImeEvent::Preedit(String::new(), None));
+        harness.ime(BlitzImeEvent::Commit("xy".into()));
+        assert_eq!(value(&harness, node), "abcxy");
+        assert_eq!(drawn(&harness, node), discs(5));
+    }
+
+    /// Without the option, Chrome's desktop behavior, nothing typed is shown.
+    #[test]
+    fn nothing_is_shown_without_the_option() {
+        let (mut harness, node, _) = password("");
+        harness.type_text("abc");
+        assert_eq!(drawn(&harness, node), discs(3));
+        assert_eq!(harness.base().text_input_deadline(), None);
+    }
+
+    const REVEAL: Duration = Duration::from_millis(1500);
+
+    /// With the option, the grapheme typed last is shown until the next is typed.
+    #[test]
+    fn the_last_typed_grapheme_is_shown() {
+        let (mut harness, node, _) = password_with("", Some(REVEAL));
+        harness.type_text("ab");
+        assert_eq!(drawn(&harness, node), format!("{}b", discs(1)));
+        harness.type_text("c");
+        assert_eq!(drawn(&harness, node), format!("{}c", discs(2)));
+        // Typed in the middle, it is shown where it is.
+        harness.press(Key::ArrowLeft);
+        assert_eq!(drawn(&harness, node), discs(3));
+        harness.type_text("x");
+        assert_eq!(drawn(&harness, node), format!("{}x{}", discs(2), discs(1)));
+        assert_eq!(value(&harness, node), "abxc");
+        assert_eq!(selection(&harness, node), 3..3);
+    }
+
+    /// A move of the caret, a deletion, a paste, a change of focus and a value set from script
+    /// each mask the character shown.
+    #[test]
+    fn other_edits_mask_the_character_shown() {
+        let (mut harness, node, clipboard) = password_with("", Some(REVEAL));
+        harness.type_text("a");
+        harness.press(Key::ArrowLeft);
+        assert_eq!(drawn(&harness, node), discs(1));
+
+        harness.press(Key::End);
+        harness.type_text("b");
+        harness.press(Key::Backspace);
+        assert_eq!(drawn(&harness, node), discs(1));
+
+        harness.type_text("c");
+        *clipboard.0.lock().unwrap() = "d".into();
+        harness.press_with(Key::Character("v".into()), ACTION);
+        assert_eq!(drawn(&harness, node), discs(3));
+        assert_eq!(harness.base().text_input_deadline(), None);
+
+        harness.type_text("e");
+        harness.base_mut().clear_focus();
+        assert_eq!(drawn(&harness, node), discs(4));
+    }
+
+    /// An input method's commit of one grapheme is shown, and one of several is not.
+    #[test]
+    fn a_committed_grapheme_is_shown_and_more_are_not() {
+        let (mut harness, node, _) = password_with("", Some(REVEAL));
+        harness.ime(BlitzImeEvent::Commit("\u{65E5}".into()));
+        assert_eq!(drawn(&harness, node), "\u{65E5}");
+        harness.ime(BlitzImeEvent::Commit("\u{672C}\u{8A9E}".into()));
+        assert_eq!(drawn(&harness, node), discs(3));
+    }
+
+    /// The character is masked once its time is up, which the document reports for a shell to
+    /// wake at.
+    #[test]
+    fn the_character_is_masked_when_its_time_is_up() {
+        let (mut harness, node, _) = password_with("", Some(REVEAL));
+        let typed = std::time::Instant::now();
+        harness.type_text("a");
+        let deadline = harness.base().text_input_deadline().unwrap();
+        assert!(deadline >= typed + REVEAL);
+        assert!(
+            !harness
+                .base_mut()
+                .expire_text_input_timers(deadline - Duration::from_millis(1))
+        );
+        assert_eq!(drawn(&harness, node), "a");
+        assert!(harness.base_mut().expire_text_input_timers(deadline));
+        assert_eq!(drawn(&harness, node), discs(1));
+        assert_eq!(harness.base().text_input_deadline(), None);
+        assert_eq!(value(&harness, node), "a");
+    }
+
+    /// A field whose style masks nothing shows its text: a reveal only ever shows text in a
+    /// password field.
+    #[test]
+    fn a_text_field_is_drawn_as_it_is() {
+        let html = r#"<html><body><input id="field" value="abc"></body></html>"#;
+        let doc = HtmlDocument::from_html(
+            html,
+            DocumentConfig {
+                html_parser_provider: Some(Arc::new(HtmlProvider) as _),
+                reveal_typed_password_character: Some(REVEAL),
+                ..Default::default()
+            },
+        );
+        let mut harness = Harness::wrap(doc);
+        harness.pump();
+        harness.click("#field");
+        harness.press(Key::End);
+        harness.type_text("d");
+        let node = harness.node("#field");
+        assert_eq!(drawn(&harness, node), "abcd");
+        assert_eq!(harness.base().text_input_deadline(), None);
+    }
+}
diff --git a/tests/blitz-tests/tests/pseudo_element_update.rs b/tests/blitz-tests/tests/pseudo_element_update.rs
index 742b2892af..91f2ee6857 100644
--- a/tests/blitz-tests/tests/pseudo_element_update.rs
+++ b/tests/blitz-tests/tests/pseudo_element_update.rs
@@ -59,7 +59,7 @@ fn after_pseudo_styles_after_hover(incremental: bool) -> (f32, f32) {
     let styles = after
         .primary_styles()
         .expect("::after node should have styles");
-    let color_alpha = styles.clone_color().alpha;
+    let color_alpha = styles.slow_clone_color().alpha;
     let x = after.final_layout().location.x;
     (color_alpha, x)
 }
diff --git a/tests/blitz-tests/tests/render_blocking_stylesheet.rs b/tests/blitz-tests/tests/render_blocking_stylesheet.rs
index 4f4250add9..b20091deea 100644
--- a/tests/blitz-tests/tests/render_blocking_stylesheet.rs
+++ b/tests/blitz-tests/tests/render_blocking_stylesheet.rs
@@ -72,7 +72,7 @@ fn transition_does_not_start_from_pre_stylesheet_styles() {
     let node = doc.get_node(node_id).unwrap();
     let styles = node.primary_styles().unwrap();
     assert_eq!(
-        styles.get_inherited_box().clone_visibility(),
+        styles.get_inherited_box().slow_clone_visibility(),
         Visibility::Hidden,
         "transitioned property should have its stylesheet value, not the pre-stylesheet value"
     );
diff --git a/tests/blitz-tests/tests/stale_dirty_descendants.rs b/tests/blitz-tests/tests/stale_dirty_descendants.rs
index 8018730e16..b838b42732 100644
--- a/tests/blitz-tests/tests/stale_dirty_descendants.rs
+++ b/tests/blitz-tests/tests/stale_dirty_descendants.rs
@@ -52,7 +52,7 @@ fn color_of(doc: &BaseDocument, selector: &str) -> [u8; 3] {
     let node_id = doc.query_selector(selector).unwrap().unwrap();
     let node = doc.get_node(node_id).unwrap();
     let styles = node.primary_styles().unwrap();
-    let color = styles.clone_color().into_srgb_legacy();
+    let color = styles.slow_clone_color().into_srgb_legacy();
     let srgb = color.raw_components();
     [
         (srgb[0] * 255.0).round() as u8,
diff --git a/tests/blitz-tests/tests/style_property_invalidation.rs b/tests/blitz-tests/tests/style_property_invalidation.rs
index ecf81948d4..2251938f9c 100644
--- a/tests/blitz-tests/tests/style_property_invalidation.rs
+++ b/tests/blitz-tests/tests/style_property_invalidation.rs
@@ -46,7 +46,7 @@ fn color_of(doc: &BaseDocument, selector: &str) -> [u8; 3] {
     let node_id = doc.query_selector(selector).unwrap().unwrap();
     let node = doc.get_node(node_id).unwrap();
     let styles = node.primary_styles().unwrap();
-    let color = styles.clone_color().into_srgb_legacy();
+    let color = styles.slow_clone_color().into_srgb_legacy();
     let srgb = color.raw_components();
     [
         (srgb[0] * 255.0).round() as u8,
diff --git a/tests/blitz-tests/tests/text_align_restyle.rs b/tests/blitz-tests/tests/text_align_restyle.rs
new file mode 100644
index 0000000000..e4833338ff
--- /dev/null
+++ b/tests/blitz-tests/tests/text_align_restyle.rs
@@ -0,0 +1,92 @@
+//! A restyle that changes only `text-align` lays the text out again without building its boxes
+//! again.
+
+use blitz_dom::DocumentConfig;
+use blitz_dom::text::InlineText as _;
+use blitz_html::{HtmlDocument, HtmlProvider};
+use blitz_traits::shell::{ColorScheme, Viewport};
+use std::sync::Arc;
+
+fn make_doc(css: &str, body: &str) -> HtmlDocument {
+    let html = format!(
+        r#"<!DOCTYPE html><html><head><style>
+            body {{ margin: 0; color: black; font-size: 16px; }}
+            #owner {{ width: 300px; text-align: left; }}
+            #owner:hover {{ text-align: right; }}
+            {css}
+        </style></head><body>{body}</body></html>"#
+    );
+    let mut doc = HtmlDocument::from_html(
+        &html,
+        DocumentConfig {
+            viewport: Some(Viewport::new(400, 600, 1.0, ColorScheme::Light)),
+            html_parser_provider: Some(Arc::new(HtmlProvider) as _),
+            ..Default::default()
+        },
+    );
+    doc.set_incremental_layout(true);
+    doc.resolve(0.0);
+    doc
+}
+
+fn hover_owner(doc: &mut HtmlDocument) {
+    let owner = doc.query_selector("#owner").unwrap().unwrap();
+    let pos = doc.get_node(owner).unwrap().absolute_position(1.0, 1.0);
+    assert!(doc.set_hover_to(pos.x, pos.y));
+    doc.resolve(0.0);
+}
+
+#[test]
+fn alignment_restyle_keeps_the_inline_layout() {
+    let mut doc = make_doc("", r#"<div id="owner">left <span>or</span> right</div>"#);
+    let owner = doc.query_selector("#owner").unwrap().unwrap();
+    // The block's inline layout, and where its text starts, in CSS pixels.
+    let read = |doc: &HtmlDocument| {
+        let layout = doc
+            .get_node(owner)
+            .unwrap()
+            .element_data()
+            .unwrap()
+            .inline_layout_data
+            .as_ref()
+            .unwrap();
+        let mut left = f64::INFINITY;
+        layout.for_each_selection_rect(0, layout.text_len(), |rect| left = left.min(rect.x0));
+        let left = (left / f64::from(layout.scale())) as f32;
+        (&**layout as *const _ as usize, left)
+    };
+    let (before, start) = read(&doc);
+    assert_eq!(start, 0.0);
+    hover_owner(&mut doc);
+    let (after, moved) = read(&doc);
+    assert_eq!(after, before);
+    assert!(moved > 0.0);
+}
+
+/// A textarea's editor takes the alignment it inherits after a restyle that keeps its box.
+#[cfg(all(feature = "winkin", not(feature = "parley")))]
+#[test]
+fn alignment_restyle_reaches_a_textarea() {
+    let mut doc = make_doc(
+        "#field { width: 250px; }",
+        r#"<div id="owner"><textarea id="field">ab</textarea></div>"#,
+    );
+    let field = doc.query_selector("#field").unwrap().unwrap();
+    let start = |doc: &HtmlDocument| {
+        let node = doc.get_node(field).unwrap();
+        let editor = &node
+            .element_data()
+            .unwrap()
+            .text_input_data()
+            .unwrap()
+            .editor;
+        let layout = editor.text_layout().layout().unwrap();
+        layout
+            .lines()
+            .map(|line| line.metrics().left)
+            .fold(f32::INFINITY, f32::min)
+    };
+    assert_eq!(start(&doc), 0.0);
+    hover_owner(&mut doc);
+    assert!(start(&doc) > 0.0);
+}
diff --git a/tests/blitz-tests/tests/text_boundary.rs b/tests/blitz-tests/tests/text_boundary.rs
new file mode 100644
index 0000000000..7a2d8b4627
--- /dev/null
+++ b/tests/blitz-tests/tests/text_boundary.rs
@@ -0,0 +1,114 @@
+//! Reading text back through the text backend boundary, under whichever backend the build
+//! selects: selected text, selection rectangles, the first baseline, and an `<input>` or
+//! `<textarea>`'s metrics and caret.
+
+use blitz_dom::node::TextLayout;
+use blitz_dom::text::{Edit, EditableText as _, InlineText as _, Motion, TextEditor};
+use blitz_dom::{BaseDocument, NodeId};
+use blitz_test_harness::Harness;
+use markup5ever::{QualName, local_name, ns};
+
+fn page(body: &str) -> Harness {
+    Harness::from_html(&format!(
+        r#"<html><body style="margin:0; font: 16px/20px sans-serif">{body}</body></html>"#
+    ))
+}
+
+fn inline<'a>(doc: &'a BaseDocument, selector: &str) -> &'a TextLayout {
+    let id = doc.query_selector(selector).unwrap().unwrap();
+    doc.get_node(id)
+        .unwrap()
+        .element_data()
+        .unwrap()
+        .inline_layout_data
+        .as_deref()
+        .unwrap()
+}
+
+fn editor(doc: &BaseDocument, node: NodeId) -> &TextEditor {
+    let element = doc.get_node(node).unwrap().element_data().unwrap();
+    &element.text_input_data().unwrap().editor
+}
+
+#[test]
+fn selected_text_borrows_the_laid_out_text() {
+    let harness = page(r#"<div id="test">hello world</div>"#);
+    let doc = harness.base();
+    let layout = inline(&doc, "#test");
+    let text = layout.text();
+    let pieces: Vec<&str> = layout.selected_text(6, 11).collect();
+    assert_eq!(pieces.concat(), "world");
+    let within = text.as_bytes().as_ptr_range();
+    for piece in pieces {
+        assert!(within.contains(&piece.as_ptr()), "{piece:?} is a copy");
+    }
+    assert_eq!(layout.selected_text(4, text.len() + 1).count(), 0);
+}
+
+#[test]
+fn selection_rects_cover_each_line() {
+    let harness = page(r#"<div id="test">first<br>second</div>"#);
+    let doc = harness.base();
+    let layout = inline(&doc, "#test");
+    let mut rects = Vec::new();
+    layout.for_each_selection_rect(0, layout.text_len(), |rect| rects.push(rect));
+    assert!(rects.iter().all(|rect| rect.width() > 0.0), "{rects:?}");
+    // A backend may highlight a line's text in more than one rectangle.
+    let mut tops: Vec<f64> = rects.iter().map(|rect| rect.y0).collect();
+    tops.dedup();
+    assert_eq!(tops.len(), 2, "{rects:?}");
+    assert!(tops[0] < tops[1], "{rects:?}");
+}
+
+#[test]
+fn first_baseline_is_on_the_first_line() {
+    // Each line box is 40px tall, and the padding is outside the content box.
+    let harness =
+        page(r#"<div id="test" style="line-height: 40px; padding-top: 7px">a<br>b</div>"#);
+    let doc = harness.base();
+    let baseline = inline(&doc, "#test").first_baseline().unwrap();
+    assert!(baseline > 12.0 && baseline < 40.0, "{baseline}");
+}
+
+#[test]
+fn text_input_metrics_follow_its_value() {
+    let mut harness = page(r#"<input id="field" value="hello" style="width:400px">"#);
+    let node = harness.node("#field");
+    let before = editor(&harness.base(), node).metrics().unwrap();
+    assert_eq!(before.scale, 1.0);
+    assert!(
+        before.size.width > 0.0 && before.size.height > 0.0,
+        "{before:?}"
+    );
+
+    // A value set from outside is laid out before it is read, and the caret follows it.
+    let value = QualName::new(None, ns!(), local_name!("value"));
+    harness
+        .base_mut()
+        .mutate()
+        .set_attribute(node, value, "hello world");
+    harness.base_mut().with_text_input(node, |mut driver| {
+        driver.edit(Edit::Move(Motion::TextEnd));
+    });
+    let doc = harness.base();
+    let editor = editor(&doc, node);
+    let after = editor.metrics().unwrap();
+    assert!(after.size.width > before.size.width, "{before:?} {after:?}");
+    let caret = editor.caret_rect().unwrap();
+    assert!(
+        (caret.x0 - after.size.width).abs() < 2.0,
+        "{caret:?} {after:?}"
+    );
+}
+
+#[test]
+fn textarea_wraps_at_its_width_once_laid_out() {
+    let harness = page(
+        r#"<textarea id="field" style="width:100px; height:200px">the quick brown fox jumps over the lazy dog</textarea>"#,
+    );
+    let node = harness.node("#field");
+    let doc = harness.base();
+    let metrics = editor(&doc, node).metrics().unwrap();
+    assert!(metrics.size.width <= 100.0, "{metrics:?}");
+    assert!(metrics.size.height > 40.0, "{metrics:?}");
+}
diff --git a/tests/blitz-tests/tests/text_input_editing.rs b/tests/blitz-tests/tests/text_input_editing.rs
new file mode 100644
index 0000000000..9620ef7277
--- /dev/null
+++ b/tests/blitz-tests/tests/text_input_editing.rs
@@ -0,0 +1,413 @@
+//! Editing an `<input>` and a `<textarea>` through key, IME and clipboard events, under whichever
+//! text backend the build selects: typing, deletion, word motion, selection, the clipboard, undo
+//! and text an input method is composing.
+
+use std::sync::{Arc, Mutex};
+
+use blitz_dom::text::{BACKEND, EditableText as _, TextBackend};
+use blitz_dom::{DocumentConfig, NodeId};
+use blitz_html::{HtmlDocument, HtmlProvider};
+use blitz_test_harness::Harness;
+use blitz_traits::events::BlitzImeEvent;
+use blitz_traits::shell::{ClipboardError, ColorScheme, ShellProvider, Viewport};
+use keyboard_types::{Key, Modifiers};
+
+/// The modifier editing shortcuts are taken with.
+const ACTION: Modifiers = if cfg!(target_os = "macos") {
+    Modifiers::SUPER
+} else {
+    Modifiers::CONTROL
+};
+
+/// A shell whose clipboard is a string.
+#[derive(Default)]
+struct Clipboard(Mutex<String>);
+
+impl ShellProvider for Clipboard {
+    fn get_clipboard_text(&self) -> Result<String, ClipboardError> {
+        Ok(self.0.lock().unwrap().clone())
+    }
+
+    fn set_clipboard_text(&self, text: String) -> Result<(), ClipboardError> {
+        *self.0.lock().unwrap() = text;
+        Ok(())
+    }
+}
+
+/// A focused `<input>` holding `value`, with the caret at its end, and the clipboard its
+/// document is handed.
+fn input(value: &str) -> (Harness, NodeId, Arc<Clipboard>) {
+    control(&format!(
+        r#"<input id="field" type="text" value="{value}" style="width:400px; height:24px; font-size:16px">"#
+    ))
+}
+
+/// A focused `<textarea>` holding `value`.
+fn textarea(value: &str) -> (Harness, NodeId, Arc<Clipboard>) {
+    control(&format!(
+        r#"<textarea id="field" style="width:400px; height:200px; font-size:16px">{value}</textarea>"#
+    ))
+}
+
+fn control(markup: &str) -> (Harness, NodeId, Arc<Clipboard>) {
+    let clipboard = Arc::new(Clipboard::default());
+    let html = format!(r#"<html><body style="margin:0">{markup}</body></html>"#);
+    let doc = HtmlDocument::from_html(
+        &html,
+        DocumentConfig {
+            viewport: Some(Viewport::new(800, 600, 1.0, ColorScheme::Light)),
+            html_parser_provider: Some(Arc::new(HtmlProvider) as _),
+            shell_provider: Some(clipboard.clone() as _),
+            ..Default::default()
+        },
+    );
+    let mut harness = Harness::wrap(doc);
+    harness.pump();
+    harness.click("#field");
+    let node = harness.node("#field");
+    harness.press_with(Key::End, ACTION);
+    (harness, node, clipboard)
+}
+
+/// The control's text, as a form submits it.
+fn value(harness: &Harness, node: NodeId) -> String {
+    with_editor(harness, node, |editor| editor.text().into_owned())
+}
+
+/// The control's text with any text an input method is composing.
+fn raw_value(harness: &Harness, node: NodeId) -> String {
+    with_editor(harness, node, |editor| editor.raw_text().to_owned())
+}
+
+fn selection(harness: &Harness, node: NodeId) -> std::ops::Range<usize> {
+    with_editor(harness, node, |editor| editor.selection())
+}
+
+fn selected(harness: &Harness, node: NodeId) -> Option<String> {
+    with_editor(harness, node, |editor| {
+        editor.selected_text().map(str::to_owned)
+    })
+}
+
+fn caret_shown(harness: &Harness, node: NodeId) -> bool {
+    with_editor(harness, node, |editor| editor.caret_rect().is_some())
+}
+
+fn with_editor<T>(
+    harness: &Harness,
+    node: NodeId,
+    read: impl FnOnce(&blitz_dom::text::TextEditor) -> T,
+) -> T {
+    let doc = harness.base();
+    let element = doc.get_node(node).unwrap().element_data().unwrap();
+    read(&element.text_input_data().unwrap().editor)
+}
+
+/// Backspace, which macOS takes through its standard key bindings instead.
+fn backspace(harness: &mut Harness, modifiers: Modifiers) {
+    if cfg!(target_os = "macos") {
+        let command = if modifiers.contains(Modifiers::ALT) {
+            "deleteWordBackward:"
+        } else {
+            "deleteBackward:"
+        };
+        harness.dispatch(blitz_traits::events::UiEvent::AppleStandardKeybinding(
+            command.into(),
+        ));
+        harness.pump();
+    } else {
+        harness.press_with(Key::Backspace, modifiers);
+    }
+}
+
+/// The modifier word motion and word deletion are taken with.
+const WORD: Modifiers = if cfg!(target_os = "macos") {
+    Modifiers::ALT
+} else {
+    Modifiers::CONTROL
+};
+
+/// Moves the caret a word left, extending the selection where `extend`. macOS takes word motion
+/// through its standard key bindings instead.
+fn word_left(harness: &mut Harness, extend: bool) {
+    if cfg!(target_os = "macos") {
+        let command = if extend {
+            "moveWordLeftAndModifySelection:"
+        } else {
+            "moveWordLeft:"
+        };
+        harness.dispatch(blitz_traits::events::UiEvent::AppleStandardKeybinding(
+            command.into(),
+        ));
+        harness.pump();
+    } else if extend {
+        harness.press_with(Key::ArrowLeft, WORD | Modifiers::SHIFT);
+    } else {
+        harness.press_with(Key::ArrowLeft, WORD);
+    }
+}
+
+#[test]
+fn typing_inserts_at_the_caret() {
+    let (mut harness, node, _) = input("world");
+    harness.press(Key::Home);
+    harness.type_text("hello ");
+    assert_eq!(value(&harness, node), "hello world");
+    assert_eq!(selection(&harness, node), 6..6);
+}
+
+#[test]
+fn enter_inserts_a_line_break_in_a_textarea() {
+    let (mut harness, node, _) = textarea("one");
+    harness.press(Key::Enter);
+    harness.type_text("two");
+    assert_eq!(value(&harness, node), "one\ntwo");
+}
+
+#[test]
+fn backspace_and_delete_remove_a_character() {
+    let (mut harness, node, _) = input("hello");
+    backspace(&mut harness, Modifiers::empty());
+    assert_eq!(value(&harness, node), "hell");
+    harness.press(Key::Home);
+    harness.press(Key::Delete);
+    assert_eq!(value(&harness, node), "ell");
+    assert_eq!(selection(&harness, node), 0..0);
+}
+
+#[test]
+fn deleting_at_the_ends_changes_nothing() {
+    let (mut harness, node, _) = input("ab");
+    harness.press(Key::Delete);
+    harness.press(Key::Home);
+    backspace(&mut harness, Modifiers::empty());
+    assert_eq!(value(&harness, node), "ab");
+    assert_eq!(selection(&harness, node), 0..0);
+}
+
+/// Backspace after a combining mark: winkin takes the whole grapheme, Parley the mark alone.
+#[test]
+fn backspace_after_a_combining_mark() {
+    let (mut harness, node, _) = input("ae\u{301}");
+    backspace(&mut harness, Modifiers::empty());
+    let expected = match BACKEND {
+        TextBackend::Winkin => "a",
+        TextBackend::Parley => "ae",
+    };
+    assert_eq!(value(&harness, node), expected);
+}
+
+#[test]
+fn word_motion_moves_by_words() {
+    let (mut harness, node, _) = input("one two three");
+    word_left(&mut harness, false);
+    assert_eq!(selection(&harness, node), 8..8);
+    word_left(&mut harness, false);
+    assert_eq!(selection(&harness, node), 4..4);
+    word_left(&mut harness, true);
+    assert_eq!(selected(&harness, node).as_deref(), Some("one "));
+}
+
+#[test]
+fn word_deletion_removes_the_word_before_the_caret() {
+    let (mut harness, node, _) = input("one two");
+    backspace(&mut harness, WORD);
+    assert_eq!(value(&harness, node), "one ");
+}
+
+#[test]
+fn shift_motion_extends_and_typing_replaces_the_selection() {
+    let (mut harness, node, _) = input("hello world");
+    for _ in 0..5 {
+        harness.press_with(Key::ArrowLeft, Modifiers::SHIFT);
+    }
+    assert_eq!(selected(&harness, node).as_deref(), Some("world"));
+    harness.type_text("there");
+    assert_eq!(value(&harness, node), "hello there");
+}
+
+#[test]
+fn select_all_selects_the_whole_text() {
+    let (mut harness, node, _) = textarea("one\ntwo");
+    harness.press_with(Key::Character("a".into()), ACTION);
+    assert_eq!(selected(&harness, node).as_deref(), Some("one\ntwo"));
+    harness.press(Key::ArrowLeft);
+    assert_eq!(selection(&harness, node), 0..0);
+}
+
+#[test]
+fn copy_cut_and_paste_go_through_the_clipboard() {
+    let (mut harness, node, clipboard) = input("hello world");
+    word_left(&mut harness, true);
+    harness.press_with(Key::Character("c".into()), ACTION);
+    assert_eq!(*clipboard.0.lock().unwrap(), "world");
+    assert_eq!(value(&harness, node), "hello world");
+
+    harness.press_with(Key::Character("x".into()), ACTION);
+    assert_eq!(value(&harness, node), "hello ");
+
+    harness.press(Key::Home);
+    harness.press_with(Key::Character("v".into()), ACTION);
+    assert_eq!(value(&harness, node), "worldhello ");
+    assert_eq!(selection(&harness, node), 5..5);
+}
+
+#[test]
+fn paste_replaces_the_selection() {
+    let (mut harness, node, clipboard) = input("abc");
+    *clipboard.0.lock().unwrap() = "xyz".into();
+    harness.press_with(Key::Character("a".into()), ACTION);
+    harness.press_with(Key::Character("v".into()), ACTION);
+    assert_eq!(value(&harness, node), "xyz");
+}
+
+/// Undo and redo, which the winkin editor keeps a history for, and Parley's does not.
+#[test]
+fn undo_and_redo_step_through_edits() {
+    let (mut harness, node, _) = input("");
+    harness.type_text("ab");
+    backspace(&mut harness, Modifiers::empty());
+    assert_eq!(value(&harness, node), "a");
+
+    harness.press_with(Key::Character("z".into()), ACTION);
+    match BACKEND {
+        TextBackend::Winkin => {
+            assert_eq!(value(&harness, node), "ab");
+            assert_eq!(selection(&harness, node), 2..2);
+            harness.press_with(Key::Character("z".into()), ACTION);
+            assert_eq!(value(&harness, node), "a");
+            harness.press_with(Key::Character("Z".into()), ACTION | Modifiers::SHIFT);
+            assert_eq!(value(&harness, node), "ab");
+            harness.press(Key::Redo);
+            assert_eq!(value(&harness, node), "a");
+            harness.press(Key::Undo);
+            assert_eq!(value(&harness, node), "ab");
+        }
+        TextBackend::Parley => assert_eq!(value(&harness, node), "a"),
+    }
+}
+
+#[test]
+fn undo_restores_a_replaced_selection() {
+    let (mut harness, node, _) = input("hello");
+    harness.press_with(Key::Character("a".into()), ACTION);
+    harness.type_text("x");
+    harness.press_with(Key::Character("z".into()), ACTION);
+    if BACKEND == TextBackend::Winkin {
+        assert_eq!(value(&harness, node), "hello");
+        assert_eq!(selected(&harness, node).as_deref(), Some("hello"));
+        // A new edit drops what could be redone.
+        harness.press(Key::End);
+        harness.type_text("!");
+        harness.press(Key::Redo);
+        assert_eq!(value(&harness, node), "hello!");
+    }
+}
+
+#[test]
+fn composing_text_is_laid_out_until_it_is_committed() {
+    let (mut harness, node, _) = input("abc");
+    harness.ime(BlitzImeEvent::Preedit("に".into(), Some((3, 3))));
+    harness.ime(BlitzImeEvent::Preedit("日本".into(), Some((6, 6))));
+    assert_eq!(raw_value(&harness, node), "abc日本");
+    assert_eq!(value(&harness, node), "abc");
+    assert_eq!(selection(&harness, node), 9..9);
+    assert!(caret_shown(&harness, node));
+    assert_eq!(selected(&harness, node), None);
+
+    // Without a cursor, the input method hides the caret.
+    harness.ime(BlitzImeEvent::Preedit("日本".into(), None));
+    assert!(!caret_shown(&harness, node));
+
+    harness.ime(BlitzImeEvent::Preedit(String::new(), None));
+    harness.ime(BlitzImeEvent::Commit("日本".into()));
+    assert_eq!(raw_value(&harness, node), "abc日本");
+    assert_eq!(value(&harness, node), "abc日本");
+    assert_eq!(selection(&harness, node), 9..9);
+    assert!(caret_shown(&harness, node));
+}
+
+#[test]
+fn cancelled_composing_text_leaves_the_text_as_it_was() {
+    let (mut harness, node, _) = input("abc");
+    harness.press(Key::ArrowLeft);
+    harness.ime(BlitzImeEvent::Preedit("x".into(), Some((1, 1))));
+    assert_eq!(raw_value(&harness, node), "abxc");
+    harness.ime(BlitzImeEvent::Preedit(String::new(), None));
+    assert_eq!(raw_value(&harness, node), "abc");
+    assert_eq!(selection(&harness, node), 2..2);
+
+    harness.ime(BlitzImeEvent::Preedit("x".into(), Some((1, 1))));
+    harness.ime(BlitzImeEvent::Disabled);
+    assert_eq!(raw_value(&harness, node), "abc");
+}
+
+/// What composing does to a selection: the winkin editor returns to it where composing is
+/// cancelled, and a commit replaces it as one change to undo.
+#[test]
+fn composing_over_a_selection_restores_it_or_replaces_it() {
+    if BACKEND != TextBackend::Winkin {
+        return;
+    }
+    let (mut harness, node, _) = input("abc");
+    harness.press_with(Key::Character("a".into()), ACTION);
+    harness.ime(BlitzImeEvent::Preedit("に".into(), Some((3, 3))));
+    assert_eq!(raw_value(&harness, node), "に");
+    harness.ime(BlitzImeEvent::Preedit(String::new(), None));
+    assert_eq!(selected(&harness, node).as_deref(), Some("abc"));
+
+    harness.ime(BlitzImeEvent::Preedit("日本".into(), Some((6, 6))));
+    harness.ime(BlitzImeEvent::Preedit(String::new(), None));
+    harness.ime(BlitzImeEvent::Commit("日本語".into()));
+    assert_eq!(value(&harness, node), "日本語");
+    harness.press_with(Key::Character("z".into()), ACTION);
+    assert_eq!(selected(&harness, node).as_deref(), Some("abc"));
+}
+
+/// The composing text is underlined: winkin lays it out in a box of its own, which decorates
+/// the text before it is painted.
+#[cfg(all(feature = "winkin", not(feature = "parley")))]
+#[test]
+fn composing_text_is_underlined() {
+    use blitz_dom::text::winkin::COMPOSE_KEY;
+    use blitz_dom::text::winkin::winkin::paint::{Decorates, Paint};
+
+    let (mut harness, node, _) = input("abc");
+    harness.ime(BlitzImeEvent::Preedit("xy".into(), Some((2, 2))));
+    let compose_key = COMPOSE_KEY | node.as_u64();
+    let bars = with_editor(&harness, node, |editor| {
+        let layout = editor.text_layout().layout().unwrap();
+        layout
+            .lines()
+            .flat_map(|line| {
+                line.paints(|key| {
+                    if key.0 == compose_key {
+                        Decorates::BeforeText
+                    } else {
+                        Decorates::None
+                    }
+                })
+                .filter_map(|paint| match paint {
+                    Paint::DecorationBeforeText(bar) => {
+                        let inline = bar.inline();
+                        Some((bar.key().0, inline.left, inline.right))
+                    }
+                    _ => None,
+                })
+                .collect::<Vec<_>>()
+            })
+            .collect::<Vec<_>>()
+    });
+    assert_eq!(
+        bars.len(),
+        1,
+        "one underline under the composing text: {bars:?}"
+    );
+    let (key, left, right) = bars[0];
+    assert_eq!(key, compose_key);
+    assert!(left > 0.0 && right > left);
+
+    harness.ime(BlitzImeEvent::Preedit(String::new(), None));
+    let composing = with_editor(&harness, node, |editor| editor.composition_range());
+    assert_eq!(composing, None);
+}
diff --git a/tests/blitz-tests/tests/text_selection_anonymous_block.rs b/tests/blitz-tests/tests/text_selection_anonymous_block.rs
index c11fd16b2f..7d384c7c5b 100644
--- a/tests/blitz-tests/tests/text_selection_anonymous_block.rs
+++ b/tests/blitz-tests/tests/text_selection_anonymous_block.rs
@@ -7,6 +7,7 @@
 //! pointer event's target is the canonicalized DOM node (the body). The
 //! selection drag path must not require these to be the same node.
 
+use blitz_dom::text::InlineText as _;
 use blitz_dom::{Document, DocumentConfig, NodeId};
 use blitz_html::{HtmlDocument, HtmlProvider};
 use blitz_traits::{
@@ -27,10 +28,14 @@ const HTML: &str = r#"<!DOCTYPE html>
 const OUTER_POS: (f32, f32) = (2.0, 8.0);
 
 fn make_doc() -> HtmlDocument {
+    make_doc_with_scale(1.0)
+}
+
+fn make_doc_with_scale(scale: f32) -> HtmlDocument {
     let mut doc = HtmlDocument::from_html(
         HTML,
         DocumentConfig {
-            viewport: Some(Viewport::new(400, 300, 1.0, ColorScheme::Light)),
+            viewport: Some(Viewport::new(400, 300, scale, ColorScheme::Light)),
             html_parser_provider: Some(Arc::new(HtmlProvider) as _),
             ..Default::default()
         },
@@ -39,6 +44,22 @@ fn make_doc() -> HtmlDocument {
     doc
 }
 
+#[test]
+fn drag_selection_at_double_scale() {
+    let mut doc = make_doc_with_scale(2.0);
+    if !hit_is_text_in_anonymous_block(&doc) {
+        eprintln!("skipping: no usable font (text measures 0x0)");
+        return;
+    }
+
+    drag(&mut doc, OUTER_POS, (35.0, OUTER_POS.1));
+    let selected = doc.get_selected_text().expect("expected selected text");
+    assert!(
+        !selected.is_empty() && "Outer".contains(&selected),
+        "expected part of \"Outer\" at 2x scale, got {selected:?}"
+    );
+}
+
 fn pointer_event(x: f32, y: f32, buttons: MouseEventButtons) -> BlitzPointerEvent {
     BlitzPointerEvent {
         id: BlitzPointerId::Mouse,
@@ -97,6 +118,36 @@ fn node_center(doc: &HtmlDocument, node_id: NodeId) -> (f32, f32) {
     )
 }
 
+#[test]
+fn text_hit_follows_selection_geometry_in_vertical_writing_mode() {
+    let mut doc = HtmlDocument::from_html(
+        "<style>body{margin:0}#vertical{writing-mode:vertical-rl;width:100px;height:100px}</style><div id='vertical'>Vertical</div>",
+        DocumentConfig {
+            viewport: Some(Viewport::new(400, 300, 1.0, ColorScheme::Light)),
+            html_parser_provider: Some(Arc::new(HtmlProvider) as _),
+            ..Default::default()
+        },
+    );
+    doc.resolve(0.0);
+    let root_id = doc.query_selector("#vertical").unwrap().unwrap();
+    let root = doc.get_node(root_id).unwrap();
+    let layout = root
+        .element_data()
+        .unwrap()
+        .inline_layout_data
+        .as_ref()
+        .unwrap();
+    let mut rectangles = Vec::new();
+    layout.for_each_selection_rect(0, layout.text_len(), |rect| rectangles.push(rect));
+    let first = rectangles
+        .first()
+        .expect("text should have selection geometry");
+    let bounds = doc.get_client_bounding_rect(root_id).unwrap();
+    let x = (bounds.x + (first.x0 + first.x1) / 2.0) as f32;
+    let y = (bounds.y + (first.y0 + first.y1) / 2.0) as f32;
+    assert!(doc.find_text_position(x, y).is_some());
+}
+
 /// Regression test: dragging across "Outer" (wrapped in an anonymous block)
 /// must extend the selection, even though the pointer event's canonical
 /// target (the body) differs from the precise hit node (the anonymous block).
@@ -119,6 +170,18 @@ fn drag_selection_within_anonymous_block_wrapped_text() {
         !selected.is_empty() && "Outer".contains(&selected),
         "expected a non-empty part of \"Outer\" to be selected, got {selected:?}"
     );
+
+    let (root_id, start, end) = doc.get_text_selection_ranges()[0];
+    let root = doc.get_node(root_id).unwrap();
+    let layout = root
+        .element_data()
+        .unwrap()
+        .inline_layout_data
+        .as_ref()
+        .unwrap();
+    let mut rects = 0;
+    layout.for_each_selection_rect(start, end, |_| rects += 1);
+    assert!(rects > 0, "selected text should have highlight geometry");
 }
 
 /// Dragging from the anonymous-block-wrapped "Outer" into the "Inner" div
diff --git a/tests/blitz-tests/tests/text_transform.rs b/tests/blitz-tests/tests/text_transform.rs
index 9ce45fe51b..8c7193490e 100644
--- a/tests/blitz-tests/tests/text_transform.rs
+++ b/tests/blitz-tests/tests/text_transform.rs
@@ -1,3 +1,4 @@
+use blitz_dom::text::InlineText as _;
 use blitz_test_harness::Harness;
 
 fn layout_text(html: &str) -> String {
@@ -11,8 +12,8 @@ fn layout_text(html: &str) -> String {
         .inline_layout_data
         .as_ref()
         .unwrap()
-        .text
-        .clone()
+        .text()
+        .to_string()
 }
 
 #[test]
diff --git a/tests/blitz-tests/tests/whitespace_modes.rs b/tests/blitz-tests/tests/whitespace_modes.rs
index cb284b6ada..42e74a39d3 100644
--- a/tests/blitz-tests/tests/whitespace_modes.rs
+++ b/tests/blitz-tests/tests/whitespace_modes.rs
@@ -1,122 +1,130 @@
-use blitz_dom::{BaseDocument, node::TextLayout};
-use blitz_test_harness::Harness;
+//! Parley white-box tests: they read the Parley layout of an inline formatting context.
 
-fn inline<'a>(doc: &'a BaseDocument, selector: &str) -> &'a TextLayout {
-    let id = doc.query_selector(selector).unwrap().unwrap();
-    doc.get_node(id)
-        .unwrap()
-        .element_data()
-        .unwrap()
-        .inline_layout_data
-        .as_ref()
-        .unwrap()
-}
+blitz_dom::cfg_text_backend! {
+    parley => {
+        use blitz_dom::text::InlineText as _;
+        use blitz_dom::{BaseDocument, node::TextLayout};
+        use blitz_test_harness::Harness;
 
-#[test]
-fn pre_line_collapses_across_spans_and_preserves_breaks() {
-    let harness = Harness::from_html(
-        "<div id='test' style='white-space:pre-line'>a \t <span> b \t\n c </span> d<br> e  f</div>",
-    );
-    let doc = harness.base();
-    let text = inline(&doc, "#test");
-    assert_eq!(text.text, "a b\nc d\ne f");
-    assert_eq!(text.layout.len(), 3);
-    assert!(text.layout.full_width() > 0.);
-}
+        fn inline<'a>(doc: &'a BaseDocument, selector: &str) -> &'a TextLayout {
+            let id = doc.query_selector(selector).unwrap().unwrap();
+            doc.get_node(id)
+                .unwrap()
+                .element_data()
+                .unwrap()
+                .inline_layout_data
+                .as_ref()
+                .unwrap()
+        }
 
-#[test]
-fn preserved_spans_and_br_restore_parent_collapsing() {
-    let harness = Harness::from_html(
-        "<div id='test'><span style='white-space:pre'>x  y<br>z  w</span>  q</div>",
-    );
-    let doc = harness.base();
-    let text = inline(&doc, "#test");
-    assert_eq!(text.text, "x  y\nz  w q");
-    assert_eq!(text.layout.len(), 2);
-}
+        #[test]
+        fn pre_line_collapses_across_spans_and_preserves_breaks() {
+            let harness = Harness::from_html(
+                "<div id='test' style='white-space:pre-line'>a \t <span> b \t\n c </span> d<br> e  f</div>",
+            );
+            let doc = harness.base();
+            let text = inline(&doc, "#test");
+            assert_eq!(text.text(), "a b\nc d\ne f");
+            assert_eq!(text.layout.len(), 3);
+            assert!(text.layout.full_width() > 0.);
+        }
 
-#[test]
-fn display_contents_preserves_its_whitespace_mode() {
-    let harness = Harness::from_html(
-        "<div id='test'>a<span style='display:contents;white-space:pre'>b  c</span> d  e</div>",
-    );
-    let doc = harness.base();
-    assert_eq!(inline(&doc, "#test").text, "ab  c d e");
-}
+        #[test]
+        fn preserved_spans_and_br_restore_parent_collapsing() {
+            let harness = Harness::from_html(
+                "<div id='test'><span style='white-space:pre'>x  y<br>z  w</span>  q</div>",
+            );
+            let doc = harness.base();
+            let text = inline(&doc, "#test");
+            assert_eq!(text.text(), "x  y\nz  w q");
+            assert_eq!(text.layout.len(), 2);
+        }
 
-#[test]
-fn display_contents_keeps_wrapping_independent_from_collapsing() {
-    for (mode, lines) in [("pre", 1), ("nowrap", 1), ("pre-wrap", 2), ("normal", 2)] {
-        let harness = Harness::from_html(&format!(
-            "<div id='test' style='width:1px'><span style='display:contents;white-space:{mode}'>one two</span></div>",
-        ));
-        let doc = harness.base();
-        assert_eq!(inline(&doc, "#test").layout.len(), lines, "{mode}");
-    }
-}
+        #[test]
+        fn display_contents_preserves_its_whitespace_mode() {
+            let harness = Harness::from_html(
+                "<div id='test'>a<span style='display:contents;white-space:pre'>b  c</span> d  e</div>",
+            );
+            let doc = harness.base();
+            assert_eq!(inline(&doc, "#test").text(), "ab  c d e");
+        }
 
-#[test]
-fn out_of_flow_placeholder_retains_its_text_offset() {
-    let harness = Harness::from_html(
-        "<div id='test'>un<span style='position:absolute'>box</span>broken</div>",
-    );
-    let doc = harness.base();
-    let text = inline(&doc, "#test");
-    assert_eq!(text.text, "unbroken");
-    assert_eq!(text.layout.inline_boxes().len(), 1);
-    assert_eq!(text.layout.inline_boxes().next().unwrap().index, 2);
-    assert_eq!(text.layout.len(), 1);
-}
+        #[test]
+        fn display_contents_keeps_wrapping_independent_from_collapsing() {
+            for (mode, lines) in [("pre", 1), ("nowrap", 1), ("pre-wrap", 2), ("normal", 2)] {
+                let harness = Harness::from_html(&format!(
+                    "<div id='test' style='width:1px'><span style='display:contents;white-space:{mode}'>one two</span></div>",
+                ));
+                let doc = harness.base();
+                assert_eq!(inline(&doc, "#test").layout.len(), lines, "{mode}");
+            }
+        }
 
-#[test]
-fn break_spaces_wraps_preserved_spaces_across_spans_and_br() {
-    for display in ["inline", "contents"] {
-        let harness = Harness::from_html(&format!(
-            "<div id='test' style='width:1px;white-space:break-spaces'>a <span style='display:{display}'>  </span>b<br>  c</div>",
-        ));
-        let doc = harness.base();
-        let text = inline(&doc, "#test");
-        assert_eq!(text.text, "a   b\n  c");
-        let lines: Vec<_> = text
-            .layout
-            .lines()
-            .map(|line| &text.text[line.text_range()])
-            .collect();
-        assert_eq!(lines, ["a ", " ", " ", "b\n", " ", " ", "c"]);
-        for line in text.layout.lines() {
-            assert_eq!(line.metrics().hanging_advance, 0.);
+        #[test]
+        fn out_of_flow_placeholder_retains_its_text_offset() {
+            let harness = Harness::from_html(
+                "<div id='test'>un<span style='position:absolute'>box</span>broken</div>",
+            );
+            let doc = harness.base();
+            let text = inline(&doc, "#test");
+            assert_eq!(text.text(), "unbroken");
+            assert_eq!(text.layout.inline_boxes().len(), 1);
+            assert_eq!(text.layout.inline_boxes().next().unwrap().index, 2);
+            assert_eq!(text.layout.len(), 1);
         }
-    }
-}
 
-#[test]
-fn display_contents_break_spaces_restores_parent_collapsing() {
-    let harness = Harness::from_html(
-        "<div id='test'>a <span style='display:contents;white-space:break-spaces'>  b<br>  c</span>  d</div>",
-    );
-    let doc = harness.base();
-    let text = inline(&doc, "#test");
-    assert_eq!(text.text, "a   b\n  c d");
-    assert_eq!(text.layout.len(), 2);
-}
+        #[test]
+        fn break_spaces_wraps_preserved_spaces_across_spans_and_br() {
+            for display in ["inline", "contents"] {
+                let harness = Harness::from_html(&format!(
+                    "<div id='test' style='width:1px;white-space:break-spaces'>a <span style='display:{display}'>  </span>b<br>  c</div>",
+                ));
+                let doc = harness.base();
+                let text = inline(&doc, "#test");
+                assert_eq!(text.text(), "a   b\n  c");
+                let lines: Vec<_> = text
+                    .layout
+                    .lines()
+                    .map(|line| &text.text()[line.text_range()])
+                    .collect();
+                assert_eq!(lines, ["a ", " ", " ", "b\n", " ", " ", "c"]);
+                for line in text.layout.lines() {
+                    assert_eq!(line.metrics().hanging_advance, 0.);
+                }
+            }
+        }
 
-#[test]
-fn break_spaces_includes_whitespace_in_intrinsic_widths_and_alignment() {
-    let harness = Harness::from_html(
-        "<style>div{white-space:break-spaces;text-align:right;width:200px}</style>\
-         <div id='one'>a </div><div id='two'>a  </div>\
-         <div id='nowrap' style='text-wrap-mode:nowrap'>a  </div>",
-    );
-    let doc = harness.base();
-    let one = &inline(&doc, "#one").layout;
-    let two = &inline(&doc, "#two").layout;
-    let nowrap = &inline(&doc, "#nowrap").layout;
-    let one_widths = one.calculate_content_widths();
-    let two_widths = two.calculate_content_widths();
-    assert!(two_widths.max > one_widths.max);
-    assert!((two_widths.min - one_widths.max).abs() < 0.01);
-    assert!((nowrap.calculate_content_widths().min - two_widths.max).abs() < 0.01);
-    let line = two.get(0).unwrap();
-    assert!((line.metrics().offset + line.metrics().advance - 200.).abs() < 0.01);
-    assert_eq!(line.metrics().hanging_advance, 0.);
+        #[test]
+        fn display_contents_break_spaces_restores_parent_collapsing() {
+            let harness = Harness::from_html(
+                "<div id='test'>a <span style='display:contents;white-space:break-spaces'>  b<br>  c</span>  d</div>",
+            );
+            let doc = harness.base();
+            let text = inline(&doc, "#test");
+            assert_eq!(text.text(), "a   b\n  c d");
+            assert_eq!(text.layout.len(), 2);
+        }
+
+        #[test]
+        fn break_spaces_includes_whitespace_in_intrinsic_widths_and_alignment() {
+            let harness = Harness::from_html(
+                "<style>div{white-space:break-spaces;text-align:right;width:200px}</style>\
+                 <div id='one'>a </div><div id='two'>a  </div>\
+                 <div id='nowrap' style='text-wrap-mode:nowrap'>a  </div>",
+            );
+            let doc = harness.base();
+            let one = &inline(&doc, "#one").layout;
+            let two = &inline(&doc, "#two").layout;
+            let nowrap = &inline(&doc, "#nowrap").layout;
+            let one_widths = one.calculate_content_widths();
+            let two_widths = two.calculate_content_widths();
+            assert!(two_widths.max > one_widths.max);
+            assert!((two_widths.min - one_widths.max).abs() < 0.01);
+            assert!((nowrap.calculate_content_widths().min - two_widths.max).abs() < 0.01);
+            let line = two.get(0).unwrap();
+            assert!((line.metrics().offset + line.metrics().advance - 200.).abs() < 0.01);
+            assert_eq!(line.metrics().hanging_advance, 0.);
+        }
+    }
+    winkin => {}
 }
diff --git a/wpt/runner/Cargo.toml b/wpt/runner/Cargo.toml
index 337c23ede1..514b774db3 100644
--- a/wpt/runner/Cargo.toml
+++ b/wpt/runner/Cargo.toml
@@ -7,16 +7,19 @@ rust-version.workspace = true
 publish = false
 
 [features]
-default = ["cpu"]
+default = ["cpu", "parley"]
 gpu = ["dep:anyrender_vello"]
 cpu = ["dep:anyrender_vello_cpu"]
+# The text backend: Parley (the default) or winkin. With both, Parley is used.
+parley = ["blitz-dom/parley", "blitz-paint/parley", "blitz-html/parley", "blitz-vibey-script/parley"]
+winkin = ["blitz-dom/winkin", "blitz-paint/winkin", "blitz-html/winkin", "blitz-vibey-script/winkin"]
 
 [dependencies]
-blitz-dom = { workspace = true, features = ["svg", "floats", "system-fonts", "woff", "complex-scripts", "text-transform-icu", "writing-mode"] }
+blitz-dom = { workspace = true, features = ["svg", "floats", "system-fonts", "woff", "complex-scripts", "text-transform-icu", "writing-mode", "file-input"] }
 blitz-html = {workspace = true }
 blitz-vibey-script = { workspace = true }
 blitz-traits = { workspace = true }
-blitz-paint = { workspace = true, features = ["default"] }
+blitz-paint = { workspace = true, features = ["svg"] }
 anyrender = { workspace = true }
 anyrender_vello = { workspace = true, optional = true }
 anyrender_vello_cpu = { workspace = true, optional = true }
@@ -27,7 +30,6 @@ style_traits = { workspace = true }
 markup5ever = { workspace = true }
 html5ever = { workspace = true }
 roxmltree = "0.21"
-parley = { workspace = true }
 peniko = { workspace = true }
 image = { workspace = true, features = ["png"] }
 url = { workspace = true }
diff --git a/wpt/runner/src/main.rs b/wpt/runner/src/main.rs
index e11dad02ea..00d8a5bb63 100644
--- a/wpt/runner/src/main.rs
+++ b/wpt/runner/src/main.rs
@@ -4,11 +4,11 @@ use anyrender_vello::VelloImageRenderer;
 #[cfg(feature = "cpu")]
 use anyrender_vello_cpu::VelloCpuImageRenderer as VelloImageRenderer;
 use atomic_float::AtomicF64;
+use blitz_dom::FontContext;
 use blitz_dom::net::Resource;
 use blitz_traits::navigation::{DummyNavigationProvider, NavigationProvider};
 use blitz_traits::shell::{ColorScheme, Viewport};
 use panic_backtrace::StashedPanicInfo;
-use parley::FontContext;
 use report::{generate_expectations, generate_report};
 use supports_hyperlinks::Stream as HyperlinkStream;
 use terminal_link::Link;
@@ -522,7 +522,9 @@ fn main() {
     let num = AtomicU32::new(0);
     let completed_num = AtomicU32::new(0);
 
-    let base_font_context = parley::FontContext::default();
+    // Listing the platform's fonts reads every installed font file: list them once, and hand
+    // every test a clone.
+    let base_font_context = FontContext::default();
 
     let thread_state: ThreadLocal<RefCell<ThreadCtx>> = ThreadLocal::new();
     let worker_counter = AtomicUsize::new(0);
diff --git a/wpt/runner/src/test_runners/attr_test.rs b/wpt/runner/src/test_runners/attr_test.rs
index 5b4e81a9c2..c7d96955ec 100644
--- a/wpt/runner/src/test_runners/attr_test.rs
+++ b/wpt/runner/src/test_runners/attr_test.rs
@@ -201,7 +201,7 @@ pub fn check_node_layout(node: &Node) -> Vec<String> {
                         "data-expected-display" => {
                             let display = node
                                 .primary_styles()
-                                .map(|styles| styles.clone_display().to_css_string())
+                                .map(|styles| styles.slow_clone_display().to_css_string())
                                 .unwrap_or_default();
                             if display == **value {
                                 Ok(())