basic-shape-circle-ellipse-serialization.html (3187B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>Serialization of basic shapes</title> 4 <link rel="help" href="https://drafts.csswg.org/css-shapes/#basic-shape-serialization"/> 5 <script src=/resources/testharness.js></script> 6 <script src=/resources/testharnessreport.js></script> 7 <script> 8 function checkEquals(input, expected) { 9 test(function() { 10 let div = document.createElement('div'); 11 div.style.clipPath = input; 12 let serialized = div.style.clipPath; 13 assert_equals(serialized, expected, input); 14 }); 15 } 16 17 // Keywords get replaced by percentages in 2-value form 18 checkEquals("circle(at left bottom)", "circle(at 0% 100%)"); 19 checkEquals("circle(at bottom left)", "circle(at 0% 100%)"); 20 checkEquals("circle(at right calc(10% + 5px))", 21 "circle(at 100% calc(10% + 5px))"); 22 checkEquals("ellipse(at left bottom)", "ellipse(at 0% 100%)"); 23 checkEquals("ellipse(at bottom left)", "ellipse(at 0% 100%)"); 24 checkEquals("ellipse(at right calc(10% + 5px))", 25 "ellipse(at 100% calc(10% + 5px))"); 26 27 // Only 2 or 4 value form allowed 28 checkEquals("circle()", "circle()"); 29 checkEquals("circle(0px)", "circle(0px)"); 30 checkEquals("circle(closest-side)", "circle()"); 31 checkEquals("circle(farthest-side)", 32 "circle(farthest-side)"); 33 checkEquals("ellipse()", "ellipse()"); 34 checkEquals("ellipse(closest-side farthest-side)", 35 "ellipse(closest-side farthest-side)"); 36 37 38 checkEquals("circle(at top 0% right 5px)", "circle(at calc(100% - 5px) 0%)"); 39 checkEquals("ellipse(at top 0% right 10px)", "ellipse(at calc(100% - 10px) 0%)"); 40 // Remove defaults like closest-side 41 checkEquals("circle(closest-side at center)", 42 "circle(at 50% 50%)"); 43 checkEquals("ellipse(closest-side closest-side at center)", 44 "ellipse(at 50% 50%)"); 45 46 // don't remove non defaults 47 checkEquals("circle(farthest-side at center)", 48 "circle(farthest-side at 50% 50%)"); 49 checkEquals("circle(10px at center)", 50 "circle(10px at 50% 50%)"); 51 checkEquals("ellipse(farthest-side 10px at center)", 52 "ellipse(farthest-side 10px at 50% 50%)"); 53 // Ellipse can have 0 radii or two, not one. We cannot 54 // eliminate a single closest-side if the other is different 55 checkEquals("ellipse(closest-side farthest-side at 50% 50%)", 56 "ellipse(closest-side farthest-side at 50% 50%)"); 57 checkEquals("ellipse(closest-side 10% at 50% 50%)", 58 "ellipse(closest-side 10% at 50% 50%)"); 59 60 // Transform to <length-percentage>. 61 checkEquals("circle(at right 5px bottom 10px)", 62 "circle(at calc(100% - 5px) calc(100% - 10px))"); 63 checkEquals("ellipse(at right 5px bottom 10px)", 64 "ellipse(at calc(100% - 5px) calc(100% - 10px))"); 65 66 // Don't convert zero lengths to 0% 67 checkEquals("circle(at right 5% top 0px)", "circle(at calc(95%) 0px)"); 68 checkEquals("ellipse(at right 5% top 0px)", "ellipse(at calc(95%) 0px)"); 69 70 // Transform calcs 71 checkEquals("circle(at right calc(10% + 5px) bottom calc(10% + 5px))", 72 "circle(at calc(90% - 5px) calc(90% - 5px))"); 73 checkEquals("ellipse(at right calc(10% + 5px) bottom calc(10% + 5px))", 74 "ellipse(at calc(90% - 5px) calc(90% - 5px))"); 75 </script>