[resize-observer] Does not observe changes to the most important size

[bobOnGitHub]

EDITED Misunderstanding and bug in Chrome (v78,v79)- changes to the most important size (content-area) can indeed be observed.

[Loirooriol]

From https://drafts.csswg.org/resize-observer/#api,

content-box : size of content area as defined in CSS2.

From https://drafts.csswg.org/css-box-3/#content-area

So what makes you think that padding is included?

var el = document.createElement("div");
el.style.width = "50px";
el.style.padding = "10px";
document.body.appendChild(el);
new ResizeObserver(entries => {
  alert(entries[0].contentBoxSize.inlineSize); // 50
}).observe(el);

[bobOnGitHub]

@Loirooriol Cheers for that !

Yes, if I'd followed the link to the content-area definition I would have seen padding was not included. However, I didn't.

I was already under the mistaken impression client area (as indicated by clientWidth/clientHeight here) was the same as content area when I encountered the issue described (in Chrome) which supported that impression. ie. While observing content-box size changes Chrome reports a change (in some cases) for client area but not (in some cases) for content-area.

You can see it in this fiddle for examples A and B.
(Though in light of your comment, having investigated further, example C rules out my original interpretation and suggests something amiss)

Everything is as expected in Firefox but looks like a bug in Chrome 78 and 79 at least.

[Loirooriol]

You can file a bug in https://crbug.com if there isn't one already

[bobOnGitHub]

bug listing