Skip to content

Implement CSS Anchor Positioning for Code OSS webview overlays #903

Open

Description

@wieslawsoltes

Update — 22 September 2026: CSSOM fix merged; exact app retest pending

WebScene PR #907 merged at 220aa082 after its related contracts, native builds, portable V8, and package .NET gates passed. The earlier signed Code OSS diagnostic app was removed during artifact cleanup; no exact installed-SDK/CLI app containing #907 has been built or visually accepted yet. Keep this issue open until unchanged Code OSS paints Markdown Preview and passes iframe lifecycle, Chromium comparison, and idle-CPU gates. The macOS 12 NuGet osx-arm64 failure is a pre-existing floating charconv availability problem tracked separately in #908 / PR #909.

Current status — packaged CSSOM regression reproduced (22 September 2026)

The exact signed installed-SDK/CLI Code OSS Release now pins WebScene 406bc88a (#906) and AppScene 36d7a82e. Native computer-use still opens a blank Markdown Preview. The real editor anchors measure [348,61,792,857] and [744,96,396,822], but the clipping root, overlay, and iframe remain 0×0. A fixed-size CSSOM control measures [17,19,53,37] and a stylesheet-defined anchor control measures [27,29,43,47]; CSSOM-created probes using style.top = "anchor(top)" and style.width = "anchor-size(width)" remain 0×0. This isolates the runtime-created CSSOM path missed by #906's initial stylesheet fixture.

Focused PR #907 (4e29ae2c) retains anchor functions in six JavaScript style named setters and through detached-element attachment/recascade. Chrome passes 9/9 assertions; native V8 Release moves from 2/9 to 9/9; existing anchor geometry remains 9/9. Both contracts enforce 64 panel moves within 500 ms. Keep this issue open until #907's related CI passes, it merges, and an exact rebuilt SDK/CLI Code OSS app paints Markdown and passes visual, lifecycle, and idle-CPU gates. Source and focused evidence: docs/validation/css-anchor-cssom-903-20260922.md.

Previous checkpoint — focused engine fix merged

WebScene PR #906 merged at 406bc88a after native/Chrome geometry, paint, panel-churn, existing positioned-height, and related Linux/portable V8 CI gates passed. The unchanged Code OSS integration pins this commit locally. The preceding signed .app below predates #906, so the real Markdown preview remains unverified. Keep #903 open until a new installed-SDK/CLI Release paints Markdown and passes Code OSS visual, lifecycle, and idle-CPU gates. AppScene #402 owns the package retest.

Markdown preview layout diagnostic — 21 September 2026

Exact package and result

The signed installed-SDK/CLI Release at
dist/appscene-release-36d7a82-5b4739c8-preview-diagnostic/Code OSS AppScene.app
uses unchanged Code OSS 645f29cc, merged WebScene 5b4739c8, and merged
AppScene 36d7a82e. With the three opt-in navigation, workspace-bootstrap,
and Markdown-preview diagnostic environment flags, native computer input
opened the real remote beta/README.md. The unchanged built-in
markdown.showPreviewToSide command resolved and created a visible
Preview README.md tab, but the preview content remained white. The remote
workspace/file-lifecycle acceptance state passed on this run.

Evidence: build/appscene-webview-398/native-preview-36d7a82-final-diagnostic.log,
build/appscene-webview-398/preview-36d7a82-final.png. The log redacts URL
query values and document text in the bounded frame snapshots.

Measured geometry and source boundary

The main document measured 1440×940. The outer webview iframe and its parent
.webview-overlay-content measured 0×0. The latter computed as position: fixed; width: 0px; height: 0px. Its containing absolute root was also 0×0;
the preview tab was present. The nested fake.html iframe was created inside
the virtual HTTPS prelude and also measured 0×0. These measurements explain
the blank pane independently of later Markdown content, worker, or message
delivery failures; they do not prove those later stages correct.

Unchanged Code OSS src/vs/base/browser/overlayLayoutElement.ts assigns
anchor-name to the editor anchor, position-anchor to the overlay, and
anchor(top), anchor(left), anchor-size(width), and
anchor-size(height) to its fixed-position content. It may also use a
clipping anchor on the absolute root. The checked WebScene native code has no
matches for CSS Anchor Positioning identifiers. A focused browser/native
contract must first distinguish unsupported anchor functions from an
independent absolute-inset stretch failure. Any implementation belongs in
WebScene, not a VS Code source rewrite or demo-specific layout override.

The nested iframe's authored ./fake.html?id=... is owned by the virtual
HTTPS prelude document, but reading its src property from the diagnostic
main realm returned http://127.0.0.1:<port>/fake.html?.... The getter in
webscene_v8_runtime_dom_properties.inc::get_element_url chooses
current_base_address(), while navigation itself uses the owning document
base. The property observation is a URL-reflection defect candidate; it is
not proof that the actual nested request went to the loopback origin.

Gates and next work

  1. Add a product-neutral Chrome/native contract for a named anchor, fixed
    overlay, dynamic resize/move, clipping container, absolute inset root,
    and nested iframe geometry; record exact per-stage rectangles and pixels.
  2. Implement the missing WebScene CSS/runtime behavior with bounded anchor
    dependency invalidation, resize/panel-churn performance, and release RID
    gates. Retest unchanged Code OSS Markdown and a second webview consumer.
  3. Add a separate owner-document-base URL-reflection contract for nested
    relative src/href, including <base> mutation, iframe navigation,
    cross-origin access, and detached nodes; correct the getter if reproduced.
  4. Require actual painted Markdown, Chrome-matched layout, security and
    lifecycle, zero-browser proof, memory/idle CPU, and full release gates
    before closing AppScene Preserve iframe WindowProxy through document navigation #402/Implement CSS layer statement rule mutation #398 or WebScene [Epic] Qualify unchanged Code OSS webviews and nested document contexts #264/Enforce secure nested-document lifecycle for Code OSS webviews #267.

Two of the three native frame-probe attempts exceeded the existing 2000 ms
Explorer first-child paint bound (2198.78 and 2318.83 ms); the final
diagnostic run passed. Keep the intermittent cold-start concern open under
WebScene #252/#243. No performance acceptance follows from one passing run.

Activity

  1. added
    bugSomething isn't working
    vscode-oss/plannedPlanned for the AppScene/WebScene VS Code OSS integration
    on Sep 21, 2026
  2. wieslawsoltes commented on Sep 21, 2026

    @wieslawsoltes
    CollaboratorAuthor

    21 September 2026 exact-head native checkpoint: unchanged Code OSS 645f29cc, merged WebScene 5b4739c8, merged AppScene 36d7a82e, signed installed-SDK/CLI diagnostic Release. The opt-in acceptance overlay invoked the unchanged markdown.showPreviewToSide command after a byte-exact remote README lifecycle; the command resolved and [Preview] README.md appeared, but the pane remained white. Native frame snapshots measured a 1440×940 workbench and a 0×0 outer webview iframe, 0×0 fixed .webview-overlay-content, and 0×0 absolute overlay root. The nested fake.html frame was created inside the virtual-HTTPS prelude and was also 0×0. The prior fake.html manifest fix is present; it did not complete visual acceptance.

    Unchanged Code OSS overlayLayoutElement.ts uses CSS Anchor Positioning (anchor-name, position-anchor, anchor(), anchor-size()) for this overlay; no matching implementation was found in the checked WebScene native sources. WebScene #903 (child of CSS epic #235) now owns a product-neutral Chrome/native geometry contract, absolute-inset isolation, implementation, and panel/resize performance gates. WebScene #904 (child of #267) separately owns a nested reflected-URL defect. Focused PR #905 implements a tested connected-owner getter slice; actual nested requests must still be verified separately. See local demo commit 69f4b43b and docs/validation/markdown-preview-layout-20260921.md for exact logs, screenshot and limits. Keep this issue open until actual Markdown paints and Chromium geometry, security, lifecycle, memory/CPU and release acceptance pass. Two earlier cold-start attempts also missed the 2-second Explorer paint gate (2198.78 and 2318.83 ms); track under WebScene #252/#243.

  3. wieslawsoltes commented on Sep 21, 2026

    @wieslawsoltes
    CollaboratorAuthor

    Implementation checkpoint — 21 September 2026

    Focused PR #906 (4f996c73) now implements the Code OSS named-anchor overlay slice in WebScene. Local native V8 Release passes 9/9 geometry/CSSOM/performance assertions, the visual paint reftest, and the two existing positioned-height regressions (combined 4/4 documents, 15/15 subtests). Chrome 152 passes the geometry fixture and produces a byte-identical anchor/reference paint screenshot. The 64-cycle panel move gate stays within 500 ms. Evidence and exact scope: docs/validation/css-anchor-overlay-903-20260921.md in PR #906.

    PR CI is running. Keep this issue open after merging the focused engine fix: the signed AppScene SDK/CLI package used for the original screenshot predates it. We still need a newly pinned Release, real Markdown paint and visual comparison against Code OSS, iframe/lifecycle checks, and idle-CPU/performance acceptance before closing this product blocker. Full CSS Anchor Positioning syntax and scoping are not claimed by this slice.

  4. wieslawsoltes commented on Sep 21, 2026

    @wieslawsoltes
    CollaboratorAuthor

    Focused engine PR #906 merged to WebScene main at 406bc88a after the Linux X64 build/test and portable V8 runners passed; its superseded PR CI workflows were canceled after merge. The unchanged VS Code OSS integration now pins that commit locally. The product-level issue remains open: the signed installed-SDK/CLI .app has not yet been rebuilt with #906, and actual painted Markdown, native/Code OSS visual parity, lifecycle, and idle-CPU acceptance are still unverified. AppScene #402 records the package dependency.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingvscode-oss/plannedPlanned for the AppScene/WebScene VS Code OSS integration

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions