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