Bug 1693396 [wpt PR 27665] - Replaced start and end scroll offsets wi…

…th scrollOffsets attribute, a=testonly

Automatic update from web-platform-tests
Replaced start and end scroll offsets with scrollOffsets attribute

Based on pr[1] replaced all usages of startScrollOffset and
endScrollOffset with scrollOffsets attribute.

Among the changes;
-Moved content of constructor.tentative.html to constructor.html.
-Deleted constructor.tentative.html

[1] w3c/csswg-drafts#5803

Bug: 1094014
Change-Id: I3d609555bdd7c65b2b9561a88d4c130a5566a9a8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2701333
Reviewed-by: Kevin Ellis <kevers@chromium.org>
Commit-Queue: Olga Gerchikov <gerchiko@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#855469}

--

wpt-commits: 69bf427d7d2ae83f7c60ef6751ddf0e26d2892fa
wpt-pr: 27665

testing/web-platform/tests/scroll-animations/constructor.html

@@ -103,21 +103,49 @@
   assert_throws_js(TypeError, constructorFunc);
 }, 'Creating a ScrollTimeline with an invalid orientation value should throw');
 
-// startScrollOffset and endScrollOffset
+// scrollOffsets
+
+function formatOffset(v) {
+  if (typeof(v) == 'object')
+    return `${v.constructor.name}(${v.toString()})`;
+  return `'${v.toString()}'`;
+}
+
+function assert_offsets_equal(a, b) {
+  assert_equals(formatOffset(a), formatOffset(b));
+}
+
+test(t => {
+  assert_array_equals(new ScrollTimeline({timeRange: 100}).scrollOffsets, []);
+}, 'A ScrollTimeline created with the default scrollOffsets should default to []');
 
 test(t => {
-  assert_offsets_equal(new ScrollTimeline({timeRange: 100}).startScrollOffset, new CSSKeywordValue('auto'));
-}, 'A ScrollTimeline created with the default startScrollOffset should default to CSSKeywordValue(auto)');
+  assert_array_equals(new ScrollTimeline({timeRange: 100, scrollOffsets: []}).scrollOffsets, []);
+}, 'A ScrollTimeline created with empty scrollOffsets should resolve to []');
 
 test(t => {
-  assert_offsets_equal(new ScrollTimeline({timeRange: 100}).endScrollOffset, new CSSKeywordValue('auto'));
-}, 'A ScrollTimeline created with the default endScrollOffset should default to CSSKeywordValue(auto)');
+  let offsets = new ScrollTimeline({timeRange: 100, scrollOffsets: [CSS.percent(20), 'auto']}).scrollOffsets;
+  assert_offsets_equal(offsets[0], CSS.percent(20));
+  assert_offsets_equal(offsets[1], new CSSKeywordValue('auto'));
+}, 'A ScrollTimeline created with last \'auto\' offset in scrollOffsets should be allowed.');
+
+test(t => {
+  let constructorFunc = function() {
+    new ScrollTimeline({timeRange: 100, scrollOffsets: null})
+  };
+  assert_throws_js(TypeError, constructorFunc);
+}, 'Creating a ScrollTimeline with an invalid scrollOffsets value should throw');
+
+test(t => {
+  let constructorFunc = function() {
+    new ScrollTimeline({timeRange: 100, scrollOffsets: ['auto']})
+  };
+  assert_throws_js(TypeError, constructorFunc);
+}, 'Creating a ScrollTimeline with an scrollOffsets value of [\'auto\'] should throw');
 
 const gValidScrollOffsetValues = [
-  new CSSKeywordValue('auto'),
   CSS.px(0),
   CSS.percent(100).sub(CSS.px(80)),
-  "auto",
 ];
 
 const gValidScrollOffsetSuffixes = [
@@ -145,26 +173,26 @@
 for (let offset of gValidScrollOffsetValues) {
   test(function() {
     const scrollTimeline = new ScrollTimeline(
-        {timeRange: 100, startScrollOffset: offset, endScrollOffset: offset});
+        {timeRange: 100, scrollOffsets: [offset, offset]});
 
     // Special case for 'auto'. This is valid input because of CSSKeywordish,
     // but when read back we expect a real CSSKeywordValue.
     if (offset === 'auto')
       offset = new CSSKeywordValue('auto');
 
-    assert_offsets_equal(scrollTimeline.startScrollOffset, offset);
-    assert_offsets_equal(scrollTimeline.endScrollOffset, offset);
-  }, formatOffset(offset) + ' is a valid scroll offset value');
+    assert_offsets_equal(scrollTimeline.scrollOffsets[0], offset);
+    assert_offsets_equal(scrollTimeline.scrollOffsets[1], offset);
+  }, '\'' + offset + '\' is a valid scroll offset value');
 }
 
 for (const suffix of gValidScrollOffsetSuffixes) {
   test(function() {
     const offset = new CSSUnitValue(75, suffix);
     const scrollTimeline = new ScrollTimeline(
-        {timeRange: 100, startScrollOffset: offset, endScrollOffset: offset});
+        {timeRange: 100, scrollOffsets: [offset, offset]});
 
-    assert_offsets_equal(scrollTimeline.startScrollOffset, offset);
-    assert_offsets_equal(scrollTimeline.endScrollOffset, offset);
+    assert_offsets_equal(scrollTimeline.scrollOffsets[0], offset);
+    assert_offsets_equal(scrollTimeline.scrollOffsets[1], offset);
   }, '\'' + suffix + '\' is a valid scroll offset unit');
 }
 
