[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
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
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
•