Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Include animations and transitions in the cascade #26806

Merged
merged 2 commits into from Jun 10, 2020

Conversation

@mrobinson
Copy link
Member

mrobinson commented Jun 5, 2020

Instead of applying animations and transitions to styled elements,
include them in the cascade. This allows them to interact properly with
things like font-size and !important rules.


  • ./mach build -d does not report any errors
  • ./mach test-tidy does not report any errors
  • There are tests for these changes
@mrobinson mrobinson requested a review from emilio Jun 5, 2020
@highfive
Copy link

highfive commented Jun 5, 2020

Heads up! This PR modifies the following files:

  • @emilio: components/style/sharing/mod.rs, components/style/traversal.rs, components/style/style_resolver.rs, components/style/properties/properties.mako.rs, components/style/dom.rs and 3 more
RuleInclusion::All,
PseudoElementResolution::IfApplicable,
);
let new_primary = resolver.resolve_style_with_default_parents();

This comment has been minimized.

Copy link
@emilio

emilio Jun 5, 2020

Member

I'm a bit confused about this. Why does this need to resolve_*, then re-cascade?

This comment has been minimized.

Copy link
@mrobinson

mrobinson Jun 8, 2020

Author Member

You're right. Re-cascading here is bogus. I've fixed this in the latest version of the branch.

This comment has been minimized.

Copy link
@emilio

emilio Jun 8, 2020

Member

So... I'm still a bit unclear on why this is the right thing to do. This is not just recascading but also re-selector-matching. I'd expect this to do basically just this.

And to be clear, I think this is fine as a stepping-stone if needed, but I don't understand why something like that wouldn't work.

This comment has been minimized.

Copy link
@mrobinson

mrobinson Jun 8, 2020

Author Member

You're right. I think I was trying this before, but not properly replacing rules. I'll need to do it a bit more carefully because replace_rules is written with the animations-only restyle in mind. Thanks for the feedback.

@mrobinson mrobinson force-pushed the mrobinson:animations-cascade branch from 26daf2a to b95d7e9 Jun 8, 2020
@mrobinson
Copy link
Member Author

mrobinson commented Jun 8, 2020

@emilio, thanks for taking a look at this. I've addressed your comment and also have made a few changes in order to avoid re-resolving the style when animations or transitions aren't changing.

@mrobinson
Copy link
Member Author

mrobinson commented Jun 8, 2020

I've pushed a new commit to the branch that replaces the transition and animations rules directly and then does a re-cascade.

@mrobinson mrobinson force-pushed the mrobinson:animations-cascade branch from 9fabdd6 to 1ee8c0f Jun 8, 2020
Instead of applying animations and transitions to styled elements,
include them in the cascade. This allows them to interact properly with
things like font-size and !important rules.
@mrobinson mrobinson force-pushed the mrobinson:animations-cascade branch from 1ee8c0f to ae997fe Jun 10, 2020
@mrobinson
Copy link
Member Author

mrobinson commented Jun 10, 2020

I have a pushed a new version of the branch that uses StyleResolver::.cascade_style_and_visited_with_default_parents instead of cascade_styles_with_default_parents, simplifying the second commit.

@emilio
emilio approved these changes Jun 10, 2020
Copy link
Member

emilio left a comment

Thank you, this looks pretty sensible!

}

fn cancel_active_transitions(&mut self) {
self.dirty = !self.transitions.is_empty();

This comment has been minimized.

Copy link
@emilio

emilio Jun 10, 2020

Member

Does this dirty too much? Should it just dirty right before the transition.state = assignment?

This comment has been minimized.

Copy link
@mrobinson

mrobinson Jun 10, 2020

Author Member

Yep. This could be better. This now sets the dirty bit right before the change.

}

// If we have modified animation or transitions, we recascade style for this node.
let mut rule_node = new_resolved_styles.primary.style.0.rules().clone();

This comment has been minimized.

Copy link
@emilio

emilio Jun 10, 2020

Member

May be worth exposing a ResolvedElementStyles::primary_style() or something so that this reads a bit better, but no big deal.

This comment has been minimized.

Copy link
@mrobinson

mrobinson Jun 10, 2020

Author Member

Okay. I've exposed ResolvedElementStyles::primary_style() and ResolvedElementStyles::primary_style_mut(). It does read better now.

.as_ref()
.map(|a| a.borrow_arc()),
&mut rule_node,
);

This comment has been minimized.

Copy link
@emilio

emilio Jun 10, 2020

Member

May be worth either asserting that rule_node is not the primary style's rule node anymore, or check for that and bail out.

This comment has been minimized.

Copy link
@mrobinson

mrobinson Jun 10, 2020

Author Member

This makes sense. I've changed it to return early if the rule nodes are equal after replacing them.

