offset-path-url-011.html (941B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Motion Path: offset-path:url() reference to non-SVG elements</title> 5 <link rel="help" href="https://drafts.fxtf.org/motion/#valdef-offset-path-url"> 6 <link rel="match" href="offset-path-url-011-ref.html"> 7 <meta name="assert" content='This tests that url() references to a non-SVG 8 element and behaves as path("m 0 0") instead.'> 9 <style> 10 #outer { 11 position: relative; 12 left: 50px; 13 top: 50px; 14 width: 300px; 15 height: 100px; 16 } 17 #target { 18 width: 50px; 19 height: 50px; 20 background-color: green; 21 /* This behaves as 'offset-path: path("m 0 0")' */ 22 offset-path: url(#outer); 23 offset-anchor: 50% 50%; 24 offset-distance: 0%; 25 border-radius: 50% 50% 0 0; 26 } 27 </style> 28 </head> 29 <body> 30 <div id="outer"> 31 <div id="target"></div> 32 </div> 33 </body> 34 </html>