offset-path-ray-contain-004.html (934B)
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-004-ref.html"> 7 <meta name="assert" content="This tests that the element should be contained in ray() path circle."> 8 <meta name="fuzzy" content="maxDifference=0-20; totalPixels=0-10"/> 9 <style> 10 #container { 11 width: 300px; 12 height: 300px; 13 } 14 #target { 15 position: relative; 16 left: 150px; 17 top: 150px; 18 width: 100px; 19 height: 100px; 20 background-color: lime; 21 offset-path: ray(45deg closest-side contain); 22 offset-rotate: auto; 23 offset-distance: 100%; 24 offset-position: auto; 25 } 26 </style> 27 </head> 28 <body> 29 <div id="container"> 30 <div id="target"></div> 31 </div> 32 </body> 33 </html>