blitz-pdf 0.1.5 → 0.1.6

package/README.md

@@ -396,6 +396,38 @@ Input limits: 16 MiB HTML, 64 MiB supplied assets, 64 MiB attachments, 32 MiB su
 resource requests. These are practical limits, not a complete sandbox; isolate
 untrusted documents in a terminable worker with application limits.
 
+### Unicode text
+
+HTML strings and UTF-8 assets preserve the text produced by layout, including
+non-Latin scripts, supplementary-plane characters, combining marks, and
+ligatures. Visually identical sequences such as `é` / `é`, `fi` / `fi`, and
+composed / decomposed Hangul can coexist in one document. Their source mappings
+remain separate in body text, form values, repeated table headers, margin
+templates, and page numbers. CSS whitespace handling and `text-transform`
+still apply normally.
+
+PDF Unicode maps and `ActualText` spans preserve the original sequences when
+multiple characters share a glyph or a cluster uses multiple glyphs. Accurate
+copy/paste requires a reader that supports `ActualText`; extractors that ignore
+it, including PDF.js, can normalize ligatures or repeat combining clusters.
+The Unicode regression suite verifies extraction with Poppler's `pdftotext`.
+
+Unicode support does not imply that one font covers every character. There is
+no system-font discovery or automatic font download. For example, provide a
+static CJK font and select its family to render Chinese, Japanese, or Korean:
+
+```js
+import { readFile } from "node:fs/promises";
+
+const pdf = await renderPdf(
+  '<p style="font-family: \'Noto Sans CJK SC\'">中文 日本語 한국어</p>',
+  { fonts: [await readFile("NotoSansCJKsc-Regular.otf")] },
+);
+```
+
+Use `@font-face` and `assets` for a CSS family alias. Fonts must contain the
+required glyphs and permit embedding; missing glyphs still reject PDF/A output.
+
 ## PDF/A-3 conformance
 
 Every successful render targets **PDF/A-3u (ISO 19005-3, level U)**. The PDF 1.7