@@ -199,24 +227,23 @@
   test(function() {
     const constructorFunc = function() {
       new ScrollTimeline(
-          {timeRange: 100, startScrollOffset: offset, endScrollOffset: offset})
+          {timeRange: 100, scrollOffsets: ['0px', offset]})
     };
     assert_throws_js(TypeError, constructorFunc);
-  }, formatOffset(offset) + ' is an invalid scroll offset value');
+  }, formatOffset(offset) + ' is an invalid scroll offset value in scrollOffsets');
 }
 
 for (const suffix of gInvalidScrollOffsetSuffixes) {
   test(function() {
     const offset = '75' + suffix;
     const constructorFunc = function() {
       new ScrollTimeline(
-          {timeRange: 100, startScrollOffset: offset, endScrollOffset: offset});
+          {timeRange: 100, scrollOffsets: ['0px', offset]});
     };
     assert_throws_js(TypeError, constructorFunc);
-  }, '\'' + suffix + '\' is an invalid scroll offset unit');
+  }, '\'' + suffix + '\' is an invalid scroll offset unit in scrollOffsets');
 }
 
-
 const offset_target = document.createElement('div');
 
 const gValidElementBasedScrollOffsetValues = [
@@ -229,20 +256,19 @@
 for (let offset of gValidElementBasedScrollOffsetValues) {
   test(function() {
     const scrollTimeline = new ScrollTimeline(
-        {timeRange: 100, startScrollOffset: offset, endScrollOffset: offset});
+        {timeRange: 100, scrollOffsets: [offset, offset]});
 
     // Special case unspecified threshold since it gets initialized to 0.
     if (!offset.hasOwnProperty('threshold'))
       offset.threshold = 0;
 
-    assert_equals(scrollTimeline.startScrollOffset.target, offset.target);
-    assert_equals(scrollTimeline.startScrollOffset.threshold, offset.threshold);
-    assert_equals(scrollTimeline.endScrollOffset.target, offset.target);
-    assert_equals(scrollTimeline.endScrollOffset.threshold, offset.threshold);
+    assert_equals(scrollTimeline.scrollOffsets[0].target, offset.target);
+    assert_equals(scrollTimeline.scrollOffsets[0].threshold, offset.threshold);
+    assert_equals(scrollTimeline.scrollOffsets[1].target, offset.target);
+    assert_equals(scrollTimeline.scrollOffsets[1].threshold, offset.threshold);
   }, '\'' + JSON.stringify(offset) + '\' is a valid scroll offset value');
 }
 
-
 const gInvalidElementBasedScrollOffsetValues = [
   {}, // empty
   {target: offset_target, threshold: "test"},
@@ -254,10 +280,10 @@
   test(function() {
     const constructorFunc = function() {
       new ScrollTimeline(
-          {timeRange: 100, startScrollOffset: offset, endScrollOffset: offset})
+          {timeRange: 100, scrollOffsets: [offset]})
     };
     assert_throws_js(TypeError, constructorFunc);
-  }, '\'' + JSON.stringify(offset) + '\' is an invalid scroll offset value');
+  }, '\'' + JSON.stringify(offset) + '\' is an invalid scroll offset value in scrollOffsets');
 }