compute-distance.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<style>
div {
    position: absolute;
    transform-origin: 0% 0%;
    offset-anchor: 0% 0%;
}
.closed {
    offset-path: path('M 0 0 L 500 0 Z');
}
.open {
    offset-path: path('M 0 0 L 1000 0');
}
#div1 {
    offset-distance: -3700px;
    transform: translate3d(0px, 10px, 1px);
}
#div2 {
    offset-distance: 200px;
    transform: translate3d(0px, 20px, 2px);
}
#div3 {
    offset-distance: 4100px;
    transform: translate3d(0px, 30px, 3px);
}
#div4 {
    offset-distance: -370%;
    transform: translate3d(0px, 40px, 4px);
}
#div5 {
    offset-distance: 20%;
    transform: translate3d(0px, 50px, 5px);
}
#div6 {
    offset-distance: 410%;
    transform: translate3d(0px, 60px, 6px);
}
#div7 {
    offset-distance: -3700px;
    transform: translate3d(0px, 70px, 7px);
}
#div8 {
    offset-distance: 200px;
    transform: translate3d(0px, 80px, 8px);
}
#div9 {
    offset-distance: 4100px;
    transform: translate3d(0px, 90px, 9px);
}
#div10 {
    offset-distance: -370%;
    transform: translate3d(0px, 100px, 10px);
}
#div11 {
    offset-distance: 20%;
    transform: translate3d(0px, 110px, 11px);
}
#div12 {
    offset-distance: 410%;
    transform: translate3d(0px, 120px, 12px);
}
</style>
</head>
<body>
<div class="closed" id="div1">div1</div>
<div class="closed" id="div2">div2</div>
<div class="closed" id="div3">div3</div>
<div class="closed" id="div4">div4</div>
<div class="closed" id="div5">div5</div>
<div class="closed" id="div6">div6</div>
<div class="open" id="div7">div7</div>
<div class="open" id="div8">div8</div>
<div class="open" id="div9">div9</div>
<div class="open" id="div10">div10</div>
<div class="open" id="div11">div11</div>
<div class="open" id="div12">div12</div>
</body>
</html>
chromium/third_party/blink/web_tests/css3/motion-path/compute-distance.html
