[css-viewport] [cssom-view-1] Add a definition of the `zoom` CSS property #9699

chrishtr · 2023-12-12T01:49:14Z

This PR resolves #9644, #9442, #9398 and #9397.

In particular, it defines zoom visual semantics as follows:

A non-negative number that applies to elements and descendants. Nested zooms multiply. (The "effective zoom" is the product of the zooms of all ancestors.)
Non-auto and non-percentage CSS lengths, including inherited lengths, are multiplied by effective zoom.
Replaced elements' intrinsic sizes are resized according to effective zoom.
Nested iframes are resized by the effective zoom of their containing <iframe> element

CSSOM:

getBoundingClientRect, getClientRects and IntersectionOserver return rects that include zoom
All other CSSOM APIs return values that do not include zoom
offsetParent has a new quirk (stopping at ancestors with non-default zoom) that is analogous to what CSS transform does
offsetTop excludes zoom of self, just like CSS transform
devicePixelRatio is affected by zoom inherited from an ancestor frame

Web compat analysis: the above is what is already implemented in WebKit and Chromium browsers, except:

getBoundingClientRect, getClientRects and IntersectionOserver are unzoomed
Inherited properties other than font-size are unaffected
Nested frames are not zoomed

Blink plans to make the above 3 compat-affecting changes soon, and I expect them to be web compatible.

A working design doc is here.

css-viewport/Overview.bs

fantasai

Quick pass on markup.

css-viewport/Overview.bs

chrishtr · 2024-01-04T19:13:15Z

Quick pass on markup.

Thanks!

css-viewport/Overview.bs

cssom-view-1/Overview.bs

Co-authored-by: Simon Pieters <zcorpan@gmail.com>

svgeesus · 2024-01-19T15:01:04Z

@emilio how close is this to being merged? If it can get merged by Tues 23 I can include it in the Thurs 25 FPWD.

css-viewport/Overview.bs

…zoom

css-viewport/Overview.bs

emilio

Looks good, thanks!

css-viewport/Overview.bs

Reverts #26631 This got specced: w3c/csswg-drafts#9699 I left msZoom because it seems plausible someone will still be using it for backwards compat.

Reverts #26631 This got specced: w3c/csswg-drafts#9699 I left msZoom because it seems plausible someone will still be using it for backwards compat. DiffTrain build for [19c7c29](19c7c29)

Reverts facebook#26631 This got specced: w3c/csswg-drafts#9699 I left msZoom because it seems plausible someone will still be using it for backwards compat.

Add definition of the zoom css property

87ef4cb

TKDev7 reviewed Dec 13, 2023

View reviewed changes

css-viewport/Overview.bs Outdated Show resolved Hide resolved

chrishtr added 5 commits December 20, 2023 15:48

Spell out the complete spec

60e6b37

none

949b515

Avoid zero

44b4fdf

Further clarifications

b150914

Add zoom in more places

75dce70

chrishtr changed the title ~~[css-viewport] Add a definition of the zoom CSS property~~ [css-viewport] [cssom-view-1] Add a definition of the zoom CSS property Dec 21, 2023

fantasai reviewed Dec 21, 2023

View reviewed changes

chrishtr added 6 commits January 4, 2024 10:41

Fixes to formatting

120441e

Fixes to formatting

aa8c478

Replace 'or zoom' with 'unscaled'

abfba55

Fix formatting and add alt text

11ee897

Shorten notes

5c144b6

Shorten heading

ec234ea

chrishtr added 9 commits January 4, 2024 11:15

Add background images

2fdbf35

Omit fenced frames; clarify note about iframes

56a6b7d

Fix spec reference type

bf27c4b

Fix spaces and tabs

0ba0eed

Fix some lint issues

78a456c

Remove stray character

7b4e3d3

Remove more 'and zoom'

9471f9d

fix unscaled

665e588

Fix newlines

742955c

