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

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

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

	36 <div class="test" property="scroll-snap-destination" style="scroll-snap-destinat ion: 10px 50px;" expected="10px 50px" desc="pixel/pixel destination" ></div>

	37 <div class="test" property="scroll-snap-destination" style="scroll-snap-destinat ion: 20px 40%;" expected="20px 40%" desc="pixel/percentage destination" ></div>

	38 <div class="test" property="scroll-snap-destination" style="scroll-snap-destinat ion: 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 I didn't add tests here to cover other length units such as in/em/pt etc. I imagine various units conversions should be covered elsewhere so it would not make much sense here. timloh@ wdyt? Timothy Loh 2015/05/27 00:54:03 Should be fine to just test one or two unit types. Show quoted text On 2015/05/26 19:25:07, majidvp wrote: > I didn't add tests here to cover other length units such as in/em/pt etc. I > imagine various units conversions should be covered elsewhere so it would not > make much sense here. timloh@ wdyt? Should be fine to just test one or two unit types. Maybe a good idea to test calc with px and % where they're both accepted, e.g. calc(10px + 20%). majidvp 2015/05/27 17:48:11 I didn't know about calc(). What is expected to be Show quoted text On 2015/05/27 00:54:03, Timothy Loh wrote: > On 2015/05/26 19:25:07, majidvp wrote: > > I didn't add tests here to cover other length units such as in/em/pt etc. I > > imagine various units conversions should be covered elsewhere so it would not > > make much sense here. timloh@ wdyt? > > Should be fine to just test one or two unit types. Maybe a good idea to test > calc with px and % where they're both accepted, e.g. calc(10px + 20%). I didn't know about calc(). What is expected to be the computed value (getComputedStyle) for a calc? Is it the raw value or should it be the converted value? I used calc with both 'width' and 'background-position' and the getComputedStyle was different for each case. See http://output.jsbin.com/bobubu/1 Timothy Loh 2015/05/28 07:09:26 The spec says "specified value, with lengths made Show quoted text On 2015/05/27 17:48:11, majidvp wrote: > On 2015/05/27 00:54:03, Timothy Loh wrote: > > On 2015/05/26 19:25:07, majidvp wrote: > > > I didn't add tests here to cover other length units such as in/em/pt etc. I > > > imagine various units conversions should be covered elsewhere so it would > not > > > make much sense here. timloh@ wdyt? > > > > Should be fine to just test one or two unit types. Maybe a good idea to test > > calc with px and % where they're both accepted, e.g. calc(10px + 20%). > > I didn't know about calc(). What is expected to be the computed value > (getComputedStyle) for a calc? Is it the raw value or should it be the converted > value? I used calc with both 'width' and 'background-position' and the > getComputedStyle was different for each case. See > http://output.jsbin.com/bobubu/1 > The spec says "specified value, with lengths made absolute", so percentages should be left unresolved.
	39 <div class="test" property="scroll-snap-destination" style="scroll-snap-destinat ion: 0% 0px;" expected="0% 0px" desc="percentage/pixel destination" ></div>

	40 <div class="test" property="scroll-snap-destination" style="scroll-snap-destinat ion: 5% 100%;" expected="5% 100%" desc="percentage/percentage destination" ></di v>

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

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

	43

	44 <div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinat e: 50px 100px;" expected="50px 100px" desc="single pixel coordinate" ></div>

	45 <div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinat e: 50% 100%;" expected="50% 100%" desc="single percentage coordinate" ></div>

	46 <div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinat e: left top 50%;" expected="0% 50%" desc="3 piece percentage coordinate" ></div>

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

	48 <div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinat e: left;" expected="0% 50%" desc="1 piece coordinate with implied center" ></div >

	49

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

	51

	52 <div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinat e: 50px 100px, 150px 100px, 200px 100px;" expected="50px 100px, 150px 100px, 200 px 100px" desc="multiple pixel coordinates" ></div>

	53 <div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinat e: 50% 100%, 150% 100%, 200% 100%;" expected="50% 100%, 150% 100%, 200% 100%" de sc="multiple percentage coordinates" ></div>

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

	55 <div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinat e: 2in 5cm, 5in 2cm;" expected="2in 5cm 5in 2cm" desc="in/cm coordinate" ></div>

	56 -->

	57 <script>

	58 description("Test the parsing and application of the scroll-snap-* properties.") ;

	59

	60 var tests = document.querySelectorAll('.test');

	61 var style;

	62 for (var i = 0; i < tests.length; i++) {

	63 debug('Test case: ' + tests[i].attributes.desc.value);

	64 var property = camelCase(tests[i].attributes.property.value);

	65 style = window.getComputedStyle(tests[i]);

	66 shouldBeEqualToString('style.' + property, tests[i].attributes.expected.value) ;

	67 debug('');

	68 }

	69

	70 function camelCase(str) {

	71 return str.replace(/-([a-z])/g, function (m, w) {

	72 return w.toUpperCase();

	73 });

	74 }

	75 </script>

OLD	NEW