offset.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
#div2 {
    offset: none 50% auto 400grad;
}
#div3 {
    offset: path('M 10 20 h 30 v 150') 70px 0rad;
}
#div4 {
    offset: none 10px 90deg reverse;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<span id="span1" style="offset: path('M 1 2 V 3') 4px 5deg"></span>
<script>
"use strict";

test(function() {
    assert_equals(getComputedStyle(div1, null).offsetPath, 'none');
    assert_equals(getComputedStyle(div1, null).offsetDistance, '0px');
    assert_equals(getComputedStyle(div1, null).offsetRotate, 'auto 0deg');
    assert_equals(getComputedStyle(div1, null).offset, 'none 0px auto 0deg');
    assert_equals(getComputedStyle(div1, null).transform, 'none');
}, 'offset default is none 0px auto 0deg');

test(function() {
    assert_equals(getComputedStyle(div2, null).offsetPath, 'none');
    assert_equals(getComputedStyle(div2, null).offsetDistance, '50%');
    assert_equals(getComputedStyle(div2, null).offsetRotate, 'auto 360deg');
    assert_equals(getComputedStyle(div2, null).offset, 'none 50% auto 360deg');
    assert_equals(getComputedStyle(div2, null).transform, 'none');
}, 'offset supports various angle units');

test(function() {
    assert_equals(getComputedStyle(div3, null).offsetPath, 'path("M 10 20 H 40 V 170")');
    assert_equals(getComputedStyle(div3, null).offsetDistance, '70px');
    assert_equals(getComputedStyle(div3, null).offsetRotate, '0deg');
    assert_equals(getComputedStyle(div3, null).offset, 'path("M 10 20 H 40 V 170") 70px 0deg');
    assert_equals(getComputedStyle(div3, null).transform, 'none');
}, 'offset supports SVG path data');

test(function() {
    assert_equals(getComputedStyle(div4, null).offsetPath, 'none');
    assert_equals(getComputedStyle(div4, null).offsetDistance, '10px');
    assert_equals(getComputedStyle(div4, null).offsetRotate, 'auto 270deg');
    assert_equals(getComputedStyle(div4, null).offset, 'none 10px auto 270deg');
    assert_equals(getComputedStyle(div4, null).transform, 'none');
}, 'offset property data can be supplied in any order');

test(function() {
    assert_equals(span1.style.offsetPath, 'path("M 1 2 V 3")');
    assert_equals(span1.style.offsetDistance, '4px');
    assert_equals(span1.style.offsetRotate, '5deg');
    assert_equals(span1.style.offset, 'path("M 1 2 V 3") 4px 5deg');
    assert_equals(span1.style.transform, '');
}, 'offset style can be set inline');

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