Blitz - WPT: border-image-space-001.html

wpt / css / css-backgrounds / border-image-space-001.html

/css/css-backgrounds/border-image-space-001.html

<!DOCTYPE html>
<html>
<!-- Submitted from TestTWF Paris -->
 <head>
  <title>CSS Test: Border Image: box with spaced repeating border image</title>
  <link rel="author" title="Levi Weintraub" href="mailto:leviw@chromium.org">
  <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image-repeat">
  <meta name="assert" content="border-image-repeat: space property spaces out background image that doesn't fit an even number of times.">
  <meta name="fuzzy" content="maxDifference=0-80; totalPixels=0-3850">
  <link rel="match" href="reference/border-image-space-001-ref.html">
  <style>
   .borderContainer {
    width: 108px;
    height: 108px;
    border-image: url('support/border.png') 27;
    background-color: green;
    border-image-repeat: space;
    border-image-width: 20px;
   }
  </style>
 </head>
 <body>
  <p>There should be a green box below with red diamonds in the corners, and three yellow diamonds evenly spaced
    apart along the edges.</p>
  <div class="borderContainer">
  </div>
 </body>
</html>

/css/css-backgrounds/reference/border-image-space-001-ref.html

<!DOCTYPE html>
<html>
<!-- Submitted from TestTWF Paris -->
 <head>
  <title>CSS Test: Border Image: box with spaced repeating border image</title>
  <link rel="author" title="Levi Weintraub" href="mailto:leviw@chromium.org">
  <style>
   div {
    background-color: green;
   }
   .borderContainer {
    width: 108px;
    height: 108px;
    position: relative;
   }
   .borderContainer > div {
    display: inline-block;
    width: 20px;
    height: 20px;
    position: absolute;
   }
   .corner {
    background-image: url('../support/border.png');
    background-size: 60px 60px;
   }
   .edge {
    background-image: url('../support/border.png');
    background-position: left -20px;
    background-size: 60px 60px;
   }
   .left {
    left: 0px;
   }
   .left1 {
    left: 22px;
   }
   .left2 {
    left: 44px;
   }
   .left3 {
    left: 66px;
   }
   .right {
    right: 0px;
   }
   .top {
    top: 0px;
   }
   .top1 {
    top: 22px;
   }
   .top2 {
    top: 44px;
   }
   .top3 {
    top: 66px;
   }
   .bottom {
    bottom: 0px;
   }
  </style>
 </head>
 <body>
  <p>There should be a green box below with red diamonds in the corners, and three yellow diamonds evenly spaced
    apart along the edges.</p>
  <div class="borderContainer">
    <div class="corner top left"></div><div class="edge top left1"></div><div class="edge top left2"></div><div class="edge top left3"></div><div class="corner top right"></div>
    <div class="edge left top1"></div><div class="edge right top1"></div>
    <div class="edge left top2"></div><div class="edge right top2"></div>
    <div class="edge left top3"></div><div class="edge right top3"></div>
    <div class="corner bottom left"></div><div class="edge bottom left1"></div><div class="edge bottom left2"></div><div class="edge bottom left3"></div><div class="corner bottom right"></div>
  </div>
 </body>
</html>