offset-path.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
#div2 {
    offset-path: none;
}
#div3 {
    offset-path: path('M 20 20 H 80 V 30 H 20 L 20 20');
}
#div4 {
    offset-path: inherit;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3">
    <div id="div4"></div>
    <div id="div5"></div>
</div>
<span id="span1" style="offset-path: path('M 1 2 V 3')"></span>
<script>
"use strict";

test(function() {
    assert_equals(getComputedStyle(div1, null).offsetPath, 'none');
}, 'offset-path default is none');

test(function() {
    assert_equals(getComputedStyle(div2, null).offsetPath, 'none');
}, 'offset-path can be explicitly none');

test(function() {
    assert_equals(getComputedStyle(div3, null).offsetPath, 'path("M 20 20 H 80 V 30 H 20 L 20 20")');
}, 'offset-path can be an SVG Path data string');

test(function() {
    assert_equals(getComputedStyle(div4, null).offsetPath, 'path("M 20 20 H 80 V 30 H 20 L 20 20")');
}, 'offset-path can be explicitly inherited');

test(function() {
    assert_equals(getComputedStyle(div5, null).offsetPath, 'none');
}, 'offset-path is not inherited by default');

test(function() {
    assert_equals(span1.style.offsetPath, 'path("M 1 2 V 3")');
}, 'offset-path style can be set inline');

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