[csswg-drafts] [scroll-animations-1] JS API for view-timeline-inset (#7748)

flackr has just created a new issue for https://github.com/w3c/csswg-drafts:

== [scroll-animations-1] JS API for view-timeline-inset ==
In CSS we have [view-timeline-inset](https://w3c.github.io/csswg-drafts/scroll-animations-1/#view-timeline-inset) to allow reducing the portion of the scroll area which would be considered visible, however the [JS ViewTimeline constructor](https://w3c.github.io/csswg-drafts/scroll-animations-1/#viewtimeline-interface) does not have the ability to set the same property.

I propose extending the [ViewTimelineOptions dictionary](https://w3c.github.io/csswg-drafts/scroll-animations-1/#dictdef-viewtimelineoptions) with a property that allows setting the one or two valued inset. The equivalent property in IntersectionObserver is a DOMString [rootMargin](https://w3c.github.io/IntersectionObserver/#dictdef-intersectionobserverinit) which is a space separated list of offsets. We could do the same here, but call it inset (to be consistent with the CSS property), or we could accept an array of CSSNumeric values.

Option 1: DOMString

```
dictionary ViewTimelineOptions {
  Element subject;
  ScrollAxis axis = "block";
  DOMString inset = "0px 0px";
};
```

Option 2: CSSNumeric

```
dictionary ViewTimelineOptions {
  Element subject;
  ScrollAxis axis = "block";
  sequence<CSSNumericValue> inset = [CSS.px(0), CSS.px(0)];
};
```

I think there's a slight advantage to accepting the string syntax in that:
* It allows specifying the `auto` value from view-timeline-inset, and
* You can pass the computed value of view-timeline-inset, e.g. `new ViewTimeline({subject: el, inset: getComputedStyle(subject).viewTimelineInset})`

However, passing and parsing a string seems slightly inconsistent with the direction of other JS API's where we've decided to go in the direction of richer types, e.g. https://github.com/w3c/csswg-drafts/issues/7589.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7748 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 15 September 2022 14:04:37 UTC