offset-rotate.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
</head>
<body>
<div id="div1"></div>
<div id="div2" style="offset-rotate: auto"></div>
<div id="div3" style="offset-rotate: reverse"></div>
<div id="div4" style="offset-rotate: 180deg"></div>
<div id="div5" style="offset-rotate: 0rad"></div>
<div id="div6" style="offset-rotate: -400grad auto"></div>
<div id="div7" style="offset-rotate: 2turn reverse"></div>
<div id="div8" style="offset-rotate: reverse 30deg">
    <div id="div9" style="offset-rotate: inherit"></div>
    <div id="div10"></div>
</div>
<span id="span1" style="offset-rotate: auto -45deg"></span>

<script>
"use strict";

test(function() {
    assert_equals(getComputedStyle(div1, null).offsetRotate, 'auto 0deg');
}, 'offset-rotate default is auto');

test(function() {
    assert_equals(getComputedStyle(div2, null).offsetRotate, 'auto 0deg');
}, 'offset-rotate auto expands to auto 0deg');

test(function() {
    assert_equals(getComputedStyle(div3, null).offsetRotate, 'auto 180deg');
}, 'offset-rotate reverse expands to auto 180deg');

test(function() {
    assert_equals(getComputedStyle(div4, null).offsetRotate, '180deg');
}, 'offset-rotate can be a fixed angle');

test(function() {
    assert_equals(getComputedStyle(div5, null).offsetRotate, '0deg');
}, 'offset-rotate angles are converted to degrees');

test(function() {
    assert_equals(getComputedStyle(div6, null).offsetRotate, 'auto -360deg');
}, 'offset-rotate can be supplied with angle before auto');

test(function() {
    assert_equals(getComputedStyle(div7, null).offsetRotate, 'auto 900deg');
}, 'offset-rotate can be supplied with angle before reverse');

test(function() {
    assert_equals(getComputedStyle(div8, null).offsetRotate, 'auto 210deg');
}, 'offset-rotate is unaffected by child elements');

test(function() {
    assert_equals(getComputedStyle(div9, null).offsetRotate, 'auto 210deg');
}, 'offset-rotate can be explicitly inherited');

test(function() {
    assert_equals(getComputedStyle(div10, null).offsetRotate, 'auto 0deg');
}, 'offset-rotate is not inherited by default');

test(function() {
    assert_equals(span1.style.offsetRotate, 'auto -45deg');
}, 'offset-rotate style can be set inline');

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