offset-path-shape-computed.html (2286B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Motion Path Module Level 1: getComputedStyle for offset-path with shape()</title> 6 <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property"> 7 <link rel="help" href="https://drafts.csswg.org/css-shapes-2/#shape-function"> 8 <meta name="assert" content="offset-path has absolute shape commands."> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/css/support/computed-testcommon.js"></script> 12 <style> 13 html { 14 font-size: 16px; 15 } 16 </style> 17 </head> 18 <body> 19 <div id="target"></div> 20 <script> 21 test_computed_value("offset-path", "shape(from 0px 0px, line to 10px 10px)"); 22 test_computed_value("offset-path", "shape(from 1em 50px, line to 10rem 10%)", "shape(from 16px 50px, line to 160px 10%)"); 23 test_computed_value("offset-path", "shape(from 10px 10px, move by 10px 5px, line by 20px 40%, close)"); 24 test_computed_value("offset-path", "shape(from 10px 10px, hline by 10px, vline to 5rem)", "shape(from 10px 10px, hline by 10px, vline to 80px)"); 25 test_computed_value("offset-path", "shape(from 10px 10px, vline by 5%, hline to 1px)"); 26 test_computed_value("offset-path", "shape(from 10px 10px, curve to 50px 20px with 10rem 1%)", "shape(from 10px 10px, curve to 50px 20px with 160px 1%)"); 27 test_computed_value("offset-path", "shape(from 10px 10px, curve to 50px 20px with 10rem 1px / 20% 1em)", "shape(from 10px 10px, curve to 50px 20px with 160px 1px / 20% 16px)"); 28 test_computed_value("offset-path", "shape(from 10px 10px, smooth to 50px 20px with 10rem 1%)", "shape(from 10px 10px, smooth to 50px 20px with 160px 1%)"); 29 test_computed_value("offset-path", "shape(from 10px 10px, smooth to 50px 3pt)", "shape(from 10px 10px, smooth to 50px 4px)"); 30 test_computed_value("offset-path", "shape(from 10px 10px, arc to 50px 3pt of 10px 10px)", "shape(from 10px 10px, arc to 50px 4px of 10px 10px)"); 31 test_computed_value("offset-path", "shape(from 10px 10px, arc to 50px 3pt of 10px small rotate 0deg)", "shape(from 10px 10px, arc to 50px 4px of 10px)"); 32 test_computed_value("offset-path", "shape(from 10% 1rem, arc to 50px 3pt of 20% cw large rotate 25deg)", "shape(from 10% 16px, arc to 50px 4px of 20% cw large rotate 25deg)"); 33 </script> 34 </body> 35 </html>