Skip to content

[scroll-animations] [web-animations-2] Relationship between animation-range and Animation.range{Start|End} #11327

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.

Sign up for GitHub

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
Closed
graouts opened this issue Dec 5, 2024 · 6 comments
Closed

[scroll-animations] [web-animations-2] Relationship between animation-range and Animation.range{Start|End} #11327

graouts opened this issue Dec 5, 2024 · 6 comments
Labels
Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. scroll-animations-1 Current Work web-animations-2 Current Work

Comments

@graouts
Copy link
Contributor

graouts commented Dec 5, 2024

I'm trying to understand what computation, if any, should be applied between a value provided via CSS using the animation-range property and the values computed on the resulting Animation object exposed via the rangeStart and rangeEnd properties.

Consider this simple example derived from the WPT test scroll-animations/scroll-timelines/scroll-timeline-range.html:

<!DOCTYPE html>
<style>

  #scroller {
    overflow-y: scroll;
    width: 200px;
    height: 200px;
    scroll-timeline: --t1;
  }

  #content {
    height: 1200px;
  }

  #target {
    position: fixed;
    height: 100px;
    width: 0px;
    font-size: 10px;
    background-color: green;

    animation: auto grow linear;
    animation-timeline: --t1;
    animation-range: 100px 700px;
  }

  @keyframes grow {
    to { width: 200px }
  }

</style>
<div id="scroller">
  <div id="target"></div>
  <div id="content"></div>
</div>
<pre></pre>
<script>

const animation = target.getAnimations()[0];
const pre = document.querySelector("pre");

(async function() {
    await animation.ready;
    pre.innerText += `range start = ${animation.rangeStart.offset}\n`;
    pre.innerText += `range end = ${animation.rangeEnd.offset}\n`;
})();
</script>

When I look at Chrome Canary (133.0.6878.0 ) I see the following being printed out:

range start = 200px
range end = 1400px

Meanwhile, on ToT WebKit this prints:

range start = 100px
range end = 700px

Why are the values provided via CSS doubled in Chrome? What in a spec supports the computation of such values?
@graouts graouts added web-animations-2 Current Work scroll-animations-1 Current Work labels Dec 5, 2024
@graouts
Copy link
Contributor Author

graouts commented Dec 5, 2024

Cc @kevers-google, @andruud and @flackr.

@graouts
Copy link
Contributor Author

graouts commented Dec 9, 2024

I'm adding a new test that covers this in the pull request for WebKit bug 284298 and for the WPT repository in web-platform-tests/wpt#49591.

@graouts
Copy link
Contributor Author

graouts commented Dec 9, 2024 •
edited
Loading

Interestingly, the newly-added test fails for me locally in both Chrome (131.0.6778.109) and Chrome Canary (133.0.6886.0) but passes in the WPT.fyi task. Could there be a bug specific to Chrome on Mac at play here?

@graouts
Copy link
Contributor Author

graouts commented Dec 10, 2024

I filed https://issues.chromium.org/issues/383158936 on Chrome.

@bramus
Copy link
Contributor

bramus commented Jan 1, 2025 •
edited
Loading

Why are the values provided via CSS doubled in Chrome? What in a spec supports the computation of such values?

It’s a bug, in which the window.devicePixelRatio is not taken into account: https://issues.chromium.org/issues/40929569

@bramus
Copy link
Contributor

bramus commented Jan 1, 2025

Interestingly, the newly-added test fails for me locally in both Chrome (131.0.6778.109) and Chrome Canary (133.0.6886.0) but passes in the WPT.fyi task.

That’s because in WPT tasks the window.devicePixelRatio is 1.

@bramus bramus added the Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. label Jan 1, 2025
@bramus bramus closed this as completed Jan 1, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. scroll-animations-1 Current Work web-animations-2 Current Work
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@graouts @bramus