Implement the updated port/area-based Scroll Snap Module Level 1 Spec
[WebKit-https.git] / LayoutTests / css3 / scroll-snap / scroll-snap-property-computed-style.js
1 description("Test the computed style of the scroll-snap-* properties.");
2
3 var stylesheet;
4 var styleElement = document.createElement("style");
5 document.head.appendChild(styleElement);
6 stylesheet = styleElement.sheet;
7
8 function testComputedScrollSnapRule(description, snapProperty, rule, expected, expectedShorthands = {})
9 {
10     debug("");
11     debug(`${description}: \`${rule}\``);
12
13     stylesheet.insertRule(`body { ${snapProperty} : ${rule}; }`, 0);
14
15     shouldBe(`window.getComputedStyle(document.body).getPropertyValue('${snapProperty}')`, `'${expected}'`);
16     for (let shorthand in expectedShorthands)
17         shouldBe(`window.getComputedStyle(document.body).getPropertyValue('${snapProperty}-${shorthand}')`, `'${expectedShorthands[shorthand]}'`);
18     stylesheet.deleteRule(0);
19 }
20
21 // Test the scroll-snap-type property
22 // Invalid declarations
23 testComputedScrollSnapRule("invalid snap type", "scroll-snap-type", "potato", "none");
24 testComputedScrollSnapRule("empty string for snap type", "scroll-snap-type", "", "none");
25 testComputedScrollSnapRule("too many values", "scroll-snap-type", "block mandatory proximity", "none");
26 testComputedScrollSnapRule("none following axis", "scroll-snap-type", "both none", "none");
27 testComputedScrollSnapRule("two axis values", "scroll-snap-type", "block inline", "none");
28 testComputedScrollSnapRule("two strictness values", "scroll-snap-type", "proximity mandatory", "none");
29 testComputedScrollSnapRule("axis following strictness", "scroll-snap-type", "mandatory inline", "none");
30 // Valid declarations
31 testComputedScrollSnapRule("initial value", "scroll-snap-type", "initial", "none");
32 testComputedScrollSnapRule("only strictness", "scroll-snap-type", "mandatory", "both mandatory");
33 testComputedScrollSnapRule("only axis", "scroll-snap-type", "both", "both proximity");
34 testComputedScrollSnapRule("none", "scroll-snap-type", "none", "none");
35 testComputedScrollSnapRule("strictness following axis", "scroll-snap-type", "inline mandatory", "inline mandatory");
36
37 // Test the scroll-snap-align property
38 // Invalid declarations
39 testComputedScrollSnapRule("invalid snap align", "scroll-snap-align", "potato", "none none");
40 testComputedScrollSnapRule("empty string", "scroll-snap-align", "", "none none");
41 testComputedScrollSnapRule("too many values", "scroll-snap-align", "start center end", "none none");
42 testComputedScrollSnapRule("invalid second value", "scroll-snap-align", "start wut", "none none");
43 testComputedScrollSnapRule("invalid first value", "scroll-snap-align", "wat center", "none none");
44 testComputedScrollSnapRule("one length", "scroll-snap-align", "10px", "none none");
45 testComputedScrollSnapRule("two lengths", "scroll-snap-align", "10px 50px", "none none");
46 // Valid declarations
47 testComputedScrollSnapRule("initial value", "scroll-snap-align", "initial", "none none");
48 testComputedScrollSnapRule("single value", "scroll-snap-align", "start", "start start");
49 testComputedScrollSnapRule("two values", "scroll-snap-align", "start end", "start end");
50
51 // Test the scroll-padding property
52 // Invalid declarations
53 testComputedScrollSnapRule("invalid scroll padding", "scroll-padding", "potato", "0px", { top: "0px", left: "0px", right: "0px", bottom: "0px" });
54 testComputedScrollSnapRule("empty string", "scroll-padding", "", "0px", { top: "0px", left: "0px", right: "0px", bottom: "0px" });
55 testComputedScrollSnapRule("too many values", "scroll-padding", "1px 2px 3px 4px 5px", "0px", { top: "0px", left: "0px", right: "0px", bottom: "0px" });
56 testComputedScrollSnapRule("attempt to use auto", "scroll-padding", "auto auto", "0px", { top: "0px", left: "0px", right: "0px", bottom: "0px" });
57 // Valid declarations
58 testComputedScrollSnapRule("single length", "scroll-padding", "10px", "10px", { top: "10px", left: "10px", right: "10px", bottom: "10px" });
59 testComputedScrollSnapRule("two percentages", "scroll-padding", "10% 20%", "10% 20%", { top: "10%", left: "20%", right: "20%", bottom: "10%" });
60 testComputedScrollSnapRule("three lengths", "scroll-padding", "1px 2px 3px", "1px 2px 3px", { top: "1px", left: "2px", right: "2px", bottom: "3px" });
61 testComputedScrollSnapRule("four values", "scroll-padding", "50px 10% 20% 50px", "50px 10% 20% 50px", { top: "50px", left: "50px", right: "10%", bottom: "20%" });
62 testComputedScrollSnapRule("calc expression", "scroll-padding", "calc(50px + 10%) 20px", "calc(50px + 10%) 20px", { top: "calc(50px + 10%)", left: "20px", right: "20px", bottom: "calc(50px + 10%)" });
63 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" });
64 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" });
65
66 // Test the scroll-snap-margin property
67 // Invalid declarations
68 testComputedScrollSnapRule("invalid scroll padding", "scroll-snap-margin", "potato", "0px", { top: "0px", left: "0px", right: "0px", bottom: "0px" });
69 testComputedScrollSnapRule("empty string", "scroll-snap-margin", "", "0px", { top: "0px", left: "0px", right: "0px", bottom: "0px" });
70 testComputedScrollSnapRule("too many values", "scroll-snap-margin", "1px 2px 3px 4px 5px", "0px", { top: "0px", left: "0px", right: "0px", bottom: "0px" });
71 testComputedScrollSnapRule("attempt to use auto", "scroll-snap-margin", "auto auto", "0px", { top: "0px", left: "0px", right: "0px", bottom: "0px" });
72 testComputedScrollSnapRule("attempt to use percentage", "scroll-snap-margin", "25% 25%", "0px", { top: "0px", left: "0px", right: "0px", bottom: "0px" });
73 testComputedScrollSnapRule("attempt to use calc", "scroll-snap-margin", "calc(25% + 10px)", "0px", { top: "0px", left: "0px", right: "0px", bottom: "0px" });
74 // Valid declarations
75 testComputedScrollSnapRule("single length", "scroll-snap-margin", "10px", "10px", { top: "10px", left: "10px", right: "10px", bottom: "10px" });
76 testComputedScrollSnapRule("two lengths", "scroll-snap-margin", "10px 20px", "10px 20px", { top: "10px", left: "20px", right: "20px", bottom: "10px" });
77 testComputedScrollSnapRule("three lengths", "scroll-snap-margin", "1px 2px 3px", "1px 2px 3px", { top: "1px", left: "2px", right: "2px", bottom: "3px" });
78 testComputedScrollSnapRule("four lengths", "scroll-snap-margin", "50px 10px 20px 50px", "50px 10px 20px 50px", { top: "50px", left: "50px", right: "10px", bottom: "20px" });
79 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" });
80 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" });
81
82 successfullyParsed = true;