third_party/WebKit/LayoutTests/custom-properties/registered-property-cssom.html - Issue 2621553002: Properly test unset behavior of invalid registered property values

Side by Side Diff: third_party/WebKit/LayoutTests/custom-properties/registered-property-cssom.html

Issue 2621553002: Properly test unset behavior of invalid registered property values (Closed)

Patch Set: Created 3 years, 11 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 | no next file » | no next file with comments »

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	4

5 <style>	5 <style>

6 #inner {	6 #inner {

7 --length: 10px;	7 --length: 10px;

8 --color: red;	8 --color: red;

9 }	9 }

10 #outer {	10 #outer {

	11 --length: 77px;

11 --color: blue;	12 --color: blue;

12 }	13 }

13 </style>	14 </style>

14	15

15 <div id=inner></div>	16 <div id=outer>

	17 <div id=inner></div>

	18 </div>

16	19

17 <script>	20 <script>

18 var computedStyle = getComputedStyle(inner);	21 var computedStyle = getComputedStyle(inner);

19 var inlineStyle = inner.style;	22 var inlineStyle = inner.style;

20 var sheetStyle = document.styleSheets[0].cssRules[0].style;	23 var sheetStyle = document.styleSheets[0].cssRules[0].style;

21	24

22 test(function() {	25 test(function() {

23 // Nothing registered yet, whatever you specify works	26 // Nothing registered yet, whatever you specify works

24 assert_equals(computedStyle.getPropertyValue('--length'), ' 10px');	27 assert_equals(computedStyle.getPropertyValue('--length'), ' 10px');

25 assert_equals(computedStyle.getPropertyValue('--color'), ' red');	28 assert_equals(computedStyle.getPropertyValue('--color'), ' red');

26	29

27 inlineStyle.setProperty('--length', '5');	30 inlineStyle.setProperty('--length', '5');

28 inlineStyle.setProperty('--color', 'hello');	31 inlineStyle.setProperty('--color', 'hello');

29	32

30 assert_equals(inlineStyle.getPropertyValue('--length'), '5');	33 assert_equals(inlineStyle.getPropertyValue('--length'), '5');

31 assert_equals(inlineStyle.getPropertyValue('--color'), 'hello');	34 assert_equals(inlineStyle.getPropertyValue('--color'), 'hello');

32 assert_equals(computedStyle.getPropertyValue('--length'), '5');	35 assert_equals(computedStyle.getPropertyValue('--length'), '5');

33 assert_equals(computedStyle.getPropertyValue('--color'), 'hello');	36 assert_equals(computedStyle.getPropertyValue('--color'), 'hello');

34 }, "CSSOM setters function as expected for unregistered properties");	37 }, "CSSOM setters function as expected for unregistered properties");

35	38

36 CSS.registerProperty({name: '--length', syntax: '<length>', initialValue: '0px'} );	39 CSS.registerProperty({name: '--length', syntax: '<length>', initialValue: '0px'} );

37 CSS.registerProperty({name: '--color', syntax: '<color>', initialValue: 'white', inherits: true});	40 CSS.registerProperty({name: '--color', syntax: '<color>', initialValue: 'white', inherits: true});

38	41

39 test(function() {	42 test(function() {

40 assert_equals(inlineStyle.getPropertyValue('--length'), '5');	43 assert_equals(inlineStyle.getPropertyValue('--length'), '5');

41 assert_equals(inlineStyle.getPropertyValue('--color'), 'hello');	44 assert_equals(inlineStyle.getPropertyValue('--color'), 'hello');

42 assert_equals(computedStyle.getPropertyValue('--length'), '0px');	45 assert_equals(computedStyle.getPropertyValue('--length'), '0px');

43 assert_equals(computedStyle.getPropertyValue('--color'), 'white');	46 assert_equals(computedStyle.getPropertyValue('--color'), 'blue');

44 }, "Formerly valid values are still readable from inline styles but are computed as the unset value");	47 }, "Formerly valid values are still readable from inline styles but are computed as the unset value");

45	48

46 test(function() {	49 test(function() {

47 inlineStyle.setProperty('--length', 'hi');	50 inlineStyle.setProperty('--length', 'hi');

48 inlineStyle.setProperty('--color', '20');	51 inlineStyle.setProperty('--color', '20');

49 assert_equals(inlineStyle.getPropertyValue('--length'), '5');	52 assert_equals(inlineStyle.getPropertyValue('--length'), '5');

50 assert_equals(inlineStyle.getPropertyValue('--color'), 'hello');	53 assert_equals(inlineStyle.getPropertyValue('--color'), 'hello');

51 }, "Values not matching the registered type can't be set");	54 }, "Values not matching the registered type can't be set");

52	55

53 test(function() {	56 test(function() {

(...skipping 14 matching lines...) Expand all Loading...
68	71

69 test(function() {	72 test(function() {

70 inlineStyle.setProperty('--length', '30px');	73 inlineStyle.setProperty('--length', '30px');

71 inlineStyle.setProperty('--color', 'pink');	74 inlineStyle.setProperty('--color', 'pink');

72 assert_equals(inlineStyle.getPropertyValue('--length'), '30px');	75 assert_equals(inlineStyle.getPropertyValue('--length'), '30px');

73 assert_equals(inlineStyle.getPropertyValue('--color'), 'pink');	76 assert_equals(inlineStyle.getPropertyValue('--color'), 'pink');

74 assert_equals(computedStyle.getPropertyValue('--length'), '30px');	77 assert_equals(computedStyle.getPropertyValue('--length'), '30px');

75 assert_equals(computedStyle.getPropertyValue('--color'), 'pink');	78 assert_equals(computedStyle.getPropertyValue('--color'), 'pink');

76 }, "Valid values can be set on inline styles");	79 }, "Valid values can be set on inline styles");

77 </script>	80 </script>

OLD	NEW