third_party/WebKit/LayoutTests/fast/borders/border-radius-parsing.html

   1 <pre id="console"></pre>
   2 <script>
   3
   4     function log(message)
   5     {
   6         document.getElementById("console").appendChild(document.createTextNode(message + "\n"));
   7     }
   8
   9     function testBorderRadiusStyleProperty(property, value, expected)
  10     {
  11         log ("Testing " + property + ": " + value + ";");
  12         var element = document.createElement("div");
  13         document.body.appendChild(element);
  14         element.style.setProperty(property, value);
  15         var failed = false;
  16
  17         if(element.style[property] !== expected) {
  18             log("FAILED style: " + property + " was " + element.style[property] + " instead of " + expected);
  19             failed = true;
  20         }
  21
  22
  23         if (!failed)
  24             log("SUCCESS");
  25
  26         document.body.removeChild(element);
  27     }
  28
  29     function testBorderRadiusValue(property, value, expectedRadii)
  30     {
  31         log ("Testing " + property + ": " + value + ";");
  32         var element = document.createElement("div");
  33         document.body.appendChild(element);
  34         element.style.setProperty(property, value);
  35         var computedStyle = getComputedStyle(element);
  36         var properties = ["border-top-left-radius", "border-top-right-radius",
  37                           "border-bottom-right-radius", "border-bottom-left-radius"];
  38         var failed = false;
  39         for (var i = 0; i < 4; ++i) {
  40             actualRadius = computedStyle.getPropertyValue(properties[i]);
  41             if (actualRadius === expectedRadii[i])
  42                 continue;
  43
  44             failed = true;
  45             log("FAILED: " + properties[i] + " was " + actualRadius + " instead of " + expectedRadii[i]);
  46         }
  47         if (!failed)
  48             log("SUCCESS");
  49         document.body.removeChild(element);
  50     }
  51
  52     if (window.testRunner)
  53         testRunner.dumpAsText();
  54
  55
  56
  57     testBorderRadiusStyleProperty("border-radius", "10px", "10px", "10px", "10px", "10px");
  58     testBorderRadiusStyleProperty("border-radius", "10px 20px 30px 40px", "10px 20px 30px 40px");
  59     testBorderRadiusStyleProperty("border-radius", "10px 20px 30px 40px 50px", "");
  60     testBorderRadiusStyleProperty("border-radius", "10px 20px", "10px 20px");
  61
  62     testBorderRadiusValue("border-radius", "10px 20px", ["10px", "20px", "10px", "20px"]);
  63     testBorderRadiusValue("border-radius", "10px", ["10px", "10px", "10px", "10px"]);
  64     testBorderRadiusValue("border-radius", "10px 20px", ["10px", "20px", "10px", "20px"]);
  65     testBorderRadiusValue("-webkit-border-radius", "10px 20px", ["10px 20px", "10px 20px", "10px 20px", "10px 20px"]);
  66     testBorderRadiusValue("border-radius", "10px 20px 30px", ["10px", "20px", "30px", "20px"]);
  67     testBorderRadiusValue("border-radius", "10px 20px 30px 40px", ["10px", "20px", "30px", "40px"]);
  68     testBorderRadiusValue("border-radius", "10px 20px 30px 40px 50px", ["0px", "0px", "0px", "0px"]);
  69     testBorderRadiusValue("border-radius", "10px 20px 30px 40px / 15px", ["10px 15px", "20px 15px", "30px 15px", "40px 15px"]);
  70     testBorderRadiusValue("border-radius", "10px 20px 30px 40px / 15px 25px", ["10px 15px", "20px 25px", "30px 15px", "40px 25px"]);
  71     testBorderRadiusValue("border-radius", "10px 20px 30px 40px / 15px 25px 35px", ["10px 15px", "20px 25px", "30px 35px", "40px 25px"]);
  72     testBorderRadiusValue("border-radius", "10px 20px 30px 40px / 15px 25px 35px 45px", ["10px 15px", "20px 25px", "30px 35px", "40px 45px"]);
  73     testBorderRadiusValue("border-radius", "10px 20px 30px 40px / 15px 25px 35px 45px 55px", ["0px", "0px", "0px", "0px"]);
  74     testBorderRadiusValue("border-radius", "10px 20px 30px 40px / 15px 25px 35px 45px /", ["0px", "0px", "0px", "0px"]);
  75     testBorderRadiusValue("border-radius", "10px 20px 30px 40px / / 25px 35px 45px", ["0px", "0px", "0px", "0px"]);
  76     testBorderRadiusValue("border-radius", "/ 10px 20px 30px 40px", ["0px", "0px", "0px", "0px"]);
  77     testBorderRadiusValue("border-radius", "10px / 20px 30px 40px", ["10px 20px", "10px 30px", "10px 40px", "10px 30px"]);
  78     testBorderRadiusValue("border-radius", "10%", ["10%", "10%", "10%", "10%"]);
  79     testBorderRadiusValue("border-radius", "10% 20%", ["10%", "20%", "10%", "20%"]);
  80     testBorderRadiusValue("-webkit-border-radius", "10% 20%", ["10% 20%", "10% 20%", "10% 20%", "10% 20%"]);
  81     testBorderRadiusValue("border-radius", "10% 20% 30%", ["10%", "20%", "30%", "20%"]);
  82     testBorderRadiusValue("border-radius", "10% 20% 30% 40%", ["10%", "20%", "30%", "40%"]);
  83     testBorderRadiusValue("border-radius", "10% 20% 30% 40% 50%", ["0px", "0px", "0px", "0px"]);
  84     testBorderRadiusValue("border-radius", "10% 20% 30% 40% / 15%", ["10% 15%", "20% 15%", "30% 15%", "40% 15%"]);
  85     testBorderRadiusValue("border-radius", "10% 20% 30% 40% / 15% 25%", ["10% 15%", "20% 25%", "30% 15%", "40% 25%"]);
  86     testBorderRadiusValue("border-radius", "10% 20% 30% 40% / 15% 25% 35%", ["10% 15%", "20% 25%", "30% 35%", "40% 25%"]);
  87     testBorderRadiusValue("border-radius", "10% 20% 30% 40% / 15% 25% 35% 45%", ["10% 15%", "20% 25%", "30% 35%", "40% 45%"]);
  88     testBorderRadiusValue("border-radius", "10% 20% 30% 40% / 15% 25% 35% 45% 55%", ["0px", "0px", "0px", "0px"]);
  89     testBorderRadiusValue("border-radius", "10% 20% 30% 40% / 15% 25% 35% 45% /", ["0px", "0px", "0px", "0px"]);
  90     testBorderRadiusValue("border-radius", "10% 20% 30% 40% / / 25% 35% 45%", ["0px", "0px", "0px", "0px"]);
  91     testBorderRadiusValue("border-radius", "/ 10% 20% 30% 40%", ["0px", "0px", "0px", "0px"]);
  92     testBorderRadiusValue("border-radius", "10% / 20% 30% 40%", ["10% 20%", "10% 30%", "10% 40%", "10% 30%"]);
  93     testBorderRadiusValue("border-radius", "10% 20px", ["10%", "20px", "10%", "20px"]);
  94 </script>