LayoutTests/fast/exclusions/parsing-wrap-shape-lengths.html

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