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="../../../resources/js-test.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-outside", "' + value + '")');
  26     else
  27         shouldBeEqualToString('getStyleValue("shape-outside", "' + value + '")', expected);
  28 }
  29 function testComputedStyleValue(value, expected) {
  30     testShapeComputedProperty("shape-outside", value, expected);
  31 }
  32
  33 function testInvalidValue(property, value) {
  34     testStyleValue(value, null);
  35     testComputedStyleValue(value, 'none');
  36 }
  37
  38 // absolute lengths - number serialization, units
  39 testStyleValue("circle(0 at 0 0)", "circle(0px at 0% 0%)");
  40 testStyleValue("circle(1px at +1px -1px)", "circle(1px at 1px -1px)");
  41 testStyleValue("circle(1.5px at -1.5px +1.5px)", "circle(1.5px at -1.5px 1.5px)");
  42 testStyleValue("circle(.5px at -.5px +.5px)", "circle(0.5px at -0.5px 0.5px)");
  43
  44 testStyleValue("inset(1cm 1mm 1in 1px round 1pt 1pc)", "inset(1cm 1mm 1in 1px round 1pt 1pc 1pt 1pc / 1pt 1pc 1pt 1pc)");
  45 testStyleValue("inset(-1px 1px 1px 1px round 1px 1px 1px 1px)", "inset(-1px 1px 1px 1px round 1px 1px 1px 1px / 1px 1px 1px 1px)");
  46 testStyleValue("inset(1px -1px 1px 1px round 1px 1px 1px 1px)", "inset(1px -1px 1px 1px round 1px 1px 1px 1px / 1px 1px 1px 1px)");
  47 testStyleValue("inset(1px 1px -1px 1px round 1px 1px 1px 1px)", "inset(1px 1px -1px 1px round 1px 1px 1px 1px / 1px 1px 1px 1px)");
  48 testStyleValue("inset(1px 1px 1px -1px round 1px 1px 1px 1px)", "inset(1px 1px 1px -1px round 1px 1px 1px 1px / 1px 1px 1px 1px)");
  49
  50 // font-relative lengths - number serialization, units, resolution
  51 testStyleValue("circle(1em at -1em +1em)", "circle(1em at -1em 1em)");
  52 testStyleValue("circle(1.5em at -1.5em +1.5em)", "circle(1.5em at -1.5em 1.5em)");
  53 testStyleValue("circle(.5em at -.5em +.5em)", "circle(0.5em at -0.5em 0.5em)");
  54
  55 testStyleValue("circle(1ex at 1ex 1ex)", "circle(1ex at 1ex 1ex)");
  56 // FIXME: Add ch test when it is supported
  57 testStyleValue("circle(1rem at 1rem 1rem)", "circle(1rem at 1rem 1rem)");
  58
  59 testComputedStyleValue("circle(1.5em at .5em 1em)", "circle(12px at 4px 8px)");
  60 testComputedStyleValue("circle(1.5rem at .5rem 1rem)", "circle(24px at 8px 16px)");
  61
  62 // viewport-percentage lengths - units, resolution
  63 testStyleValue("circle(1vw at 1vw 1vw)", "circle(1vw at 1vw 1vw)");
  64 testStyleValue("circle(1vh at 1vh 1vh)", "circle(1vh at 1vh 1vh)");
  65 testStyleValue("circle(1vmin at 1vmin 1vmin)", "circle(1vmin at 1vmin 1vmin)");
  66
  67 testComputedStyleValue("circle(1.5vw at .5vw 1vw)", "circle(12px at 4px 8px)");
  68 testComputedStyleValue("circle(1.5vh at .5vh 1vh)", "circle(9px at 3px 6px)");
  69 testComputedStyleValue("circle(1.5vmin at .5vmin 1vmin)", "circle(9px at 3px 6px)");
  70
  71 // percentage lengths - units
  72 testStyleValue("circle(100% at 100% 100%)", "circle(100% at 100% 100%)");
  73 testStyleValue("inset(45% 45% 90% 60% round 25% 10%)", "inset(45% 45% 90% 60% round 25% 10% 25% 10% / 25% 10% 25% 10%)");
  74 testStyleValue("ellipse(100% 100% at 100% 100%)", "ellipse(100% 100% at 100% 100%)");
  75 testStyleValue("polygon(10% 20%, 30% 40%, 40% 50%)", "polygon(10% 20%, 30% 40%, 40% 50%)");
  76
  77 testComputedStyleValue("circle(150% at 50% 100%)", "circle(150% at 50% 100%)");
  78 testComputedStyleValue("inset(45% 45% 90% 60% round 25% 10%)", "inset(45% 45% 90% 60% round 25% 10% 25% 10% / 25% 10% 25% 10%)");
  79 testComputedStyleValue("ellipse(100% 100% at 100% 100%)", "ellipse(100% 100% at 100% 100%)");
  80 testComputedStyleValue("polygon(10% 20%, 30% 40%, 40% 50%)", "polygon(10% 20%, 30% 40%, 40% 50%)");
  81
  82 // reject non-lengths
  83 testInvalidValue("-webkit-shape-outside", "circle(1 at 1px 1px)");
  84 testInvalidValue("-webkit-shape-outside", "circle(px at 1px 1px)");
  85 testInvalidValue("-webkit-shape-outside", "circle(1p at 1px 1px)");
  86 testInvalidValue("-webkit-shape-outside", "circle(calc( at 1px 1px))");
  87
  88 // reject negative radiuses
  89 testInvalidValue("shape-outside", "circle(-1.5px at -1.5px +1.5px)");
  90 testInvalidValue("shape-outside", "inset(1cm 1mm 1in 1px round 1pt -1pc)");
  91 testInvalidValue("shape-outside", "ellipse(-1em 1em at 1em 1em)");
  92 testInvalidValue("shape-outside", "ellipse(1em -1em at 1em 1em)");
  93
  94 </script>
  95 </body>
  96 </html>