third_party/WebKit/LayoutTests/fast/css/getComputedStyle/getComputedStyle-border-radius-shorthand.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta charset="utf-8">
   5 <script src="../../../resources/js-test.js"></script>
   6 </head>
   7 <body>
   8 <script>
   9
  10 description("Tests that the border-radius shorthand is computed properly.")
  11
  12 var testContainer = document.createElement("div");
  13 testContainer.contentEditable = true;
  14 document.body.appendChild(testContainer);
  15
  16 testContainer.innerHTML = '<div style="width:100px;height:100px"><div id="test">hello</div></div>';
  17
  18 e = document.getElementById('test');
  19 computedStyle = window.getComputedStyle(e, null);
  20
  21 e.style.borderRadius = "4em";
  22 shouldBe("computedStyle.getPropertyValue('border-radius')", "'64px'");
  23
  24 e.style.borderRadius = "2em 1em 4em / 0.5em 3em";
  25 shouldBe("computedStyle.getPropertyValue('border-radius')", "'32px 16px 64px / 8px 48px'");
  26
  27 e.style.borderRadius = "";
  28 e.style.borderTopLeftRadius = "4em";
  29 e.style.borderTopRightRadius = "4em";
  30 e.style.borderBottomLeftRadius = "4em";
  31 e.style.borderBottomRightRadius = "4em";
  32 shouldBe("computedStyle.getPropertyValue('border-radius')", "'64px'");
  33
  34 e.style.borderRadius = "1px 2px";
  35 shouldBe("computedStyle.getPropertyValue('border-radius')", "'1px 2px'");
  36
  37 e.style.borderRadius = "1px 2px 4px";
  38 shouldBe("computedStyle.getPropertyValue('border-radius')", "'1px 2px 4px'");
  39
  40 e.style.borderRadius = "1px 2px 4px 6px";
  41 shouldBe("computedStyle.getPropertyValue('border-radius')", "'1px 2px 4px 6px'");
  42
  43 e.style.borderRadius = "1px 2px 4px 6px / 4em";
  44 shouldBe("computedStyle.getPropertyValue('border-radius')", "'1px 2px 4px 6px / 64px'");
  45
  46 e.style.borderRadius = "1px 2px 4px 6px / 4em 3px";
  47 shouldBe("computedStyle.getPropertyValue('border-radius')", "'1px 2px 4px 6px / 64px 3px'");
  48
  49 e.style.borderRadius = "1px 2px 4px 6px / 4em 3px 7px";
  50 shouldBe("computedStyle.getPropertyValue('border-radius')", "'1px 2px 4px 6px / 64px 3px 7px'");
  51
  52 e.style.borderRadius = "1px 2px 4px 6px / 4em 3px 7px 8px";
  53 shouldBe("computedStyle.getPropertyValue('border-radius')", "'1px 2px 4px 6px / 64px 3px 7px 8px'");
  54
  55 e.style.borderRadius = "10px 20px 30px 40px / 15px 25px 35px 45px";
  56 shouldBe("computedStyle.getPropertyValue('border-radius')", "'10px 20px 30px 40px / 15px 25px 35px 45px'");
  57
  58 e.style.borderRadius = "10px 20px 30px 40px / 10px 25px 35px 45px";
  59 shouldBe("computedStyle.getPropertyValue('border-radius')", "'10px 20px 30px 40px / 10px 25px 35px 45px'");
  60
  61 e.style.borderRadius = "10px 20px 30px 40px / 10px 20px 35px 45px";
  62 shouldBe("computedStyle.getPropertyValue('border-radius')", "'10px 20px 30px 40px / 10px 20px 35px 45px'");
  63
  64 e.style.borderRadius = "10px 20px 30px 40px / 10px 20px 30px 45px";
  65 shouldBe("computedStyle.getPropertyValue('border-radius')", "'10px 20px 30px 40px / 10px 20px 30px 45px'");
  66
  67 document.body.removeChild(testContainer);
  68
  69 </script>
  70 </body>
  71 </html>