offset-path-ray-contain-005.html (1028B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Motion Path: ray paths with contain</title> 5 <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property"> 6 <link rel="match" href="offset-path-ray-contain-005-ref.html"> 7 <meta name="assert" content="This tests that ray() with contain and the path length increases."> 8 <style> 9 #container { 10 width: 250px; 11 height: 250px; 12 /* move container to right 100px to make sure we render the element 13 properly */ 14 transform: translate(100px); 15 } 16 #target { 17 position: relative; 18 left: 50px; 19 top: 50px; 20 width: 150px; 21 height: 25px; 22 background-color: lime; 23 offset-path: ray(-90deg closest-side contain); 24 offset-anchor: 200% -300%; 25 offset-rotate: -90deg; 26 offset-distance: 50%; 27 offset-position: auto; 28 } 29 </style> 30 </head> 31 <body> 32 <div id="container"> 33 <div id="target"></div> 34 </div> 35 </body> 36 </html>