third_party/WebKit/LayoutTests/css3/motion-path/offset-position.html - Issue 2888283006: CSS: Use count position values with 3 parts

Side by Side Diff: third_party/WebKit/LayoutTests/css3/motion-path/offset-position.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 | « no previous file | third_party/WebKit/LayoutTests/fast/css/scroll-snap-parsing.html » ('j') | third_party/WebKit/LayoutTests/fast/css/scroll-snap-parsing.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/testharness.js"></script>	2 <script src="../../resources/testharness.js"></script>

3 <script src="../../resources/testharnessreport.js"></script>	3 <script src="../../resources/testharnessreport.js"></script>

4 <style>	4 <style>

5 body {	5 body {

6 font-size: 10px;	6 font-size: 10px;

7 }	7 }

8 #container {	8 #container {

9 offset-position: 30% 40%;	9 offset-position: 30% 40%;

10 }	10 }

11 #child1 {	11 #child1 {

12 offset-position: inherit;	12 offset-position: inherit;

13 }	13 }

	14 #child3 {

	15 offset-position: left 10% top; /* invalid */

	16 }

	17 #child4 {

	18 offset-position: bottom 10% right 20%;

	19 }

14 </style>	20 </style>

15 <div id="container">	21 <div id="container">

16 <div id="child1"></div>	22 <div id="child1"></div>

17 <div id="child2"></div>	23 <div id="child2"></div>

	24 <div id="child3"></div>

	25 <div id="child4"></div>

18 </div>	26 </div>

19 <script>	27 <script>

20 "use strict";	28 "use strict";

21	29

22 test(function() {	30 test(function() {

23 var element = document.createElement('div');	31 var element = document.createElement('div');

24 document.body.appendChild(element);	32 document.body.appendChild(element);

25 assert_equals(getComputedStyle(element, null).offsetPosition, 'auto');	33 assert_equals(getComputedStyle(element, null).offsetPosition, 'auto');

26 }, 'offset-position default is auto');	34 }, 'offset-position default is auto');

27	35

28 test(function() {	36 test(function() {

29 assert_equals(getComputedStyle(container, null).offsetPosition, '30% 40%');	37 assert_equals(getComputedStyle(container, null).offsetPosition, '30% 40%');

30 }, 'offset-position can be two percentages');	38 }, 'offset-position can be two percentages');

31	39

32 test(function() {	40 test(function() {

33 assert_equals(getComputedStyle(child1, null).offsetPosition, '30% 40%');	41 assert_equals(getComputedStyle(child1, null).offsetPosition, '30% 40%');

34 }, 'offset-position can explicitly inherited');	42 }, 'offset-position can explicitly inherited');

35	43

36 test(function() {	44 test(function() {

37 assert_equals(getComputedStyle(child2, null).offsetPosition, 'auto');	45 assert_equals(getComputedStyle(child2, null).offsetPosition, 'auto');

38 }, 'offset-position is not inherited by default');	46 }, 'offset-position is not inherited by default');

39	47

	48 test(function() {

	49 assert_equals(getComputedStyle(child3, null).offsetPosition, 'auto');

	50 }, 'offset-position may not use three values');

	51

	52 test(function() {

	53 assert_equals(getComputedStyle(child4, null).offsetPosition, '80% 90%');

	54 }, 'offset-position may use four values');

	55

40 function computed(specified) {	56 function computed(specified) {

41 var element = document.createElement('div');	57 var element = document.createElement('div');

42 element.style['offset-position'] = specified;	58 element.style['offset-position'] = specified;

43 document.body.appendChild(element);	59 document.body.appendChild(element);

44 return getComputedStyle(element, null).offsetPosition;	60 return getComputedStyle(element, null).offsetPosition;

45 }	61 }

46	62

47 test(function() {	63 test(function() {

48 assert_equals(computed('auto'), 'auto');	64 assert_equals(computed('auto'), 'auto');

49 }, 'offset-position can be auto');	65 }, 'offset-position can be auto');

(...skipping 15 matching lines...) Expand all Loading...
65 }, 'offset-position can be supplied with a single keyword');	81 }, 'offset-position can be supplied with a single keyword');

66	82

67 test(function() {	83 test(function() {

68 assert_equals(computed('center'), '50% 50%');	84 assert_equals(computed('center'), '50% 50%');

69 }, 'offset-position can be supplied with center');	85 }, 'offset-position can be supplied with center');

70	86

71 test(function() {	87 test(function() {

72 assert_equals(computed('5em 6em'), '50px 60px');	88 assert_equals(computed('5em 6em'), '50px 60px');

73 }, 'offset-position can be supplied with em');	89 }, 'offset-position can be supplied with em');

74 </script>	90 </script>

OLD	NEW