third_party/WebKit/LayoutTests/fast/masking/parsing-clip-path-shape.html

   1 <!DOCTYPE html>
   2 <html>
   3 <style>
   4 * { font-size: 16px; }
   5 div { font-size: 8px; }
   6 </style>
   7 <body>
   8 <script src="../../resources/js-test.js"></script>
   9 <script>
  10 description('Test that clip-path shapes accept different length units');
  11
  12 function computedStyle(property, value) {
  13     var div = document.createElement("div");
  14     document.body.appendChild(div);
  15     div.style.setProperty(property, value);
  16     var computedValue = getComputedStyle(div).getPropertyValue(property);
  17     document.body.removeChild(div);
  18     return computedValue;
  19 }
  20
  21 function innerStyle(property, value) {
  22     var div = document.createElement("div");
  23     div.style.setProperty(property, value);
  24     return div.style.getPropertyValue(property);
  25 }
  26
  27 function testComputed(property, value, expected) {
  28     shouldBeEqualToString('computedStyle("' + property + '", "' + value + '")', expected);
  29 }
  30
  31 function testInner(property, value, expected) {
  32     if (expected === null)
  33         shouldBeNull('innerStyle("' + property + '", "' + value + '")');
  34     else
  35         shouldBeEqualToString('innerStyle("' + property + '", "' + value + '")', expected);
  36 }
  37
  38 function negativeTest(property, value) {
  39     testInner(property, value, "");
  40     testComputed(property, value, 'none');
  41 }
  42
  43 // absolute lengths - number serialization, units
  44 testInner("-webkit-clip-path", "circle(0 at 0 0)", "circle(0px at 0% 0%)");
  45 testInner("-webkit-clip-path", "circle(1px at -1px +1px)", "circle(1px at -1px 1px)");
  46 testInner("-webkit-clip-path", "circle(1.5px at -1.5px +1.5px)", "circle(1.5px at -1.5px 1.5px)");
  47 testInner("-webkit-clip-path", "circle(.5px at -.5px +.5px)", "circle(0.5px at -0.5px 0.5px)");
  48
  49 // font-relative lengths - number serialization, units, resolution
  50 testInner("-webkit-clip-path", "circle(1em at -1em +1em)", "circle(1em at -1em 1em)");
  51 testInner("-webkit-clip-path", "circle(1.5em at -1.5em +1.5em)", "circle(1.5em at -1.5em 1.5em)");
  52 testInner("-webkit-clip-path", "circle(.5em at -.5em +.5em)", "circle(0.5em at -0.5em 0.5em)");
  53
  54 testInner("-webkit-clip-path", "circle(1ex at 1ex 1ex)", "circle(1ex at 1ex 1ex)");
  55 // FIXME: Add ch test when it is supported
  56 testInner("-webkit-clip-path", "circle(1rem at 1rem 1rem)", "circle(1rem at 1rem 1rem)");
  57
  58 testComputed("-webkit-clip-path", "circle(1.5em at .5em 1em)", "circle(12px at 4px 8px)");
  59 testComputed("-webkit-clip-path", "circle(1.5rem at .5rem 1rem)", "circle(24px at 8px 16px)");
  60
  61 // viewport-percentage lengths - units, resolution
  62 testInner("-webkit-clip-path", "circle(1vw at 1vw 1vw)", "circle(1vw at 1vw 1vw)");
  63 testInner("-webkit-clip-path", "circle(1vh at 1vh 1vh)", "circle(1vh at 1vh 1vh)");
  64 testInner("-webkit-clip-path", "circle(1vmin at 1vmin 1vmin)", "circle(1vmin at 1vmin 1vmin)");
  65
  66 testComputed("-webkit-clip-path", "circle(1.5vw at .5vw 1vw)", "circle(12px at 4px 8px)");
  67 testComputed("-webkit-clip-path", "circle(1.5vh at .5vh 1vh)", "circle(9px at 3px 6px)");
  68 testComputed("-webkit-clip-path", "circle(1.5vmin at .5vmin 1vmin)", "circle(9px at 3px 6px)");
  69
  70 // percentage lengths - units
  71 testComputed("-webkit-clip-path", "circle(150% at 50% 100%)", "circle(150% at 50% 100%)");
  72 testComputed("-webkit-clip-path", "inset(45% 45% 90% 60% round 25% 10%)", "inset(45% 45% 90% 60% round 25% 10%)");
  73 testComputed("-webkit-clip-path", "ellipse(100% 100% at 100% 100%)", "ellipse(100% 100% at 100% 100%)");
  74 testComputed("-webkit-clip-path", "polygon(10% 20%, 30% 40%, 40% 50%)", "polygon(10% 20%, 30% 40%, 40% 50%)");
  75
  76 // reject non-lengths
  77 negativeTest("-webkit-clip-path", "circle(1 at 1px 1px)");
  78 negativeTest("-webkit-clip-path", "circle(px at 1px 1px)");
  79 negativeTest("-webkit-clip-path", "circle(1p at 1px 1px)");
  80 negativeTest("-webkit-clip-path", "circle(calc() at 1px 1px)");
  81
  82 // reject negative radiuses
  83 negativeTest("-webkit-clip-path", "circle(-1.5px at -1.5px +1.5px)");
  84 negativeTest("-webkit-clip-path", "inset(1cm 1mm 1in 1px round -1pt, 1pc)");
  85 negativeTest("-webkit-clip-path", "inset(1cm 1mm 1in 1px round 1pt -1pc)");
  86 negativeTest("-webkit-clip-path", "ellipse(-1em 1em at 1em 1em)");
  87 negativeTest("-webkit-clip-path", "ellipse(1em -1em at 1em 1em)");
  88
  89 // general negative tests
  90 negativeTest("-webkit-clip-path", "polygon(0, 0)");
  91 negativeTest("-webkit-clip-path", "polygon(0 0, 0)");
  92 negativeTest("-webkit-clip-path", "polygon(0)");
  93 negativeTest("-webkit-clip-path", "polygon()");
  94 negativeTest("-webkit-clip-path", "polygon(evenodd)");
  95 negativeTest("-webkit-clip-path", "polygon(nonzero)");
  96
  97 </script>
  98 </body>
  99 </html>