83 lines
6.7 KiB
JavaScript
83 lines
6.7 KiB
JavaScript
description("Test the computed style of the scroll-snap-* properties.");
|
|
|
|
var stylesheet;
|
|
var styleElement = document.createElement("style");
|
|
document.head.appendChild(styleElement);
|
|
stylesheet = styleElement.sheet;
|
|
|
|
function testComputedScrollSnapRule(description, snapProperty, rule, expected, expectedShorthands = {})
|
|
{
|
|
debug("");
|
|
debug(`${description}: \`${rule}\``);
|
|
|
|
stylesheet.insertRule(`body { ${snapProperty} : ${rule}; }`, 0);
|
|
|
|
shouldBe(`window.getComputedStyle(document.body).getPropertyValue('${snapProperty}')`, `'${expected}'`);
|
|
for (let shorthand in expectedShorthands)
|
|
shouldBe(`window.getComputedStyle(document.body).getPropertyValue('${snapProperty}-${shorthand}')`, `'${expectedShorthands[shorthand]}'`);
|
|
stylesheet.deleteRule(0);
|
|
}
|
|
|
|
// Test the scroll-snap-type property
|
|
// Invalid declarations
|
|
testComputedScrollSnapRule("invalid snap type", "scroll-snap-type", "potato", "none");
|
|
testComputedScrollSnapRule("empty string for snap type", "scroll-snap-type", "", "none");
|
|
testComputedScrollSnapRule("too many values", "scroll-snap-type", "block mandatory proximity", "none");
|
|
testComputedScrollSnapRule("none following axis", "scroll-snap-type", "both none", "none");
|
|
testComputedScrollSnapRule("two axis values", "scroll-snap-type", "block inline", "none");
|
|
testComputedScrollSnapRule("two strictness values", "scroll-snap-type", "proximity mandatory", "none");
|
|
testComputedScrollSnapRule("axis following strictness", "scroll-snap-type", "mandatory inline", "none");
|
|
testComputedScrollSnapRule("only strictness", "scroll-snap-type", "mandatory", "none");
|
|
// Valid declarations
|
|
testComputedScrollSnapRule("initial value", "scroll-snap-type", "initial", "none");
|
|
testComputedScrollSnapRule("only axis", "scroll-snap-type", "both", "both");
|
|
testComputedScrollSnapRule("none", "scroll-snap-type", "none", "none");
|
|
testComputedScrollSnapRule("strictness following axis", "scroll-snap-type", "inline mandatory", "inline mandatory");
|
|
|
|
// Test the scroll-snap-align property
|
|
// Invalid declarations
|
|
testComputedScrollSnapRule("invalid snap align", "scroll-snap-align", "potato", "none");
|
|
testComputedScrollSnapRule("empty string", "scroll-snap-align", "", "none");
|
|
testComputedScrollSnapRule("too many values", "scroll-snap-align", "start center end", "none");
|
|
testComputedScrollSnapRule("invalid second value", "scroll-snap-align", "start wut", "none");
|
|
testComputedScrollSnapRule("invalid first value", "scroll-snap-align", "wat center", "none");
|
|
testComputedScrollSnapRule("one length", "scroll-snap-align", "10px", "none");
|
|
testComputedScrollSnapRule("two lengths", "scroll-snap-align", "10px 50px", "none");
|
|
// Valid declarations
|
|
testComputedScrollSnapRule("initial value", "scroll-snap-align", "initial", "none");
|
|
testComputedScrollSnapRule("single value", "scroll-snap-align", "start", "start");
|
|
testComputedScrollSnapRule("two values", "scroll-snap-align", "start end", "start end");
|
|
|
|
// Test the scroll-padding property
|
|
// Invalid declarations
|
|
testComputedScrollSnapRule("invalid scroll padding", "scroll-padding", "potato", "auto", { top: "auto", left: "auto", right: "auto", bottom: "auto" });
|
|
testComputedScrollSnapRule("empty string", "scroll-padding", "", "auto", { top: "auto", left: "auto", right: "auto", bottom: "auto" });
|
|
testComputedScrollSnapRule("too many values", "scroll-padding", "1px 2px 3px 4px 5px", "auto", { top: "auto", left: "auto", right: "auto", bottom: "auto" });
|
|
testComputedScrollSnapRule("attempt to use auto", "scroll-padding", "auto auto", "auto", { top: "auto", left: "auto", right: "auto", bottom: "auto" });
|
|
// Valid declarations
|
|
testComputedScrollSnapRule("single length", "scroll-padding", "10px", "10px", { top: "10px", left: "10px", right: "10px", bottom: "10px" });
|
|
testComputedScrollSnapRule("two percentages", "scroll-padding", "10% 20%", "10% 20%", { top: "10%", left: "20%", right: "20%", bottom: "10%" });
|
|
testComputedScrollSnapRule("three lengths", "scroll-padding", "1px 2px 3px", "1px 2px 3px", { top: "1px", left: "2px", right: "2px", bottom: "3px" });
|
|
testComputedScrollSnapRule("four values", "scroll-padding", "50px 10% 20% 50px", "50px 10% 20% 50px", { top: "50px", left: "50px", right: "10%", bottom: "20%" });
|
|
testComputedScrollSnapRule("calc expression", "scroll-padding", "calc(50px + 10%) 20px", "calc(10% + 50px) 20px", { top: "calc(10% + 50px)", left: "20px", right: "20px", bottom: "calc(10% + 50px)" });
|
|
testComputedScrollSnapRule("various units", "scroll-padding", "1em 5mm 2in 4cm", "16px 18.89763832092285px 192px 151.1811065673828px", { top: "16px", left: "151.1811065673828px", right: "18.89763832092285px", bottom: "192px" });
|
|
testComputedScrollSnapRule("subpixel values", "scroll-padding", "10.4375px 6.5px", "10.4375px 6.5px", { top: "10.4375px", left: "6.5px", right: "6.5px", bottom: "10.4375px" });
|
|
|
|
// Test the scroll-snap-margin property
|
|
// Invalid declarations
|
|
testComputedScrollSnapRule("invalid scroll margin", "scroll-snap-margin", "potato", "0px", { top: "0px", left: "0px", right: "0px", bottom: "0px" });
|
|
testComputedScrollSnapRule("empty string", "scroll-snap-margin", "", "0px", { top: "0px", left: "0px", right: "0px", bottom: "0px" });
|
|
testComputedScrollSnapRule("too many values", "scroll-snap-margin", "1px 2px 3px 4px 5px", "0px", { top: "0px", left: "0px", right: "0px", bottom: "0px" });
|
|
testComputedScrollSnapRule("attempt to use auto", "scroll-snap-margin", "auto auto", "0px", { top: "0px", left: "0px", right: "0px", bottom: "0px" });
|
|
testComputedScrollSnapRule("attempt to use percentage", "scroll-snap-margin", "25% 25%", "0px", { top: "0px", left: "0px", right: "0px", bottom: "0px" });
|
|
testComputedScrollSnapRule("attempt to use calc", "scroll-snap-margin", "calc(25% + 10px)", "0px", { top: "0px", left: "0px", right: "0px", bottom: "0px" });
|
|
// Valid declarations
|
|
testComputedScrollSnapRule("single length", "scroll-snap-margin", "10px", "10px", { top: "10px", left: "10px", right: "10px", bottom: "10px" });
|
|
testComputedScrollSnapRule("two lengths", "scroll-snap-margin", "10px 20px", "10px 20px", { top: "10px", left: "20px", right: "20px", bottom: "10px" });
|
|
testComputedScrollSnapRule("three lengths", "scroll-snap-margin", "1px 2px 3px", "1px 2px 3px", { top: "1px", left: "2px", right: "2px", bottom: "3px" });
|
|
testComputedScrollSnapRule("four lengths", "scroll-snap-margin", "50px 10px 20px 50px", "50px 10px 20px 50px", { top: "50px", left: "50px", right: "10px", bottom: "20px" });
|
|
testComputedScrollSnapRule("various units", "scroll-snap-margin", "1em 5mm 2in 4cm", "16px 18.89763832092285px 192px 151.1811065673828px", { top: "16px", left: "151.1811065673828px", right: "18.89763832092285px", bottom: "192px" });
|
|
testComputedScrollSnapRule("subpixel values", "scroll-snap-margin", "10.4375px 6.5px", "10.4375px 6.5px", { top: "10.4375px", left: "6.5px", right: "6.5px", bottom: "10.4375px" });
|
|
|
|
successfullyParsed = true;
|