third_party/WebKit/LayoutTests/svg/css/parse-length.html

   1 <!DOCTYPE html>
   2 <html>
   3 <script src="../../resources/ahem.js"></script>
   4 <style>
   5 * { font-size: 16px; }
   6 svg, rect { font-family: 'Ahem'; }
   7 div { font-size: 8px; }
   8 </style>
   9 <html>
  10 <svg id="svg" width="0" height="0"></svg>
  11 <script src="../../resources/js-test.js"></script>
  12 <script>
  13 description("Test that 'length' presentation attribute values are parsed with CSS presentation rules.");
  14
  15 function computedStyle(elementname, property, value) {
  16   var elm = document.createElementNS('http://www.w3.org/2000/svg', elementname);
  17   document.getElementById('svg').appendChild(elm);
  18   elm.setAttribute(property, value);
  19   var computedValue = getComputedStyle(elm).getPropertyValue(property);
  20   document.getElementById('svg').removeChild(elm);
  21   return computedValue;
  22 }
  23
  24 function testComputed(elementname, property, value, expected) {
  25   shouldBeEqualToString('computedStyle("' + elementname + '", "' + property + '", "' + value + '")', expected);
  26 }
  27
  28 function negativeTest(elementname, property, value) {
  29   testComputed(elementname, property, value, "auto");
  30 }
  31
  32 function negativeTestZero(elementname, property, value) {
  33   testComputed(elementname, property, value, "0px");
  34 }
  35
  36 function testAttributeOnElement(elementname, attributename) {
  37   testComputed(elementname, attributename, "  100", "100px");
  38   testComputed(elementname, attributename, "100   ", "100px");
  39   testComputed(elementname, attributename, "100px", "100px");
  40   testComputed(elementname, attributename, "1em", "16px");
  41   // testComputed(elementname, attributename, "1ex", "12.8000001907349px"); // enable this again once http://crbug.com/441840 is fixed
  42   testComputed(elementname, attributename, "20%", "20%");
  43   testComputed(elementname, attributename, "-200px", "-200px");
  44
  45   negativeTestZero(elementname, attributename, "auto", "auto");
  46   negativeTestZero(elementname, attributename, "100   px");
  47   negativeTestZero(elementname, attributename, "100px;");
  48   negativeTestZero(elementname, attributename, "100px !important");
  49   negativeTestZero(elementname, attributename, "{ 100px }");
  50 }
  51
  52 var xyelements = [ "mask", "svg", "rect", "image", "foreignObject" ];
  53 for (var elm of xyelements) {
  54   testAttributeOnElement(elm, "x");
  55   testAttributeOnElement(elm, "y");
  56 }
  57
  58 var rxryelements = [ "rect", "ellipse" ];
  59 for (var elm of rxryelements) {
  60   testAttributeOnElement(elm, "rx");
  61   testAttributeOnElement(elm, "ry");
  62 }
  63
  64 testAttributeOnElement("circle", "r");
  65 </script>
  66 </body>
  67 </html>