STR:

1. Set the following about:config prefs:

layout.css.content-visibility.enabled = true
layout.css.content-visibility-relevant-content-margin = 0

2. Load attached testcase.

ACTUAL RESULT:
Oscillating/flashing rect. It looks like the div is switching between being considered "relevant" vs. "not-relevant".

EXPECTED RESULT:
Stable layout.

(hopefully the actual-results aren't something that's intended to fall out of the spec...)

When it's considered relevant, it renders at its actual 0x0 content size which places it entirely offscreen, which then makes it not-relevant, which then grows it to its contain-intrinsic-size-imposed size, which then places it back on-screen, which makes it relevant, etc.

This might be specific to layout.css.content-visibility-relevant-content-margin = 0 -- I tried setting that pref to small-but-nonzero values, e.g. 1.0, and making compensatory tweaks to the testcase (e.g. left: -2px or -5px instead of -1px) and wasn't able to trigger oscillation under those conditions.

So this might not be an issue with default pref settings, but I'm not sure. It'd be good to understand what's going on & how easy this is to trigger before we ship content-visibility, ideally.

I think this issue occurs only if at least one of width or height of isn't specified.

When I modified a bit of the testcase above as

<style>
.outer {
    position: absolute;
    left: -5px;
    background: black;
    padding-right: 10px;
    padding-bottom: 10px;
}
.inner {
    content-visibility: auto;
    contain-intrinsic-size: 50px 50px;
    background: red;
    width: 1px;
    height: 1px;
}
</style>

<div class="outer">
  <div class="inner"> </div>
</div>

.inner div is offscreen, but the size doesn't affected by contain-intrinsic-size and it shows stable layout.

However, after removing width: 1px; from the .inner style, the content is oscillating.
(If modifying the width value from 1px to 0px instead of removing width property, it isn't oscillating)

This issue seems to be reproduced in chromium too. (fyi: The default option for viewport margin in chromium is 150%)

I filed the issue to CSSWG for asking what would be the expected result for this.
: https://github.com/w3c/csswg-drafts/issues/8407

When the content having content-visibility: auto and the specific value for contain-intrinsic-size is slightly out of the viewport,
its computed value keeps changing.
This patch makes content-visibilty: auto forces contain-intrinsic-size to gain an auto value to solve this issue.

Backed out for causing wpt failures on content-visibility-068.html

Backout link

Push with failures

Failure log

By the way: I think this is fine to land during the code-freeze, since:

• this only changes behavior when content-visibility is auto
• content-visibility is only enabled on Nightly
• So this isn't introducing any new features/behavior that would suddenly make it to the beta channel without sufficient testing after we merge to beta next week.

the test fails (bug 1816109) because #container element's contain-intrinsic-size is set to auto which is converted to the last remembered state

#container {
background: lightgreen;
contain-intrinsic-size: 50px 100px;
content-visibility: auto;
}

Oriol, do I have to fix the test, right?

https://searchfox.org/mozilla-central/source/testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-068.html#24-25,96

Yes

Backed out for causing failures on content-visibility-070.html

• backout: https://hg.mozilla.org/integration/autoland/rev/f1598b3f01146e86bd9fde48690a854fb377e0a0
• push: https://treeherder.mozilla.org/jobs?repo=autoland&revision=8752ecf838746d176f6b85e2d2a30fd7b35e99ea&group_state=expanded
• push where the failures were seen: https://treeherder.mozilla.org/jobs?repo=autoland&selectedTaskRun=Cp7GID9oTyymvo1lLbk_zA.0&group_state=expanded&revision=b9f63a24bc677e4c6a1f9bc801c2e3bf44dbd6e8&searchStr=wpt
• failure log: https://treeherder.mozilla.org/logviewer?job_id=417965169&repo=autoland&lineNumber=5267

[task 2023-06-02T23:05:24.429Z] 23:05:24     INFO - TEST-START | /css/css-flexbox/getcomputedstyle/flexbox_computedstyle_align-content-flex-start.html
[task 2023-06-02T23:05:24.483Z] 23:05:24     INFO - PID 4707 | ### XPCOM_MEM_BLOAT_LOG defined -- logging bloat/leaks to /tmp/tmp4imbg0tq/runtests_leaks_1189_tab_pid5731.log
[task 2023-06-02T23:05:24.485Z] 23:05:24     INFO - PID 4707 | [5731, Main Thread] WARNING: XPCOM_MEM_BLOAT_LOG is set, disabling native allocations.: file /builds/worker/checkouts/gecko/tools/profiler/core/platform.cpp:345
[task 2023-06-02T23:05:24.502Z] 23:05:24     INFO - PID 4707 | [Child 5731, Main Thread] WARNING: NS_ENSURE_SUCCESS(rv, rv) failed with result 0x80004005 (NS_ERROR_FAILURE): file /builds/worker/checkouts/gecko/toolkit/xre/nsXREDirProvider.cpp:475
[task 2023-06-02T23:05:24.519Z] 23:05:24     INFO - Closing window bb3122bb-30c8-4d5a-b227-53ad38139c98
[task 2023-06-02T23:05:24.558Z] 23:05:24     INFO - 
[task 2023-06-02T23:05:24.558Z] 23:05:24     INFO - TEST-UNEXPECTED-FAIL | /css/css-contain/content-visibility/content-visibility-070.html | Content Visibility: off-screen selection - assert_equals: step5 height expected 100 but got 10
[task 2023-06-02T23:05:24.558Z] 23:05:24     INFO - step6/<@http://web-platform.test:8000/css/css-contain/content-visibility/content-visibility-070.html:105:20
[task 2023-06-02T23:05:24.558Z] 23:05:24     INFO - Test.prototype.step@http://web-platform.test:8000/resources/testharness.js:2599:25
[task 2023-06-02T23:05:24.558Z] 23:05:24     INFO - step6@http://web-platform.test:8000/css/css-contain/content-visibility/content-visibility-070.html:103:7
[task 2023-06-02T23:05:24.559Z] 23:05:24     INFO - TEST-OK | /css/css-contain/content-visibility/content-visibility-070.html | took 1426ms

https://hg.mozilla.org/mozilla-central/rev/af2192d1c537

Reproducible on a 2023-06-03 Nightly build on Windows 10.
Verified as fixed on Firefox 116.0b4(build ID: 20230711183052) and Nightly 117.0a1(build ID: 20230713091748) on Windows 10, macOS 12, Ubuntu 22.