| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>CSS Shapes Module Level 1: getComputedStyle().shapeOutside</title> |
| <link rel="help" href="https://drafts.csswg.org/css-shapes/#shape-outside-property"> |
| <meta name="assert" content="shape-outside computed value is as specified."> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/css/support/computed-testcommon.js"></script> |
| </head> |
| <body> |
| <style> |
| #target { |
| font-size: 40px; |
| } |
| </style> |
| <div> |
| <div id="target"></div> |
| </div> |
| <script> |
| // TODO: Add inset() tests |
| test_computed_value("shape-outside", "rect(0px 3em 2% 1px)", "inset(0px calc(100% - 120px) 98% 1px)"); |
| test_computed_value("shape-outside", "rect(0px calc(100% - 20px) 2% 3em)", "inset(0px calc(0% + 20px) 98% 120px)"); |
| test_computed_value("shape-outside", "rect(10px 20px 30px 25px round 20% / 0px 1px 2% 3em)", "inset(10px calc(100% - 20px) calc(100% - 30px) 25px round 20% / 0px 1px 2% 120px)"); |
| |
| test_computed_value("shape-outside", "circle(at 10% 20%)"); |
| test_computed_value("shape-outside", "circle(at calc(75% + 0px) calc(75% + 0px))", "circle(at 75% 75%)"); |
| test_computed_value("shape-outside", "circle(calc(10px + 0.5em) at -50% 50%) border-box", "circle(30px at -50% 50%) border-box"); |
| test_computed_value("shape-outside", "circle(calc(10px - 0.5em) at 50% -50%) border-box", "circle(0px at 50% -50%) border-box"); |
| test_computed_value("shape-outside", "circle(at top 0% right calc(10% * sign(1em - 1px)))", "circle(at 90% 0%)"); |
| test_computed_value("shape-outside", "circle(at top 0% right calc(10% * sibling-index()))", "circle(at 90% 0%)"); |
| |
| test_computed_value("shape-outside", "ellipse(60% closest-side at 50% 50%)"); |
| 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"); |
| 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"); |
| |
| test_computed_value("shape-outside", "polygon(evenodd, -10px -20px, -30px -40px, -50px -60px) margin-box", "polygon(evenodd, -10px -20px, -30px -40px, -50px -60px)"); |
| test_computed_value("shape-outside", "polygon(10% 20%, 30% 40%, 50% 60%) content-box"); |
| 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)"); |
| |
| test_computed_value("shape-outside", "path('M 10 10 h 80 v 80 h -80 Z')", 'path("M 10 10 H 90 V 90 H 10 Z")'); |
| test_computed_value("shape-outside", "path('M10,10h80v80h-80z')", 'path("M 10 10 H 90 V 90 H 10 Z")'); |
| test_computed_value("shape-outside", "path(evenodd, 'M10,10h80v80h-80zM25,25h50v50h-50z')", 'path(evenodd, "M 10 10 H 90 V 90 H 10 Z M 25 25 H 75 V 75 H 25 Z")'); |
| test_computed_value("shape-outside", "path(nonzero, 'M10,10h80v80h-80z')", 'path("M 10 10 H 90 V 90 H 10 Z")'); |
| test_computed_value("shape-outside", "path('M0,0L100,0L100,100Z')", 'path("M 0 0 L 100 0 L 100 100 Z")'); |
| test_computed_value("shape-outside", "path('M0,0C30,60,70,60,100,0')", 'path("M 0 0 C 30 60 70 60 100 0")'); |
| test_computed_value("shape-outside", "path('M0,0Q50,100,100,0')", 'path("M 0 0 Q 50 100 100 0")'); |
| test_computed_value("shape-outside", "path('M0,0A25,25,0,0,1,50,0')", 'path("M 0 0 A 25 25 0 0 1 50 0")'); |
| |
| test_computed_value("shape-outside", "shape(from 20px 40px, line to 20px 30px)"); |
| test_computed_value("shape-outside", "shape(from 0 0, line to 100% 100%)", "shape(from 0px 0px, line to 100% 100%)"); |
| test_computed_value("shape-outside", "shape(from 20px 40px, smooth to center 20%)", "shape(from 20px 40px, smooth to 50% 20%)"); |
| test_computed_value("shape-outside", "shape(from 20px 40px, line to 100px 40px, line to 100px 100px, close)"); |
| test_computed_value("shape-outside", "shape(from 1em 2em, line to 3em 1em)", "shape(from 40px 80px, line to 120px 40px)"); |
| |
| test_computed_value("shape-outside", "circle() content-box"); |
| test_computed_value("shape-outside", "circle() padding-box"); |
| test_computed_value("shape-outside", "circle() border-box"); |
| test_computed_value("shape-outside", "circle() margin-box", "circle()"); |
| </script> |
| </body> |
| </html> |
