Skip to content

Commit

Permalink
[FIX] web: <details> visiblity check regression in Chromium 97+
Browse files Browse the repository at this point in the history
Since Chromium 97, folded `<details>` content has non-zero computed
width and height which returns false-positive QUnit
`assert.isNotVisible()` calls.

In a nutshell, this was introduced in https://bugs.chromium.org/p/chromium/issues/detail?id=1185950
when Chromium implemented the ability for "Find in page" to search in folded
`<details>`. To do so, the `content-visibility` rule was used instead of
`display: none` which, even if functionally similar, has an impact on the
values returned by `getBoundingClientRect()` (i.e. used in
`assert.isNotVisible()`.

A regression report was filled in https://bugs.chromium.org/p/chromium/issues/detail?id=1276028
to highlight this change of behavior. What emerged from this report's
discussion is that Chromium has no intent to revert this change and
instead put the emphasis on avoiding to use `getBoundingClientRect()`
and similar methods for visibility check (even pushing a proposal for a
`Element.isVisible()` API; cf. w3c/csswg-drafts#6850).

This commit works around this issue by forcing the content to `display:
none`, like in the previous Chromium versions.

X-original-commit: 5aa2a71
  • Loading branch information
pparidans committed May 19, 2022
1 parent e04c4f0 commit 5d9a138
Showing 1 changed file with 12 additions and 0 deletions.
12 changes: 12 additions & 0 deletions addons/web/static/tests/qunit.js
Original file line number Diff line number Diff line change
Expand Up @@ -409,4 +409,16 @@
addSortButton();
}
});

// -----------------------------------------------------------------------------
// FIXME: This sounds stupid, it feels stupid... but it fixes visibility check in folded <details> since Chromium 97+ 💩
// Since https://bugs.chromium.org/p/chromium/issues/detail?id=1185950
// See regression report https://bugs.chromium.org/p/chromium/issues/detail?id=1276028
// -----------------------------------------------------------------------------

QUnit.begin(() => {
const el = document.createElement("style");
el.innerText = "details:not([open]) > :not(summary) { display: none; }";
document.head.appendChild(el);
});
})();

0 comments on commit 5d9a138

Please sign in to comment.