testing/web-platform/tests/css/css-backgrounds/reference/border-image-space-001-ref.html
author Duncan McIntosh <dmcintosh@mozilla.com>
Wed, 09 Jul 2025 19:42:02 +0000 (4 hours ago)
changeset 795924 9ccc6a2267cbf69c621fec973bd28573c2a45a1f
parent 392912 9415bff8166863f344256c7a3dd14aa5e038e82b
permissions -rw-r--r--
Bug 1966586 - Reuse other browser windows when opening _blank links in Taskbar Tabs windows. r=nrishel This doesn't affect other tab additions, nor does it stop the tab bar from appearing altogether. The idea is that _if_ another tab is somehow made, the user should see it; but we should not create new tabs if we can avoid it. This also adds tests for opening URIs in popups and taskbar tabs to make it less likely that this breaks in future. Differential Revision: https://phabricator.services.mozilla.com/D253726
<!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>