Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-28 07:13:20 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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.

Differential Revision: https://phabricator.services.mozilla.com/D174583
This commit is contained in:
Jihye Hong 2023-06-02 20:16:46 +00:00
parent 385c09263b
commit 2597ec0e89
4 changed files with 101 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
servo/components/style/style_adjuster.rs
View File

@ -529,6 +529,32 @@ impl<'a, 'b: 'a> StyleAdjuster<'a, 'b> {
.set_effective_containment(new_contain);
}
/// content-visibility: auto should force contain-intrinsic-size to gain
/// an auto value
///
/// <https://github.com/w3c/csswg-drafts/issues/8407>
fn adjust_for_contain_intrinsic_size(&mut self) {
let content_visibility = self.style.get_box().clone_content_visibility();
if content_visibility != ContentVisibility::Auto {
return;
}
let pos = self.style.get_position();
let new_width = pos.clone_contain_intrinsic_width().add_auto_if_needed();
let new_height = pos.clone_contain_intrinsic_height().add_auto_if_needed();
if new_width.is_none() && new_height.is_none() {
return;
}
let pos = self.style.mutate_position();
if let Some(width) = new_width {
pos.set_contain_intrinsic_width(width);
}
if let Some(height) = new_height {
pos.set_contain_intrinsic_height(height);
}
}
/// Handles the relevant sections in:
///
/// https://drafts.csswg.org/css-display/#unbox-html
@ -948,6 +974,7 @@ impl<'a, 'b: 'a> StyleAdjuster<'a, 'b> {
self.adjust_for_position();
self.adjust_for_overflow();
self.adjust_for_contain();
self.adjust_for_contain_intrinsic_size();
#[cfg(feature = "gecko")]
{
self.adjust_for_table_text_align();

14
servo/components/style/values/computed/box.rs
View File

@ -25,6 +25,20 @@ pub type VerticalAlign = GenericVerticalAlign<LengthPercentage>;
/// A computed value for the `contain-intrinsic-size` property.
pub type ContainIntrinsicSize = GenericContainIntrinsicSize<NonNegativeLength>;
impl ContainIntrinsicSize {
/// Converts contain-intrinsic-size to auto style.
pub fn add_auto_if_needed(&self) -> Option<Self> {
use crate::Zero;
// TODO: support contain-intrinsic-size: auto none, see
// https://bugzilla.mozilla.org/show_bug.cgi?id=1835813
Some(match *self {
Self::None => Self::AutoLength(Zero::zero()),
Self::Length(ref l) => Self::AutoLength(*l),
Self::AutoLength(..) => return None,
})
}
}
/// A computed value for the `line-clamp` property.
pub type LineClamp = GenericLineClamp<Integer>;

6
testing/web-platform/tests/css/css-contain/content-visibility/content-visibility-068.html
View File

@ -87,13 +87,13 @@ async_test((t) => {
end.focus();
requestAnimationFrame(step5);
}
// After blurring the focused element, we should go back to the contained
// height of 100px.
// After blurring the focused element, we keep the last rendered size, see
// https://github.com/w3c/csswg-drafts/issues/8407.
function step5() {
const r = container.getBoundingClientRect();
t.step(() => {
assert_equals(r.y, 3000, "step5 offset");
assert_equals(r.height, 100, "step5 height");
assert_equals(r.height, 10, "step5 height");
});
t.done();
}

57
testing/web-platform/tests/css/css-sizing/contain-intrinsic-size/auto-013.html Normal file
View File

@ -0,0 +1,57 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>Last remembered size</title>
<link rel="author" title="Jihye Hong" href="mailto:jihye@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered">
<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
<link rel="help" href="https://drafts.csswg.org/css-contain-2/#content-visibility">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/8407">
<meta name="assert" content="Tests that content-visibility: auto forces contain-intrinsic-size to gain an auto value." />
<style>
#t1 {
position: absolute;
left: 0vmax;
content-visibility: auto;
contain-intrinsic-size: 1000vmax 1000vmax;
background: red;
}
#t1::before {
content: "";
display: block;
width: 10px;
height: 10px;
}
</style>
<div id="t1"></div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
function nextRendering() {
return new Promise(resolve => {
requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
});
}
promise_test(async () => {
// Size normally.
await nextRendering();
assert_equals(t1.clientWidth, 10, "Sizing normally: clientWidth");
assert_equals(t1.clientHeight, 10, "Sizing normally: clientHeight");
await nextRendering();
// Move off-screen the target. Same size as in previous step!
t1.style.left = "-200vmax";
assert_true(window.getComputedStyle(t1).containIntrinsicSize.includes("auto"), "containIntrinsicSize should be adjusted to auto");
await nextRendering();
assert_equals(t1.clientWidth, 10, "Sizing with new last remembered size: clientWidth");
assert_equals(t1.clientHeight, 10, "Sizing with new last remembered size: clientHeight");
}, 'content-visibility: auto forces contain-intrinsic-size to gain an auto value');
</script>