| <!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> |