Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 34 commits into from
Jan 30, 2024
Merged

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

merged 34 commits into from
Jan 30, 2024

Conversation

chrishtr
Copy link
Contributor

@chrishtr chrishtr commented Dec 12, 2023 •
edited
Loading

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.

MrHBS
MrHBS reviewed Dec 13, 2023
View reviewed changes
css-viewport/Overview.bs Outdated Show resolved Hide resolved
@chrishtr 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
fantasai reviewed Dec 21, 2023
View reviewed changes
Copy link
Collaborator

@fantasai fantasai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Quick pass on markup.

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
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
@chrishtr
Copy link
Contributor Author

chrishtr commented Jan 4, 2024

Quick pass on markup.

Thanks!

@chrishtr chrishtr requested a review from emilio January 4, 2024 20:05
zcorpan
zcorpan reviewed Jan 10, 2024
View reviewed changes
css-viewport/Overview.bs Outdated Show resolved Hide resolved
zcorpan
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
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
emilio requested changes 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 Show resolved Hide resolved
css-viewport/Overview.bs Show resolved Hide resolved
css-viewport/Overview.bs Show resolved Hide resolved
css-viewport/Overview.bs Outdated Show resolved Hide resolved
cssom-view-1/Overview.bs Outdated Show resolved Hide resolved
cssom-view-1/Overview.bs Outdated Show resolved Hide resolved
cssom-view-1/Overview.bs Show resolved Hide resolved
cssom-view-1/Overview.bs Outdated Show resolved Hide resolved
zcorpan
zcorpan reviewed Jan 18, 2024
View reviewed changes
cssom-view-1/Overview.bs Outdated Show resolved Hide resolved
@chrishtr @zcorpan
Fix typo
1f6d09a 
Co-authored-by: Simon Pieters <zcorpan@gmail.com>
@svgeesus
Copy link
Contributor

@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.

lilles
lilles reviewed Jan 19, 2024
View reviewed changes
css-viewport/Overview.bs Outdated Show resolved Hide resolved
emilio
emilio approved these changes Jan 30, 2024
View reviewed changes
Copy link
Collaborator

@emilio emilio left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, thanks!

css-viewport/Overview.bs Outdated Show resolved Hide resolved
chrishtr
chrishtr commented Jan 30, 2024
View reviewed changes
css-viewport/Overview.bs Outdated Show resolved Hide resolved
@chrishtr chrishtr merged commit 94cfc4c into w3c:main Jan 30, 2024
1 check passed
This was referenced Jan 30, 2024
Open
Open
@wpt-interop wpt-interop mentioned this pull request Feb 1, 2024
Closed
@sophiebits sophiebits mentioned this pull request Mar 29, 2024
Merged
sophiebits added a commit to facebook/react that referenced this pull request Mar 29, 2024
@sophiebits
Revert "Remove zoom from special cases list" (#28673)
19c7c29 
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.
github-actions bot pushed a commit to facebook/react that referenced this pull request Mar 29, 2024
@sophiebits
Revert "Remove zoom from special cases list" (#28673)
aa4213f 
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)
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
@sophiebits @AndyPengc12
Revert "Remove zoom from special cases list" (facebook#28673)
2774689 
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.
@szager-chromium szager-chromium mentioned this pull request Oct 8, 2024
Open
@pavanmajji03 pavanmajji03 mentioned this pull request Nov 4, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@MrHBS MrHBS MrHBS left review comments

@jfkthame jfkthame jfkthame left review comments

@lilles lilles lilles left review comments

@fantasai fantasai fantasai left review comments

@tabatkins tabatkins tabatkins left review comments

@zcorpan zcorpan zcorpan left review comments

@emilio emilio emilio approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[css-viewport] [css-zoom] Should zoom affect iframes?
9 participants
@chrishtr @svgeesus @zcorpan @tabatkins @fantasai @lilles @emilio @jfkthame @MrHBS