[resize-observer] Add resize observer API for "device-pixel-content-box"
Categories
(Core :: Layout, defect, P3)
Tracking
()
| Tracking | Status | |
|---|---|---|
| firefox93 | --- | fixed |
People
(Reporter: dholbert, Assigned: boris)
References
()
Details
(Keywords: dev-doc-complete)
Attachments
(4 files)
Per https://github.com/mozilla/wg-decisions/issues/117 and https://github.com/w3c/csswg-drafts/issues/3554 , there'll be a new resize-observer observable box specced soon, for the integer pixel-snapped "device pixel size" of an element.
I don't think we have spec text yet, but I'm filing this as a placeholder for when we do.
This might be a "level 2" spec feature.
|
Reporter | |
Comment 1•5 years ago
|
||
https://github.com/w3c/csswg-drafts/issues/3554#issuecomment-540829195 suggests that the name will be device-pixel-content-size
|
||
Updated•5 years ago
|
|
||
Comment 2•5 years ago
|
||
Just a heads up that the spec change landed via this PR, and we're starting work to implement and ship this in Blink (I'll post a link to the blink-dev discussion once it's posted there):
|
|
Reporter | |
Updated•4 years ago
|
|
Assignee | |
Updated•3 years ago
|
|
|
Assignee | |
Comment 3•3 years ago
|
||
We still store the size in app units. However, in InActive() and getter
functions, we convert the size from app units to device pixels for
device-pixel-content-box.
Besides, we have to tweak the tests because
- zoom property is non-standard, and
- the color value of stroke in canvas may not be equal to green, rgb(0,128,0)
(e.g. it may be rgb(1,128,1) in devicepixel.html when using stroke), so
I update it to use fill to make Gecko happy.
|
|
Reporter | |
Updated•3 years ago
|
|
|
Assignee | |
Comment 4•3 years ago
|
||
We will introduce device-pixel-content-box, which is in device-pixel
domain. Therefore, we convert the app units into CSS/device pixel when creating
ResizeObserverSize.
Note: use gfxSize and NSAppUnitsToDoublePixels() to make sure we are
using double-precision floating-point because this DOM APIs use double type.
|
||
Updated•3 years ago
|
|
|
||
Updated•3 years ago
|
|
|
Assignee | |
Comment 5•3 years ago
|
||
LogicalPixelSize is a variant of LogicalSize but it stores pixel values
in floating-point. Now we store LogicalPixelSize in ResizeObservation and
ResizeObserverSize. This makes us easier to introduce device-pixel-content-box.
|
|
||
Updated•3 years ago
|
|
|
Assignee | |
Comment 6•3 years ago
|
||
Use the same name as the spec title for better readability:
https://www.w3.org/TR/resize-observer-1/#calculate-box-size
Pushed by bchiou@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/32defb177016 Part 1: Use CSS pixels or device pixels in ResizeObserverSize. r=emilio https://hg.mozilla.org/integration/autoland/rev/d44cbf5982f1 Part 2: Introduce LogicalPixelSize for ResizeObserver. r=emilio https://hg.mozilla.org/integration/autoland/rev/58545891aee3 Part 3: Support device-pixel-content-box for ResizeObserver. r=emilio https://hg.mozilla.org/integration/autoland/rev/3ba62809cce2 Part 4: Rename GetTargetSize with CalculateBoxSize. r=emilio
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/29978 for changes under testing/web-platform/tests
|
||
Comment 9•3 years ago
|
||
| bugherder | ||
https://hg.mozilla.org/mozilla-central/rev/32defb177016
https://hg.mozilla.org/mozilla-central/rev/d44cbf5982f1
https://hg.mozilla.org/mozilla-central/rev/58545891aee3
https://hg.mozilla.org/mozilla-central/rev/3ba62809cce2
Upstream PR merged by moz-wptsync-bot
|
||
Comment 11•3 years ago
|
||
This is documented once the changes in https://github.com/mdn/content/issues/8622 are merged.
|
||
Comment 12•2 years ago
|
||
https://bugzilla.mozilla.org/show_bug.cgi?id=1774135
AFAIK this is the wrong implementation of this API, and unless the spec changed it's impossible to have a correct WPT test for it since the edge case this API was designed to resolve are browser specific.
Example of this implementation failing in Firefox
https://jsgist.org/?src=9a0e0fbaaea59a3d41eea4fc8cdbbd3a
I'm only guessing fixing this will be a large amount of work. If it is, please consider removing/disabling this incorrect implementation. A broken implementation of this particular API is worse than no implementation.
|
||
Comment 13•2 years ago
|
||
(In reply to Gregg Tavares from comment #12)
FWIW I see the same "ERROR!" in Chrome locally, at various zoom levels.
|
|
||
Comment 14•2 years ago
|
||
The test is not designed to run "live". Refresh in Chrome and it will get the correct answer.
I'll update the test to recompute on resize
|
|
||
Comment 15•2 years ago
|
||
Updated so it should stay in sync as you zoom-in/out
You'll still see an error in Chrome but that error is Chrome's compositor. When the sizes don't match in Chrome, look closely, the compositor screwed up and a line of the parent (red) is not being covered by the children. But, ResizeObserver is reporting the correct sizes (the sizes that were actually rendered), unlike Firefox
Description
•