[csswg-drafts] [css2][css-tables] `z-index` property should apply to table wrapper box instead of table grid box (#11689)

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

== [css2][css-tables] `z-index` property should apply to table wrapper box instead of table grid box ==
Consider the following testcase:
```html
<!DOCTYPE html>
<style>
div {
  position: fixed;
  width: 100px;
  height: 100px;
}
#behind {
  background-color: red;
  z-index: 1;
}
#in-front {
  background-color: green;
  display: table;
  z-index: 2;
}
</style>
<div id="behind"></div>
<div id="in-front"></div>
```

[CSS 2.2, 17.4 Tables in the visual formatting model](https://drafts.csswg.org/css2/#model) states:
> [...] the table generates a principal block box called the table wrapper box that contains the table grid box itself and any caption boxes (in document order). The table grid box is a block-level box that contains the table’s internal table boxes.

and
> The computed values of properties position, float, margin-*, top, right, bottom, and left on the table element are used on the table wrapper box and not the table grid box; all other values of non-inheritable properties are used on the table grid box and not the table wrapper box. (Where the table element’s values are not used on the table and table wrapper boxes, the initial values are used instead.) 

An equivalent formulation can be found in in [CSS Table Module Level 3, 3.6.1. Overrides applying in all modes](https://drafts.csswg.org/css-tables-3/#global-style-overrides).

Based on these rules, the following happens for the `#in-front` element:
* the table wrapper box has  `position: fixed`  and `z-index: auto`
* the table grid box has `position: static` and `z-index: 2`.

Because `z-index` has no effect on elements with static position, it is effectively ignored, causing the `#in-front` element to be rendered behind the `#behind` element. As a result a red square must be displayed.

This contradicts observed behavior in Chrome and Firefox where instead the green square is displayed. This problem was discovered in LadybirdBrowser/ladybird#3533 where these rules are implemented based on above wording and a red square is displayed. Also the Ladybird implementation causes severe layout issues on a website which the above test case was reduced from. 

Changing the Ladybird implementation to include `z-index` in the properties that apply to the table wrapper box instead of the table grid box "fixes" the Ladybird behavior both for this reduced test case and for the layout issues on the original website. Therefore, I think the formulation needs to be adjusted so that `z-index` is included in the list of properties that are used on the wrapper box. 

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


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

Received on Monday, 10 February 2025 20:09:52 UTC