@mrobinson mrobinson force-pushed the mrobinson:animations-cascade branch 2 times, most recently from dfdfcc5 to f6ca6cf Jun 10, 2020
@mrobinson
Copy link
Member Author

mrobinson commented Jun 10, 2020

@bors-servo r=emilio

@bors-servo
Copy link
Contributor

bors-servo commented Jun 10, 2020

📌 Commit f6ca6cf has been approved by emilio

@mrobinson
Copy link
Member Author

mrobinson commented Jun 10, 2020

Thanks for the review!

@bors-servo
Copy link
Contributor

bors-servo commented Jun 10, 2020

Testing commit f6ca6cf with merge 2cea89f...

bors-servo added a commit that referenced this pull request Jun 10, 2020
Include animations and transitions in the cascade

Instead of applying animations and transitions to styled elements,
include them in the cascade. This allows them to interact properly with
things like font-size and !important rules.

<!-- Please describe your changes on the following line: -->

---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `___` with appropriate data: -->
- [x] `./mach build -d` does not report any errors
- [x] `./mach test-tidy` does not report any errors
- [x] There are tests for these changes

<!-- Also, please make sure that "Allow edits from maintainers" checkbox is checked, so that we can help you if you get stuck somewhere along the way.-->

<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->
@bors-servo
Copy link
Contributor

bors-servo commented Jun 10, 2020

💔 Test failed - status-taskcluster

@jdm
Copy link
Member

jdm commented Jun 10, 2020

1 unexpected results that are NOT known-intermittents:
  â–¶ Unexpected subtest result in /css/css-color/animation/opacity-interpolation.html:
  â”” PASS [expected FAIL] CSS Transitions: property <opacity> from [initial] to [0.2] at (-0.3) should be [1]

  â–¶ Unexpected subtest result in /css/css-color/animation/opacity-interpolation.html:
  â”” PASS [expected FAIL] CSS Transitions: property <opacity> from [initial] to [0.2] at (1.5) should be [0]

  â–¶ Unexpected subtest result in /css/css-color/animation/opacity-interpolation.html:
  â”” PASS [expected FAIL] CSS Transitions with transition: all: property <opacity> from [initial] to [0.2] at (-0.3) should be [1]

  â–¶ Unexpected subtest result in /css/css-color/animation/opacity-interpolation.html:
  â”” PASS [expected FAIL] CSS Transitions with transition: all: property <opacity> from [initial] to [0.2] at (1.5) should be [0]

  â–¶ Unexpected subtest result in /css/css-color/animation/opacity-interpolation.html:
  â”” PASS [expected FAIL] CSS Animations: property <opacity> from [initial] to [0.2] at (-0.3) should be [1]

  â–¶ Unexpected subtest result in /css/css-color/animation/opacity-interpolation.html:
  â”” PASS [expected FAIL] CSS Animations: property <opacity> from [initial] to [0.2] at (1.5) should be [0]

  â–¶ Unexpected subtest result in /css/css-color/animation/opacity-interpolation.html:
  â”” PASS [expected FAIL] CSS Transitions: property <opacity> from [inherit] to [0.2] at (1.5) should be [0]

  â–¶ Unexpected subtest result in /css/css-color/animation/opacity-interpolation.html:
  â”” PASS [expected FAIL] CSS Transitions with transition: all: property <opacity> from [inherit] to [0.2] at (1.5) should be [0]

  â–¶ Unexpected subtest result in /css/css-color/animation/opacity-interpolation.html:
  â”” PASS [expected FAIL] CSS Animations: property <opacity> from [inherit] to [0.2] at (1.5) should be [0]

  â–¶ Unexpected subtest result in /css/css-color/animation/opacity-interpolation.html:
  â”” PASS [expected FAIL] CSS Transitions: property <opacity> from [unset] to [0.2] at (-0.3) should be [1]

  â–¶ Unexpected subtest result in /css/css-color/animation/opacity-interpolation.html:
  â”” PASS [expected FAIL] CSS Transitions: property <opacity> from [unset] to [0.2] at (1.5) should be [0]

  â–¶ Unexpected subtest result in /css/css-color/animation/opacity-interpolation.html:
  â”” PASS [expected FAIL] CSS Transitions with transition: all: property <opacity> from [unset] to [0.2] at (-0.3) should be [1]

  â–¶ Unexpected subtest result in /css/css-color/animation/opacity-interpolation.html:
  â”” PASS [expected FAIL] CSS Transitions with transition: all: property <opacity> from [unset] to [0.2] at (1.5) should be [0]

  â–¶ Unexpected subtest result in /css/css-color/animation/opacity-interpolation.html:
  â”” PASS [expected FAIL] CSS Animations: property <opacity> from [unset] to [0.2] at (-0.3) should be [1]

  â–¶ Unexpected subtest result in /css/css-color/animation/opacity-interpolation.html:
  â”” PASS [expected FAIL] CSS Animations: property <opacity> from [unset] to [0.2] at (1.5) should be [0]

  â–¶ Unexpected subtest result in /css/css-color/animation/opacity-interpolation.html:
  â”” PASS [expected FAIL] CSS Transitions: property <opacity> from [0] to [1] at (-0.3) should be [0]

  â–¶ Unexpected subtest result in /css/css-color/animation/opacity-interpolation.html:
  â”” PASS [expected FAIL] CSS Transitions: property <opacity> from [0] to [1] at (1.5) should be [1]

  â–¶ Unexpected subtest result in /css/css-color/animation/opacity-interpolation.html:
  â”” PASS [expected FAIL] CSS Transitions with transition: all: property <opacity> from [0] to [1] at (-0.3) should be [0]

  â–¶ Unexpected subtest result in /css/css-color/animation/opacity-interpolation.html:
  â”” PASS [expected FAIL] CSS Transitions with transition: all: property <opacity> from [0] to [1] at (1.5) should be [1]

  â–¶ Unexpected subtest result in /css/css-color/animation/opacity-interpolation.html:
  â”” PASS [expected FAIL] CSS Animations: property <opacity> from [0] to [1] at (-0.3) should be [0]

  â–¶ Unexpected subtest result in /css/css-color/animation/opacity-interpolation.html:
  â”” PASS [expected FAIL] CSS Animations: property <opacity> from [0] to [1] at (1.5) should be [1]

