third_party/WebKit/LayoutTests/fast/css/border-image-style-length.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 <div id="testElement">test</div>
   9 <script>
  10
  11 description("Test the style.length of an element with a border-image.")
  12
  13 debug("border-image");
  14 testElement.style.borderImage = "url(dummy://test.png) 10 / 13px 1.5em 1em 10px";
  15 shouldBe("testElement.style.length", "5");
  16 testElement.style.borderImage = "initial";
  17 shouldBe("testElement.style.length", "5");
  18 testElement.style.borderImage = "inherit";
  19 shouldBe("testElement.style.length", "5");
  20 testElement.style.borderImage = "";
  21 shouldBe("testElement.style.length", "0");
  22
  23 debug("-webkit-border-image");
  24 testElement.style.webkitBorderImage = "url(dummy://test.png) 0 7 0 13 / 0 7 0 13 stretch stretch";
  25 shouldBe("testElement.style.length", "1");
  26 testElement.style.webkitBorderImage = "initial";
  27 shouldBe("testElement.style.length", "1");
  28 testElement.style.webkitBorderImage = "inherit";
  29 shouldBe("testElement.style.length", "1");
  30 testElement.style.webkitBorderImage = "";
  31 shouldBe("testElement.style.length", "0");
  32
  33 // -webkit-mask-box-image behaves exactly like border-image in terms of CSS syntax.
  34 debug("-webkit-mask-box-image");
  35 testElement.style.webkitMaskBoxImage = "url(dummy://test.png) 0 7 0 13 / 0 7 0 13 stretch stretch";
  36 shouldBe("testElement.style.length", "5");
  37 testElement.style.webkitMaskBoxImage = "initial";
  38 shouldBe("testElement.style.length", "5");
  39 testElement.style.webkitMaskBoxImage = "inherit";
  40 shouldBe("testElement.style.length", "5");
  41 testElement.style.webkitMaskBoxImage = "";
  42 shouldBe("testElement.style.length", "0");
  43
  44
  45 document.body.removeChild(testElement);
  46
  47 </script>
  48 </body>
  49 </html>