summaryrefslogtreecommitdiffstats
path: root/third_party/WebKit/LayoutTests/fast/css/scroll-snap-parsing.html
diff options
context:
space:
mode:
authormajidvp@chromium.org <majidvp@chromium.org>2015-06-05 16:24:00 +0000
committermajidvp@chromium.org <majidvp@chromium.org>2015-06-05 16:24:00 +0000
commitb7e22c800189a7a234b126a91e175eed271f5edc (patch)
tree532f990465b34d3d4a2da4ab4f9f131ad8ef86d2 /third_party/WebKit/LayoutTests/fast/css/scroll-snap-parsing.html
parenta0b1a6239653de9fce75ba1a16502e7a12bed0eb (diff)
downloadchromium_src-b7e22c800189a7a234b126a91e175eed271f5edc.zip
chromium_src-b7e22c800189a7a234b126a91e175eed271f5edc.tar.gz
chromium_src-b7e22c800189a7a234b126a91e175eed271f5edc.tar.bz2
Add CSS properties needed for scroll snap points
The code was partially ported over from webkit implementation but it had to be considerably rewritten to fit blink's CSS parsing. - scroll-snap-type: primitive - scroll-snap-coordinate: <position># - scroll-snap-destination: <position> - scroll-snap-points-x: repeat(<length>) - scroll-snap-points-y: repeat(<length>) Spec link: http://dev.w3.org/csswg/css-snappoints/#property-index BUG=311234 Review URL: https://codereview.chromium.org/1148873005 git-svn-id: svn://svn.chromium.org/blink/trunk@196586 bbb929c8-8fbe-4397-9dbb-9b2b20218538
Diffstat (limited to 'third_party/WebKit/LayoutTests/fast/css/scroll-snap-parsing.html')
-rw-r--r--third_party/WebKit/LayoutTests/fast/css/scroll-snap-parsing.html80
1 files changed, 80 insertions, 0 deletions
diff --git a/third_party/WebKit/LayoutTests/fast/css/scroll-snap-parsing.html b/third_party/WebKit/LayoutTests/fast/css/scroll-snap-parsing.html
new file mode 100644
index 0000000..5d4f338
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/fast/css/scroll-snap-parsing.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<script src="../../resources/js-test.js"></script>
+<style>
+div#container {
+ scroll-snap-type: mandatory;
+ scroll-snap-points-x: repeat(20%);
+ scroll-snap-points-y: repeat(20%);
+ scroll-snap-destination: 20px 20px;
+ scroll-snap-coordinate: 10px 10px;
+}
+</style>
+
+<!-- test initial and inherited values first -->
+<div id="container">
+ <div class="test" property="scroll-snap-type" style="scroll-snap-type: inherit;" expected="mandatory" desc="inherited type" ></div>
+ <div class="test" property="scroll-snap-type" style="scroll-snap-type: initial;" expected="none" desc="initial type" ></div>
+ <div class="test" property="scroll-snap-points-x" style="scroll-snap-points-x: inherit;" expected="repeat(20%)" desc="inherited points-x" ></div>
+ <div class="test" property="scroll-snap-points-x" style="scroll-snap-points-x: initial;" expected="none" desc="initial points-x" ></div>
+ <div class="test" property="scroll-snap-points-y" style="scroll-snap-points-y: inherit;" expected="repeat(20%)" desc="inherited points-y" ></div>
+ <div class="test" property="scroll-snap-points-y" style="scroll-snap-points-y: initial;" expected="none" desc="initial points-y" ></div>
+ <div class="test" property="scroll-snap-destination" style="scroll-snap-destination: inherit;" expected="20px 20px" desc="inherited destination" ></div>
+ <div class="test" property="scroll-snap-destination" style="scroll-snap-destination: initial;" expected="0px 0px" desc="initial destination" ></div>
+ <div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinate: inherit;" expected="10px 10px" desc="inherited coordinate" ></div>
+ <div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinate: initial;" expected="none" desc="initial coordinate" ></div>
+</div>
+
+<div class="test" property="scroll-snap-type" style="scroll-snap-type: mandatory;" expected="mandatory" desc="mandatory type" ></div>
+<div class="test" property="scroll-snap-type" style="scroll-snap-type: proximity;" expected="proximity" desc="proximity type" ></div>
+<div class="test" property="scroll-snap-type" style="scroll-snap-type: none;" expected="none" desc="none type" ></div>
+
+<div class="test" property="scroll-snap-points-x" style="scroll-snap-points-x: repeat(100%);" expected="repeat(100%)" desc="percentage points repeat along x axis" ></div>
+<div class="test" property="scroll-snap-points-x" style="scroll-snap-points-x: repeat(25px);" expected="repeat(25px)" desc="pixel points repeat along x axis" ></div>
+<div class="test" property="scroll-snap-points-y" style="scroll-snap-points-y: repeat(100%);" expected="repeat(100%)" desc="percentage points repeat along y axis" ></div>
+<div class="test" property="scroll-snap-points-y" style="scroll-snap-points-y: repeat(25px);" expected="repeat(25px)" desc="pixel points repeat along y axis" ></div>
+<div class="test" property="scroll-snap-points-y" style="scroll-snap-points-y: repeat(calc(25px + 1%));" expected="repeat(calc(25px + 1%))" desc="calc repeat along y axis" ></div>
+
+
+<div class="test" property="scroll-snap-destination" style="scroll-snap-destination: 10px 50px;" expected="10px 50px" desc="pixel/pixel destination" ></div>
+<div class="test" property="scroll-snap-destination" style="scroll-snap-destination: 20px 40%;" expected="20px 40%" desc="pixel/percentage destination" ></div>
+<div class="test" property="scroll-snap-destination" style="scroll-snap-destination: 0 10px;" expected="0px 10px" desc="unitless/pixel destination" ></div>
+<div class="test" property="scroll-snap-destination" style="scroll-snap-destination: 0% 0px;" expected="0% 0px" desc="percentage/pixel destination" ></div>
+<div class="test" property="scroll-snap-destination" style="scroll-snap-destination: 5% 100%;" expected="5% 100%" desc="percentage/percentage destination" ></div>
+<div class="test" property="scroll-snap-destination" style="scroll-snap-destination: calc(10% + 20px) 40%;" expected="calc(20px + 10%) 40%" desc="calc/percentage destination" ></div>
+
+<div class="test" property="scroll-snap-destination" style="scroll-snap-destination: left top 50%;" expected="0% 50%" desc="3 piece percentage destination" ></div>
+<div class="test" property="scroll-snap-destination" style="scroll-snap-destination: top;" expected="50% 0%" desc="1 piece destination with implied center" ></div>
+
+<div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinate: 50px 100px;" expected="50px 100px" desc="single pixel coordinate" ></div>
+<div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinate: 50% 100%;" expected="50% 100%" desc="single percentage coordinate" ></div>
+<div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinate: left top 50%;" expected="0% 50%" desc="3 piece percentage coordinate" ></div>
+<div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinate: left 10px top 15px;" expected="10px 15px" desc="4 piece pixel coordinate" ></div>
+<div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinate: left;" expected="0% 50%" desc="1 piece coordinate with implied center" ></div>
+
+<div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinate: 50px 100px, 150px 100px, left 200px top 100px;" expected="50px 100px, 150px 100px, 200px 100px" desc="multiple pixel coordinates" ></div>
+<div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinate: 50% 100%, left top 100%, 200% 100%;" expected="50% 100%, 0% 100%, 200% 100%" desc="multiple percentage coordinates" ></div>
+<div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinate: calc(10% + 100px) 100%, 150%, 200px calc(5% + 10px);" expected="calc(100px + 10%) 100%, 150% 50%, 200px calc(10px + 5%)" desc="multiple mixed pixel/percentage/calc coordinates" ></div>
+<div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinate: 50px 100px, junk;" expected="none" desc="reject invalid position list" ></div>
+<div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinate: 50px 100px / 1px 1px;" expected="none" desc="reject invalid position separator" ></div>
+<div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinate: 50px 100px,;" expected="none" desc="reject invalid position with terminating comma" ></div>
+
+
+<script>
+description("Test the parsing and application of the scroll-snap-* properties.");
+
+var tests = document.querySelectorAll('.test');
+var style;
+for (var i = 0; i < tests.length; i++) {
+ debug('Test case: ' + tests[i].attributes.desc.value);
+ var property = camelCase(tests[i].attributes.property.value);
+ style = window.getComputedStyle(tests[i]);
+ shouldBeEqualToString('style.' + property, tests[i].attributes.expected.value);
+ debug('');
+}
+
+function camelCase(str) {
+ return str.replace(/-([a-z])/g, function (m, w) {
+ return w.toUpperCase();
+ });
+}
+</script>
generated by cgit v1.1 at 2025-03-28 23:58:09 +0000