css/css-backgrounds/border-image-width-007.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>

  <title>CSS Backgrounds and Borders Test: border image area - border-image-width</title>

  <link rel="author" title="G&eacute;rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
  <link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-image-width" title="6.3. Drawing Areas: the 'border-image-width' property" />
  <link rel="match" href="../reference/ref-filled-green-100px-square.xht" />

  <meta name="flags" content="image" />
  <meta content="This test checks that the border image area can still exists even if the border area (or border belt) of an element is inexistent, even if the padding area (or padding belt) is inexistent and even if the content area is inexistent. In this test, the border image fills the margin area of the element. In this test, the whole border image area is outside the border box of the element." name="assert" />

  <!--
  created 2015-11-18
  [css-backgrounds] Please remove the "unless there is a border image" wording
  http://lists.w3.org/Archives/Public/www-style/2015Nov/0258.html
  -->

  <style type="text/css"><![CDATA[
  div
    {
      background-color: red;
      border-color: red;
      border-style: none; /* or border-style: dotted or any other 'border-style' value */
      border-width: 0px; /* so the border belt (or border area) of the element is 0px tall and 0px wide */
      border-image-source: url("support/outline-5px-10px-15px-20px-green.png");
      border-image-slice: 5% 10% 15% 20%; /* <number> Percentages are relative to the size of the image: the width of the image for the horizontal offsets, the height for vertical offsets. */
      border-image-width: 50px; /* The four values of &lsquo;border-image-width&rsquo; specify offsets that are used to divide the border image area into nine parts. They represent inward distances from the the top, right, bottom, and left sides of the area, respectively. */
      border-image-outset: 50px 50px 50px 50px; /* The border-image-outset values specify the amount by which the border image area !_ extends beyond the border box_!. */
      height: 0px;
      margin: 66px 50px 50px 50px;
      /* Why 66px ? In order to take into consideration the fact that the margin-bottom (16px) of the p element will collapse with the top margin of the div element. */
      width: 0px;
    }
  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

  <div></div>

 </body>
</html>