Log in Try the demo

Loading…

Dataset 20261011-0550-f160c57 · measured 2026-10-11 05:50 UTC

offset-path

✓pixel-exact10 of 10 examples match Chromemotion-1

Our rendering of the example is identical to Chrome's, pixel for pixel — no further apart than the example's own noise floor.

What the specification says

Initial value: none
Applies to: transformable elements
Inherited: no
Percentages: n/a
Computed value: as specified
Syntax: none | <offset-path> || <coord-box>

motion-1 definition

The measurements

10 examples, 10 of them matching Chrome. Each is one declaration on a small page, drawn by Chrome and by our engine. Drag the handle to wipe between them.

offset-path:circle(60px)✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

offset-path:ellipse(80px 40px)✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

offset-path:polygon(0 0, 100% 0, 50% 100%)✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

offset-path:content-box✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

offset-path:padding-box✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

offset-path:border-box✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

offset-path:fill-box✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

offset-path:stroke-box✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

offset-path:view-box✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

offset-path:inset(20px)✓pixel-exact

Chrome of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Our render of this test — Left of the line is our rendering; right of it is the chrome. Drag, or focus the slider and use the arrow keys.

Identical to Chrome: nothing differs, so there is no difference map to show.

Differing pixels: 0
Max channel delta: 0

the example page

Which values were measured

“Supported” on one example means “supported at the value we tried”. The property’s declared grammar has 12 branches; 10 of them carry a measurement. The publishing ceiling is 12 examples per property — a branch past it is left out by our choice, not by accident.

Value	Measured
url(data:image/gif;base64,R0lGODlhAQABAIAAAP8AAAAAACwAAAAAAQABAAACAkQBADs=)	not measured
inset(20px)	✓pixel-exact
circle(60px)	✓pixel-exact
ellipse(80px 40px)	✓pixel-exact
polygon(0 0, 100% 0, 50% 100%)	✓pixel-exact
content-box	✓pixel-exact
padding-box	✓pixel-exact
border-box	✓pixel-exact
fill-box	✓pixel-exact
stroke-box	✓pixel-exact
view-box	✓pixel-exact
none	not measured

Measured against Chrome 148.0.7778.96 on 2026-10-11, with up to 40 candidate values tried per property. All properties · How the measurement works