test_text_decoration_shorthands.html (3927B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=utf-8> 5 <title>Test parsing of text-decoration shorthands</title> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <link rel='stylesheet' href='/resources/testharness.css'> 9 </head> 10 <body> 11 12 <script> 13 14 var initial_values = { 15 textDecorationColor: "rgb(255, 0, 255)", 16 textDecorationLine: "none", 17 textDecorationStyle: "solid", 18 textDecorationThickness: "auto", 19 }; 20 21 // For various specified values of the text-decoration shorthand, 22 // test the computed values of the corresponding longhands. 23 var text_decoration_test_cases = [ 24 { 25 specified: "none", 26 }, 27 { 28 specified: "red", 29 textDecorationColor: "rgb(255, 0, 0)", 30 }, 31 { 32 specified: "line-through", 33 textDecorationLine: "line-through", 34 }, 35 { 36 specified: "dotted", 37 textDecorationStyle: "dotted", 38 }, 39 { 40 specified: "20px", 41 textDecorationThickness: "20px", 42 }, 43 { 44 specified: "auto", 45 textDecorationThickness: "auto", 46 }, 47 { 48 specified: "from-font", 49 textDecorationThickness: "from-font", 50 }, 51 { 52 specified: "#00ff00 underline", 53 textDecorationColor: "rgb(0, 255, 0)", 54 textDecorationLine: "underline", 55 }, 56 { 57 specified: "#ffff00 wavy", 58 textDecorationColor: "rgb(255, 255, 0)", 59 textDecorationStyle: "wavy", 60 }, 61 { 62 specified: "overline double", 63 textDecorationLine: "overline", 64 textDecorationStyle: "double", 65 }, 66 { 67 specified: "red underline solid", 68 textDecorationColor: "rgb(255, 0, 0)", 69 textDecorationLine: "underline", 70 textDecorationStyle: "solid", 71 }, 72 { 73 specified: "double overline blue", 74 textDecorationColor: "rgb(0, 0, 255)", 75 textDecorationLine: "overline", 76 textDecorationStyle: "double", 77 }, 78 { 79 specified: "solid underline 10px", 80 textDecorationStyle: "solid", 81 textDecorationLine: "underline", 82 textDecorationThickness: "10px", 83 }, 84 { 85 specified: "line-through blue 200px", 86 textDecorationLine: "line-through", 87 textDecorationColor: "rgb(0, 0, 255)", 88 textDecorationThickness: "200px", 89 }, 90 { 91 specified: "underline wavy red 0", 92 textDecorationLine: "underline", 93 textDecorationStyle: "wavy", 94 textDecorationColor: "rgb(255, 0, 0)", 95 textDecorationThickness: "0px", 96 }, 97 { 98 specified: "overline -30px", 99 textDecorationLine: "overline", 100 textDecorationThickness: "-30px", 101 }, 102 { 103 specified: "underline red from-font", 104 textDecorationLine: "underline", 105 textDecorationColor: "rgb(255, 0, 0)", 106 textDecorationThickness: "from-font", 107 }, 108 ]; 109 110 function run_tests(test_cases, shorthand, subproperties) { 111 test_cases.forEach(function(test_case) { 112 test(function() { 113 var element = document.createElement('div'); 114 document.body.appendChild(element); 115 // Set text color to test initial value of text-decoration-color 116 // (currentColor). 117 element.style.color = "#ff00ff"; 118 element.style[shorthand] = test_case.specified; 119 var computed = window.getComputedStyle(element); 120 subproperties.forEach(function(longhand) { 121 assert_equals( 122 computed[longhand], 123 test_case[longhand] || initial_values[longhand], 124 longhand 125 ); 126 }); 127 }, "test parsing of 'text-decoration: " + test_case.specified + "'"); 128 }); 129 } 130 131 run_tests(text_decoration_test_cases, "textDecoration", [ 132 "textDecorationColor", "textDecorationLine", "textDecorationStyle", "textDecorationThickness"]); 133 134 </script> 135 </body> 136 </html>