v148 · layoutsubtree Explorer

layoutsubtree Explorer

Toggle layoutsubtree on the middle box and see what changes: it disappears from the page's paint output but its layout contribution (height, spacing) stays intact — and its pixels land on the canvas instead.

Origin Trial simulation. The real layoutsubtree attribute requires Chrome 148+ with OT token or the canvas-draw-element flag. This demo simulates the visibility model; the attribute is applied in the DOM.

layoutsubtree on Box B:

off — element paints normally

Page layout normal paint

Box A

Normal element — always visible

Box B

This element becomes invisible when layoutsubtree is set — but the layout gap it occupies remains.

Box C

Normal element — always visible

Box heights: A=— B=— C=—

// paint events will appear here

Canvas output (Box B) not drawn

When layoutsubtree is active, Box B's pixels are redirected here via ctx.drawElementImage(boxB).

Behaviour comparison

Property	Normal element	display: none	visibility: hidden	layoutsubtree
Painted to page	yes	no	no	no
Occupies layout space	yes	no	yes	yes
Receives events	yes	no	no	yes
In accessibility tree	yes	no	yes	yes
Exposes pixels for canvas	no	no	no	yes
find-in-page searchable	yes	no	yes	yes

API code

const boxB = document.getElementById('box-b');
const canvas = document.getElementById('box-canvas');
const ctx = canvas.getContext('2d');

// Set layoutsubtree — element is now invisible on the page
boxB.setAttribute('layoutsubtree', '');

// The paint event fires whenever box-b's visual state changes
boxB.addEventListener('paint', () => {
  // Redirect box-b's pixels into the canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawElementImage(boxB, 0, 0, canvas.width, canvas.height);
});

// Note: box-b's layout box still occupies space!
// Box A and Box C positions are unaffected — no layout reflow.
const rect = boxB.getBoundingClientRect();
console.log(rect.height); // still the original height

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗

Behaviour comparison

API code

see also

implementation reference