third_party/WebKit/LayoutTests/fast/css/getComputedStyle/computed-style-border-image.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 <p>Test computed style for the border-image property and sub-properties</p>
   9 <div id="console"></div>
  10 <script>
  11
  12 var testDiv = document.createElement('div');
  13 testDiv.style.borderWidth = '10px';
  14 document.body.appendChild(testDiv);
  15
  16 function computedBorderImageStyle(borderImageStyle, property) {
  17     testDiv.style.borderImage = 'none';
  18     testDiv.style.borderImage = borderImageStyle;
  19     return window.getComputedStyle(testDiv).getPropertyValue(property);
  20 }
  21
  22 function checkComputedStyleValue() {
  23     var before = window.getComputedStyle(testDiv).getPropertyValue('border-image');
  24     testDiv.style.borderImage = 'none';
  25     testDiv.style.borderImage = before;
  26     return (window.getComputedStyle(testDiv).getPropertyValue('border-image') == before);
  27 }
  28
  29 shouldBe("computedBorderImageStyle('12 11 12 11', 'border-image-slice')", "'12 11'");
  30 shouldBe("computedBorderImageStyle('12 11 12 11', 'border-image')", "'none'");
  31 shouldBe("checkComputedStyleValue()", "true");
  32 shouldBe("computedBorderImageStyle('url(test.png) 12 11 repeat stretch', 'border-image-slice')", "'12 11'");
  33 shouldBe("computedBorderImageStyle('url(dummy://test.png) 12 11 repeat stretch', 'border-image')", "'url(dummy://test.png) 12 11 / 1 / 0px repeat stretch'");
  34 shouldBe("checkComputedStyleValue()", "true");
  35 shouldBe("computedBorderImageStyle('url(test.png) 1 2 3 4 repeat stretch', 'border-image-slice')", "'1 2 3 4'");
  36 shouldBe("computedBorderImageStyle('url(dummy://test.png) 1 2 3 4 repeat stretch', 'border-image')", "'url(dummy://test.png) 1 2 3 4 / 1 / 0px repeat stretch'");
  37 shouldBe("checkComputedStyleValue()", "true");
  38 shouldBe("computedBorderImageStyle('url(test.png) 12 repeat stretch', 'border-image-slice')", "'12'");
  39 shouldBe("computedBorderImageStyle('url(test.png) 10 10 5 5 repeat stretch', 'border-image-slice')", "'10 10 5 5'");
  40 shouldBe("computedBorderImageStyle('url(test.png) 10 a b c repeat stretch', 'border-image-slice')", "'100%'");
  41 shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 a b c repeat stretch', 'border-image')", "'none'");
  42 shouldBe("checkComputedStyleValue()", "true");
  43 shouldBe("computedBorderImageStyle('url(test.png) 10 20 fill', 'border-image-slice')", "'10 20 fill'");
  44 shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 20 fill', 'border-image')", "'url(dummy://test.png) 10 20 fill / 1 / 0px stretch'");
  45 shouldBe("checkComputedStyleValue()", "true");
  46
  47 shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 10 10 10 repeat stretch', 'border-image-source')", "'url(dummy://test.png)'");
  48 shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 10 10 10 repeat stretch', 'border-image')", "'url(dummy://test.png) 10 / 1 / 0px repeat stretch'");
  49 shouldBe("checkComputedStyleValue()", "true");
  50
  51 shouldBe("computedBorderImageStyle('url(test.png) 10', 'border-image-repeat')", "'stretch'");
  52 shouldBe("computedBorderImageStyle('url(dummy://test.png) 10', 'border-image')", "'url(dummy://test.png) 10 / 1 / 0px stretch'");
  53 shouldBe("checkComputedStyleValue()", "true");
  54 shouldBe("computedBorderImageStyle('url(test.png) 10 stretch', 'border-image-repeat')", "'stretch'");
  55 shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 stretch', 'border-image')", "'url(dummy://test.png) 10 / 1 / 0px stretch'");
  56 shouldBe("checkComputedStyleValue()", "true");
  57 shouldBe("computedBorderImageStyle('url(test.png) 10 kittens', 'border-image-repeat')", "'stretch'");
  58 shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 kittens', 'border-image')", "'none'");
  59 shouldBe("checkComputedStyleValue()", "true");
  60 shouldBe("computedBorderImageStyle('url(test.png) 10 stretch stretch fill', 'border-image-repeat')", "'stretch'");
  61 shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 stretch stretch fill', 'border-image')", "'none'");
  62 shouldBe("checkComputedStyleValue()", "true");
  63 shouldBe("computedBorderImageStyle('url(test.png) 10 repeat stretch', 'border-image-repeat')", "'repeat stretch'");
  64 shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 repeat stretch', 'border-image')", "'url(dummy://test.png) 10 / 1 / 0px repeat stretch'");
  65 shouldBe("checkComputedStyleValue()", "true");
  66 shouldBe("computedBorderImageStyle('url(test.png) 10 round space', 'border-image-repeat')", "'round space'");
  67 shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 round space', 'border-image')", "'url(dummy://test.png) 10 / 1 / 0px round space'");
  68 shouldBe("checkComputedStyleValue()", "true");
  69
  70 shouldBe("computedBorderImageStyle('url(test.png) 10 / 13px 1.5em 1em 10px', 'border-image-width')", "'13px 24px 16px 10px'");
  71 shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 / 13px 1.5em 1em 10px', 'border-image')", "'url(dummy://test.png) 10 / 13px 24px 16px 10px / 0px stretch'");
  72 shouldBe("checkComputedStyleValue()", "true");
  73 shouldBe("computedBorderImageStyle('url(test.png) 10 / 14px 10%', 'border-image-width')", "'14px 10%'");
  74 shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 / 14px 10%', 'border-image')", "'url(dummy://test.png) 10 / 14px 10% / 0px stretch'");
  75 shouldBe("checkComputedStyleValue()", "true");
  76 shouldBe("computedBorderImageStyle('url(test.png) 10 / 13px / 11px', 'border-image-outset')", "'11px'");
  77 shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 / 13px / 11px', 'border-image')", "'url(dummy://test.png) 10 / 13px / 11px stretch'");
  78 shouldBe("checkComputedStyleValue()", "true");
  79
  80 shouldBe("computedBorderImageStyle('url(test.png) 10 / 13px / 11px repeat stretch', 'border-image-outset')", "'11px'");
  81 shouldBe("computedBorderImageStyle('url(dummy://test.png) 10 / 13px / 11px repeat stretch', 'border-image')", "'url(dummy://test.png) 10 / 13px / 11px repeat stretch'");
  82 shouldBe("checkComputedStyleValue()", "true");
  83
  84 </script>
  85 </body>
  86 </html>