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 |