<!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>