Intent to Prototype and Ship: ResizeObserver updates

202 views
Skip to first unread message

Sahir Vellani

unread,
Nov 28, 2019, 3:46:27 PM11/28/19
to blink-dev

Contact emails

sahir....@microsoft.com, dli...@microsoft.com

 

Explainer

https://github.com/WICG/ResizeObserver/blob/master/explainer.md

 

Spec 

https://drafts.csswg.org/resize-observer/

 

TAG review

https://github.com/w3ctag/design-reviews/issues/187
TAG review from the original feature, with current additions already considered in detail by the CSSWG. As this proposal is for incremental changes to an existing feature, a new tag review is deemed to be unnecessary.


Summary

ResizeObserver is a an existing DOM observer API that has shipped in Blink. It is intended to be used for observing size of DOM elements. There have been three main updates to the spec:

* A new ResizeObserverSize type

* Addition of new properties on ResizeObserverEntry (contentBoxSize, borderBoxSize, devicePixelContentBoxSize)

* Exposure of new properties as sequences

 

Motivation

The current implementation of ResizeObserver allows the tracking of changes to an element's content box, but does not track border box or device pixel content box. Observing device-pixel-content-box will be helpful for responsive sites and apps that use Canvas, which to date is unable to guarantee pixel alignment of its content leading to blurry output. CSSWG issue on this problem can be found here.

 

Debuggability

Developers can set breakpoints in their JavaScript observer callbacks, same as other DOM observers

 

Risks

Interoperability and Compatibility

Spec is still in ED and is actively changing.


Firefox: Bugs filed (Shipped ResizeObserver like Chromium) 


Edge: In development
Never implemented in Edge < 79; to be shipped in upcoming release of Edge (based on Chromium) 


Safari: In development
ResizeObserver (not including current changes) behind experimental flag, goal of shipping for 2020 


Web developers: Positive

Changes initiated based on web/framework feedback

 

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux,

Chrome OS, Android, and Android WebView)?

Yes

all platforms


Is this feature fully tested by web-platform-tests?

Yes https://wpt.fyi/results/resize-observer?label=experimental&label=master&aligned

And new tests will be added as improvements land

 

Link to entry on the Chrome Platform Status

https://www.chromestatus.com/feature/4966068076412928

Ken Russell

unread,
Dec 2, 2019, 9:22:13 PM12/2/19
to Sahir Vellani, blink-dev, Chris Harrelson
Excited to see devicePixelContentBoxSize moving forward! Hoping this Intent is approved!


--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/e3b3149a-3bd4-4f47-a2f2-319ad32687bd%40chromium.org.

Yoav Weiss

unread,
Dec 4, 2019, 11:28:00 AM12/4/19
to Sahir Vellani, blink-dev
On Thu, Nov 28, 2019 at 9:46 PM 'Sahir Vellani' via blink-dev <blin...@chromium.org> wrote:

Contact emails

sahir....@microsoft.com, dli...@microsoft.com

 

Explainer

https://github.com/WICG/ResizeObserver/blob/master/explainer.md

 

Spec 

https://drafts.csswg.org/resize-observer/

 

TAG review

https://github.com/w3ctag/design-reviews/issues/187
TAG review from the original feature, with current additions already considered in detail by the CSSWG. As this proposal is for incremental changes to an existing feature, a new tag review is deemed to be unnecessary.


Summary

ResizeObserver is a an existing DOM observer API that has shipped in Blink. It is intended to be used for observing size of DOM elements. There have been three main updates to the spec:

* A new ResizeObserverSize type

* Addition of new properties on ResizeObserverEntry (contentBoxSize, borderBoxSize, devicePixelContentBoxSize)

* Exposure of new properties as sequences

 

Motivation

The current implementation of ResizeObserver allows the tracking of changes to an element's content box, but does not track border box or device pixel content box. Observing device-pixel-content-box will be helpful for responsive sites and apps that use Canvas, which to date is unable to guarantee pixel alignment of its content leading to blurry output. CSSWG issue on this problem can be found here.

 

Debuggability

Developers can set breakpoints in their JavaScript observer callbacks, same as other DOM observers

 

Risks

Interoperability and Compatibility

Spec is still in ED and is actively changing.

