text-decoration-dotted-002.html (1404B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Test case for text-decoration across inline-element boundaries</title> 6 <meta name="assert" content="The dotted line generated by a single decorating box should be continuous"> 7 <link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> 8 <link rel="author" title="Mozilla" href="https://www.mozilla.org"> 9 <link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#line-decoration"> 10 <link rel="match" href="reference/text-decoration-dotted-002-ref.html"> 11 <style> 12 div { 13 font: 92px Arial, sans-serif; 14 -webkit-text-decoration: dotted red underline; 15 text-decoration: dotted red underline; 16 margin: .5em; 17 } 18 .test1 { 19 text-decoration-thickness:10px; 20 } 21 .test2 { 22 text-decoration-thickness:20px; 23 } 24 .test3 { 25 text-decoration-thickness:30px; 26 } 27 </style> 28 </head> 29 <body> 30 <p>Test passes if the dotted red underlines are uniform throughout each line:</p> 31 <!-- The inline elements should not disrupt the rendering of the decoration lines, 32 as there is still just a single Decorating Box involved in each example. --> 33 <div class=test1>foo<span>bar</span>baz</div> 34 <div class=test2>foo<span>bar</span>baz</div> 35 <div class=test3>foo<span>bar</span>baz</div> 36 </body> 37 </html>