| <!DOCTYPE html> |
| |
| <html> |
| <head> |
| <style> |
| .container { |
| width: 200px; |
| height: 200px; |
| } |
| .box { |
| height: 100px; |
| width: 100px; |
| -webkit-shape-outside: inset(0 100% 100% 0); |
| float: left; |
| background: rgba(0, 0, 255, 0.5); |
| } |
| |
| #length-box { |
| -webkit-animation: length-anim 2s linear; |
| } |
| |
| @-webkit-keyframes length-anim { |
| from { -webkit-shape-margin: 0px; } |
| to { -webkit-shape-margin: 100px; } |
| } |
| |
| </style> |
| <script src="../../../animations/resources/animation-test-helpers.js"></script> |
| <script type="text/javascript"> |
| const expectedValues = [ |
| // [animation-name, time, element-id, property, expected-value, tolerance] |
| ["length-anim", 1, "length-box", "-webkit-shape-margin", "50", 0.5], |
| ]; |
| |
| runAnimationTest(expectedValues); |
| </script> |
| </head> |
| <body> |
| |
| <div class='container'> |
| <div class="box" id="length-box"></div> |
| Moving Text |
| </div> |
| |
| <div id="result"> |
| </div> |
| </body> |
| </html> |
