Open Loirooriol opened 2 years ago
The size being empty makes sense. Size containment for non-atomic inlines doesn't have any effect, so I don't think the value here is observable
@vmpstr It's observable if you later turn it into a block, i.e.
<div id="test">
<div style="width: 100px; height: 100px"></div>
</div>
<script>
function nextRendering() {
return new Promise(resolve => {
requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
});
}
(async () => {
// No last rememebered size yet
test.style.cssText = "width: max-content; height: max-content; contain-intrinsic-size: auto 1px";
await nextRendering();
// Now the last remembered size is 100x100
test.style.display = "inline";
await nextRendering();
// Does the last remembered size become 0x0 or preserve the old 100x100?
test.style.display = "block";
test.style.contentVisibility = "hidden";
console.log(test.clientWidth, test.clientHeight); // ???
})();
</script>
IMO there are two reasonable possibilities:
display: none
caseChromium and Firefox are currently doing 1.
The CSS Working Group just discussed [css-sizing] Last remembered size for non-atomic inlines?
, and agreed to the following:
RESOLVED: display:inline doesn't record a size
https://drafts.csswg.org/css-sizing-4/#last-remembered
Does this record the size of a non-atomic inline element? If so, how is that size defined?
Is it like in https://drafts.csswg.org/resize-observer-1/#content-rect-h ?