| <!DOCTYPE html> |
| <style> |
| .scroller { |
| height: 100px; |
| width: 100px; |
| overflow: scroll; |
| } |
| |
| .content { |
| height: 500px; |
| width: 500px; |
| } |
| </style> |
| |
| <script src='../../../resources/testharness.js'></script> |
| <script src='../../../resources/testharnessreport.js'></script> |
| |
| <div class='scroller'> |
| <div class='content'></div> |
| </div> |
| <script> |
| const gValidScrollOffsetValues = [ |
| 'auto', |
| 0, |
| 'calc(100% - 80px)', |
| ]; |
| |
| const gValidScrollOffsetSuffixes = [ |
| // Relative lengths. |
| 'em', |
| 'ex', |
| 'ch', |
| 'rem', |
| 'vw', |
| 'vh', |
| 'vmin', |
| 'vmax', |
| // Absolute lengths. |
| 'cm', |
| 'mm', |
| 'q', |
| 'in', |
| 'pc', |
| 'pt', |
| 'px', |
| // Percentage. |
| '%', |
| ]; |
| |
| // 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', |
| // Multiple valid values. |
| '100px 5%', |
| ]; |
| |
| const gInvalidScrollOffsetSuffixes = [ |
| 'deg', |
| 's', |
| 'Hz', |
| 'dpi', |
| ]; |
| |
| // Positive tests. |
| |
| for (let offset of gValidScrollOffsetValues) { |
| test(function() { |
| const scroller = document.querySelector('.scroller'); |
| const scrollTimeline = new ScrollTimeline( |
| { scrollSource: scroller, timeRange: 100, |
| startScrollOffset: offset, endScrollOffset: offset }); |
| |
| // Special case for 0; this is a valid value, but like computed style will |
| // be output as '0px' when queried. |
| if (offset == 0) |
| offset = '0px'; |
| |
| assert_equals(scrollTimeline.startScrollOffset, offset); |
| assert_equals(scrollTimeline.endScrollOffset, offset); |
| }, '\'' + offset + '\' is a valid scroll offset value'); |
| } |
| |
| for (const suffix of gValidScrollOffsetSuffixes) { |
| test(function() { |
| const offset = '75' + suffix; |
| const scroller = document.querySelector('.scroller'); |
| const scrollTimeline = new ScrollTimeline( |
| { scrollSource: scroller, timeRange: 100, |
| startScrollOffset: offset, endScrollOffset: offset }); |
| |
| assert_equals(scrollTimeline.startScrollOffset, offset); |
| assert_equals(scrollTimeline.endScrollOffset, offset); |
| }, '\'' + suffix + '\' is a valid scroll offset unit'); |
| } |
| |
| // Negative tests. |
| |
| for (const offset of gInvalidScrollOffsetValues) { |
| test(function() { |
| const scroller = document.querySelector('.scroller'); |
| const constructorFunc = function() { new ScrollTimeline( |
| { scrollSource: scroller, timeRange: 100, |
| startScrollOffset: offset, endScrollOffset: offset }) }; |
| assert_throws(new TypeError(), constructorFunc); |
| }, '\'' + offset + '\' is an invalid scroll offset value'); |
| } |
| |
| for (const suffix of gInvalidScrollOffsetSuffixes) { |
| test(function() { |
| const offset = '75' + suffix; |
| const scroller = document.querySelector('.scroller'); |
| const constructorFunc = function() { new ScrollTimeline( |
| { scrollSource: scroller, timeRange: 100, |
| startScrollOffset: offset, endScrollOffset: offset }) }; |
| assert_throws(new TypeError(), constructorFunc); |
| }, '\'' + suffix + '\' is an invalid scroll offset unit'); |
| } |
| </script> |
