Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(509)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css/scroll-snap-parsing.html

Issue 1148873005: Parsing CSS properties for scroll snap points (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Fix comment Created 5 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-listing-expected.txt ('k') | LayoutTests/fast/css/scroll-snap-parsing-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(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
37
38 <div class="test" property="scroll-snap-destination" style="scroll-snap-destinat ion: 10px 50px;" expected="10px 50px" desc="pixel/pixel destination" ></div>
39 <div class="test" property="scroll-snap-destination" style="scroll-snap-destinat ion: 20px 40%;" expected="20px 40%" desc="pixel/percentage destination" ></div>
40 <div class="test" property="scroll-snap-destination" style="scroll-snap-destinat ion: 0 10px;" expected="0px 10px" desc="unitless/pixel destination" ></div>
41 <div class="test" property="scroll-snap-destination" style="scroll-snap-destinat ion: 0% 0px;" expected="0% 0px" desc="percentage/pixel destination" ></div>
42 <div class="test" property="scroll-snap-destination" style="scroll-snap-destinat ion: 5% 100%;" expected="5% 100%" desc="percentage/percentage destination" ></di v>
43 <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>
44
45 <div class="test" property="scroll-snap-destination" style="scroll-snap-destinat ion: left top 50%;" expected="0% 50%" desc="3 piece percentage destination" ></d iv>
46 <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>
47
48 <div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinat e: 50px 100px;" expected="50px 100px" desc="single pixel coordinate" ></div>
49 <div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinat e: 50% 100%;" expected="50% 100%" desc="single percentage coordinate" ></div>
50 <div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinat e: left top 50%;" expected="0% 50%" desc="3 piece percentage coordinate" ></div>
51 <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>
52 <div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinat e: left;" expected="0% 50%" desc="1 piece coordinate with implied center" ></div >
53
54 <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>
55 <div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinat e: 50% 100%, left top 100%, 200% 100%;" expected="50% 100%, 0% 100%, 200% 100%" desc="multiple percentage coordinates" ></div>
56 <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>
57 <div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinat e: 50px 100px, junk;" expected="none" desc="reject invalid position list" ></div >
58 <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>
59 <div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinat e: 50px 100px,;" expected="none" desc="reject invalid position with terminating comma" ></div>
60
61
62 <script>
63 description("Test the parsing and application of the scroll-snap-* properties.") ;
64
65 var tests = document.querySelectorAll('.test');
66 var style;
67 for (var i = 0; i < tests.length; i++) {
68 debug('Test case: ' + tests[i].attributes.desc.value);
69 var property = camelCase(tests[i].attributes.property.value);
70 style = window.getComputedStyle(tests[i]);
71 shouldBeEqualToString('style.' + property, tests[i].attributes.expected.value) ;
72 debug('');
73 }
74
75 function camelCase(str) {
76 return str.replace(/-([a-z])/g, function (m, w) {
77 return w.toUpperCase();
78 });
79 }
80 </script>
OLDNEW
« no previous file with comments | « LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-listing-expected.txt ('k') | LayoutTests/fast/css/scroll-snap-parsing-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698