offset-position.html | Explore in Territory

<!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, 'normal');
}, 'offset-position default is normal');

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, 'normal');
}, 'offset-position is not inherited by default');

test(function() {
    assert_equals(getComputedStyle(child3, null).offsetPosition, 'normal');
}, '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>
chromium/third_party/blink/web_tests/css3/motion-path/offset-position.html
