[css-values] Clarification on what the second `<easing-function>` in first clause in calc-interpolate do?

Open Beginner friendly
#13,848 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
72/100
Issue type
Documentation
Clarity
Mostly clear
Activity status
Quiet
Tech stack
css
Domain
documentation

Research direction

Read the calc-interpolate() grammar and the CSS Values 5 sections on “easing-function”, “by easing-function”, and “Defining the Interpolation Map” linked in the issue. Compare the two first-clause productions with their documented roles. Done means the specification clearly identifies the second easing-function, potentially using distinct aliases as proposed.

Written by the indexing model from the issue text.

Description

css-values-5

The calc-interpolate() grammar is currently:

<calc-interpolate()> = calc-interpolate(
  [
    <progress-source> && [ by <easing-function> ]?
    && <easing-function>?
  ] ,
  <input-position>{1,2} : <calc-sum> ,
  [ <easing-function>? , <input-position>{1,2} : <calc-sum> ]#? )

In that first clause:

  [
    <progress-source> && [ by <easing-function> ]?
    && <easing-function>?
  ] ,

There are two <easing-function> productions.

The first one, with a by prefix, is defined in 7.1.1.1. Easing Interpolation Progress: the by <easing-function> argument , and "It applies the specified easing function to the “timeline” of progress as a whole by modifying the interpolation progress before it’s applied to".

The second one, however, I am not 100% clear on.

I think it is the <easing-function> that https://drafts.csswg.org/css-values-5/#valdef-calc-interpolate-easing-function describes as "appearing in the first argument" and therefore "specifies the “default” easing function to be used between each stop.", but since it that is the "7.1.2. Defining the Interpolation Map" I am not completely confident.

This could maybe be made a bit clearer if the various arguments were aliased. Perhaps something like:

<timeline-easing-function> = <easing-function>
<default-easing-function> = <easing-function>
<surrounding-stops-easing-function> = <easing-function>

<calc-interpolate()> = calc-interpolate(
  [
    <progress-source> && [ by <timeline-easing-function> ]?
    && <default-easing-function>?
  ] ,
  <input-position>{1,2} : <calc-sum> ,
  [ <surrounding-stops-easing-function>? , <input-position>{1,2} : <calc-sum> ]#? )
Dominant language
Bikeshed
Stars
4.9k
Forks
816
Avg merge
2d 18h
Merged PRs (30d)
24

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from w3c/csswg-drafts

All issues in w3c/csswg-drafts

Similar issues

More Documentation issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.