text-decoration-lines-001.html (1798B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Text Decoration Test: text-decoration setting several lines and thickness</title> 4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-line-property"> 6 <meta name="assert" content="Checks that different text decoration lines, even when you get multiple lines in the same declaration, work as expected with different decoration thickness."> 7 <link rel="match" href="reference/text-decoration-lines-001-ref.html"> 8 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 9 <style> 10 .wrapper { 11 position: relative; 12 width: 10px; 13 height: 100px; 14 margin: 110px 2px; 15 float: left; 16 } 17 .decoration { 18 position: absolute; 19 top: 0; 20 left: 0; 21 font: 10px/1 Ahem; 22 color: transparent; 23 text-decoration-color: green; 24 text-decoration-style: solid; 25 text-decoration-skip-ink: none; 26 } 27 </style> 28 <p>The test passes if it matches the reference.</p> 29 <script> 30 let lines = ["underline", "overline", "line-through", 31 "underline overline", "underline line-through", "overline line-through", 32 "underline overline line-through"]; 33 34 let thicknesses = ["1px", "10px", "50px", "100px"]; 35 36 for (let line of lines) { 37 for (let thickness of thicknesses) { 38 let wrapper = document.createElement("div"); 39 wrapper.className = "wrapper"; 40 let decoration = document.createElement("div"); 41 decoration.className = "decoration"; 42 decoration.innerHTML = "X"; 43 decoration.style.textDecorationLine = line; 44 decoration.style.textDecorationThickness = thickness; 45 wrapper.appendChild(decoration); 46 document.body.appendChild(wrapper); 47 } 48 } 49 </script>