Another aspect here is compatibility. I'm assuming that the changes take backwards compatibility into account and shipping this won't break existing content, right?

Also, what does the migration path look like? Can developers feature detect support for the new additions? What would be the common fallback for them in a browser that supports ResizeObserver, but not these new additions? 


Firefox: Bugs filed (Shipped ResizeObserver like Chromium) 


Edge: In development
Never implemented in Edge < 79; to be shipped in upcoming release of Edge (based on Chromium) 


Safari: In development
ResizeObserver (not including current changes) behind experimental flag, goal of shipping for 2020 


Web developers: Positive

Changes initiated based on web/framework feedback

 

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux,

Chrome OS, Android, and Android WebView)?

Yes

all platforms


Is this feature fully tested by web-platform-tests?

Yes https://wpt.fyi/results/resize-observer?label=experimental&label=master&aligned

And new tests will be added as improvements land

 

Link to entry on the Chrome Platform Status

https://www.chromestatus.com/feature/4966068076412928

--

Sahir Vellani

unread,
Dec 6, 2019, 2:47:30 PM12/6/19
to blink-dev, sahir....@microsoft.com


On Wednesday, December 4, 2019 at 8:28:00 AM UTC-8, Yoav Weiss wrote:


On Thu, Nov 28, 2019 at 9:46 PM 'Sahir Vellani' via blink-dev <blin...@chromium.org> wrote:

Contact emails

sahir....@microsoft.com, dli...@microsoft.com

 

Explainer

https://github.com/WICG/ResizeObserver/blob/master/explainer.md

 

Spec 

https://drafts.csswg.org/resize-observer/

 

TAG review

https://github.com/w3ctag/design-reviews/issues/187
TAG review from the original feature, with current additions already considered in detail by the CSSWG. As this proposal is for incremental changes to an existing feature, a new tag review is deemed to be unnecessary.


Summary

ResizeObserver is a an existing DOM observer API that has shipped in Blink. It is intended to be used for observing size of DOM elements. There have been three main updates to the spec:

* A new ResizeObserverSize type

* Addition of new properties on ResizeObserverEntry (contentBoxSize, borderBoxSize, devicePixelContentBoxSize)

* Exposure of new properties as sequences

 

Motivation

The current implementation of ResizeObserver allows the tracking of changes to an element's content box, but does not track border box or device pixel content box. Observing device-pixel-content-box will be helpful for responsive sites and apps that use Canvas, which to date is unable to guarantee pixel alignment of its content leading to blurry output. CSSWG issue on this problem can be found here.

 

Debuggability

Developers can set breakpoints in their JavaScript observer callbacks, same as other DOM observers

 

Risks

Interoperability and Compatibility

Spec is still in ED and is actively changing.

Another aspect here is compatibility. I'm assuming that the changes take backwards compatibility into account and shipping this won't break existing content, right?

That is correct; existing content will not break. 

Also, what does the migration path look like? Can developers feature detect support for the new additions? What would be the common fallback for them in a browser that supports ResizeObserver, but not these new additions? 

This will depend on the browser. Firefox throws a TypeError for device-pixel-content-box as it currently supports content-box and border-box. Developers can use that to run alternative logic. Safari, with the ResizeObserver feature enabled, does not throw such an error. However, developers can still feature detect support for these additions. The ResizeObserverEntry object has ResizeObserverSize attributes which indicate supported boxes. Example feature detection test for contentBoxSize. Testing for border-box may be more tricky on Safari because changes to an element's border box will not result in an observation. Although since the entire feature is experimental at the moment, impact on compatibility will be low. 


Firefox: Bugs filed (Shipped ResizeObserver like Chromium) 


Edge: In development
Never implemented in Edge < 79; to be shipped in upcoming release of Edge (based on Chromium) 


Safari: In development
ResizeObserver (not including current changes) behind experimental flag, goal of shipping for 2020 


Web developers: Positive

Changes initiated based on web/framework feedback

 

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux,

Chrome OS, Android, and Android WebView)?

Yes

all platforms


Is this feature fully tested by web-platform-tests?

Yes https://wpt.fyi/results/resize-observer?label=experimental&label=master&aligned

And new tests will be added as improvements land

 

Link to entry on the Chrome Platform Status

https://www.chromestatus.com/feature/4966068076412928

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blin...@chromium.org.

