src/third_party/WebKit/LayoutTests/fast/shapes/parsing/parsing-shape-lengths.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 * { font-size: 16px; }
   6 div { font-size: 8px; }
   7 </style>
   8 <script src="../../js/resources/js-test-pre.js"></script>
   9 </head>
  10 <body>
  11 <script src="parsing-test-utils.js"></script>
  12 <script>
  13 description('Test that basic shapes accept different length units');
  14
  15 // The test functions and globals used here are defined parsing-test-utils.js.
  16
  17 function getStyleValue(property, value) {
  18     var div = document.createElement("div");
  19     div.style.setProperty(property, value);
  20     return div.style.getPropertyValue(property);
  21 }
  22
  23 function testStyleValue(value, expected) {
  24     if (expected === null)
  25         shouldBeNull('getStyleValue("shape-inside", "' + value + '")');
  26     else
  27         shouldBeEqualToString('getStyleValue("shape-inside", "' + value + '")', expected);
  28 }
  29 function testComputedStyleValue(value, expected) {
  30     testShapeComputedProperty("shape-inside", value, expected);
  31 }
  32
  33 function testInvalidValue(property, value) {
  34     testStyleValue(value, null);
  35     testComputedStyleValue(value, 'outside-shape');
  36 }
  37
  38 // absolute lengths - number serialization, units
  39 testStyleValue("circle(0, 0, 0)", "circle(0px, 0px, 0px)");
  40 testStyleValue("circle(-1px, +1px, 1px)", "circle(-1px, 1px, 1px)");
  41 testStyleValue("circle(-1.5px, +1.5px, 1.5px)", "circle(-1.5px, 1.5px, 1.5px)");
  42 testStyleValue("circle(-.5px, +.5px, .5px)", "circle(-0.5px, 0.5px, 0.5px)");
  43
  44 testStyleValue("rectangle(1cm, 1mm, 1in, 1px, 1pt, 1pc)", "rectangle(1cm, 1mm, 1in, 1px, 1pt, 1pc)");
  45 testStyleValue("inset-rectangle(1cm, 1mm, 1in, 1px, 1pt, 1pc)", "inset-rectangle(1cm, 1mm, 1in, 1px, 1pt, 1pc)");
  46
  47 // font-relative lengths - number serialization, units, resolution
  48 testStyleValue("circle(-1em, +1em, 1em)", "circle(-1em, 1em, 1em)");
  49 testStyleValue("circle(-1.5em, +1.5em, 1.5em)", "circle(-1.5em, 1.5em, 1.5em)");
  50 testStyleValue("circle(-.5em, +.5em, .5em)", "circle(-0.5em, 0.5em, 0.5em)");
  51
  52 testStyleValue("circle(1ex, 1ex, 1ex)", "circle(1ex, 1ex, 1ex)");
  53 // FIXME: Add ch test when it is supported
  54 testStyleValue("circle(1rem, 1rem, 1rem)", "circle(1rem, 1rem, 1rem)");
  55
  56 testComputedStyleValue("circle(.5em, 1em, 1.5em)", "circle(4px, 8px, 12px)");
  57 testComputedStyleValue("circle(.5rem, 1rem, 1.5rem)", "circle(8px, 16px, 24px)");
  58
  59 // viewport-percentage lengths - units, resolution
  60 testStyleValue("circle(1vw, 1vw, 1vw)", "circle(1vw, 1vw, 1vw)");
  61 testStyleValue("circle(1vh, 1vh, 1vh)", "circle(1vh, 1vh, 1vh)");
  62 testStyleValue("circle(1vmin, 1vmin, 1vmin)", "circle(1vmin, 1vmin, 1vmin)");
  63
  64 testComputedStyleValue("circle(.5vw, 1vw, 1.5vw)", "circle(0.5vw, 1vw, 1.5vw)");
  65 testComputedStyleValue("circle(.5vh, 1vh, 1.5vh)", "circle(0.5vh, 1vh, 1.5vh)");
  66 testComputedStyleValue("circle(.5vmin, 1vmin, 1.5vmin)", "circle(0.5vmin, 1vmin, 1.5vmin)");
  67
  68 // percentage lengths - units
  69 testStyleValue("circle(100%, 100%, 100%)", "circle(100%, 100%, 100%)");
  70 testStyleValue("rectangle(45%, 45%, 90%, 60%, 25%, 10%)", "rectangle(45%, 45%, 90%, 60%, 25%, 10%)");
  71 testStyleValue("inset-rectangle(45%, 45%, 90%, 60%, 25%, 10%)", "inset-rectangle(45%, 45%, 90%, 60%, 25%, 10%)");
  72 testStyleValue("ellipse(100%, 100%, 100%, 100%)", "ellipse(100%, 100%, 100%, 100%)");
  73 testStyleValue("polygon(10% 20%, 30% 40%, 40% 50%)", "polygon(nonzero, 10% 20%, 30% 40%, 40% 50%)");
  74
  75 testComputedStyleValue("circle(50%, 100%, 150%)", "circle(50%, 100%, 150%)");
  76 testComputedStyleValue("rectangle(45%, 45%, 90%, 60%, 25%, 10%)", "rectangle(45%, 45%, 90%, 60%, 25%, 10%)");
  77 testComputedStyleValue("inset-rectangle(45%, 45%, 90%, 60%, 25%, 10%)", "inset-rectangle(45%, 45%, 90%, 60%, 25%, 10%)");
  78 testComputedStyleValue("ellipse(100%, 100%, 100%, 100%)", "ellipse(100%, 100%, 100%, 100%)");
  79 testComputedStyleValue("polygon(10% 20%, 30% 40%, 40% 50%)", "polygon(nonzero, 10% 20%, 30% 40%, 40% 50%)");
  80
  81 // reject non-lengths
  82 testInvalidValue("shape-inside", "circle(1px, 1px, 1)");
  83 testInvalidValue("shape-inside", "circle(1px, 1px, px)");
  84 testInvalidValue("shape-inside", "circle(1px, 1px, 1p)");
  85 testInvalidValue("shape-inside", "circle(1px, 1px, calc())");
  86
  87 // reject negative radiuses
  88 testInvalidValue("shape-inside", "circle(-1.5px, +1.5px, -1.5px)");
  89 testInvalidValue("shape-inside", "rectangle(1cm, 1mm, 1in, 1px, -1pt, 1pc)");
  90 testInvalidValue("shape-inside", "rectangle(1cm, 1mm, 1in, 1px, 1pt, -1pc)");
  91 testInvalidValue("shape-inside", "inset-rectangle(1cm, 1mm, 1in, 1px, -1pt, 1pc)");
  92 testInvalidValue("shape-inside", "inset-rectangle(1cm, 1mm, 1in, 1px, 1pt, -1pc)");
  93 testInvalidValue("shape-inside", "ellipse(1em, 1em, -1em, 1em)");
  94 testInvalidValue("shape-inside", "ellipse(1em, 1em, 1em, -1em)");
  95
  96 // reject negative height and width
  97 testInvalidValue("shape-inside", "rectangle(1cm, 1mm, -1in, 1px, 1pt, 1pc)");
  98 testInvalidValue("shape-inside", "rectangle(1cm, 1mm, 1in, -1px, 1pt, 1pc)");
  99
 100 // reject negative top, right, bottom, and left
 101 testInvalidValue("shape-inside", "inset-rectangle(-1cm, 1mm, 1in, 1px, 1pt, 1pc)");
 102 testInvalidValue("shape-inside", "inset-rectangle(1cm, -1mm, 1in, 1px, 1pt, 1pc)");
 103 testInvalidValue("shape-inside", "inset-rectangle(1cm, 1mm, -1in, 1px, 1pt, 1pc)");
 104 testInvalidValue("shape-inside", "inset-rectangle(1cm, 1mm, 1in, -1px, 1pt, 1pc)");
 105 </script>
 106 </body>
 107 </html>