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