@@ -606,6 +638,8 @@ transition rule. [§ 14 UStG](https://www.gesetze-im-internet.de/ustg_1980/__14.
 
 Install Node.js 22.13+ for development tooling, Bun, and rustup. The repository
 pins Rust 1.99.0 and its WASM target in `rust-toolchain.toml`.
+The Unicode integration tests also require Poppler's `pdftotext` (`brew install
+poppler` on macOS or `apt-get install poppler-utils` on Debian/Ubuntu).
 
 ```sh
 npm ci
@@ -625,11 +659,12 @@ the tarball; it does not publish. Install locally using
 
 The pinned Stylo source in `vendor/stylo` enables paged-media properties in the
 Servo build. `vendor/krilla` adds custom XMP schema support and independent
-modification dates. `vendor/README.md` records both patches; the sources and
-licenses are included in the npm archive.
+modification dates. `vendor/blitz-paint` exposes source layouts in paint order
+so Unicode mappings retain each run's identity. `vendor/README.md` records the
+patches; the sources and licenses are included in the npm archive.
 
 `bun test` exercises the compiled module through its public package export. Tests
-extract Unicode with PDF.js and inspect embedded fonts, vector paths, absence
+extract Unicode with PDF.js and Poppler and inspect embedded fonts, vector paths, absence
 of page images, dimensions, pagination, assets, media queries, and error recovery.
 For browser verification, run `npm run test:browser` and open
 `http://127.0.0.1:4173`. CI builds WASM, runs Bun and Node tests, validates the

package/THIRD_PARTY_NOTICES.md

@@ -20,6 +20,8 @@ independent modification dates; its source and MIT/Apache-2.0 licenses are in
 `vendor/krilla`. Blitz's DOM crate is patched for fractional PDF geometry,
 table-cell sizing/spacing, anonymous table wrappers, and paragraph margin
 collapse; its source and MIT/Apache-2.0 licenses are in `vendor/blitz-dom`.
+Blitz's paint crate exposes source-layout notifications for Unicode PDF text;
+its source and MIT/Apache-2.0 licenses are in `vendor/blitz-paint`.
 `vendor/README.md` lists these patches. Other dependencies are used without
 source modifications.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blitz-pdf",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Render HTML and CSS to PDF with Blitz and WebAssembly in Node.js, Bun, and browsers.",
   "type": "module",
   "license": "MIT",

package/vendor/README.md

@@ -75,3 +75,27 @@ against rebuilt WASM. Layout tests check physical margins, fractional viewport
 widths, header/footer geometry, table line spacing, descendant alignment, empty
 paragraphs, explicit empty-box dimensions, exact page-boundary fits, constrained
 table columns, anonymous cells, and inheritance after CSS page-size changes.
+
+# Blitz Unicode paint notifications
+
+`blitz-paint/` contains `packages/blitz-paint` from Blitz revision
+`e72650a6e67941852fddf025295cfee30c39ea32`, with its MIT/Apache-2.0 licenses.
+Its standalone manifest expands the upstream workspace dependencies and pins
+sibling crates to the same revision.
+
+- `src/lib.rs`: add the opt-in `TextObserver` and `paint_scene_with_text` API.
+  The original `paint_scene` entry point keeps its existing behavior.
+- `src/render.rs`: notify the observer immediately before painting inline text,
+  input/textarea text, and outside list markers; forward it to subdocuments.
+  The notifications supply the exact Parley layout and source string in paint
+  order, including visibility and stacking order decisions.
+
+The PDF renderer associates the observed runs with individual scene commands
+and checks that their glyphs match. It retains this immutable association when
+replaying pages or repeated table fragments. It no longer uses glyph shapes as
+document-wide source-text identities: `fi` and `fi`, for example, legitimately
+share a shape while requiring different Unicode mappings.
+
+When upgrading Blitz, retain these notifications at all text-paint boundaries
+and run `tests/unicode.test.ts` (requires Poppler), the existing rendering,
+pagination, and template suites, and `npm run test:pdfa` on the rebuilt WASM.

package/vendor/blitz-paint/Cargo.toml

@@ -0,0 +1,50 @@
+[package]
+name = "blitz-paint"
+description = "Paint a Blitz Document using anyrender"
+documentation = "https://docs.rs/blitz-paint"
+version = "0.3.0-beta.3"
+license = "MIT OR Apache-2.0"
+homepage = "https://github.com/dioxuslabs/blitz"
+repository = "https://github.com/dioxuslabs/blitz"
+categories = ["gui"]
+edition = "2024"
+rust-version = "1.91.0"
+
+[features]
+default = ["svg"]
+tracing = ["dep:tracing"]
+svg = ["dep:anyrender_svg", "dep:usvg", "blitz-dom/svg"]
+custom-widget = ["blitz-dom/custom-widget"]
+font-embolden = []
+apple-font-embolden = []
+# Paint overlay scrollbar thumbs on scroll containers, and enable their
+# drag/hover interaction in blitz-dom (off by default while the feature
+# matures).
+scrollbars = ["blitz-dom/scrollbars"]
+
+[dependencies]
+# Blitz dependencies
+anyrender = { version = "0.14.0" }
+anyrender_svg = { version = "0.15.0", optional = true }
+blitz-traits = { version = "=0.3.0-beta.3", default-features = false, git = "https://github.com/DioxusLabs/blitz", rev = "e72650a6e67941852fddf025295cfee30c39ea32" }
+blitz-dom = { version = "=0.3.0-beta.3", default-features = false, git = "https://github.com/DioxusLabs/blitz", rev = "e72650a6e67941852fddf025295cfee30c39ea32" }
+
+# Servo dependencies
+style = { version = "0.22.0", package = "stylo" }
+euclid = { version = "0.22" }
+
+# DioxusLabs dependencies
+taffy = { git = "https://github.com/DioxusLabs/taffy", rev = "6c2106e3df79493d304f954dc2cd4a4a382981d3", default-features = false, features = ["std", "flexbox", "flexbox_balance", "grid", "block_layout", "content_size", "calc", "detailed_layout_info"] }
+
+# Linebender + WGPU dependencies
+parley = { version = "0.12", default-features = false, features = ["std", "bytemuck"] }
+skrifa = { version = "0.44", default-features = false, features = ["std"] }
+color = { version = "0.3" }
+peniko = { version = "0.6.0" }
+kurbo = { version = "0.13.1" }
+usvg = { version = "0.48.1", optional = true }
+
+# Other dependencies
+bytemuck = { version = "1" }
+smallvec = { version = "1" }
+tracing = { version = "0.1.40", optional = true }

package/vendor/blitz-paint/LICENSE-APACHE

@@ -0,0 +1,176 @@
+                              Apache License
+                        Version 2.0, January 2004
+                     http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+
+   "License" shall mean the terms and conditions for use, reproduction,
+   and distribution as defined by Sections 1 through 9 of this document.
+
+   "Licensor" shall mean the copyright owner or entity authorized by
+   the copyright owner that is granting the License.
+
+   "Legal Entity" shall mean the union of the acting entity and all
+   other entities that control, are controlled by, or are under common
+   control with that entity. For the purposes of this definition,
+   "control" means (i) the power, direct or indirect, to cause the
+   direction or management of such entity, whether by contract or
+   otherwise, or (ii) ownership of fifty percent (50%) or more of the
+   outstanding shares, or (iii) beneficial ownership of such entity.
+
+   "You" (or "Your") shall mean an individual or Legal Entity
+   exercising permissions granted by this License.
+
+   "Source" form shall mean the preferred form for making modifications,
+   including but not limited to software source code, documentation
+   source, and configuration files.
+
+   "Object" form shall mean any form resulting from mechanical
+   transformation or translation of a Source form, including but
+   not limited to compiled object code, generated documentation,
+   and conversions to other media types.
+
+   "Work" shall mean the work of authorship, whether in Source or
+   Object form, made available under the License, as indicated by a
+   copyright notice that is included in or attached to the work
+   (an example is provided in the Appendix below).
+
+   "Derivative Works" shall mean any work, whether in Source or Object
+   form, that is based on (or derived from) the Work and for which the
+   editorial revisions, annotations, elaborations, or other modifications
+   represent, as a whole, an original work of authorship. For the purposes
+   of this License, Derivative Works shall not include works that remain
+   separable from, or merely link (or bind by name) to the interfaces of,
+   the Work and Derivative Works thereof.
+
+   "Contribution" shall mean any work of authorship, including
+   the original version of the Work and any modifications or additions
+   to that Work or Derivative Works thereof, that is intentionally
+   submitted to Licensor for inclusion in the Work by the copyright owner
+   or by an individual or Legal Entity authorized to submit on behalf of
+   the copyright owner. For the purposes of this definition, "submitted"
+   means any form of electronic, verbal, or written communication sent
+   to the Licensor or its representatives, including but not limited to
+   communication on electronic mailing lists, source code control systems,
+   and issue tracking systems that are managed by, or on behalf of, the
+   Licensor for the purpose of discussing and improving the Work, but
+   excluding communication that is conspicuously marked or otherwise
+   designated in writing by the copyright owner as "Not a Contribution."
+
+   "Contributor" shall mean Licensor and any individual or Legal Entity
+   on behalf of whom a Contribution has been received by Licensor and
+   subsequently incorporated within the Work.
+
+2. Grant of Copyright License. Subject to the terms and conditions of
+   this License, each Contributor hereby grants to You a perpetual,
+   worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+   copyright license to reproduce, prepare Derivative Works of,
+   publicly display, publicly perform, sublicense, and distribute the
+   Work and such Derivative Works in Source or Object form.
+
+3. Grant of Patent License. Subject to the terms and conditions of
+   this License, each Contributor hereby grants to You a perpetual,
+   worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+   (except as stated in this section) patent license to make, have made,
+   use, offer to sell, sell, import, and otherwise transfer the Work,
+   where such license applies only to those patent claims licensable
+   by such Contributor that are necessarily infringed by their
+   Contribution(s) alone or by combination of their Contribution(s)
+   with the Work to which such Contribution(s) was submitted. If You
+   institute patent litigation against any entity (including a
+   cross-claim or counterclaim in a lawsuit) alleging that the Work
+   or a Contribution incorporated within the Work constitutes direct
+   or contributory patent infringement, then any patent licenses
+   granted to You under this License for that Work shall terminate
+   as of the date such litigation is filed.
+
+4. Redistribution. You may reproduce and distribute copies of the
+   Work or Derivative Works thereof in any medium, with or without
+   modifications, and in Source or Object form, provided that You
+   meet the following conditions:
+
+   (a) You must give any other recipients of the Work or
+       Derivative Works a copy of this License; and
+
+   (b) You must cause any modified files to carry prominent notices
+       stating that You changed the files; and
+
+   (c) You must retain, in the Source form of any Derivative Works
+       that You distribute, all copyright, patent, trademark, and
+       attribution notices from the Source form of the Work,
+       excluding those notices that do not pertain to any part of
+       the Derivative Works; and
+
+   (d) If the Work includes a "NOTICE" text file as part of its
+       distribution, then any Derivative Works that You distribute must
+       include a readable copy of the attribution notices contained
+       within such NOTICE file, excluding those notices that do not
+       pertain to any part of the Derivative Works, in at least one
+       of the following places: within a NOTICE text file distributed
+       as part of the Derivative Works; within the Source form or
+       documentation, if provided along with the Derivative Works; or,
+       within a display generated by the Derivative Works, if and
+       wherever such third-party notices normally appear. The contents
+       of the NOTICE file are for informational purposes only and
+       do not modify the License. You may add Your own attribution
+       notices within Derivative Works that You distribute, alongside
+       or as an addendum to the NOTICE text from the Work, provided
+       that such additional attribution notices cannot be construed
+       as modifying the License.
+
+   You may add Your own copyright statement to Your modifications and
+   may provide additional or different license terms and conditions
+   for use, reproduction, or distribution of Your modifications, or
+   for any such Derivative Works as a whole, provided Your use,
+   reproduction, and distribution of the Work otherwise complies with
+   the conditions stated in this License.
+
+5. Submission of Contributions. Unless You explicitly state otherwise,
+   any Contribution intentionally submitted for inclusion in the Work
+   by You to the Licensor shall be under the terms and conditions of
+   this License, without any additional terms or conditions.
+   Notwithstanding the above, nothing herein shall supersede or modify
+   the terms of any separate license agreement you may have executed
+   with Licensor regarding such Contributions.
+
+6. Trademarks. This License does not grant permission to use the trade
+   names, trademarks, service marks, or product names of the Licensor,
+   except as required for reasonable and customary use in describing the
+   origin of the Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty. Unless required by applicable law or
+   agreed to in writing, Licensor provides the Work (and each
+   Contributor provides its Contributions) on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+   implied, including, without limitation, any warranties or conditions
+   of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+   PARTICULAR PURPOSE. You are solely responsible for determining the
+   appropriateness of using or redistributing the Work and assume any
+   risks associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability. In no event and under no legal theory,
+   whether in tort (including negligence), contract, or otherwise,
+   unless required by applicable law (such as deliberate and grossly
+   negligent acts) or agreed to in writing, shall any Contributor be
+   liable to You for damages, including any direct, indirect, special,
+   incidental, or consequential damages of any character arising as a
+   result of this License or out of the use or inability to use the
+   Work (including but not limited to damages for loss of goodwill,
+   work stoppage, computer failure or malfunction, or any and all
+   other commercial damages or losses), even if such Contributor
+   has been advised of the possibility of such damages.
+
+9. Accepting Warranty or Additional Liability. While redistributing
+   the Work or Derivative Works thereof, You may choose to offer,
+   and charge a fee for, acceptance of support, warranty, indemnity,
+   or other liability obligations and/or rights consistent with this
+   License. However, in accepting such obligations, You may act only
+   on Your own behalf and on Your sole responsibility, not on behalf
+   of any other Contributor, and only if You agree to indemnify,
+   defend, and hold each Contributor harmless for any liability
+   incurred by, or claims asserted against, such Contributor by reason
+   of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS

package/vendor/blitz-paint/LICENSE-MIT

@@ -0,0 +1,23 @@
+Permission is hereby granted, free of charge, to any
+person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the
+Software without restriction, including without
+limitation the rights to use, copy, modify, merge,
+publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software
+is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice
+shall be included in all copies or substantial portions
+of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
+ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT
+SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR
+IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+DEALINGS IN THE SOFTWARE.

package/vendor/blitz-paint/src/color.rs

@@ -0,0 +1,66 @@
+use color::{AlphaColor, DynamicColor, Srgb};
+use style::color::AbsoluteColor;
+
+pub type Color = AlphaColor<Srgb>;
+
+pub trait ToColorColor {
+    /// Converts a color into the `AlphaColor<Srgb>` type from the `color` crate
+    fn as_srgb_color(&self) -> Color;
+
+    /// Converts a color into the `DynamicColor` type from the `color` crate
+    fn as_dynamic_color(&self) -> DynamicColor;
+}
+impl ToColorColor for AbsoluteColor {
+    fn as_srgb_color(&self) -> Color {
+        Color::new(
+            *self
+                .to_color_space(style::color::ColorSpace::Srgb)
+                .raw_components(),
+        )
+    }
+
+    fn as_dynamic_color(&self) -> DynamicColor {
+        DynamicColor::from_alpha_color(self.as_srgb_color())
+    }
+}
+
+/// The WCAG contrast ratio (>= 1) between two colours, matching Chrome's
+/// `color_utils::GetContrastRatio`.
+pub(crate) fn contrast_ratio(a: Color, b: Color) -> f32 {
+    // `relative_luminance` is defined on `OpaqueColor`; discard the alpha (which
+    // it ignores anyway) with `split`.
+    let la = a.split().0.relative_luminance() + 0.05;
+    let lb = b.split().0.relative_luminance() + 0.05;
+    if la > lb { la / lb } else { lb / la }
+}
+
+/// Blend `color` towards black or white (whichever has contrast headroom)
+/// just far enough to reach `target` contrast with the original, so the
+/// result is visibly distinct for any input. Transparent colours pass
+/// through unchanged; alpha is preserved.
+#[cfg(feature = "scrollbars")]
+pub(crate) fn blend_for_contrast(color: Color, target: f32) -> Color {
+    let alpha = color.components[3];
+    if alpha == 0.0 {
+        return color;
+    }
+    let white = Color::new([1.0, 1.0, 1.0, alpha]);
+    let black = Color::new([0.0, 0.0, 0.0, alpha]);
+    let pole = if contrast_ratio(color, white) >= contrast_ratio(color, black) {
+        white
+    } else {
+        black
+    };
+    // Contrast grows monotonically towards the pole: bisect the blend
+    // fraction to land just past the target ratio.
+    let (mut lo, mut hi) = (0.0_f32, 1.0_f32);
+    for _ in 0..8 {
+        let mid = (lo + hi) / 2.0;
+        if contrast_ratio(color, color.lerp_rect(pole, mid)) < target {
+            lo = mid;
+        } else {
+            hi = mid;
+        }
+    }
+    color.lerp_rect(pole, hi)
+}

package/vendor/blitz-paint/src/debug_overlay.rs

@@ -0,0 +1,168 @@
+use anyrender::PaintScene;
+use blitz_dom::{BaseDocument, NodeId};
+use kurbo::{Affine, Rect, Vec2};
+
+use crate::color::Color;
+
+/// Renders a layout debugging overlay which visualises the content size, padding and border
+/// of the node with a transparent overlay.
+pub(crate) fn render_debug_overlay(
+    scene: &mut impl PaintScene,
+    dom: &BaseDocument,
+    node_id: NodeId,
+    scale: f64,
+    initial_x: f64,
+    initial_y: f64,
+) {
+    // Non-atomic inline elements have no layout box of their own: they are laid
+    // out as style spans within an inline root's text layout and may fragment
+    // across multiple line boxes. Highlight each fragment's content box.
+    if let Some(rects) = dom.as_ref().inline_fragment_rects(node_id) {
+        let fill_color = Color::from_rgba8(66, 144, 245, 128); // blue
+        for r in rects {
+            let rect = Rect::new(0.0, 0.0, r.width * scale, r.height * scale);
+            let translation = Vec2::new(r.x * scale + initial_x, r.y * scale + initial_y);
+            scene.fill(
+                peniko::Fill::NonZero,
+                Affine::translate(translation),
+                fill_color,
+                None,
+                &rect,
+            );
+        }
+        return;
+    }
+
+    let viewport_scroll = dom.as_ref().viewport_scroll();
+    let mut node = &dom.as_ref().tree()[node_id];
+
+    let taffy::Layout {
+        size,
+        border,
+        padding,
+        margin,
+        ..
+    } = *node.final_layout();
+    let taffy::Size { width, height } = size;
+
+    let padding_border = padding + border;
+    let scaled_pb = padding_border.map(|v| f64::from(v) * scale);
+    let scaled_padding = padding.map(|v| f64::from(v) * scale);
+    let scaled_border = border.map(|v| f64::from(v) * scale);
+    let scaled_margin = margin.map(|v| f64::from(v) * scale);
+
+    let content_width = width - padding_border.left - padding_border.right;
+    let content_height = height - padding_border.top - padding_border.bottom;
+
+    let taffy::Point { x, y } = node.final_layout().location;
+
+    let mut abs_x = x;
+    let mut abs_y = y;
+    // A fixed box whose containing block is the root element does not scroll
+    // with it (nor with the viewport).
+    let mut fixed_to_viewport = false;
+    while let Some(parent_id) = node.containing_block() {
+        let child_is_fixed = node.taffy_position() == taffy::Position::Fixed;
+        node = &dom.as_ref().tree()[parent_id];
+        fixed_to_viewport = child_is_fixed && node.containing_block().is_none();
+        let taffy::Point { x, y } = node.final_layout().location;
+        abs_x += x;
+        abs_y += y;
+        if !fixed_to_viewport {
+            abs_x -= node.scroll_offset().x as f32;
+            abs_y -= node.scroll_offset().y as f32;
+        }
+    }
+
+    if !fixed_to_viewport {
+        abs_x -= viewport_scroll.x as f32;
+        abs_y -= viewport_scroll.y as f32;
+    }
+
+    // Note: initial_x/initial_y are already in physical (scaled) pixels so they must be added after scaling
+    // the other values
+    let abs_x = f64::from(abs_x) * scale + initial_x;
+    let abs_y = f64::from(abs_y) * scale + initial_y;
+    let width = f64::from(width) * scale;
+    let height = f64::from(height) * scale;
+    let content_width = f64::from(content_width) * scale;
+    let content_height = f64::from(content_height) * scale;
+
+    // Fill content box blue
+    let base_translation = Vec2::new(abs_x, abs_y);
+    let transform = Affine::translate(base_translation + Vec2::new(scaled_pb.left, scaled_pb.top));
+    let rect = Rect::new(0.0, 0.0, content_width, content_height);
+    let fill_color = Color::from_rgba8(66, 144, 245, 128); // blue
+    scene.fill(peniko::Fill::NonZero, transform, fill_color, None, &rect);
+
+    let padding_color = Color::from_rgba8(81, 144, 66, 128); // green
+    draw_cutout_rect(
+        scene,
+        base_translation + Vec2::new(scaled_border.left, scaled_border.top),
+        Vec2::new(
+            content_width + scaled_padding.left + scaled_padding.right,
+            content_height + scaled_padding.top + scaled_padding.bottom,
+        ),
+        scaled_padding.map(f64::from),
+        padding_color,
+    );
+
+    let border_color = Color::from_rgba8(245, 66, 66, 128); // red
+    draw_cutout_rect(
+        scene,
+        base_translation,
+        Vec2::new(width, height),
+        scaled_border.map(f64::from),
+        border_color,
+    );
+
+    let margin_color = Color::from_rgba8(249, 204, 157, 128); // orange
+    draw_cutout_rect(
+        scene,
+        base_translation - Vec2::new(scaled_margin.left, scaled_margin.top),
+        Vec2::new(
+            width + scaled_margin.left + scaled_margin.right,
+            height + scaled_margin.top + scaled_margin.bottom,
+        ),
+        scaled_margin.map(f64::from),
+        margin_color,
+    );
+}
+
+fn draw_cutout_rect(
+    scene: &mut impl PaintScene,
+    base_translation: Vec2,
+    size: Vec2,
+    edge_widths: taffy::Rect<f64>,
+    color: Color,
+) {
+    let mut fill = |pos: Vec2, width: f64, height: f64| {
+        scene.fill(
+            peniko::Fill::NonZero,
+            Affine::translate(pos),
+            color,
+            None,
+            &Rect::new(0.0, 0.0, width, height),
+        );
+    };
+
+    let right = size.x - edge_widths.right;
+    let bottom = size.y - edge_widths.bottom;
+    let inner_h = size.y - edge_widths.top - edge_widths.bottom;
+    let inner_w = size.x - edge_widths.left - edge_widths.right;
+
+    let bt = base_translation;
+    let ew = edge_widths;
+
+    // Corners
+    fill(bt, ew.left, ew.top); // top-left
+    fill(bt + Vec2::new(0.0, bottom), ew.left, ew.bottom); // bottom-left
+    fill(bt + Vec2::new(right, 0.0), ew.right, ew.top); // top-right
+    fill(bt + Vec2::new(right, bottom), ew.right, ew.bottom); // bottom-right
+
+    // Sides
+    fill(bt + Vec2::new(0.0, ew.top), ew.left, inner_h); // left
+    fill(bt + Vec2::new(right, ew.top), ew.right, inner_h); // right
+    fill(bt + Vec2::new(ew.left, 0.0), inner_w, ew.top); // top
+    fill(bt + Vec2::new(ew.left, bottom), inner_w, ew.bottom); // bottom
+}

package/vendor/blitz-paint/src/filters.rs

@@ -0,0 +1,40 @@
+use blitz_dom::util::ToColorColor as _;
+use style::color::AbsoluteColor;
+pub(crate) use style::computed_values::filter::single_value::T as StyloFilter;
+
+use anyrender::filters::{Filter, FilterEffect};
+
+pub(crate) fn convert_filters(filters: &[StyloFilter]) -> Option<Filter> {
+    if filters.is_empty() {
+        return None;
+    }
+
+    Some(Filter::linear_list(
+        filters.iter().filter_map(convert_single_filter),
+    ))
+}
+
+pub(crate) fn convert_single_filter(filter: &StyloFilter) -> Option<FilterEffect> {
+    Some(match filter {
+        StyloFilter::Blur(radius) => FilterEffect::blur(radius.px()),
+        StyloFilter::Brightness(amount) => FilterEffect::brightness(amount.0),
+        StyloFilter::Contrast(amount) => FilterEffect::contrast(amount.0),
+        StyloFilter::Grayscale(amount) => FilterEffect::grayscale(amount.0),
+        StyloFilter::HueRotate(angle) => FilterEffect::hue_rotate(angle.radians()),
+        StyloFilter::Invert(amount) => FilterEffect::invert(amount.0),
+        StyloFilter::Opacity(amount) => FilterEffect::opacity(amount.0),
+        StyloFilter::Saturate(amount) => FilterEffect::saturate(amount.0),
+        StyloFilter::Sepia(amount) => FilterEffect::sepia(amount.0),
+        StyloFilter::DropShadow(shadow) => FilterEffect::drop_shadow(
+            shadow.horizontal.px(),
+            shadow.vertical.px(),
+            shadow.blur.px(),
+            // TODO: pass in correct currentColor
+            shadow
+                .color
+                .resolve_to_absolute(&AbsoluteColor::BLACK)
+                .as_color_color(),
+        ),
+        StyloFilter::Url(_) => return None,
+    })
+}