| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <script src="../../resources/testharness.js"></script> |
| 3 <script src="../../resources/testharnessreport.js"></script> |
| 4 <style> |
| 5 body { |
| 6 font-size: 10px; |
| 7 } |
| 8 #container { |
| 9 offset-position: 30% 40%; |
| 10 } |
| 11 #child1 { |
| 12 offset-position: inherit; |
| 13 } |
| 14 </style> |
| 15 <div id="container"> |
| 16 <div id="child1"></div> |
| 17 <div id="child2"></div> |
| 18 </div> |
| 19 <script> |
| 20 "use strict"; |
| 21 |
| 22 test(function() { |
| 23 var element = document.createElement('div'); |
| 24 document.body.appendChild(element); |
| 25 assert_equals(getComputedStyle(element, null).offsetPosition, 'auto'); |
| 26 }, 'offset-position default is auto'); |
| 27 |
| 28 test(function() { |
| 29 assert_equals(getComputedStyle(container, null).offsetPosition, '30% 40%'); |
| 30 }, 'offset-position can be two percentages'); |
| 31 |
| 32 test(function() { |
| 33 assert_equals(getComputedStyle(child1, null).offsetPosition, '30% 40%'); |
| 34 }, 'offset-position can explicitly inherited'); |
| 35 |
| 36 test(function() { |
| 37 assert_equals(getComputedStyle(child2, null).offsetPosition, 'auto'); |
| 38 }, 'offset-position is not inherited by default'); |
| 39 |
| 40 function computed(specified) { |
| 41 var element = document.createElement('div'); |
| 42 element.style['offset-position'] = specified; |
| 43 document.body.appendChild(element); |
| 44 return getComputedStyle(element, null).offsetPosition; |
| 45 } |
| 46 |
| 47 test(function() { |
| 48 assert_equals(computed('auto'), 'auto'); |
| 49 }, 'offset-position can be auto'); |
| 50 |
| 51 test(function() { |
| 52 assert_equals(computed('10px 20px'), '10px 20px'); |
| 53 }, 'offset-position can be two lengths'); |
| 54 |
| 55 test(function() { |
| 56 assert_equals(computed('30px top'), '30px 0%'); |
| 57 }, 'offset-position can be a length and a keyword'); |
| 58 |
| 59 test(function() { |
| 60 assert_equals(computed('left 40px'), '0% 40px'); |
| 61 }, 'offset-position can be a keyword and a length'); |
| 62 |
| 63 test(function() { |
| 64 assert_equals(computed('top'), '50% 0%'); |
| 65 }, 'offset-position can be supplied with a single keyword'); |
| 66 |
| 67 test(function() { |
| 68 assert_equals(computed('center'), '50% 50%'); |
| 69 }, 'offset-position can be supplied with center'); |
| 70 |
| 71 test(function() { |
| 72 assert_equals(computed('5em 6em'), '50px 60px'); |
| 73 }, 'offset-position can be supplied with em'); |
| 74 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2352273002:
CSS Motion Path: offset-anchor and offset-position (Closed)
