wpt / css / css-backgrounds / border-image-slice-percentage.html

Status: FAIL | Duration: 15ms | Subtests: 0/1 | Open test on wpt.live | Open ref on wpt.live | wpt.fyi

TestRefTest SourceRef Source

/css/css-backgrounds/border-image-slice-percentage.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Backgrounds and Borders Test: 'border-image-slice' set by percentage</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-repeat-round-ref.html">
    <meta name="assert" content="diamonds in corners should be red, and other diamonds should be orange, it should be 4 orange diamonds on each side.">
    <meta name="fuzzy" content="maxDifference=0-164; totalPixels=0-3716">
    <style type="text/css">
        .container {
            border: double red 1em;
            border-image: url("support/border.png") 33.33333% round;
            height: 64px;
            width: 64px;
        }
    </style>
</head>
<body>
    <p>The test passes if diamonds in corners are red, and other diamonds are orange, there are 4 orange diamonds on each side.</p>
    <div class="container"></div>
</body>
</html>

/css/css-backgrounds/reference/border-image-repeat-round-ref.html

<!DOCTYPE html>
<title>CSS Border Image: border-image-repeat: round (reference)</title>
<style type="text/css">
  .container {
    position: relative;
    width: 96px;
    height: 96px;
  }
  .container > div {
    position: absolute;
    width: 16px;
    height: 16px;
    background-image: url("../support/border.png");
    background-size: 48px 48px;
  }
  .top { top: 0; }
  .right { left: 80px; }
  .bottom { top: 80px; }
  .left { left: 0; }
  .top-left-corner-tile     { background-position:   0px   0px; }
  .top-edge-tile            { background-position: -16px   0px; }
  .top-right-corner-tile    { background-position: -32px   0px; }
  .left-edge-tile           { background-position:   0px -16px; }
  .right-edge-tile          { background-position: -32px -16px; }
  .bottom-left-corner-tile  { background-position:   0px -32px; }
  .bottom-edge-tile         { background-position: -16px -32px; }
  .bottom-right-corner-tile { background-position: -32px -32px; }
  .h-pos-0 { left: 16px; }
  .h-pos-1 { left: 32px; }
  .h-pos-2 { left: 48px; }
  .h-pos-3 { left: 64px; }
  .v-pos-0 { top: 16px; }
  .v-pos-1 { top: 32px; }
  .v-pos-2 { top: 48px; }
  .v-pos-3 { top: 64px; }
</style>
<p>The test passes if diamonds in corners are red, and other diamonds are orange, there are 4 orange diamonds on each side.</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 right top-right-corner-tile"></div>
  <div class="right right-edge-tile v-pos-0"></div>
  <div class="right right-edge-tile v-pos-1"></div>
  <div class="right right-edge-tile v-pos-2"></div>
  <div class="right right-edge-tile v-pos-3"></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 left bottom-left-corner-tile"></div>
  <div class="left left-edge-tile v-pos-0"></div>
  <div class="left left-edge-tile v-pos-1"></div>
  <div class="left left-edge-tile v-pos-2"></div>
  <div class="left left-edge-tile v-pos-3"></div>
</div>