Bug 285127 – Cqh font size ignores CSS padding dynamically added to parent container with border-box

• Status: NEW
• Component: Layout and Rendering

[Sergey Vinogradov]

Created attachment 473646 [details]
Bug screenshot

When adding CSS padding dynamically to a parent container with `box-sizing: border-box`, font-size set in cqh units doesn't adjust to the new container content box size. Conversely, if the CSS padding is initially defined in the CSS or added synchronously with JS, the font-size is calculated correctly. 

Here is the reproduction example:

https://codepen.io/vursen-the-selector/pen/OPLggVK

```
<style>
  .container {
    container-type: size;
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    border: 1px solid black;
  }

  .container__item {
    font-size: 100cqh;
    line-height: 1;
  }
</style>

<div class="container">
  <div class="container__item">H</div>
</div>

<script>
  const icon = document.querySelector('.container');

  setTimeout(() => {
    icon.style.padding = '25px';
  });
</script>
```

In this example, the glitch appears when the padding is applied inside setTimeout but doesn't happen if it's applied synchronously without setTimeout.

[Karl Dubost]

Created attachment 473651 [details]
rendering in safari, firefox, chrome

The initial rendering on Safari is slow, but eventually it goes at the same position than Chrome after a couple of seconds from 3s to 20s.

On Firefox, it never gets resized.
On Chrome, it is always immediate.

[Karl Dubost]

Created attachment 473652 [details]
rendering in safari, firefox, chrome (after the H is at the right place)

Once the couple of seconds have passed.

This was tested on 

```
Safari Technology Preview  18.2          20621.1.6
Firefox Nightly            135.0a1       13524.12.18
Google Chrome Canary       133.0.6915.0  6915.0
```

[Sergey Vinogradov]

(In reply to Karl Dubost from comment #1)
> Created attachment 473651 [details]
> rendering in safari, firefox, chrome
> 
> The initial rendering on Safari is slow, but eventually it goes at the same
> position than Chrome after a couple of seconds from 3s to 20s.

For me, it never resizes while I stay on the page. However, if I navigate to a different page and then return, it displays correctly. I'm testing with Safari Technology Preview Safari 18.2, 20621.1.8.111.2.

[Radar WebKit Bug Importer]

<rdar://problem/142198480>