third_party/WebKit/LayoutTests/fast/css/scroll-snap-parsing.html - Issue 2888283006: CSS: Use count position values with 3 parts

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

Issue 2888283006: CSS: Use count position values with 3 parts (Closed)

Patch Set: two color-stop for conic-gradient example Created 3 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:

« no previous file with comments | « third_party/WebKit/LayoutTests/css3/motion-path/offset-position.html ('k') | third_party/WebKit/LayoutTests/fast/css/scroll-snap-parsing-expected.txt » ('j') | third_party/WebKit/LayoutTests/fast/css/usecounter-position3value-background.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!DOCTYPE html>	1 <!DOCTYPE html>

2 <script src="../../resources/js-test.js"></script>	2 <script src="../../resources/js-test.js"></script>

3 <style>	3 <style>

4 div#container {	4 div#container {

5 scroll-snap-type: mandatory;	5 scroll-snap-type: mandatory;

6 scroll-snap-points-x: repeat(20%);	6 scroll-snap-points-x: repeat(20%);

7 scroll-snap-points-y: repeat(20%);	7 scroll-snap-points-y: repeat(20%);

8 scroll-snap-destination: 20px 20px;	8 scroll-snap-destination: 20px 20px;

9 scroll-snap-coordinate: 10px 10px;	9 scroll-snap-coordinate: 10px 10px;

10 }	10 }

(...skipping 27 matching lines...) Expand all Loading...
38	38

39	39

40	40

41 <div class="test" property="scroll-snap-destination" style="scroll-snap-destinat ion: 10px 50px;" expected="10px 50px" desc="pixel/pixel destination" ></div>	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>	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>	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>	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>	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>	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	47

48 <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>	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>
	Bugs Nash 2017/05/22 23:07:08 why is this expected to change? isn't scroll-snap- why is this expected to change? isn't scroll-snap-destination 3 value position still valid? Eric Willigers 2017/05/23 03:20:01 We would have needed to add a use counter or misus Show quoted text On 2017/05/22 23:07:08, Bugs Nash wrote: > why is this expected to change? isn't scroll-snap-destination 3 value position > still valid? We would have needed to add a use counter or misuse another use counter, and I don't either is worthwhile. We hope the two properties (that never shipped) will be deleted from the codebase in a couple of weeks.
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>	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	50

51 <div class="test" property="scroll-snap-coordinate" style="scroll-snap-coordinat e: 50px 100px;" expected="50px 100px" desc="single pixel coordinate" ></div>	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>	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="0% 50%" desc="3 piece 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>
	Bugs Nash 2017/05/22 23:07:08 as above as above
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>	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 >	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	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>	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 top 100%, 200% 100%;" expected="50% 100%, 0% 100%, 200% 100%" desc="multiple percentage 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>	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 >	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>	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>	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	63

64	64

65 <script>	65 <script>

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

67	67

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

69 var style;	69 var style;

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

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

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

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

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

75 debug('');	75 debug('');

76 }	76 }

77	77

78 function camelCase(str) {	78 function camelCase(str) {

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

80 return w.toUpperCase();	80 return w.toUpperCase();

81 });	81 });

82 }	82 }

83 </script>	83 </script>

OLD	NEW