third_party/WebKit/LayoutTests/fast/table/script-tests/border-changes.js

   1 description(
   2 "This test checks the behavior of table styles when changing certain table attributes."
   3 );
   4
   5 var yellow = "rgb(255, 255, 0)";
   6 var orange = "rgb(255, 165, 0)";
   7 var red = "rgb(255, 0, 0)";
   8
   9 var table = document.createElement("table");
  10 table.setAttribute("style", "border-color: yellow");
  11 var row = table.insertRow(-1);
  12 row.setAttribute("style", "border-color: orange");
  13 var cell = row.insertCell(-1);
  14 cell.setAttribute("style", "border-color: red");
  15
  16 document.body.appendChild(table);
  17
  18 shouldBe("getComputedStyle(table, '').borderLeftWidth", "'0px'");
  19 shouldBe("getComputedStyle(table, '').borderRightWidth", "'0px'");
  20 shouldBe("getComputedStyle(table, '').borderTopWidth", "'0px'");
  21 shouldBe("getComputedStyle(table, '').borderBottomWidth", "'0px'");
  22 shouldBe("getComputedStyle(table, '').borderLeftStyle", "'none'");
  23 shouldBe("getComputedStyle(table, '').borderRightStyle", "'none'");
  24 shouldBe("getComputedStyle(table, '').borderTopStyle", "'none'");
  25 shouldBe("getComputedStyle(table, '').borderBottomStyle", "'none'");
  26 shouldBe("getComputedStyle(table, '').borderLeftColor", "yellow");
  27 shouldBe("getComputedStyle(table, '').borderRightColor", "yellow");
  28 shouldBe("getComputedStyle(table, '').borderTopColor", "yellow");
  29 shouldBe("getComputedStyle(table, '').borderBottomColor", "yellow");
  30
  31 shouldBe("getComputedStyle(cell, '').borderLeftWidth", "'0px'");
  32 shouldBe("getComputedStyle(cell, '').borderRightWidth", "'0px'");
  33 shouldBe("getComputedStyle(cell, '').borderTopWidth", "'0px'");
  34 shouldBe("getComputedStyle(cell, '').borderBottomWidth", "'0px'");
  35 shouldBe("getComputedStyle(cell, '').borderLeftStyle", "'none'");
  36 shouldBe("getComputedStyle(cell, '').borderRightStyle", "'none'");
  37 shouldBe("getComputedStyle(cell, '').borderTopStyle", "'none'");
  38 shouldBe("getComputedStyle(cell, '').borderBottomStyle", "'none'");
  39 shouldBe("getComputedStyle(cell, '').borderLeftColor", "red");
  40 shouldBe("getComputedStyle(cell, '').borderRightColor", "red");
  41 shouldBe("getComputedStyle(cell, '').borderTopColor", "red");
  42 shouldBe("getComputedStyle(cell, '').borderBottomColor", "red");
  43
  44 table.border = '';
  45
  46 shouldBe("getComputedStyle(table, '').borderLeftWidth", "'1px'");
  47 shouldBe("getComputedStyle(table, '').borderRightWidth", "'1px'");
  48 shouldBe("getComputedStyle(table, '').borderTopWidth", "'1px'");
  49 shouldBe("getComputedStyle(table, '').borderBottomWidth", "'1px'");
  50 shouldBe("getComputedStyle(table, '').borderLeftStyle", "'outset'");
  51 shouldBe("getComputedStyle(table, '').borderRightStyle", "'outset'");
  52 shouldBe("getComputedStyle(table, '').borderTopStyle", "'outset'");
  53 shouldBe("getComputedStyle(table, '').borderBottomStyle", "'outset'");
  54 shouldBe("getComputedStyle(table, '').borderLeftColor", "yellow");
  55 shouldBe("getComputedStyle(table, '').borderRightColor", "yellow");
  56 shouldBe("getComputedStyle(table, '').borderTopColor", "yellow");
  57 shouldBe("getComputedStyle(table, '').borderBottomColor", "yellow");
  58
  59 shouldBe("getComputedStyle(cell, '').borderLeftWidth", "'1px'");
  60 shouldBe("getComputedStyle(cell, '').borderRightWidth", "'1px'");
  61 shouldBe("getComputedStyle(cell, '').borderTopWidth", "'1px'");
  62 shouldBe("getComputedStyle(cell, '').borderBottomWidth", "'1px'");
  63 shouldBe("getComputedStyle(cell, '').borderLeftStyle", "'inset'");
  64 shouldBe("getComputedStyle(cell, '').borderRightStyle", "'inset'");
  65 shouldBe("getComputedStyle(cell, '').borderTopStyle", "'inset'");
  66 shouldBe("getComputedStyle(cell, '').borderBottomStyle", "'inset'");
  67 shouldBe("getComputedStyle(cell, '').borderLeftColor", "red");
  68 shouldBe("getComputedStyle(cell, '').borderRightColor", "red");
  69 shouldBe("getComputedStyle(cell, '').borderTopColor", "red");
  70 shouldBe("getComputedStyle(cell, '').borderBottomColor", "red");
  71
  72 table.setAttribute("bordercolor", "green");
  73
  74 shouldBe("getComputedStyle(table, '').borderLeftWidth", "'1px'");
  75 shouldBe("getComputedStyle(table, '').borderRightWidth", "'1px'");
  76 shouldBe("getComputedStyle(table, '').borderTopWidth", "'1px'");
  77 shouldBe("getComputedStyle(table, '').borderBottomWidth", "'1px'");
  78 shouldBe("getComputedStyle(table, '').borderLeftStyle", "'solid'");
  79 shouldBe("getComputedStyle(table, '').borderRightStyle", "'solid'");
  80 shouldBe("getComputedStyle(table, '').borderTopStyle", "'solid'");
  81 shouldBe("getComputedStyle(table, '').borderBottomStyle", "'solid'");
  82 shouldBe("getComputedStyle(table, '').borderLeftColor", "yellow");
  83 shouldBe("getComputedStyle(table, '').borderRightColor", "yellow");
  84 shouldBe("getComputedStyle(table, '').borderTopColor", "yellow");
  85 shouldBe("getComputedStyle(table, '').borderBottomColor", "yellow");
  86
  87 shouldBe("getComputedStyle(cell, '').borderLeftWidth", "'1px'");
  88 shouldBe("getComputedStyle(cell, '').borderRightWidth", "'1px'");
  89 shouldBe("getComputedStyle(cell, '').borderTopWidth", "'1px'");
  90 shouldBe("getComputedStyle(cell, '').borderBottomWidth", "'1px'");
  91 shouldBe("getComputedStyle(cell, '').borderLeftStyle", "'solid'");
  92 shouldBe("getComputedStyle(cell, '').borderRightStyle", "'solid'");
  93 shouldBe("getComputedStyle(cell, '').borderTopStyle", "'solid'");
  94 shouldBe("getComputedStyle(cell, '').borderBottomStyle", "'solid'");
  95 shouldBe("getComputedStyle(cell, '').borderLeftColor", "red");
  96 shouldBe("getComputedStyle(cell, '').borderRightColor", "red");
  97 shouldBe("getComputedStyle(cell, '').borderTopColor", "red");
  98 shouldBe("getComputedStyle(cell, '').borderBottomColor", "red");
  99
 100 table.rules = "cols";
 101
 102 shouldBe("getComputedStyle(table, '').borderLeftWidth", "'1px'");
 103 shouldBe("getComputedStyle(table, '').borderRightWidth", "'1px'");
 104 shouldBe("getComputedStyle(table, '').borderTopWidth", "'1px'");
 105 shouldBe("getComputedStyle(table, '').borderBottomWidth", "'1px'");
 106 shouldBe("getComputedStyle(table, '').borderLeftStyle", "'solid'");
 107 shouldBe("getComputedStyle(table, '').borderRightStyle", "'solid'");
 108 shouldBe("getComputedStyle(table, '').borderTopStyle", "'solid'");
 109 shouldBe("getComputedStyle(table, '').borderBottomStyle", "'solid'");
 110 shouldBe("getComputedStyle(table, '').borderLeftColor", "yellow");
 111 shouldBe("getComputedStyle(table, '').borderRightColor", "yellow");
 112 shouldBe("getComputedStyle(table, '').borderTopColor", "yellow");
 113 shouldBe("getComputedStyle(table, '').borderBottomColor", "yellow");
 114
 115 shouldBe("getComputedStyle(cell, '').borderLeftWidth", "'1px'");
 116 shouldBe("getComputedStyle(cell, '').borderRightWidth", "'1px'");
 117 shouldBe("getComputedStyle(cell, '').borderTopWidth", "'0px'");
 118 shouldBe("getComputedStyle(cell, '').borderBottomWidth", "'0px'");
 119 shouldBe("getComputedStyle(cell, '').borderLeftStyle", "'solid'");
 120 shouldBe("getComputedStyle(cell, '').borderRightStyle", "'solid'");
 121 shouldBe("getComputedStyle(cell, '').borderTopStyle", "'none'");
 122 shouldBe("getComputedStyle(cell, '').borderBottomStyle", "'none'");
 123 shouldBe("getComputedStyle(cell, '').borderLeftColor", "red");
 124 shouldBe("getComputedStyle(cell, '').borderRightColor", "red");
 125 shouldBe("getComputedStyle(cell, '').borderTopColor", "red");
 126 shouldBe("getComputedStyle(cell, '').borderBottomColor", "red");
 127
 128 table.rules = "rows";
 129
 130 shouldBe("getComputedStyle(table, '').borderLeftWidth", "'1px'");
 131 shouldBe("getComputedStyle(table, '').borderRightWidth", "'1px'");
 132 shouldBe("getComputedStyle(table, '').borderTopWidth", "'1px'");
 133 shouldBe("getComputedStyle(table, '').borderBottomWidth", "'1px'");
 134 shouldBe("getComputedStyle(table, '').borderLeftStyle", "'solid'");
 135 shouldBe("getComputedStyle(table, '').borderRightStyle", "'solid'");
 136 shouldBe("getComputedStyle(table, '').borderTopStyle", "'solid'");
 137 shouldBe("getComputedStyle(table, '').borderBottomStyle", "'solid'");
 138 shouldBe("getComputedStyle(table, '').borderLeftColor", "yellow");
 139 shouldBe("getComputedStyle(table, '').borderRightColor", "yellow");
 140 shouldBe("getComputedStyle(table, '').borderTopColor", "yellow");
 141 shouldBe("getComputedStyle(table, '').borderBottomColor", "yellow");
 142
 143 shouldBe("getComputedStyle(cell, '').borderLeftWidth", "'0px'");
 144 shouldBe("getComputedStyle(cell, '').borderRightWidth", "'0px'");
 145 shouldBe("getComputedStyle(cell, '').borderTopWidth", "'1px'");
 146 shouldBe("getComputedStyle(cell, '').borderBottomWidth", "'1px'");
 147 shouldBe("getComputedStyle(cell, '').borderLeftStyle", "'none'");
 148 shouldBe("getComputedStyle(cell, '').borderRightStyle", "'none'");
 149 shouldBe("getComputedStyle(cell, '').borderTopStyle", "'solid'");
 150 shouldBe("getComputedStyle(cell, '').borderBottomStyle", "'solid'");
 151 shouldBe("getComputedStyle(cell, '').borderLeftColor", "red");
 152 shouldBe("getComputedStyle(cell, '').borderRightColor", "red");
 153 shouldBe("getComputedStyle(cell, '').borderTopColor", "red");
 154 shouldBe("getComputedStyle(cell, '').borderBottomColor", "red");
 155
 156 // resets to default border width of 3px
 157 table.removeAttribute("border");
 158
 159 shouldBe("getComputedStyle(table, '').borderLeftWidth", "'3px'");
 160 shouldBe("getComputedStyle(table, '').borderRightWidth", "'3px'");
 161 shouldBe("getComputedStyle(table, '').borderTopWidth", "'3px'");
 162 shouldBe("getComputedStyle(table, '').borderBottomWidth", "'3px'");
 163 shouldBe("getComputedStyle(table, '').borderLeftStyle", "'solid'");
 164 shouldBe("getComputedStyle(table, '').borderRightStyle", "'solid'");
 165 shouldBe("getComputedStyle(table, '').borderTopStyle", "'solid'");
 166 shouldBe("getComputedStyle(table, '').borderBottomStyle", "'solid'");
 167 shouldBe("getComputedStyle(table, '').borderLeftColor", "yellow");
 168 shouldBe("getComputedStyle(table, '').borderRightColor", "yellow");
 169 shouldBe("getComputedStyle(table, '').borderTopColor", "yellow");
 170 shouldBe("getComputedStyle(table, '').borderBottomColor", "yellow");
 171
 172 document.body.removeChild(table);