Test the computed style of the scroll-snap-* properties.

On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".


invalid snap type: `potato`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'

empty string for snap type: ``
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'

too many values: `block mandatory proximity`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'

none following axis: `both none`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'

two axis values: `block inline`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'

two strictness values: `proximity mandatory`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'

axis following strictness: `mandatory inline`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'

only strictness: `mandatory`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'

initial value: `initial`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'

only axis: `both`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'both'

none: `none`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'none'

strictness following axis: `inline mandatory`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-type') is 'inline mandatory'

invalid snap align: `potato`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'none'

empty string: ``
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'none'

too many values: `start center end`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'none'

invalid second value: `start wut`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'none'

invalid first value: `wat center`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'none'

one length: `10px`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'none'

two lengths: `10px 50px`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'none'

initial value: `initial`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'none'

single value: `start`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'start'

two values: `start end`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-align') is 'start end'

invalid scroll padding: `potato`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding') is 'auto'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-top') is 'auto'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-left') is 'auto'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-right') is 'auto'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-bottom') is 'auto'

empty string: ``
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding') is 'auto'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-top') is 'auto'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-left') is 'auto'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-right') is 'auto'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-bottom') is 'auto'

too many values: `1px 2px 3px 4px 5px`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding') is 'auto'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-top') is 'auto'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-left') is 'auto'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-right') is 'auto'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-bottom') is 'auto'

attempt to use auto: `auto auto`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding') is 'auto'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-top') is 'auto'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-left') is 'auto'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-right') is 'auto'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-bottom') is 'auto'

single length: `10px`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding') is '10px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-top') is '10px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-left') is '10px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-right') is '10px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-bottom') is '10px'

two percentages: `10% 20%`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding') is '10% 20%'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-top') is '10%'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-left') is '20%'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-right') is '20%'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-bottom') is '10%'

three lengths: `1px 2px 3px`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding') is '1px 2px 3px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-top') is '1px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-left') is '2px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-right') is '2px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-bottom') is '3px'

four values: `50px 10% 20% 50px`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding') is '50px 10% 20% 50px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-top') is '50px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-left') is '50px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-right') is '10%'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-bottom') is '20%'

calc expression: `calc(50px + 10%) 20px`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding') is 'calc(10% + 50px) 20px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-top') is 'calc(10% + 50px)'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-left') is '20px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-right') is '20px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-bottom') is 'calc(10% + 50px)'

various units: `1em 5mm 2in 4cm`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding') is '16px 18.89763832092285px 192px 151.1811065673828px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-top') is '16px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-left') is '151.1811065673828px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-right') is '18.89763832092285px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-bottom') is '192px'

subpixel values: `10.4375px 6.5px`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding') is '10.4375px 6.5px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-top') is '10.4375px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-left') is '6.5px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-right') is '6.5px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-padding-bottom') is '10.4375px'

invalid scroll margin: `potato`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '0px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '0px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '0px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '0px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '0px'

empty string: ``
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '0px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '0px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '0px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '0px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '0px'

too many values: `1px 2px 3px 4px 5px`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '0px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '0px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '0px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '0px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '0px'

attempt to use auto: `auto auto`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '0px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '0px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '0px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '0px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '0px'

attempt to use percentage: `25% 25%`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '0px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '0px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '0px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '0px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '0px'

attempt to use calc: `calc(25% + 10px)`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '0px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '0px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '0px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '0px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '0px'

single length: `10px`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '10px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '10px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '10px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '10px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '10px'

two lengths: `10px 20px`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '10px 20px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '10px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '20px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '20px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '10px'

three lengths: `1px 2px 3px`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '1px 2px 3px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '1px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '2px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '2px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '3px'

four lengths: `50px 10px 20px 50px`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '50px 10px 20px 50px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '50px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '50px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '10px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '20px'

various units: `1em 5mm 2in 4cm`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '16px 18.89763832092285px 192px 151.1811065673828px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '16px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '151.1811065673828px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '18.89763832092285px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '192px'

subpixel values: `10.4375px 6.5px`
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin') is '10.4375px 6.5px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-top') is '10.4375px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-left') is '6.5px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-right') is '6.5px'
PASS window.getComputedStyle(document.body).getPropertyValue('scroll-snap-margin-bottom') is '10.4375px'
PASS successfullyParsed is true

TEST COMPLETE