text-underline-position-001a.html (2383B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>text-underline-position test case</title> 6 <meta name="assert" content="text-underline-position:left has no effect in horizontal typographic mode"> 7 <link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> 8 <link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#underline-left"> 9 <link rel="match" href="reference/text-underline-position-001-ref.html"> 10 <style> 11 .outer { 12 margin: 1em; 13 clear: left; 14 } 15 .outer > div { 16 margin: .25em; 17 padding: .25em; 18 float: left; 19 border: 1px dotted gray; 20 } 21 u { 22 text-decoration: 2px green underline; 23 text-underline-offset: .25em; 24 } 25 .test1 > div { 26 writing-mode: initial; 27 } 28 .test2 > div { 29 writing-mode: sideways-rl; 30 } 31 .test3 > div { 32 writing-mode: sideways-lr; 33 } 34 .test4 > div { 35 writing-mode: vertical-rl; 36 text-orientation: sideways; 37 } 38 .test5 > div { 39 writing-mode: vertical-lr; 40 text-orientation: sideways; 41 } 42 .test { 43 text-underline-position: left; 44 } 45 </style> 46 </head> 47 <body> 48 <p class="instructions">Test passes if the left and right boxes match in each case:</p> 49 <div class="outer test1"> 50 <div> 51 <p><u class="test">underlined</u></p> 52 </div> 53 <div> 54 <p><u>underlined</u></p> 55 </div> 56 </div> 57 <div class="outer test2"> 58 <div> 59 <p><u class="test">underlined</u></p> 60 </div> 61 <div> 62 <p><u>underlined</u></p> 63 </div> 64 </div> 65 <div class="outer test3"> 66 <div> 67 <p><u class="test">underlined</u></p> 68 </div> 69 <div> 70 <p><u>underlined</u></p> 71 </div> 72 </div> 73 <div class="outer test4"> 74 <div> 75 <p><u class="test">underlined</u></p> 76 </div> 77 <div> 78 <p><u>underlined</u></p> 79 </div> 80 </div> 81 <div class="outer test5"> 82 <div> 83 <p><u class="test">underlined</u></p> 84 </div> 85 <div> 86 <p><u>underlined</u></p> 87 </div> 88 </div> 89 </body> 90 </html>