| <!DOCTYPE html> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <style> |
| body { |
| font-size: 10px; |
| } |
| #container { |
| offset-position: 30% 40%; |
| } |
| #child1 { |
| offset-position: inherit; |
| } |
| #child3 { |
| offset-position: left 10% top; /* invalid */ |
| } |
| #child4 { |
| offset-position: bottom 10% right 20%; |
| } |
| </style> |
| <div id="container"> |
| <div id="child1"></div> |
| <div id="child2"></div> |
| <div id="child3"></div> |
| <div id="child4"></div> |
| </div> |
| <script> |
| "use strict"; |
| |
| test(function() { |
| var element = document.createElement('div'); |
| document.body.appendChild(element); |
| assert_equals(getComputedStyle(element, null).offsetPosition, 'auto'); |
| }, 'offset-position default is auto'); |
| |
| test(function() { |
| assert_equals(getComputedStyle(container, null).offsetPosition, '30% 40%'); |
| }, 'offset-position can be two percentages'); |
| |
| test(function() { |
| assert_equals(getComputedStyle(child1, null).offsetPosition, '30% 40%'); |
| }, 'offset-position can explicitly inherited'); |
| |
| test(function() { |
| assert_equals(getComputedStyle(child2, null).offsetPosition, 'auto'); |
| }, 'offset-position is not inherited by default'); |
| |
| test(function() { |
| assert_equals(getComputedStyle(child3, null).offsetPosition, 'auto'); |
| }, 'offset-position may not use three values'); |
| |
| test(function() { |
| assert_equals(getComputedStyle(child4, null).offsetPosition, '80% 90%'); |
| }, 'offset-position may use four values'); |
| |
| function computed(specified) { |
| var element = document.createElement('div'); |
| element.style['offset-position'] = specified; |
| document.body.appendChild(element); |
| return getComputedStyle(element, null).offsetPosition; |
| } |
| |
| test(function() { |
| assert_equals(computed('auto'), 'auto'); |
| }, 'offset-position can be auto'); |
| |
| test(function() { |
| assert_equals(computed('10px 20px'), '10px 20px'); |
| }, 'offset-position can be two lengths'); |
| |
| test(function() { |
| assert_equals(computed('30px top'), '30px 0%'); |
| }, 'offset-position can be a length and a keyword'); |
| |
| test(function() { |
| assert_equals(computed('left 40px'), '0% 40px'); |
| }, 'offset-position can be a keyword and a length'); |
| |
| test(function() { |
| assert_equals(computed('top'), '50% 0%'); |
| }, 'offset-position can be supplied with a single keyword'); |
| |
| test(function() { |
| assert_equals(computed('center'), '50% 50%'); |
| }, 'offset-position can be supplied with center'); |
| |
| test(function() { |
| assert_equals(computed('5em 6em'), '50px 60px'); |
| }, 'offset-position can be supplied with em'); |
| </script> |
