<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Logical Properties: Flow-Relative Border Colors in Visited Links</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="help" href="https://drafts.csswg.org/css-logical/#border-color" />
<link rel="help" href="https://drafts.csswg.org/selectors/#visited-pseudo" />
<link rel="match" href="logical-box-border-color-visited-link-expected.html" />
<meta name="assert" content="This test checks that flow-relative border color longhands and border shorthands for specific side set border color for visited links." />
<style>
a {
  display: block;
  width: 350px;
  border: 25px solid red;
}
#link1, #link2:visited {
  border-block-start-color: green;
  border-block-end-color: green;
  border-inline-start-color: green;
  border-inline-end-color: green;
}
#link3 {
  border-block-start: 25px solid green;
  border-block-end: 25px solid green;
  border-inline-start: 25px solid green;
  border-inline-end: 25px solid green;
}
#link4:visited {
  /* :visited should honor the border color but ignore other values in the shorthand */
  border-block-start: 0 none green;
  border-block-end: 0 none green;
  border-inline-start: 0 none green;
  border-inline-end: 0 none green;
}
#link5, #link6:visited {
  border-block-color: green;
  border-inline-color: green;
}
#link7 {
  border-block: 25px solid green;
  border-inline: 25px solid green;
}
#link8:visited {
  /* :visited should honor the border color but ignore other values in the shorthand */
  border-block: 0 none green;
  border-inline: 0 none green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

<!-- Links point to current URL, which should be visited -->
<a id="link1" href=""></a>
<a id="link2" href=""></a>
<a id="link3" href=""></a>
<a id="link4" href=""></a>
<a id="link5" href=""></a>
<a id="link6" href=""></a>
<a id="link7" href=""></a>
<a id="link8" href=""></a>