text-decoration-propagation-display-contents.html (1156B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-text-decor/#line-decoration"> 3 <!-- 4 Note: Line decorations are propagated through the box tree, not through 5 inheritance, and thus have no effect on descendants when specified on an 6 element with display: contents. 7 --> 8 <link rel="match" href="reference/text-decoration-propagation-display-contents-ref.html"> 9 <body> 10 <p style="text-decoration: overline; text-decoration-color: #44cc44;"> 11 <span style="text-decoration: underline; text-decoration-color: red; display: contents"> 12 <span>Should have</span> 13 only overline. 14 </span> 15 </p> 16 <svg xmlns="http://www.w3.org/2000/svg" width="600" height="100"> 17 <text style="text-decoration: overline;" y="20"> 18 <tspan style="text-decoration: underline; display: contents"> 19 <tspan>Should have</tspan> only overline. 20 </tspan> 21 </text> 22 </svg> 23 24 <svg xmlns="http://www.w3.org/2000/svg" width="600" height="100" 25 xmlns:xlink="http://www.w3.org/1999/xlink"> 26 <defs> 27 <text id="text2" y="20"><tspan>Should have</tspan> no overline.</text> 28 </defs> 29 <use style="display: contents" text-decoration="underline" xlink:href="#text2" /> 30 </svg> 31 </body>