Yay!

When animations and transitions change don't always re-resolve node
style, just replace the animation and transition rules and re-cascade.
@mrobinson mrobinson force-pushed the mrobinson:animations-cascade branch from f6ca6cf to af0bb1f Jun 10, 2020
@mrobinson
Copy link
Member Author

mrobinson commented Jun 10, 2020

@bors-servo r=emilio

I've updated the branch to reflect the newly passing tests.

@bors-servo
Copy link
Contributor

bors-servo commented Jun 10, 2020

📌 Commit af0bb1f has been approved by emilio

@bors-servo
Copy link
Contributor

bors-servo commented Jun 10, 2020

Testing commit af0bb1f with merge 2dcb96a...

bors-servo added a commit that referenced this pull request Jun 10, 2020
Include animations and transitions in the cascade

Instead of applying animations and transitions to styled elements,
include them in the cascade. This allows them to interact properly with
things like font-size and !important rules.

<!-- Please describe your changes on the following line: -->

---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `___` with appropriate data: -->
- [x] `./mach build -d` does not report any errors
- [x] `./mach test-tidy` does not report any errors
- [x] There are tests for these changes

<!-- Also, please make sure that "Allow edits from maintainers" checkbox is checked, so that we can help you if you get stuck somewhere along the way.-->

<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->
@bors-servo
Copy link
Contributor

bors-servo commented Jun 10, 2020

💔 Test failed - status-taskcluster

@jdm
Copy link
Member

jdm commented Jun 10, 2020

@bors-servo retry

  • network
@bors-servo
Copy link
Contributor

bors-servo commented Jun 10, 2020

Testing commit af0bb1f with merge 127f1ad...

bors-servo added a commit that referenced this pull request Jun 10, 2020
Include animations and transitions in the cascade

Instead of applying animations and transitions to styled elements,
include them in the cascade. This allows them to interact properly with
things like font-size and !important rules.

<!-- Please describe your changes on the following line: -->

---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `___` with appropriate data: -->
- [x] `./mach build -d` does not report any errors
- [x] `./mach test-tidy` does not report any errors
- [x] There are tests for these changes

<!-- Also, please make sure that "Allow edits from maintainers" checkbox is checked, so that we can help you if you get stuck somewhere along the way.-->

<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->
@bors-servo
Copy link
Contributor

bors-servo commented Jun 10, 2020

💔 Test failed - status-taskcluster

@jdm
Copy link
Member

jdm commented Jun 10, 2020

@jdm
Copy link
Member

jdm commented Jun 10, 2020

@bors-servo retry

mac1 was having a bad day, so I restarted it.

@bors-servo
Copy link
Contributor

bors-servo commented Jun 10, 2020

Testing commit af0bb1f with merge 9e528b8...

@bors-servo
Copy link
Contributor

bors-servo commented Jun 10, 2020

☀️ Test successful - status-taskcluster
Approved by: emilio
Pushing 9e528b8 to master...

@bors-servo bors-servo merged commit 9e528b8 into servo:master Jun 10, 2020
2 checks passed
2 checks passed
Community-TC (pull_request) TaskGroup: success
Details
homu Test successful
Details
@mrobinson mrobinson deleted the mrobinson:animations-cascade branch Jun 11, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

5 participants
You can’t perform that action at this time.