blob: 7e83c370866b3bc8554d48859ba5a4fb662925bc [file] [log] [blame]
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Logical Properties: Flow-Relative Border Colors in Visited Links</title>
<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-003-expected.html" />
<meta name="assert" content="This test checks that mapping for flow-relative border colors in visited links uses :link's writing mode instead of :visited's one." />
<style>
a {
display: inline-block;
vertical-align: top;
border: 25px solid green;
border-top-color: red;
border-left-color: red;
}
#link1:visited,
#link2,
#link3:visited,
#link4 {
direction: rtl;
}
#link1:visited,
#link2:visited,
#link3,
#link4 {
writing-mode: vertical-rl;
}
#link1:visited {
border-block-start-color: green;
border-inline-start-color: green;
}
#link2:visited {
border-block-start-color: green;
border-inline-end-color: green;
}
#link3:visited {
border-inline-start-color: green;
border-block-end-color: green;
}
#link4:visited {
border-inline-end-color: green;
border-block-end-color: 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><br />
<a id="link3" href=""></a><a id="link4" href=""></a>