shape-outside-computed.html (2027B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Shapes Module Level 1: getComputedStyle().shapeOutside</title> 6 <link rel="help" href="https://drafts.csswg.org/css-shapes/#shape-outside-property"> 7 <meta name="assert" content="shape-outside computed value is as specified."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/css/support/computed-testcommon.js"></script> 11 </head> 12 <body> 13 <style> 14 #target { 15 font-size: 40px; 16 } 17 </style> 18 <div> 19 <div id="target"></div> 20 </div> 21 <script> 22 // TODO: Add inset() tests 23 24 test_computed_value("shape-outside", "circle(at 10% 20%)"); 25 test_computed_value("shape-outside", "circle(at calc(75% + 0px) calc(75% + 0px))", "circle(at 75% 75%)"); 26 test_computed_value("shape-outside", "circle(calc(10px + 0.5em) at -50% 50%) border-box", "circle(30px at -50% 50%) border-box"); 27 test_computed_value("shape-outside", "circle(calc(10px - 0.5em) at 50% -50%) border-box", "circle(0px at 50% -50%) border-box"); 28 test_computed_value("shape-outside", "circle(at top 0% right calc(10% * sign(1em - 1px)))", "circle(at 90% 0%)"); 29 test_computed_value("shape-outside", "circle(at top 0% right calc(10% * sibling-index()))", "circle(at 90% 0%)"); 30 31 test_computed_value("shape-outside", "ellipse(60% closest-side at 50% 50%)"); 32 test_computed_value("shape-outside", "ellipse(calc(10px + 0.5em) calc(10px - 0.5em) at -50% 50%) padding-box", "ellipse(30px 0px at -50% 50%) padding-box"); 33 test_computed_value("shape-outside", "ellipse(calc(10px - 0.5em) calc(10px + 0.5em) at 50% -50%) border-box", "ellipse(0px 30px at 50% -50%) border-box"); 34 35 test_computed_value("shape-outside", "polygon(evenodd, -10px, -20px, -30px, -40px, -50px, -60px) margin-box"); 36 test_computed_value("shape-outside", "polygon(10%, 20%, 30%, 40%, 50%, 60%) content-box"); 37 test_computed_value("shape-outside", "polygon(calc(10px - 0.5em), 20%, 30%, 40%, 50%, calc(10px - 0.5em))", "polygon(-10px, 20%, 30%, 40%, 50%, -10px)"); 38 </script> 39 </body> 40 </html>