logical-box-border-color-visited-link-001.html (1063B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Logical Properties: Flow-Relative Border Colors in Visited Links</title> 4 <style> 5 a { 6 display: inline-block; 7 vertical-align: top; 8 border: 25px solid red; 9 } 10 #link1, #link2:visited { 11 border-block-start-color: green; 12 border-block-end-color: green; 13 border-inline-start-color: green; 14 border-inline-end-color: green; 15 } 16 #link3 { 17 border-block-start: 25px solid green; 18 border-block-end: 25px solid green; 19 border-inline-start: 25px solid green; 20 border-inline-end: 25px solid green; 21 } 22 #link4:visited { 23 /* :visited should honor the border color but ignore other values in the shorthand */ 24 border-block-start: 0 none green; 25 border-block-end: 0 none green; 26 border-inline-start: 0 none green; 27 border-inline-end: 0 none green; 28 } 29 </style> 30 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 31 <a id="link1" href="visited-page.html"></a><a id="link2" href="visited-page.html"></a><br> 32 <a id="link3" href="visited-page.html"></a><a id="link4" href="visited-page.html"></a>