LayoutTests/css3/scroll-snap/scroll-snap-property-parsing.js

description("Test the parsing of the scroll-snap-* properties.");

var stylesheet, cssRule, declaration;
var styleElement = document.createElement("style");
document.head.appendChild(styleElement);
stylesheet = styleElement.sheet;

function testScrollSnapRule(description, snapProperty, rule, expectedValue, expectedLength)
{
    debug("");
    debug(description + " : " + rule);

    stylesheet.insertRule(`body { ${snapProperty} : ${rule}; }`, 0);
    cssRule = stylesheet.cssRules.item(0);

    shouldBe("cssRule.type", "1");

    declaration = cssRule.style;
    shouldBe("declaration.length", `${expectedLength}`);
    shouldBe(`declaration.getPropertyValue('${snapProperty}')`, `'${expectedValue}'`);
}

testScrollSnapRule("initial value", "scroll-snap-type", "initial", "initial", 1);
testScrollSnapRule("only axis", "scroll-snap-type", "both", "both", 1);
testScrollSnapRule("none", "scroll-snap-type", "none", "none", 1);
testScrollSnapRule("strictness following axis", "scroll-snap-type", "inline mandatory", "inline mandatory", 1);
testScrollSnapRule("initial value", "scroll-snap-align", "initial", "initial", 1);
testScrollSnapRule("single value", "scroll-snap-align", "start", "start", 1);
testScrollSnapRule("two values", "scroll-snap-align", "start end", "start end", 1);
testScrollSnapRule("single length", "scroll-padding", "10px", "10px", 4);
testScrollSnapRule("two percentages", "scroll-padding", "10% 20%", "10% 20%", 4);
testScrollSnapRule("three lengths", "scroll-padding", "1px 2px 3px", "1px 2px 3px", 4);
testScrollSnapRule("four values", "scroll-padding", "50px 10% 20% 50px", "50px 10% 20% 50px", 4);
testScrollSnapRule("calc expression", "scroll-padding", "calc(10% + 50px) 20px", "calc(10% + 50px) 20px", 4);
testScrollSnapRule("various units", "scroll-padding", "1em 5mm 2in 4cm", "1em 5mm 2in 4cm", 4);
testScrollSnapRule("subpixel values", "scroll-padding", "10.4375px 6.5px", "10.4375px 6.5px", 4);
testScrollSnapRule("single length", "scroll-snap-margin", "10px", "10px", 4);
testScrollSnapRule("two lengths", "scroll-snap-margin", "10px 20px", "10px 20px", 4);
testScrollSnapRule("three lengths", "scroll-snap-margin", "1px 2px 3px", "1px 2px 3px", 4);
testScrollSnapRule("four lengths", "scroll-snap-margin", "50px 10px 20px 50px", "50px 10px 20px 50px", 4);
testScrollSnapRule("various units", "scroll-snap-margin", "1em 5mm 2in 4cm", "1em 5mm 2in 4cm", 4);
testScrollSnapRule("subpixel values", "scroll-snap-margin", "10.4375px 6.5px", "10.4375px 6.5px", 4);

successfullyParsed = true;