layout: support CSS will-change (#35787)

* support CSS `will-change`



* update wpt-test result



* Enable css-will-change test



* Update css-will-change test results



* Check transformable before will-change; update wpt-results



* Solve merge conflict



* Update Cargo.toml and Cargo.lock



* Mark new failing test-cases


---------

Signed-off-by: Euclid Ye <yezhizhenjiakang@gmail.com>
This commit is contained in:
Euclid Ye 2025-03-10 00:15:28 +08:00 committed by GitHub
parent 66583ce3c9
commit 4d73de3dde
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 84 additions and 71 deletions

40
Cargo.lock generated
View file

@ -1017,7 +1017,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "117725a109d387c937a1533ce01b450cbde6b88abceea8473c4d7a85853cda3c"
dependencies = [
"lazy_static",
"windows-sys 0.48.0",
"windows-sys 0.59.0",
]
[[package]]
@ -1687,7 +1687,7 @@ dependencies = [
[[package]]
name = "dom"
version = "0.0.1"
source = "git+https://github.com/servo/stylo?branch=2025-03-01#0190fff684fa7b67f5413a60f215e671b6222534"
source = "git+https://github.com/servo/stylo?branch=2025-03-01#a93e7efd1b4ce73d5a1b3df2337f5d16d3de121e"
dependencies = [
"bitflags 2.9.0",
"malloc_size_of",
@ -1972,7 +1972,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "33d852cb9b869c2a9b3df2f71a3074817f01e1844f839a144f5fcef059a4eb5d"
dependencies = [
"libc",
"windows-sys 0.52.0",
"windows-sys 0.59.0",
]
[[package]]
@ -2498,7 +2498,7 @@ dependencies = [
"gobject-sys",
"libc",
"system-deps",
"windows-sys 0.52.0",
"windows-sys 0.59.0",
]
[[package]]
@ -3966,7 +3966,7 @@ checksum = "e04d7f318608d35d4b61ddd75cbdaee86b023ebe2bd5a66ee0915f0bf93095a9"
dependencies = [
"hermit-abi 0.5.0",
"libc",
"windows-sys 0.52.0",
"windows-sys 0.59.0",
]
[[package]]
@ -4311,7 +4311,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "fc2f4eb4bc735547cfed7c0a4922cbd04a4655978c09b54f1f7b228750664c34"
dependencies = [
"cfg-if",
"windows-targets 0.48.5",
"windows-targets 0.52.6",
]
[[package]]
@ -4492,7 +4492,7 @@ dependencies = [
[[package]]
name = "malloc_size_of"
version = "0.0.1"
source = "git+https://github.com/servo/stylo?branch=2025-03-01#0190fff684fa7b67f5413a60f215e671b6222534"
source = "git+https://github.com/servo/stylo?branch=2025-03-01#a93e7efd1b4ce73d5a1b3df2337f5d16d3de121e"
dependencies = [
"app_units",
"cssparser",
@ -6188,7 +6188,7 @@ dependencies = [
"errno",
"libc",
"linux-raw-sys",
"windows-sys 0.52.0",
"windows-sys 0.59.0",
]
[[package]]
@ -6497,7 +6497,7 @@ dependencies = [
[[package]]
name = "selectors"
version = "0.26.0"
source = "git+https://github.com/servo/stylo?branch=2025-03-01#0190fff684fa7b67f5413a60f215e671b6222534"
source = "git+https://github.com/servo/stylo?branch=2025-03-01#a93e7efd1b4ce73d5a1b3df2337f5d16d3de121e"
dependencies = [
"bitflags 2.9.0",
"cssparser",
@ -6782,7 +6782,7 @@ dependencies = [
[[package]]
name = "servo_arc"
version = "0.4.0"
source = "git+https://github.com/servo/stylo?branch=2025-03-01#0190fff684fa7b67f5413a60f215e671b6222534"
source = "git+https://github.com/servo/stylo?branch=2025-03-01#a93e7efd1b4ce73d5a1b3df2337f5d16d3de121e"
dependencies = [
"serde",
"stable_deref_trait",
@ -6791,7 +6791,7 @@ dependencies = [
[[package]]
name = "servo_atoms"
version = "0.0.1"
source = "git+https://github.com/servo/stylo?branch=2025-03-01#0190fff684fa7b67f5413a60f215e671b6222534"
source = "git+https://github.com/servo/stylo?branch=2025-03-01#a93e7efd1b4ce73d5a1b3df2337f5d16d3de121e"
dependencies = [
"string_cache",
"string_cache_codegen",
@ -7149,7 +7149,7 @@ checksum = "a2eb9349b6444b326872e140eb1cf5e7c522154d69e7a0ffb0fb81c06b37543f"
[[package]]
name = "static_prefs"
version = "0.1.0"
source = "git+https://github.com/servo/stylo?branch=2025-03-01#0190fff684fa7b67f5413a60f215e671b6222534"
source = "git+https://github.com/servo/stylo?branch=2025-03-01#a93e7efd1b4ce73d5a1b3df2337f5d16d3de121e"
[[package]]
name = "strck"
@ -7229,7 +7229,7 @@ dependencies = [
[[package]]
name = "style"
version = "0.0.1"
source = "git+https://github.com/servo/stylo?branch=2025-03-01#0190fff684fa7b67f5413a60f215e671b6222534"
source = "git+https://github.com/servo/stylo?branch=2025-03-01#a93e7efd1b4ce73d5a1b3df2337f5d16d3de121e"
dependencies = [
"app_units",
"arrayvec",
@ -7287,7 +7287,7 @@ dependencies = [
[[package]]
name = "style_config"
version = "0.0.1"
source = "git+https://github.com/servo/stylo?branch=2025-03-01#0190fff684fa7b67f5413a60f215e671b6222534"
source = "git+https://github.com/servo/stylo?branch=2025-03-01#a93e7efd1b4ce73d5a1b3df2337f5d16d3de121e"
dependencies = [
"lazy_static",
]
@ -7295,7 +7295,7 @@ dependencies = [
[[package]]
name = "style_derive"
version = "0.0.1"
source = "git+https://github.com/servo/stylo?branch=2025-03-01#0190fff684fa7b67f5413a60f215e671b6222534"
source = "git+https://github.com/servo/stylo?branch=2025-03-01#a93e7efd1b4ce73d5a1b3df2337f5d16d3de121e"
dependencies = [
"darling",
"proc-macro2",
@ -7325,7 +7325,7 @@ dependencies = [
[[package]]
name = "style_traits"
version = "0.0.1"
source = "git+https://github.com/servo/stylo?branch=2025-03-01#0190fff684fa7b67f5413a60f215e671b6222534"
source = "git+https://github.com/servo/stylo?branch=2025-03-01#a93e7efd1b4ce73d5a1b3df2337f5d16d3de121e"
dependencies = [
"app_units",
"bitflags 2.9.0",
@ -7490,7 +7490,7 @@ dependencies = [
"getrandom",
"once_cell",
"rustix",
"windows-sys 0.52.0",
"windows-sys 0.59.0",
]
[[package]]
@ -7709,7 +7709,7 @@ dependencies = [
[[package]]
name = "to_shmem"
version = "0.1.0"
source = "git+https://github.com/servo/stylo?branch=2025-03-01#0190fff684fa7b67f5413a60f215e671b6222534"
source = "git+https://github.com/servo/stylo?branch=2025-03-01#a93e7efd1b4ce73d5a1b3df2337f5d16d3de121e"
dependencies = [
"cssparser",
"servo_arc",
@ -7722,7 +7722,7 @@ dependencies = [
[[package]]
name = "to_shmem_derive"
version = "0.1.0"
source = "git+https://github.com/servo/stylo?branch=2025-03-01#0190fff684fa7b67f5413a60f215e671b6222534"
source = "git+https://github.com/servo/stylo?branch=2025-03-01#a93e7efd1b4ce73d5a1b3df2337f5d16d3de121e"
dependencies = [
"darling",
"proc-macro2",
@ -8795,7 +8795,7 @@ version = "0.1.9"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "cf221c93e13a30d793f7645a0e7762c55d169dbb0a49671918a2319d289b10bb"
dependencies = [
"windows-sys 0.48.0",
"windows-sys 0.59.0",
]
[[package]]

View file

@ -25,7 +25,7 @@ use style::values::computed::{AlignItems, BorderStyle, Color, Inset, LengthPerce
use style::values::generics::box_::Perspective;
use style::values::generics::position::{GenericAspectRatio, PreferredRatio};
use style::values::specified::align::AlignFlags;
use style::values::specified::{Overflow, box_ as stylo};
use style::values::specified::{Overflow, WillChangeBits, box_ as stylo};
use webrender_api as wr;
use crate::dom_traversal::Contents;
@ -639,6 +639,21 @@ impl ComputedValuesExt for ComputedValues {
return true;
}
// From <https://www.w3.org/TR/css-will-change/#valdef-will-change-custom-ident>:
// > If any non-initial value of a property would create a stacking context on the element,
// > specifying that property in will-change must create a stacking context on the element.
let will_change_bits = self.clone_will_change().bits;
if will_change_bits.intersects(
WillChangeBits::OPACITY |
WillChangeBits::STACKING_CONTEXT_UNCONDITIONAL |
WillChangeBits::Z_INDEX,
) || (will_change_bits
.intersects(WillChangeBits::PERSPECTIVE | WillChangeBits::TRANSFORM) &&
self.is_transformable(fragment_flags))
{
return true;
}
// Statically positioned fragments don't establish stacking contexts if the previous
// conditions are not fulfilled. Furthermore, z-index doesn't apply to statically
// positioned fragments (except for flex items, see below).
@ -674,6 +689,18 @@ impl ComputedValuesExt for ComputedValues {
return true;
}
// From <https://www.w3.org/TR/css-will-change/#valdef-will-change-custom-ident>:
// > If any non-initial value of a property would cause the element to
// > generate a containing block for absolutely positioned elements, specifying that property in
// > will-change must cause the element to generate a containing block for absolutely positioned elements.
if self
.clone_will_change()
.bits
.intersects(WillChangeBits::POSITION)
{
return true;
}
self.clone_position() != ComputedPosition::Static
}
@ -699,6 +726,18 @@ impl ComputedValuesExt for ComputedValues {
{
return true;
}
// From <https://www.w3.org/TR/css-will-change/#valdef-will-change-custom-ident>:
// > If any non-initial value of a property would cause the element to generate a
// > containing block for fixed positioned elements, specifying that property in will-change
// > must cause the element to generate a containing block for fixed positioned elements.
let will_change_bits = self.clone_will_change().bits;
if will_change_bits.intersects(WillChangeBits::FIXPOS_CB_NON_SVG) ||
(will_change_bits
.intersects(WillChangeBits::TRANSFORM | WillChangeBits::PERSPECTIVE) &&
self.is_transformable(fragment_flags))
{
return true;
}
// TODO: We need to handle CSS Contain here.
false

View file

@ -115,8 +115,6 @@ skip: true
skip: true
[css-viewport]
skip: true
[css-will-change]
skip: true
[css-writing-modes]
skip: true
[fetching]

View file

@ -4,12 +4,3 @@
[Property padding value '10px 20% 30% 40px']
expected: FAIL
[Property padding-right value '20%']
expected: FAIL
[Property padding-top value 'calc(10% - 40px)']
expected: FAIL
[Property padding-right value 'calc(10% + 40px)']
expected: FAIL

View file

@ -1,9 +0,0 @@
[margin-block-inline-computed.html]
[Property margin-block-end value '10%']
expected: FAIL
[Property margin-block-start value 'calc(10% + 40px)']
expected: FAIL
[Property margin-inline-end value 'calc(10% + 40px)']
expected: FAIL

View file

@ -1,15 +0,0 @@
[padding-block-inline-computed.html]
[Property padding-block-end value '10%']
expected: FAIL
[Property padding-block-start value 'calc(10% + 40px)']
expected: FAIL
[Property padding-block-end value 'calc(10% - 40px)']
expected: FAIL
[Property padding-inline-start value 'calc(10% - 40px)']
expected: FAIL
[Property padding-inline-end value 'calc(10% + 40px)']
expected: FAIL

View file

@ -1,12 +0,0 @@
[position-absolute-dynamic-containing-block.html]
[fixed containing block moves from outer to intermediate]
expected: FAIL
[fixed containing block moves from intermediate to outer]
expected: FAIL
[target is no longer fixed]
expected: FAIL
[target becomes fixed]
expected: FAIL

View file

@ -1,3 +0,0 @@
[transform-important.html]
[CSS Transforms: !important flag parsing]
expected: FAIL

View file

@ -0,0 +1,2 @@
[will-change-abspos-cb-003.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[will-change-fixedpos-cb-003.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[will-change-fixedpos-cb-004.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[will-change-fixedpos-cb-005.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[will-change-fixpos-cb-contain-1.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[will-change-fixpos-cb-offset-path-1.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[will-change-fixpos-cb-webkit-perspective-1.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[will-change-stacking-context-backdrop-filter-1.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[will-change-stacking-context-mask-1.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[will-change-stacking-context-mask-image-1.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[will-change-stacking-context-offset-path-1.html]
expected: FAIL

View file

@ -0,0 +1,2 @@
[will-change-stacking-context-view-transition-name-1.html]
expected: FAIL