Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Don't modify computed value of 'contain' for locked elements
DisplayLockContext::AdjustElementStyle currently modifies the computed value of 'contain'. It should not [1]. Instead we store a bit on ComputedStyle to indicate whether or not the element should skip its contents [2], and use this flag used- value-time to request the appropriate containment. [1] w3c/csswg-drafts#6246 [2] https://drafts.csswg.org/css-contain-2/#skips-its-contents Fixed: 1203627 Change-Id: I5571b0a5fac1b89903c03a256a2b144bddcd5040 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3081725 Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org> Reviewed-by: vmpstr <vmpstr@chromium.org> Cr-Commit-Position: refs/heads/master@{#910192}
- Loading branch information
1 parent
dd5aead
commit 4c5408d
Showing
1 changed file
with
13 additions
and
97 deletions.
There are no files selected for viewing
110 changes: 13 additions & 97 deletions
110
css/css-contain/content-visibility/content-visibility-026.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,115 +1,31 @@ | ||
| <!doctype HTML> | ||
| <html> | ||
| <meta charset="utf8"> | ||
| <title>Content Visibility: containment added</title> | ||
| <title>Content Visibility: Computed Values</title> | ||
| <link rel="author" title="Rakina Zata Amni" href="mailto:rakina@chromium.org"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility"> | ||
| <meta name="assert" content="content-visibility visible does not add containment"> | ||
| <meta name="assert" content="content-visibility hidden adds containment"> | ||
| <meta name="assert" content="content-visibility auto adds containment"> | ||
| <meta name="assert" content="content-visibility auto visibility switches after rAF callbacks of the frame that produces the painted output"> | ||
| <meta name="assert" content="content-visibility:hidden does not affect computed value of 'contain'"> | ||
| <meta name="assert" content="content-visibility:auto does not affect computed value of 'contain'"> | ||
|
|
||
| <style> | ||
| .auto { | ||
| content-visibility: auto; | ||
| } | ||
| .hidden { | ||
| content-visibility: hidden; | ||
| } | ||
| .spacer { | ||
| height: 10000px; | ||
| } | ||
| </style> | ||
| <div id="container"></div> | ||
| <div id="onscreen_container"></div> | ||
| <div class=spacer></div> | ||
| <div id="offscreen_container"></div> | ||
|
|
||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
|
|
||
| <script> | ||
| function setUp(container) { | ||
| container.style = ""; | ||
| container.classList = ""; | ||
| assert_equals(getComputedStyle(container).contain, "none"); | ||
| } | ||
|
|
||
| test(() => { | ||
| setUp(container); | ||
| container.classList.add("hidden"); | ||
| assert_equals(getComputedStyle(container).contain, "strict"); | ||
| }, "content-visibility: hidden adds contain: size layout style;"); | ||
|
|
||
| async_test((t) => { | ||
| setUp(onscreen_container); | ||
| setUp(offscreen_container); | ||
|
|
||
| function runTest() { | ||
| onscreen_container.classList.add("auto"); | ||
| offscreen_container.classList.add("auto"); | ||
|
|
||
| t.step(() => assert_equals(getComputedStyle(onscreen_container).contain, "strict", "initial onscreen")); | ||
| t.step(() => assert_equals(getComputedStyle(offscreen_container).contain, "strict", "initial offscreen")); | ||
| // Considering this as frame 1, at the end of the frame intersection observation will happen | ||
| // and determine that on-screen is visible and off-screen is not. The on-screen switch will | ||
| // happen synchronously since this is the first time we check, so for the remainder of the | ||
| // frames, on-screen should not have a size containment. | ||
|
|
||
| // For off-screen container: | ||
| // At frame 2, we verify that it has size containment. | ||
| // At frame 3, we scroll it into view and verify it has size containment. At the end of the frame | ||
| // we will determine that it is visible and schedule a visibility switch to happen at the next | ||
| // frame (at post-rAF timing). | ||
| // At frame 4, we still have size containment until after rAF callbacks. | ||
| // At frame 5, the container is no longer size-contained since it is visible. | ||
| requestAnimationFrame(() => { | ||
| // Frame 2 checks: | ||
| t.step(() => assert_equals(getComputedStyle(onscreen_container).contain, "content", "frame 2 onscreen")); | ||
| t.step(() => assert_equals(getComputedStyle(offscreen_container).contain, "strict", "frame 2 offscreen")); | ||
|
|
||
| requestAnimationFrame(() => { | ||
| window.scrollBy(0, 10000); | ||
|
|
||
| // Frame 3 checks: | ||
| t.step(() => assert_equals(getComputedStyle(offscreen_container).contain, "strict", "frame 3")); | ||
|
|
||
| requestAnimationFrame(() => { | ||
| // Frame 4 checks: | ||
| t.step(() => assert_equals(getComputedStyle(offscreen_container).contain, "strict", "frame 4")); | ||
|
|
||
| requestAnimationFrame(() => { | ||
| // Frame 5 checks: | ||
| t.step(() => assert_equals(getComputedStyle(offscreen_container).contain, "content", "frame 5")); | ||
| t.done(); | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
| } | ||
| // rAF to ensure we know where we are in the lifecycle. | ||
| requestAnimationFrame(runTest); | ||
| }, "content-visibility: auto adds contain: strict;"); | ||
| assert_equals(getComputedStyle(container).contain, "none"); | ||
| container.style = "content-visibility:hidden"; | ||
| assert_equals(getComputedStyle(container).contentVisibility, "hidden"); | ||
| assert_equals(getComputedStyle(container).contain, "none"); | ||
| }, "content-visibility:hidden does not affect computed value of 'contain'"); | ||
|
|
||
| test(() => { | ||
| setUp(container); | ||
| container.classList.add("auto"); | ||
| container.style = "contain: style;"; | ||
| assert_equals(getComputedStyle(container).contain, "strict"); | ||
| container.style = "contain: style layout;"; | ||
| assert_equals(getComputedStyle(container).contain, "strict"); | ||
| container.style = ""; | ||
| assert_equals(getComputedStyle(container).contain, "strict"); | ||
| }, "content-visibility: auto adds contain: strict, can't be overridden"); | ||
| assert_equals(getComputedStyle(container).contain, "none"); | ||
| container.style = "content-visibility:auto;contain:layout;"; | ||
| assert_equals(getComputedStyle(container).contentVisibility, "auto"); | ||
| assert_equals(getComputedStyle(container).contain, "layout"); | ||
| }, "content-visibility:auto does not affect computed value of 'contain'"); | ||
|
|
||
| test(() => { | ||
| setUp(container); | ||
| container.classList.add("auto"); | ||
| container.style = "contain: paint;"; | ||
| assert_equals(getComputedStyle(container).contain, "strict"); | ||
| container.style = "contain: strict;"; | ||
| assert_equals(getComputedStyle(container).contain, "strict"); | ||
| container.style = "contain: content;"; | ||
| assert_equals(getComputedStyle(container).contain, "strict"); | ||
| }, "content-visibility keeps all containment even when shorthands are specified"); | ||
| </script> |