[csswg-drafts] [resize-observer] Wording of spec seems to be incorrect for multi-column layouts (#11380)

lionel-rowe has just created a new issue for https://github.com/w3c/csswg-drafts:

== [resize-observer] Wording of spec seems to be incorrect for multi-column layouts ==
https://drafts.csswg.org/resize-observer/

> In this spec, there will only be a single ResizeObserverSize returned in the [FrozenArray](https://webidl.spec.whatwg.org/#idl-frozen-array), **_which will correspond to the dimensions of the first column_**. A future version of this spec will extend the returned [FrozenArray](https://webidl.spec.whatwg.org/#idl-frozen-array) to contain the per-fragment size information.

... and ...

> In this spec, content width of an [Element](https://dom.spec.whatwg.org/#element) inside multi-column is the result of `getComputedStyle(element).width`. **_This currently evaluates to width of the first column_**.

(Emphasis added).

Based on current implementations (tested Chrome, Firefox), this seems to be incorrect, and the returned dimensions refer to the bounding box instead. Further, `getComputedStyle(element).width` also returns the full bounding box width rather than the width of the first column, which looks to be in line with [the css-sizing-3 spec](https://drafts.csswg.org/css-sizing-3/#propdef-width):

> relative to width/height of containing block

FWIW, the observed behavior in implementations feels a lot more intuitive to me, as you can always rely on the first array entry having the same semantics (i.e. the full bounding box), whether or not the element has a column layout. A future implementation being a bit like regex match groups, with the first being the full match and latter ones being fragments of the full match, would also feel pretty intuitive. On the other hand, if the current spec was followed to-the-letter, the semantics of the first element would be less clear, and presumably it would be necessary to iterate through all the elements and calculate max/min values for the dimensions to get the overall bounding box of an element with a column layout.

<details>
<summary>Repro code</summary>
```js
document.write(
  `<div id="columns">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam
      dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus
      ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus
      laoreet sit amet.
    </p>

    <p>
      Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet
      orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare
      ex malesuada et. In vitae convallis lacus.
    </p>
  </div>
  <div id="target"><-- width </div>
  <style>
    #columns {
      column-count: 2;
      max-width: 800px;
    }

    #target {
      position: relative;
    }
    #target::after {
      content: ' -->';
      right: 0;
      position: absolute;
    }
  </style>
  `
)

const observer = new ResizeObserver((entries) => {
  const [{ contentBoxSize }] = entries
  console.log(contentBoxSize)
  document.querySelector('#target').style.width = contentBoxSize[0].inlineSize
})
observer.observe(document.querySelector('#columns'))
</details>

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11380 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 16 December 2024 11:42:18 UTC