offset-distance.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
#div2 {
    offset-distance: 0;
}
#div3 {
    offset-distance: 100px;
}
#div4 {
    offset-distance: -200px;
}
#div5 {
    offset-distance: 50%;
}
#div6 {
    offset-distance: inherit;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5">
    <div id="div6"></div>
    <div id="div7"></div>
</div>
<span id="span1" style="offset-distance: 25%"></span>
<script>
"use strict";

test(function() {
    assert_equals(getComputedStyle(div1, null).offsetDistance, '0px');
}, 'offset-distance default is 0px');

test(function() {
    assert_equals(getComputedStyle(div2, null).offsetDistance, '0px');
}, 'offset-distance 0 is 0px');

test(function() {
    assert_equals(getComputedStyle(div3, null).offsetDistance, '100px');
}, 'offset-distance can be positive');

test(function() {
    assert_equals(getComputedStyle(div4, null).offsetDistance, '-200px');
}, 'offset-distance allows negative values');

test(function() {
    assert_equals(getComputedStyle(div5, null).offsetDistance, '50%');
}, 'offset-distance can be a percentage');

test(function() {
    assert_equals(getComputedStyle(div6, null).offsetDistance, '50%');
}, 'offset-distance can be explicitly inherited');

test(function() {
    assert_equals(getComputedStyle(div7, null).offsetDistance, '0px');
}, 'offset-distance is not inherited by default');

test(function() {
    assert_equals(span1.style.offsetDistance, '25%');
}, 'offset-distance style can be set inline');

</script>
</body>
</html>
chromium/third_party/blink/web_tests/css3/motion-path/offset-distance.html