Yoav Weiss

unread,
Dec 6, 2019, 4:40:42 PM12/6/19
to Sahir Vellani, blink-dev
That sounds like an interoperability mess...
What does the spec say they should be doing? What does Chromium currently do? Are there tests?
 
However, developers can still feature detect support for these additions. The ResizeObserverEntry object has ResizeObserverSize attributes which indicate supported boxes. Example feature detection test for contentBoxSize. Testing for border-box may be more tricky on Safari because changes to an element's border box will not result in an observation. Although since the entire feature is experimental at the moment, impact on compatibility will be low. 

Can you expand on that?
 


Firefox: Bugs filed (Shipped ResizeObserver like Chromium) 


Edge: In development
Never implemented in Edge < 79; to be shipped in upcoming release of Edge (based on Chromium) 


Safari: In development
ResizeObserver (not including current changes) behind experimental flag, goal of shipping for 2020 


Web developers: Positive

Changes initiated based on web/framework feedback

 

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux,

Chrome OS, Android, and Android WebView)?

Yes

all platforms


Is this feature fully tested by web-platform-tests?

Yes https://wpt.fyi/results/resize-observer?label=experimental&label=master&aligned

And new tests will be added as improvements land

 

Link to entry on the Chrome Platform Status

https://www.chromestatus.com/feature/4966068076412928

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blin...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/e3b3149a-3bd4-4f47-a2f2-319ad32687bd%40chromium.org.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/423614f4-a82b-45d2-976e-0900b99bb45c%40chromium.org.

mister ПЫХ

unread,
Dec 9, 2019, 12:42:38 PM12/9/19
to blink-dev


четверг, 28 ноября 2019 г., 10:46:27 UTC-10 пользователь Sahir Vellani написал:

Sahir Vellani

unread,
Dec 10, 2019, 5:47:21 PM12/10/19
to blink-dev, sahir....@microsoft.com
The web IDL spec specifies that an exception should be produced, which will be the case after this change for Chromium. At the moment, Chromium like Safari ignores the argument because it is not yet supported. Tests to ensure that behavior is compliant with specs will be added in this change as well. 
 
 
However, developers can still feature detect support for these additions. The ResizeObserverEntry object has ResizeObserverSize attributes which indicate supported boxes. Example feature detection test for contentBoxSize. Testing for border-box may be more tricky on Safari because changes to an element's border box will not result in an observation. Although since the entire feature is experimental at the moment, impact on compatibility will be low. 

Can you expand on that?

My apologies, I was mistaken in my earlier statement. Developers can use the ResizeObserverEntry interface's prototype for feature detection of the various supported box types. This includes border-box as well.
 
 


Firefox: Bugs filed (Shipped ResizeObserver like Chromium) 


Edge: In development
Never implemented in Edge < 79; to be shipped in upcoming release of Edge (based on Chromium) 


Safari: In development
ResizeObserver (not including current changes) behind experimental flag, goal of shipping for 2020 


Web developers: Positive

Changes initiated based on web/framework feedback

 

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux,

Chrome OS, Android, and Android WebView)?

Yes

all platforms


Is this feature fully tested by web-platform-tests?

Yes https://wpt.fyi/results/resize-observer?label=experimental&label=master&aligned

And new tests will be added as improvements land

 

Link to entry on the Chrome Platform Status

https://www.chromestatus.com/feature/4966068076412928

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blin...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/e3b3149a-3bd4-4f47-a2f2-319ad32687bd%40chromium.org.

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blin...@chromium.org.

Daniel Bratell

unread,
Dec 12, 2019, 3:13:31 PM12/12/19
to blink-dev, sahir....@microsoft.com
LGTM1

/Daniel

sligh...@chromium.org

unread,
Dec 12, 2019, 3:14:42 PM12/12/19
to blink-dev, sahir....@microsoft.com
LGTM2

Rick Byers

unread,
Dec 13, 2019, 5:34:44 PM12/13/19
to Yoav Weiss, Sahir Vellani, blink-dev
LGTM3

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CACj%3DBEh%3Dca6N8xPJP_%3DQ61nvCfa0-5ckvVcgLBZe03zAC57EKA%40mail.gmail.com.
Reply all
Reply to author
Forward
0 new messages