layout/style/test/test_text_decoration_shorthands.html

   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>