Blitz - WPT: border-image-round-and-stretch.html

wpt / css / css-backgrounds / border-image-round-and-stretch.html

/css/css-backgrounds/border-image-round-and-stretch.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Backgrounds and Borders Test: 'border-image' set as 'round' and 'stretch' </title>
    <link rel="author" title="Ren Jing" href="mailto:reni2046@gmail.com">
    <link rel="help" href="http://www.w3.org/TR/css3-background/#border-images">
    <link rel="match" href="reference/border-image-round-and-stretch-ref.html">
    <meta name="assert" content="orange diamonds on top and bottom border should be repeated 12 times, and orange diamonds on left and right border should be stretched, diamonds in corners should be red, and other diamonds should be orange.">
    <meta name="fuzzy" content="maxDifference=0-163;totalPixels=0-6375">
    <style type="text/css">
        .container {
            border: double red 1em;
            border-image: url("support/border.png") 27 round stretch;
            height:77px;
            width:192px;
        }
    </style>
</head>
<body>
    <p>The test passes if orange diamonds on top and bottom border repeat 12 times, and orange diamonds on left and right border are stretched, diamonds in corners are red, and other diamonds are orange.</p>
    <div class="container"></div>
</body>
</html>

/css/css-backgrounds/reference/border-image-round-and-stretch-ref.html

<!DOCTYPE html>
<title>CSS Border Image: border-image-repeat: round and stretch (reference)</title>
<style type="text/css">
  .container {
    position: relative;
    width: 224px;
    height: 109px;
  }
  .container > div {
    position: absolute;
    width: 16px;
    background-image: url("../support/border.png");
  }
  .top { top: 0; }
  .right { left: 208px; }
  .bottom { top: 93px; }
  .left { left: 0; }
  .top-left-corner-tile     {
    background-position:   0px   0px;
    background-size: 48px 48px;
    height: 16px;
  }
  .top-edge-tile            {
    background-position: -16px   0px;
    background-size: 48px 48px;
    height: 16px;
  }
  .top-right-corner-tile    {
    background-position: -32px   0px;
    background-size: 48px 48px;
    height: 16px;
  }
  .left-edge-tile           {
    background-position:   0px -77px;
    background-size: 48px 231px;
    height: 77px;
  }
  .right-edge-tile          {
    background-position: -32px -77px;
    background-size: 48px 231px;
    height: 77px;
  }
  .bottom-left-corner-tile  {
    background-position:   0px -32px;
    background-size: 48px 48px;
    height: 16px;
  }
  .bottom-edge-tile         {
    background-position: -16px -32px;
    background-size: 48px 48px;
    height: 16px;
  }
  .bottom-right-corner-tile {
    background-position: -32px -32px;
    background-size: 48px 48px;
    height: 16px;
  }
  .h-pos-0 { left: 16px; }
  .h-pos-1 { left: 32px; }
  .h-pos-2 { left: 48px; }
  .h-pos-3 { left: 64px; }
  .h-pos-4 { left: 80px; }
  .h-pos-5 { left: 96px; }
  .h-pos-6 { left: 112px; }
  .h-pos-7 { left: 128px; }
  .h-pos-8 { left: 144px; }
  .h-pos-9 { left: 160px; }
  .h-pos-10 { left: 176px; }
  .h-pos-11 { left: 192px; }
  .v-pos-0 { top: 16px; }
</style>
<p>The test passes if orange diamonds on top and bottom border repeat 12 times, and orange diamonds on left and right border are stretched, diamonds in corners are red, and other diamonds are orange.</p>
<div class="container">
  <div class="top left top-left-corner-tile"></div>
  <div class="top top-edge-tile h-pos-0"></div>
  <div class="top top-edge-tile h-pos-1"></div>
  <div class="top top-edge-tile h-pos-2"></div>
  <div class="top top-edge-tile h-pos-3"></div>
  <div class="top top-edge-tile h-pos-4"></div>
  <div class="top top-edge-tile h-pos-5"></div>
  <div class="top top-edge-tile h-pos-6"></div>
  <div class="top top-edge-tile h-pos-7"></div>
  <div class="top top-edge-tile h-pos-8"></div>
  <div class="top top-edge-tile h-pos-9"></div>
  <div class="top top-edge-tile h-pos-10"></div>
  <div class="top top-edge-tile h-pos-11"></div>
  <div class="top right top-right-corner-tile"></div>
  <div class="right right-edge-tile v-pos-0"></div>
  <div class="bottom right bottom-right-corner-tile"></div>
  <div class="bottom bottom-edge-tile h-pos-0"></div>
  <div class="bottom bottom-edge-tile h-pos-1"></div>
  <div class="bottom bottom-edge-tile h-pos-2"></div>
  <div class="bottom bottom-edge-tile h-pos-3"></div>
  <div class="bottom bottom-edge-tile h-pos-4"></div>
  <div class="bottom bottom-edge-tile h-pos-5"></div>
  <div class="bottom bottom-edge-tile h-pos-6"></div>
  <div class="bottom bottom-edge-tile h-pos-7"></div>
  <div class="bottom bottom-edge-tile h-pos-8"></div>
  <div class="bottom bottom-edge-tile h-pos-9"></div>
  <div class="bottom bottom-edge-tile h-pos-10"></div>
  <div class="bottom bottom-edge-tile h-pos-11"></div>
  <div class="bottom left bottom-left-corner-tile"></div>
  <div class="left left-edge-tile v-pos-0"></div>
</div>