OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <script src="../../resources/js-test.js"></script> | |
3 <style> | |
4 div#container { | |
5 scroll-snap-type: mandatory; | |
6 scroll-snap-points-x: repeat(20%); | |
7 scroll-snap-points-y: repeat(20%); | |
8 scroll-snap-destination: 20px 20px; | |
9 scroll-snap-coordinate: 10px 10px; | |
10 } | |
11 </style> | |
12 | |
13 <!-- test initial and inherited values first --> | |
14 <div id="container"> | |
15 <div class="test" property="scroll-snap-type" style="scroll-snap-type: i
nherit;" expected="mandatory" desc="inherited type" ></div> | |
16 <div class="test" property="scroll-snap-type" style="scroll-snap-type: i
nitial;" expected="none" desc="initial type" ></div> | |
17 <div class="test" property="scroll-snap-points-x" style="scroll-snap-poi
nts-x: inherit;" expected="repeat(20%)" desc="inherited points-x" ></div> | |
18 <div class="test" property="scroll-snap-points-x" style="scroll-snap-poi
nts-x: initial;" expected="none" desc="initial points-x" ></div> | |
19 <div class="test" property="scroll-snap-points-y" style="scroll-snap-poi
nts-y: inherit;" expected="repeat(20%)" desc="inherited points-y" ></div> | |
20 <div class="test" property="scroll-snap-points-y" style="scroll-snap-poi
nts-y: initial;" expected="none" desc="initial points-y" ></div> | |
21 <div class="test" property="scroll-snap-destination" style="scroll-snap-
destination: inherit;" expected="20px 20px" desc="inherited destination" ></div> | |
22 <div class="test" property="scroll-snap-destination" style="scroll-snap-
destination: initial;" expected="0px 0px" desc="initial destination" ></div> | |
23 <div class="test" property="scroll-snap-coordinate" style="scroll-snap-c
oordinate: inherit;" expected="10px 10px" desc="inherited coordinate" ></div> | |
24 <div class="test" property="scroll-snap-coordinate" style="scroll-snap-c
oordinate: initial;" expected="none" desc="initial coordinate" ></div> | |
25 </div> | |
26 | |
27 <div class="test" property="scroll-snap-type" style="scroll-snap-type: mandatory
;" expected="mandatory" desc="mandatory type" ></div> | |
28 <div class="test" property="scroll-snap-type" style="scroll-snap-type: proximity
;" expected="proximity" desc="proximity type" ></div> | |
29 <div class="test" property="scroll-snap-type" style="scroll-snap-type: none;" ex
pected="none" desc="none type" ></div> | |
30 | |
31 <div class="test" property="scroll-snap-points-x" style="scroll-snap-points-x: r
epeat(100%);" expected="repeat(100%)" desc="percentage points repeat along x axi
s" ></div> | |
32 <div class="test" property="scroll-snap-points-x" style="scroll-snap-points-x: r
epeat(25px);" expected="repeat(25px)" desc="pixel points repeat along x axis" ><
/div> | |
33 <div class="test" property="scroll-snap-points-y" style="scroll-snap-points-y: r
epeat(100%);" expected="repeat(100%)" desc="percentage points repeat along y axi
s" ></div> | |
34 <div class="test" property="scroll-snap-points-y" style="scroll-snap-points-y: r
epeat(25px);" expected="repeat(25px)" desc="pixel points repeat along y axis" ><
/div> | |
35 <div class="test" property="scroll-snap-points-y" style="scroll-snap-points-y: r
epeat(calc(25px + 1%));" expected="repeat(calc(25px + 1%))" desc="calc repeat al
ong y axis" ></div> | |
36 <div class="test" property="scroll-snap-points-y" style="scroll-snap-points-x: r
epeat(0px);" expected="none" desc="reject zero" ></div> | |
37 <div class="test" property="scroll-snap-points-y" style="scroll-snap-points-y: r
epeat(-1px);" expected="none" desc="reject negative" ></div> | |
38 | |
39 | |
40 | |
41 <div class="test" property="scroll-snap-destination" style="scroll-snap-destinat
ion: 10px 50px;" expected="10px 50px" desc="pixel/pixel destination" ></div> | |
42 <div class="test" property="scroll-snap-destination" style="scroll-snap-destinat
ion: 20px 40%;" expected="20px 40%" desc="pixel/percentage destination" ></div> | |
43 <div class="test" property="scroll-snap-destination" style="scroll-snap-destinat
ion: 0 10px;" expected="0px 10px" desc="unitless/pixel destination" ></div> | |
44 <div class="test" property="scroll-snap-destination" style="scroll-snap-destinat
ion: 0% 0px;" expected="0% 0px" desc="percentage/pixel destination" ></div> | |
45 <div class="test" property="scroll-snap-destination" style="scroll-snap-destinat
ion: 5% 100%;" expected="5% 100%" desc="percentage/percentage destination" ></di
v> | |
46 <div class="test" property="scroll-snap-destination" style="scroll-snap-destinat
ion: calc(10% + 20px) 40%;" expected="calc(20px + 10%) 40%" desc="calc/percentag
e destination" ></div> | |
47 | |
48 <div class="test" property="scroll-snap-destination" style="scroll-snap-destinat
ion: left top 50%;" expected="0px 0px" desc="3 piece percentage destination" ></
div> | |
49 <div class="test" property="scroll-snap-destination" style="scroll-snap-destinat
ion: top;" expected="50% 0%" desc="1 piece destination with implied center" ></d
iv> | |
50 | |
51 <div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinat
e: 50px 100px;" expected="50px 100px" desc="single pixel coordinate" ></div> | |
52 <div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinat
e: 50% 100%;" expected="50% 100%" desc="single percentage coordinate" ></div> | |
53 <div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinat
e: left top 50%;" expected="none" desc="3 piece percentage coordinate" ></div> | |
54 <div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinat
e: left 10px top 15px;" expected="10px 15px" desc="4 piece pixel coordinate" ></
div> | |
55 <div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinat
e: left;" expected="0% 50%" desc="1 piece coordinate with implied center" ></div
> | |
56 | |
57 <div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinat
e: 50px 100px, 150px 100px, left 200px top 100px;" expected="50px 100px, 150px 1
00px, 200px 100px" desc="multiple pixel coordinates" ></div> | |
58 <div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinat
e: 50% 100%, left 0% top 100%, 200% 100%;" expected="50% 100%, 0% 100%, 200% 100
%" desc="multiple percentage coordinates" ></div> | |
59 <div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinat
e: calc(10% + 100px) 100%, 150%, 200px calc(5% + 10px);" expected="calc(100px +
10%) 100%, 150% 50%, 200px calc(10px + 5%)" desc="multiple mixed pixel/percentag
e/calc coordinates" ></div> | |
60 <div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinat
e: 50px 100px, junk;" expected="none" desc="reject invalid position list" ></div
> | |
61 <div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinat
e: 50px 100px / 1px 1px;" expected="none" desc="reject invalid position separato
r" ></div> | |
62 <div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinat
e: 50px 100px,;" expected="none" desc="reject invalid position with terminating
comma" ></div> | |
63 | |
64 | |
65 <script> | |
66 description("Test the parsing and application of the scroll-snap-* properties.")
; | |
67 | |
68 var tests = document.querySelectorAll('.test'); | |
69 var style; | |
70 for (var i = 0; i < tests.length; i++) { | |
71 debug('Test case: ' + tests[i].attributes.desc.value); | |
72 var property = camelCase(tests[i].attributes.property.value); | |
73 style = window.getComputedStyle(tests[i]); | |
74 shouldBeEqualToString('style.' + property, tests[i].attributes.expected.value)
; | |
75 debug(''); | |
76 } | |
77 | |
78 function camelCase(str) { | |
79 return str.replace(/-([a-z])/g, function (m, w) { | |
80 return w.toUpperCase(); | |
81 }); | |
82 } | |
83 </script> | |
OLD | NEW |