chrishtr requested a review from emilio January 4, 2024 20:05

zcorpan reviewed Jan 10, 2024

View reviewed changes

css-viewport/Overview.bs Outdated Show resolved Hide resolved

chrishtr added 2 commits January 10, 2024 08:09

Special-case 0 and 0%

a7612a6

HTMLImageElement.{x,y} should be scaled

9fa4adf

zcorpan reviewed Jan 15, 2024

View reviewed changes

css-viewport/Overview.bs Outdated Show resolved Hide resolved

css-viewport/Overview.bs Outdated Show resolved Hide resolved

zcorpan reviewed Jan 17, 2024

View reviewed changes

css-viewport/Overview.bs Outdated Show resolved Hide resolved

css-viewport/Overview.bs Outdated Show resolved Hide resolved

css-viewport/Overview.bs Outdated Show resolved Hide resolved

css-viewport/Overview.bs Outdated Show resolved Hide resolved

emilio requested changes Jan 17, 2024

View reviewed changes

chrishtr added 5 commits January 17, 2024 10:40

Address code review comments

51a2dfc

Fix flat tree

75ba05b

Add notes about web compat

3729a02

Fix references that should say 'scaled'

8cce793

Clarify effective zoom

652f315

zcorpan reviewed Jan 18, 2024

View reviewed changes

cssom-view-1/Overview.bs Outdated Show resolved Hide resolved

Fix typo

1f6d09a

Co-authored-by: Simon Pieters <zcorpan@gmail.com>

lilles reviewed Jan 19, 2024

View reviewed changes

css-viewport/Overview.bs Outdated Show resolved Hide resolved

lilles reviewed Jan 19, 2024

View reviewed changes

css-viewport/Overview.bs Show resolved Hide resolved

chrishtr added 3 commits January 22, 2024 17:29

Switch to used value instead of computed style

92d9734

Merge branch 'zoom' of https://github.com/chrishtr/csswg-drafts into …

e5a842f

…zoom

define used value instead of claiming it as a consequence

ce7628c

lilles reviewed Jan 23, 2024

View reviewed changes

css-viewport/Overview.bs Show resolved Hide resolved

emilio approved these changes Jan 30, 2024

View reviewed changes

css-viewport/Overview.bs Outdated Show resolved Hide resolved

chrishtr commented Jan 30, 2024

View reviewed changes

css-viewport/Overview.bs Outdated Show resolved Hide resolved

Clarify flat tree ancestors

993c701

chrishtr merged commit 94cfc4c into w3c:main Jan 30, 2024

This was referenced Jan 30, 2024

Standardized CSS zoom WebKit/standards-positions#311

Closed

Standardized CSS zoom mozilla/standards-positions#977

Closed

wpt-interop mentioned this pull request Feb 1, 2024

CSS Zoom web-platform-tests/interop#530

Closed

sophiebits mentioned this pull request Mar 29, 2024

Revert "Remove zoom from special cases list" facebook/react#28673

Merged

szager-chromium mentioned this pull request Oct 8, 2024

CSS Zoom web-platform-tests/interop#825

Closed

pavanmajji03 mentioned this pull request Nov 4, 2024

Does not take in consideration zoom CSS property floating-ui/floating-ui#496

Closed

chrishtr deleted the zoom branch March 20, 2025 18:04

[css-viewport] [cssom-view-1] Add a definition of the zoom CSS property #9699

[css-viewport] [cssom-view-1] Add a definition of the zoom CSS property #9699

Uh oh!

Conversation

chrishtr commented Dec 12, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

fantasai left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

chrishtr commented Jan 4, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

svgeesus commented Jan 19, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

emilio left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

[css-viewport] [cssom-view-1] Add a definition of the `zoom` CSS property #9699

[css-viewport] [cssom-view-1] Add a definition of the `zoom` CSS property #9699

chrishtr commented Dec 12, 2023 •

edited

Loading