[csswg-drafts] [css-sizing][css-tables] How does `aspect-ratio` apply to table boxes? (#11419)

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

== [css-sizing][css-tables] How does `aspect-ratio` apply to table boxes? ==
https://drafts.csswg.org/css-sizing-4/#aspect-ratio

> [Applies to:](https://www.w3.org/TR/css-cascade/#applies-to)  all elements except [inline boxes](https://drafts.csswg.org/css-display-4/#inline-box) and internal ruby or table boxes

This is not very clear, but my understanding is that it means

> [Applies to:](https://www.w3.org/TR/css-cascade/#applies-to)  all elements except: [inline boxes](https://drafts.csswg.org/css-display-4/#inline-box), [internal ruby boxes](https://drafts.csswg.org/css-display-3/#internal-ruby-box) and [internal table boxes](https://drafts.csswg.org/css-display-3/#internal-table-box).

So it should apply to table boxes. But how so?

 - Does it actually apply to the table wrapper box, or to the table grid box?
    ```html
    <!DOCTYPE html>
    <table style="width: 100px; aspect-ratio: 1; border: 10px solid">
      <caption style="background: cyan; height: 50px"></caption>
    </table>
    ```
    | ✅ Gecko | ⚠️ Blink | ❌ WebKit |
    | - | - | - |
    | ![](https://github.com/user-attachments/assets/6e230a16-8602-491b-a88a-151afd412347) | ![](https://github.com/user-attachments/assets/482c6617-506f-4990-baed-4831a56fca3d) | ![](https://github.com/user-attachments/assets/167e93a9-4cf9-4511-9440-9eb04c4acf2b) |

    I think Gecko is right: table grid makes more sense, to be consistent with other sizing properties.
    Blink seems to attempt to apply the ratio to the table grid, but is buggy and gets confused by the border.
    WebKit applies the ratio to the table wrapper, transferring from the inline size of the grid (which in WebKit matches the inline size of the wrapper) to the block size of the wrapper, but not from the block size of the grid (which doesn't match the block size of the wrapper) to the inline size of the wrapper.

 - Does it transfer the magical `min-content` minimum?
    ```html
    <!DOCTYPE html>
    <table style="width: 100px; aspect-ratio: 1; border: solid">
      <td style="min-width: 150px"></td>
    </table>
    ```
    | ❌ Gecko | ⚠️ Blink | ⚠️ WebKit | ✅  Proposed|
    | - | - | - | - |
    | ![](https://github.com/user-attachments/assets/ee79e184-f7bd-4bc1-9c10-bf82e6c5b069) | ![image](https://github.com/user-attachments/assets/87f033cc-23f9-4e55-a2d4-a74aacc88fab) | ![](https://github.com/user-attachments/assets/4d243a0c-889c-4cd9-b188-c19fba22c3a0) | ![](https://github.com/user-attachments/assets/d9f0850b-460e-4103-964b-919c04c21112) |

    I think it should be transferred, like Blink&WebKit attempt to do (but they are buggy).
    Gecko doesn't transfer it, but when adding `min-width: min-content` manually, then it looks as I'd expect.



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


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

Received on Monday, 30 December 2024 03:08:01 UTC