| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>ScrollTimeline constructor</title> |
| <link rel="help" href="https://wicg.github.io/scroll-animations/#scrolltimeline-interface"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| |
| <style> |
| .scroller { |
| height: 100px; |
| width: 100px; |
| overflow: scroll; |
| } |
| |
| .content { |
| height: 500px; |
| width: 500px; |
| } |
| </style> |
| |
| <div class="scroller"> |
| <div class="content"></div> |
| </div> |
| |
| <script> |
| 'use strict'; |
| |
| 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_array_equals(new ScrollTimeline({timeRange: 100, scrollOffsets: []}).scrollOffsets, []); |
| }, 'A ScrollTimeline created with empty scrollOffsets should resolve to []'); |
| |
| test(t => { |
| 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 = [ |
| CSS.px(0), |
| CSS.percent(100).sub(CSS.px(80)), |
| ]; |
| |
| const gValidScrollOffsetSuffixes = [ |
| // Relative lengths. |
| 'em', |
| 'ex', |
| 'ch', |
| 'rem', |
| 'vw', |
| 'vh', |
| 'vmin', |
| 'vmax', |
| // Absolute lengths. |
| 'cm', |
| 'mm', |
| 'q', |
| 'in', |
| 'pc', |
| 'pt', |
| 'px', |
| // Percentage. |
| '%', |
| ]; |
| |
| for (let offset of gValidScrollOffsetValues) { |
| test(function() { |
| const scrollTimeline = new ScrollTimeline( |
| {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.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, scrollOffsets: [offset, offset]}); |
| |
| assert_offsets_equal(scrollTimeline.scrollOffsets[0], offset); |
| assert_offsets_equal(scrollTimeline.scrollOffsets[1], offset); |
| }, '\'' + suffix + '\' is a valid scroll offset unit'); |
| } |
| |
| // These are deliberately incomplete, just a random sampling of invalid |
| // values/units. |
| const gInvalidScrollOffsetValues = [ |
| '', |
| 'calc(360deg / 4)', |
| 'left', |
| '#ff0000', |
| 'rgb(0, 128, 0)', |
| 'url("http://www.example.com/pinkish.gif")', |
| 'this_is_garbage', |
| CSS.number(0), |
| // Multiple valid values. |
| '100px 5%', |
| // Values that would be valid if represented with CSS Typed OM: |
| 0, |
| '10px', |
| '10%', |
| 'calc(100% - 80px)', |
| ]; |
| |
| const gInvalidScrollOffsetSuffixes = [ |
| 'deg', |
| 's', |
| 'Hz', |
| 'dpi', |
| ]; |
| |
| for (const offset of gInvalidScrollOffsetValues) { |
| test(function() { |
| const constructorFunc = function() { |
| new ScrollTimeline( |
| {timeRange: 100, scrollOffsets: ['0px', offset]}) |
| }; |
| assert_throws_js(TypeError, constructorFunc); |
| }, 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, scrollOffsets: ['0px', offset]}); |
| }; |
| assert_throws_js(TypeError, constructorFunc); |
| }, '\'' + suffix + '\' is an invalid scroll offset unit in scrollOffsets'); |
| } |
| |
| const offset_target = document.createElement('div'); |
| |
| const gValidElementBasedScrollOffsetValues = [ |
| {target: offset_target}, |
| {target: offset_target, threshold: 0}, |
| {target: offset_target, threshold: 0.5}, |
| {target: offset_target, threshold: 1}, |
| ]; |
| |
| for (let offset of gValidElementBasedScrollOffsetValues) { |
| test(function() { |
| const scrollTimeline = new ScrollTimeline( |
| {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.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"}, |
| {target: offset_target, threshold: 2}, |
| {target: offset_target, threshold: -0.2}, |
| ]; |
| |
| for (let offset of gInvalidElementBasedScrollOffsetValues) { |
| test(function() { |
| const constructorFunc = function() { |
| new ScrollTimeline( |
| {timeRange: 100, scrollOffsets: [offset]}) |
| }; |
| assert_throws_js(TypeError, constructorFunc); |
| }, '\'' + JSON.stringify(offset) + '\' is an invalid scroll offset value in scrollOffsets'); |
| } |
| </script> |
