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: "#00ff00 underline",
  49         textDecorationColor: "rgb(0, 255, 0)",
  50         textDecorationLine: "underline",
  51     },
  52     {
  53         specified: "#ffff00 wavy",
  54         textDecorationColor: "rgb(255, 255, 0)",
  55         textDecorationStyle: "wavy",
  56     },
  57     {
  58         specified: "overline double",
  59         textDecorationLine: "overline",
  60         textDecorationStyle: "double",
  61     },
  62     {
  63         specified: "red underline solid",
  64         textDecorationColor: "rgb(255, 0, 0)",
  65         textDecorationLine: "underline",
  66         textDecorationStyle: "solid",
  67     },
  68     {
  69         specified: "double overline blue",
  70         textDecorationColor: "rgb(0, 0, 255)",
  71         textDecorationLine: "overline",
  72         textDecorationStyle: "double",
  73     },
  74     {
  75         specified: "solid underline 10px",
  76         textDecorationStyle: "solid",
  77         textDecorationLine: "underline",
  78         textDecorationThickness: "10px",
  79     },
  80     {
  81         specified: "line-through blue 200px",
  82         textDecorationLine: "line-through",
  83         textDecorationColor:  "rgb(0, 0, 255)",
  84         textDecorationThickness: "200px",
  85     },
  86     {
  87         specified: "underline wavy red 0",
  88         textDecorationLine: "underline",
  89         textDecorationStyle: "wavy",
  90         textDecorationColor: "rgb(255, 0, 0)",
  91         textDecorationThickness: "0px",
  92     },
  93     {
  94         specified: "overline -30px",
  95         textDecorationLine: "overline",
  96         textDecorationThickness: "-30px",
  97     },
  98 ];
  99
 100 function run_tests(test_cases, shorthand, subproperties) {
 101     test_cases.forEach(function(test_case) {
 102         test(function() {
 103             var element = document.createElement('div');
 104             document.body.appendChild(element);
 105             // Set text color to test initial value of text-decoration-color
 106             // (currentColor).
 107             element.style.color = "#ff00ff";
 108             element.style[shorthand] = test_case.specified;
 109             var computed = window.getComputedStyle(element);
 110             subproperties.forEach(function(longhand) {
 111                 assert_equals(
 112                     computed[longhand],
 113                     test_case[longhand] || initial_values[longhand],
 114                     longhand
 115                 );
 116             });
 117         }, "test parsing of 'text-decoration: " + test_case.specified + "'");
 118     });
 119 }
 120
 121 run_tests(text_decoration_test_cases, "textDecoration", [
 122     "textDecorationColor", "textDecorationLine", "textDecorationStyle", "textDecorationThickness"]);
 123
 124 </script>
 125 </body>
 126 </html>