mirror of
https://github.com/servo/servo.git
synced 2025-08-03 12:40:06 +01:00
Support for the isolation CSS property (#35552)
* Support for the isolation CSS property Signed-off-by: Kingsley Yung <kingsley@kkoyung.dev> * Temporarily bump stylo to refs/pull/125/head for testing Signed-off-by: Kingsley Yung <kingsley@kkoyung.dev> * Remove FAIL expectation of CSS isolation tests Signed-off-by: Kingsley Yung <kingsley@kkoyung.dev> * Add behavior test Signed-off-by: Oriol Brufau <obrufau@igalia.com> * Revert temporary changes in Cargo.toml Signed-off-by: Kingsley Yung <kingsley@kkoyung.dev> --------- Signed-off-by: Kingsley Yung <kingsley@kkoyung.dev> Signed-off-by: Oriol Brufau <obrufau@igalia.com> Co-authored-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Kingsley Yung
GitHub
parent
d42146ce91
commit
fc14b10099
8 changed files with 60 additions and 144 deletions
24
Cargo.lock
generated
24
Cargo.lock
generated
|
|
@ -1686,7 +1686,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "dom"
|
||||
version = "0.0.1"
|
||||
source = "git+https://github.com/servo/stylo?branch=2025-02-03#7eaabe1687ea6afa84c6d7d6b8c1b3466aa56a36"
|
||||
source = "git+https://github.com/servo/stylo?branch=2025-02-03#8c57436148122c32b3cc3d40ee7c71806af1d087"
|
||||
dependencies = [
|
||||
"bitflags 2.8.0",
|
||||
"malloc_size_of",
|
||||
|
|
@ -4483,7 +4483,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "malloc_size_of"
|
||||
version = "0.0.1"
|
||||
source = "git+https://github.com/servo/stylo?branch=2025-02-03#7eaabe1687ea6afa84c6d7d6b8c1b3466aa56a36"
|
||||
source = "git+https://github.com/servo/stylo?branch=2025-02-03#8c57436148122c32b3cc3d40ee7c71806af1d087"
|
||||
dependencies = [
|
||||
"app_units",
|
||||
"cssparser",
|
||||
|
|
@ -6488,7 +6488,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "selectors"
|
||||
version = "0.26.0"
|
||||
source = "git+https://github.com/servo/stylo?branch=2025-02-03#7eaabe1687ea6afa84c6d7d6b8c1b3466aa56a36"
|
||||
source = "git+https://github.com/servo/stylo?branch=2025-02-03#8c57436148122c32b3cc3d40ee7c71806af1d087"
|
||||
dependencies = [
|
||||
"bitflags 2.8.0",
|
||||
"cssparser",
|
||||
|
|
@ -6773,7 +6773,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "servo_arc"
|
||||
version = "0.4.0"
|
||||
source = "git+https://github.com/servo/stylo?branch=2025-02-03#7eaabe1687ea6afa84c6d7d6b8c1b3466aa56a36"
|
||||
source = "git+https://github.com/servo/stylo?branch=2025-02-03#8c57436148122c32b3cc3d40ee7c71806af1d087"
|
||||
dependencies = [
|
||||
"serde",
|
||||
"stable_deref_trait",
|
||||
|
|
@ -6782,7 +6782,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "servo_atoms"
|
||||
version = "0.0.1"
|
||||
source = "git+https://github.com/servo/stylo?branch=2025-02-03#7eaabe1687ea6afa84c6d7d6b8c1b3466aa56a36"
|
||||
source = "git+https://github.com/servo/stylo?branch=2025-02-03#8c57436148122c32b3cc3d40ee7c71806af1d087"
|
||||
dependencies = [
|
||||
"string_cache",
|
||||
"string_cache_codegen",
|
||||
|
|
@ -7140,7 +7140,7 @@ checksum = "a2eb9349b6444b326872e140eb1cf5e7c522154d69e7a0ffb0fb81c06b37543f"
|
|||
[[package]]
|
||||
name = "static_prefs"
|
||||
version = "0.1.0"
|
||||
source = "git+https://github.com/servo/stylo?branch=2025-02-03#7eaabe1687ea6afa84c6d7d6b8c1b3466aa56a36"
|
||||
source = "git+https://github.com/servo/stylo?branch=2025-02-03#8c57436148122c32b3cc3d40ee7c71806af1d087"
|
||||
|
||||
[[package]]
|
||||
name = "strck"
|
||||
|
|
@ -7220,7 +7220,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "style"
|
||||
version = "0.0.1"
|
||||
source = "git+https://github.com/servo/stylo?branch=2025-02-03#7eaabe1687ea6afa84c6d7d6b8c1b3466aa56a36"
|
||||
source = "git+https://github.com/servo/stylo?branch=2025-02-03#8c57436148122c32b3cc3d40ee7c71806af1d087"
|
||||
dependencies = [
|
||||
"app_units",
|
||||
"arrayvec",
|
||||
|
|
@ -7278,7 +7278,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "style_config"
|
||||
version = "0.0.1"
|
||||
source = "git+https://github.com/servo/stylo?branch=2025-02-03#7eaabe1687ea6afa84c6d7d6b8c1b3466aa56a36"
|
||||
source = "git+https://github.com/servo/stylo?branch=2025-02-03#8c57436148122c32b3cc3d40ee7c71806af1d087"
|
||||
dependencies = [
|
||||
"lazy_static",
|
||||
]
|
||||
|
|
@ -7286,7 +7286,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "style_derive"
|
||||
version = "0.0.1"
|
||||
source = "git+https://github.com/servo/stylo?branch=2025-02-03#7eaabe1687ea6afa84c6d7d6b8c1b3466aa56a36"
|
||||
source = "git+https://github.com/servo/stylo?branch=2025-02-03#8c57436148122c32b3cc3d40ee7c71806af1d087"
|
||||
dependencies = [
|
||||
"darling",
|
||||
"proc-macro2",
|
||||
|
|
@ -7316,7 +7316,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "style_traits"
|
||||
version = "0.0.1"
|
||||
source = "git+https://github.com/servo/stylo?branch=2025-02-03#7eaabe1687ea6afa84c6d7d6b8c1b3466aa56a36"
|
||||
source = "git+https://github.com/servo/stylo?branch=2025-02-03#8c57436148122c32b3cc3d40ee7c71806af1d087"
|
||||
dependencies = [
|
||||
"app_units",
|
||||
"bitflags 2.8.0",
|
||||
|
|
@ -7710,7 +7710,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "to_shmem"
|
||||
version = "0.1.0"
|
||||
source = "git+https://github.com/servo/stylo?branch=2025-02-03#7eaabe1687ea6afa84c6d7d6b8c1b3466aa56a36"
|
||||
source = "git+https://github.com/servo/stylo?branch=2025-02-03#8c57436148122c32b3cc3d40ee7c71806af1d087"
|
||||
dependencies = [
|
||||
"cssparser",
|
||||
"servo_arc",
|
||||
|
|
@ -7723,7 +7723,7 @@ dependencies = [
|
|||
[[package]]
|
||||
name = "to_shmem_derive"
|
||||
version = "0.1.0"
|
||||
source = "git+https://github.com/servo/stylo?branch=2025-02-03#7eaabe1687ea6afa84c6d7d6b8c1b3466aa56a36"
|
||||
source = "git+https://github.com/servo/stylo?branch=2025-02-03#8c57436148122c32b3cc3d40ee7c71806af1d087"
|
||||
dependencies = [
|
||||
"darling",
|
||||
"proc-macro2",
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
use app_units::Au;
|
||||
use style::color::AbsoluteColor;
|
||||
use style::computed_values::direction::T as Direction;
|
||||
use style::computed_values::isolation::T as ComputedIsolation;
|
||||
use style::computed_values::mix_blend_mode::T as ComputedMixBlendMode;
|
||||
use style::computed_values::position::T as ComputedPosition;
|
||||
use style::computed_values::transform_style::T as ComputedTransformStyle;
|
||||
|
|
@ -602,6 +603,10 @@ impl ComputedValuesExt for ComputedValues {
|
|||
return true;
|
||||
}
|
||||
|
||||
if self.get_box().isolation == ComputedIsolation::Isolate {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Fixed position and sticky position always create stacking contexts.
|
||||
// TODO(mrobinson): We need to handle sticky positioning here when we support it.
|
||||
if self.get_box().position == ComputedPosition::Fixed {
|
||||
|
|
|
|||
15
tests/wpt/meta/MANIFEST.json
vendored
15
tests/wpt/meta/MANIFEST.json
vendored
|
|
@ -122597,6 +122597,21 @@
|
|||
]
|
||||
]
|
||||
},
|
||||
"isolation": {
|
||||
"isolation-establishes-stacking-context.html": [
|
||||
"78d3b82caaccc6c14f1f62039a1554c1f18c4d83",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/css/reference/ref-filled-green-100px-square.xht",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
]
|
||||
},
|
||||
"mix-blend-mode": {
|
||||
"mix-blend-mode-animation.html": [
|
||||
"55618485d880d20668e7ab9d1379ef8792af5fe2",
|
||||
|
|
|
|||
|
|
@ -4,9 +4,3 @@
|
|||
|
||||
[Property background-blend-mode does not inherit]
|
||||
expected: FAIL
|
||||
|
||||
[Property isolation has initial value auto]
|
||||
expected: FAIL
|
||||
|
||||
[Property isolation does not inherit]
|
||||
expected: FAIL
|
||||
|
|
|
|||
|
|
@ -1,67 +1,4 @@
|
|||
[isolation-no-interpolation.html]
|
||||
[CSS Transitions: property <isolation> from [initial\] to [isolate\] at (-0.3) should be [initial\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Transitions: property <isolation> from [initial\] to [isolate\] at (0) should be [initial\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Transitions: property <isolation> from [initial\] to [isolate\] at (0.3) should be [initial\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Transitions: property <isolation> from [initial\] to [isolate\] at (0.5) should be [isolate\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Transitions: property <isolation> from [initial\] to [isolate\] at (0.6) should be [isolate\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Transitions: property <isolation> from [initial\] to [isolate\] at (1) should be [isolate\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Transitions: property <isolation> from [initial\] to [isolate\] at (1.5) should be [isolate\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Transitions with transition: all: property <isolation> from [initial\] to [isolate\] at (-0.3) should be [isolate\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Transitions with transition: all: property <isolation> from [initial\] to [isolate\] at (0) should be [isolate\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Transitions with transition: all: property <isolation> from [initial\] to [isolate\] at (0.3) should be [isolate\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Transitions with transition: all: property <isolation> from [initial\] to [isolate\] at (0.5) should be [isolate\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Transitions with transition: all: property <isolation> from [initial\] to [isolate\] at (0.6) should be [isolate\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Transitions with transition: all: property <isolation> from [initial\] to [isolate\] at (1) should be [isolate\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Transitions with transition: all: property <isolation> from [initial\] to [isolate\] at (1.5) should be [isolate\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Animations: property <isolation> from [initial\] to [isolate\] at (-0.3) should be [initial\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Animations: property <isolation> from [initial\] to [isolate\] at (0) should be [initial\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Animations: property <isolation> from [initial\] to [isolate\] at (0.3) should be [initial\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Animations: property <isolation> from [initial\] to [isolate\] at (0.5) should be [isolate\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Animations: property <isolation> from [initial\] to [isolate\] at (0.6) should be [isolate\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Animations: property <isolation> from [initial\] to [isolate\] at (1) should be [isolate\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Animations: property <isolation> from [initial\] to [isolate\] at (1.5) should be [isolate\]]
|
||||
expected: FAIL
|
||||
|
||||
[Web Animations: property <isolation> from [initial\] to [isolate\] at (-0.3) should be [initial\]]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -82,54 +19,3 @@
|
|||
|
||||
[Web Animations: property <isolation> from [initial\] to [isolate\] at (1.5) should be [isolate\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Transitions: property <isolation> from [initial\] to [isolate\] at (-0.3) should be [isolate\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Transitions: property <isolation> from [initial\] to [isolate\] at (0) should be [isolate\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Transitions: property <isolation> from [initial\] to [isolate\] at (0.3) should be [isolate\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Transitions with transition-behavior:allow-discrete: property <isolation> from [initial\] to [isolate\] at (-0.3) should be [initial\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Transitions with transition-behavior:allow-discrete: property <isolation> from [initial\] to [isolate\] at (0) should be [initial\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Transitions with transition-behavior:allow-discrete: property <isolation> from [initial\] to [isolate\] at (0.3) should be [initial\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Transitions with transition-behavior:allow-discrete: property <isolation> from [initial\] to [isolate\] at (0.5) should be [isolate\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Transitions with transition-behavior:allow-discrete: property <isolation> from [initial\] to [isolate\] at (0.6) should be [isolate\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Transitions with transition-behavior:allow-discrete: property <isolation> from [initial\] to [isolate\] at (1) should be [isolate\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Transitions with transition-behavior:allow-discrete: property <isolation> from [initial\] to [isolate\] at (1.5) should be [isolate\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <isolation> from [initial\] to [isolate\] at (-0.3) should be [initial\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <isolation> from [initial\] to [isolate\] at (0) should be [initial\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <isolation> from [initial\] to [isolate\] at (0.3) should be [initial\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <isolation> from [initial\] to [isolate\] at (0.5) should be [isolate\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <isolation> from [initial\] to [isolate\] at (0.6) should be [isolate\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <isolation> from [initial\] to [isolate\] at (1) should be [isolate\]]
|
||||
expected: FAIL
|
||||
|
||||
[CSS Transitions with transition-property:all and transition-behavor:allow-discrete: property <isolation> from [initial\] to [isolate\] at (1.5) should be [isolate\]]
|
||||
expected: FAIL
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
[isolation-computed.html]
|
||||
[Property isolation value 'auto']
|
||||
expected: FAIL
|
||||
|
||||
[Property isolation value 'isolate']
|
||||
expected: FAIL
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
[isolation-valid.html]
|
||||
[e.style['isolation'\] = "auto" should set the property value]
|
||||
expected: FAIL
|
||||
|
||||
[e.style['isolation'\] = "isolate" should set the property value]
|
||||
expected: FAIL
|
||||
28
tests/wpt/tests/css/compositing/isolation/isolation-establishes-stacking-context.html
vendored
Normal file
28
tests/wpt/tests/css/compositing/isolation/isolation-establishes-stacking-context.html
vendored
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Compositing and Blending: The isolation property</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/compositing-1/#isolation">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name="assert" content="For CSS, setting `isolation` to `isolate` will turn the element into a stacking context.">
|
||||
|
||||
<style>
|
||||
#parent {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
isolation: isolate;
|
||||
background: red;
|
||||
}
|
||||
#child {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="parent">
|
||||
<div id="child"></div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue