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