Skip to content

/ servo

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

Jump to bottom

Is CSS transition on font-size property implemented? #12745

Closed
samuknet opened this issue Aug 5, 2016 · 4 comments
Closed

Is CSS transition on font-size property implemented? #12745

samuknet opened this issue Aug 5, 2016 · 4 comments
Labels
A-layout/uncategorized C-has-manual-testcase C-reproduced

Comments

@samuknet
Copy link
Contributor

@samuknet samuknet commented Aug 5, 2016

Unsure if CSS transitioning on the font-size property is implemented yet?

Applying the transition does not have any effect - the below example 'toggles' between a large font size and back again. In Servo, there is no transition but just a 'jump' between the two font sizes.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<style>
body {
    margin: 0;
    padding: 0;
    font-family: helvetica;
}
div {
    transition: 1.5s font-size ease-in-out;    
}
</style>

<script>
window.addEventListener('load', function() {
    var d = document.querySelector('div');
    var large = false;
    var interval = 1000; // Rest time inbetween transitions
    toggle();
    function toggle() {
        large = !large;
        d.style.fontSize = large ? '500%' : '100%';
        setTimeout(toggle, 1500 + interval);
    };
});
</script>

<body>
<div>
I should be transitioning between large font size and back repeatedly.
</div>
</body>
</html>

Online test case here.
@jdm
Copy link
Member

@jdm jdm commented Aug 5, 2016

I believe the problem here is that animating any property that requires reconstructing flows is broken, since the layout code that responds to the TickAnimation message only performs style recalculation, not flow construction. @pcwalton What's the right thing to do here?
@samuknet samuknet mentioned this issue Aug 8, 2016
Open
@pcwalton
Copy link
Contributor

@pcwalton pcwalton commented Aug 17, 2016

Oh, how annoying. I guess we should round trip to script for those so we can reconstruct flows while the DOM is locked.
@nox
Copy link
Member

@nox nox commented Oct 4, 2017

This is still not implemented.
@mrobinson
Copy link
Member

@mrobinson mrobinson commented May 14, 2020

This seems to be working now, probably as a result of #26407 and #26331.
@mrobinson mrobinson closed this May 14, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
A-layout/uncategorized C-has-manual-testcase C-reproduced
Projects
None yet
Milestone
No milestone
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants
@mrobinson @jdm @nox @pcwalton @samuknet
You can’t perform that action at this time.