1804761 - oscillating layout, with slightly offscreen content, `content-visibility:auto`, layout.css.content-visibility-relevant-content-margin:0, and

Status: VERIFIED FIXED

(Core :: Layout, defect)

Description

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

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.

Comment 1

[Daniel Holbert [:dholbert]]

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.

Comment 2

[Jihye Hong]

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)

Comment 3

[Jihye Hong]

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

Comment 4

[Jihye Hong]

Attachment: Bug 1804761 - Make content-visibility: auto forces contain-intrinsic-size to gain an auto value, r?emilio

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.

Comment 5

[Nasir]

[Tracking Requested - why for this release]:

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/9e2c7d3018de
Make content-visibility: auto forces contain-intrinsic-size to gain an auto value, r=emilio,Oriol

Comment 7

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/40346 for changes under testing/web-platform/tests

Comment 8

[Norisz Fay [:noriszfay]]

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

Backout link

Push with failures

Failure log

Comment 9

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR was closed without merging

Comment 10

[Daniel Holbert [:dholbert]]

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.

Comment 11

[alexander :surkov (:asurkov)]

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

Comment 12

[Oriol Brufau [:Oriol]]

Yes

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/8752ecf83874
Make content-visibility: auto forces contain-intrinsic-size to gain an auto value, r=emilio,Oriol

Comment 14

[Natalia Csoregi [:nataliaCs]]

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

Comment 15

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR was closed without merging

Comment 16

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/mozilla-central/rev/af2192d1c537
Make content-visibility: auto forces contain-intrinsic-size to gain an auto value, r=emilio,Oriol

Comment 17

[Sandor Molnar[:smolnar]]

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

Comment 18

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 21

[Ardelean Oana, Desktop Test Engineering [:oardelean]]

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.