// In response to resize, elipse paints an elipse inside a canvas
document.querySelector('#elipse').handleResize = entry => {
- entry.target.width = entry.borderBoxSize.inlineSize;
- entry.target.height = entry.borderBoxSize.blockSize;
+ entry.target.width = entry.borderBoxSize[0].inlineSize;
+ entry.target.height = entry.borderBoxSize[0].blockSize;
let rx = Math.floor(entry.target.width / 2);
let ry = Math.floor(entry.target.height / 2);
let ctx = entry.target.getContext('2d');
@@ -103,7 +103,7 @@ ResizeObserver's notifications can be used to respond to changes in {{Element}}'
// In response to resize, change title visibility depending on width
document.querySelector('#menu').handleResize = entry => {
let title = entry.target.querySelector(".title")
- if (entry.borderBoxSize.inlineSize < 40)
+ if (entry.borderBoxSize[0].inlineSize < 40)
title.style.display = "none";
else
title.style.display = "inline-block";
@@ -115,8 +115,8 @@ ResizeObserver's notifications can be used to respond to changes in {{Element}}'
console.log('watching element:', entry.target);
console.log(entry.contentRect.top,' is ', cs.paddingTop);
console.log(entry.contentRect.left,' is ', cs.paddingLeft);
- console.log(entry.borderBoxSize.inlineSize,' is ', cs.width);
- console.log(entry.borderBoxSize.blockSize,' is ', cs.height);
+ console.log(entry.borderBoxSize[0].inlineSize,' is ', cs.width);
+ console.log(entry.borderBoxSize[0].blockSize,' is ', cs.height);
if (entry.target.handleResize)
entry.target.handleResize(entry);
}
@@ -247,9 +247,9 @@ This callback delivers {{ResizeObserver}}'s notifications. It is invoked by a
interface ResizeObserverEntry {
readonly attribute Element target;
readonly attribute DOMRectReadOnly contentRect;
- readonly attribute ResizeObserverSize borderBoxSize;
- readonly attribute ResizeObserverSize contentBoxSize;
- readonly attribute ResizeObserverSize devicePixelContentBoxSize;
+ readonly attribute sequence<ResizeObserverSize> borderBoxSize;
+ readonly attribute sequence<ResizeObserverSize> contentBoxSize;
+ readonly attribute sequence<ResizeObserverSize> devicePixelContentBoxSize;
};
@@ -264,15 +264,26 @@ interface ResizeObserverEntry {
{{Element}}'s content rect when {{ResizeObserverCallback}} is invoked.
: borderBoxSize
::
- {{Element}}'s border box size when {{ResizeObserverCallback}} is invoked.
+ A sequence containing the {{Element}}'s border box size when {{ResizeObserverCallback}} is invoked.
: contentBoxSize
::
- {{Element}}'s content rect size when {{ResizeObserverCallback}} is invoked.
+ A sequence containing the {{Element}}'s content rect size when {{ResizeObserverCallback}} is invoked.
: devicePixelContentBoxSize
::
- {{Element}}'s content rect size in integral device pixels when {{ResizeObserverCallback}} is invoked.
+ A sequence containing the {{Element}}'s content rect size in integral device pixels when {{ResizeObserverCallback}} is invoked.
+
++The box size properties are exposed as sequences in order to support elements that have multiple fragments, +which occur in multi-column scenarios. +However the current definitions of content rect and border box +do not mention how those boxes are affected by multi-column layout. +In this spec, there will only be a single ResizeObserverSize returned in the sequences, +which will correspond to the dimensions of the first column. +A future version of this spec will extend the returned sequences to contain the per-fragment size information. +
+