nagai/fune
3
0
Fork 0
forked from mirrors/gecko-dev
Code Pull requests Activity

Bug 1834876 - Part 4: Fix the case when changing the display from none. r=layout-reviewers,firefox-style-system-reviewers,emilio

Browse source 
Add one extra branch if we have before-change style but its display
is none, and the new style is not display:none. Also, we add an extra
subtest if we use the container query to change the display property.

Differential Revision: https://phabricator.services.mozilla.com/D208572
This commit is contained in:
Boris Chiou 2024-04-30 05:06:54 +00:00
parent 8772ca331e
commit ca4cb0656a
4 changed files with 57 additions and 22 deletions
repo.diff.show_diff_stats Download patch file Download diff file Expand all files Collapse all files

17
servo/components/style/matching.rs
View file

@ -426,8 +426,9 @@ trait PrivateMatchMethods: TElement {
// Note: Basically, we have to remove transition rules because the starting style for an // Note: Basically, we have to remove transition rules because the starting style for an
// element is the after-change style with @starting-style rules applied in addition. // element is the after-change style with @starting-style rules applied in addition.
// However, we expect there is no transition rules for this element when calling this // However, we expect there is no transition rules for this element when calling this
// function because we do this only when we don't have before-change style and it's // function because we do this only when we don't have before-change style or we change
// unlikely to have running transitions on this element. // from display:none. In these cases, it's unlikely to have running transitions on this
// element.
let mut resolver = StyleResolverForElement::new( let mut resolver = StyleResolverForElement::new(
*self, *self,
context, context,
@ -460,11 +461,13 @@ trait PrivateMatchMethods: TElement {
return None; return None;
} }
// If we don't have before-change-style, we don't have to resolve starting style. // We resolve starting style only if we don't have before-change-style, or we change from
// FIXME: we may have to resolve starting style if the old style is display:none and the new // display:none.
// style change the display property. We will have a tentative solution in the following if old_values.is_some()
// patches. && !new_styles
if old_values.is_some() { .primary_style()
.is_display_property_changed_from_none(old_values.map(|s| &**s))
{
return None; return None;
} }

6
testing/web-platform/meta/css/css-transitions/starting-style-cascade.html.ini
View file

@ -1,6 +0,0 @@
[starting-style-cascade.html]
[@starting-style with higher specificity]
expected: FAIL
[Starting style inheriting from parent's after-change style while parent transitioning]
expected: FAIL

3
testing/web-platform/meta/css/css-transitions/starting-style-rule-basic.html.ini
View file

@ -1,3 +0,0 @@
[starting-style-rule-basic.html]
[Triggered transition from display:none to display:block]
expected: FAIL

53
testing/web-platform/tests/css/css-transitions/starting-style-size-container.html
View file

@ -5,32 +5,58 @@
<script src="/resources/testharness.js"></script> <script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script> <script src="/resources/testharnessreport.js"></script>
<script src="/css/css-transitions/support/helper.js"></script> <script src="/css/css-transitions/support/helper.js"></script>
<div id="container" style="width: 200px"> <body>
<div id="target" style="display: none"></div> </body>
</div>
<style> <style>
#container { #container {
container-type: inline-size; container-type: inline-size;
width: 100px;
} }
#target { #target {
transition-property: background-color; transition-property: background-color;
transition-duration: 100s; transition-duration: 100s;
transition-timing-function: steps(2, start); transition-timing-function: steps(2, start);
background-color: lime; background-color: lime;
display: none;
} }
@container (width > 300px) { @container (width > 300px) {
@starting-style { @starting-style {
#target { background-color: white; } #target { background-color: white; }
} }
} }
@container (width < 300px) { @container ((width > 200px) and (width < 300px)) {
#target {
display: block;
}
@starting-style {
#target { background-color: white; }
}
}
@container (width < 200px) {
@starting-style { @starting-style {
#target { background-color: red; } #target { background-color: red; }
} }
} }
</style> </style>
<script> <script>
function setup(test) {
let container = document.createElement("div");
container.id = "container";
document.body.appendChild(container);
let target = document.createElement("div");
target.id = "target";
container.appendChild(target);
test.add_cleanup(() => {
target.remove();
container.remove();
});
return [container, target];
}
promise_test(async t => { promise_test(async t => {
let [container, target] = setup(t);
await waitForAnimationFrames(2); await waitForAnimationFrames(2);
assert_equals(getComputedStyle(target).backgroundColor, "rgb(0, 255, 0)", assert_equals(getComputedStyle(target).backgroundColor, "rgb(0, 255, 0)",
"No transition while display:none"); "No transition while display:none");
@ -38,6 +64,21 @@
target.style.display = "block"; target.style.display = "block";
await waitForAnimationFrames(2); await waitForAnimationFrames(2);
assert_equals(getComputedStyle(target).backgroundColor, "rgb(128, 255, 128)", assert_equals(getComputedStyle(target).backgroundColor, "rgb(128, 255, 128)",
"@starting-style based on the size query evaluation from the same frame"); "@starting-style based on the size query evaluation from " +
}, "Triggered transition from first style update based on up-to-date container query"); "the same frame");
}, "Triggered transition from first style update based on up-to-date " +
"container query");
promise_test(async t => {
let [container, target] = setup(t);
await waitForAnimationFrames(2);
assert_equals(getComputedStyle(target).backgroundColor, "rgb(0, 255, 0)",
"No transition while display:none");
container.style.width = "250px";
await waitForAnimationFrames(2);
assert_equals(getComputedStyle(target).backgroundColor, "rgb(128, 255, 128)",
"@starting-style based on the size query evaluation from " +
"the same frame");
}, "Triggered transition from the display change inside the up-to-date " +
"container query");
</script> </script>