Closed Bug 1880189 Opened 4 months ago Closed 3 months ago

[css-viewport] [cssom] [css-typed-om] Consider adding a way of exposing the effective zoom.

Categories

(Core :: DOM: CSS Object Model, defect)

defect

Tracking

()

RESOLVED FIXED
126 Branch
Tracking Status
firefox126 --- fixed

People

(Reporter: mozilla-apprentice, Assigned: emilio)

References

Details

(Keywords: dev-doc-complete)

Attachments

(2 files)

A resolution was made for csswg-drafts/#9809.

[css-viewport] [cssom] [css-typed-om] Consider adding a way of exposing the effective zoom.

  • RESOLVED: Add Element.currentCSSZoom into CSSOM-view as proposed in #9809; bikeshed later as needed

Discussion.

(I suspect emilio will take this, feel free to redirect/cancel if not)

Flags: needinfo?(emilio)
Blocks: csszoom
Flags: needinfo?(emilio)
Assignee: nobody → emilio
Status: NEW → ASSIGNED
Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/e6f690e49f1c
Align our WebIDL better with current specs. r=webidl,smaug
Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/1689c0a21640
Implement Element.currentCSSZoom. r=webidl,layout-reviewers,dshin,smaug
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/45236 for changes under testing/web-platform/tests
Status: ASSIGNED → RESOLVED
Closed: 3 months ago
Resolution: --- → FIXED
Target Milestone: --- → 126 Branch
Upstream PR merged by moz-wptsync-bot
Keywords: dev-doc-needed

FF126 MDN docs for this can be tracked in https://github.com/mdn/content/issues/33241

My understanding of this is is that you can apply the CSS zoom property to an element in order to set its magnification. You can nest elements which have zoom applied, and the effect on the zoom of the nested elements is multiplicative. So this is an easy way to get the total zoom that has been applied to a nested and zoomed element.

A couple of questions:

  1. My understanding is that you can also use transform: scale() to change the size of an element content. The main difference is that this scales the content, not the box itself. So you'll get overflow if scaling overruns its container. Further if you double the scaling factor, you won't see any change to currentCSSZoom or the size of the bounding rectangle.

  2. The zoom property is still marked by MDN as non-standard. Has this changed (does not seem to be, just checking).

  3. IN the discussion in csswg-drafts it says

    emilio: There's a lot of APIs that use local space, and some in global. To convert between them you need something
    <bramus> s/[gives an example]/example: getBoundingClientRect values don’t take zoom into account, so you have to multiply their values such as clientWidth by the effective zoom

    But when I modify add a zoom factor of 2 to the div in the basic example in getBoundingClientRect() the size of the value of the client width doubles. So it looks like getBoundingClientRect() does take zoom into account. Am I missing something?

  4. When you look at the computed properties on an element in the developer tools, the CSS zoom appears to be whatever you set on the element, not the actual zoom/effective zoom. Why is that?

Flags: needinfo?(emilio)

(In reply to Hamish Willee from comment #9)

  1. My understanding is that you can also use transform: scale() to change the size of an element content. The main difference is that this scales the content, not the box itself. So you'll get overflow if scaling overruns its container. Further if you double the scaling factor, you won't see any change to currentCSSZoom or the size of the bounding rectangle.

Well, yeah, transforms don't affect layout. And they're independent from zoom, so currentCSSZoom does nothing.

  1. The zoom property is still marked by MDN as non-standard. Has this changed (does not seem to be, just checking).

Yes, see https://drafts.csswg.org/css-viewport/#zoom-property

emilio: There's a lot of APIs that use local space, and some in global. To convert between them you need something
<bramus> s/[gives an example]/example: getBoundingClientRect values don’t take zoom into account, so you have to multiply their values such as clientWidth by the effective zoom

But when I modify add a zoom factor of 2 to the div in the basic example in getBoundingClientRect() the size of the value of the client width doubles. So it looks like getBoundingClientRect() does take zoom into account. Am I missing something?

getBoundingClientRect returns the zoomed size, but other APIs like client*, offset*, scroll* etc return the un-zoomed size. So to convert coordinates between them you need currentCSSZoom.

  1. When you look at the computed properties on an element in the developer tools, the CSS zoom appears to be whatever you set on the element, not the actual zoom/effective zoom. Why is that?

Because zoom is a non-inherited property, that's why currentCSSZoom is needed. zoom: 1 is basically the ancestor zoom.

Flags: needinfo?(emilio)

Thank you very much Emilio.

One final confirmation. The property returns 1 if an element is not rendered. I assume this means that if you were, for example, not rendering the element because it was outside the visual viewport the value would be 1? - Just making sure this is always about rendering not about whether the element is not currently displayed or is otherwise hidden.

No, rendered here has a very specific meaning, which means "doesn't have a CSS box". That's generally the case if you're display: none or inside a display: none subtree, nothing to do with the element being inside the viewport or not.

Thanks, I'll update the doc. I'd be tempted to update the spec to be more specific - because when I see "rendered" I have all sorts of things going on in my head related to CSS containment and content visibility. Chances are others will find this ambiguous too.

Thanks, it was supposed to link to the right definition, but it wasn't doing that by mistake, see https://github.com/w3c/csswg-drafts/pull/10285. It should be fixed in the spec shortly.

You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: