LayoutTests/fast/css/scroll-snap-parsing.html - Issue 1148873005: Parsing CSS properties for scroll snap points

Unified 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: Add additional tests for position parsing Created 5 years, 7 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 side-by-side diff with in-line comments

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') | Source/core/css/parser/CSSPropertyParser.cpp » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: LayoutTests/fast/css/scroll-snap-parsing.html

diff --git a/LayoutTests/fast/css/scroll-snap-parsing.html b/LayoutTests/fast/css/scroll-snap-parsing.html

new file mode 100644

index 0000000000000000000000000000000000000000..73697fdf2bb14f77e03fb4861d4917ab4ae87840

--- /dev/null

+++ b/LayoutTests/fast/css/scroll-snap-parsing.html

@@ -0,0 +1,75 @@

+<!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>

+

+<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-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>

majidvp 2015/05/26 19:25:07 I didn't add tests here to cover other length unit

Timothy Loh 2015/05/27 00:54:03 Should be fine to just test one or two unit types.

majidvp 2015/05/27 17:48:11 I didn't know about calc(). What is expected to be

Timothy Loh 2015/05/28 07:09:26 The spec says "specified value, with lengths made

+<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: 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>

+<!-- TODO(majidvp): fix multi-position snap-coordinate parsing

+<div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinate: 50px 100px, 150px 100px, 200px 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%, 150% 100%, 200% 100%;" expected="50% 100%, 150% 100%, 200% 100%" desc="multiple percentage coordinates" ></div>

+<div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinate: 12em 16ex, 16em 12ex;" expected="12em 16ex, 16em 12ex" desc="em/ex coordinate" ></div>

+<div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinate: 2in 5cm, 5in 2cm;" expected="2in 5cm 5in 2cm" desc="in/cm coordinate" ></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>