third_party/WebKit/LayoutTests/fast/table/script-tests/css-table-width.js

   1 description("This test checks that the width style is applied correctly to CSS tables with respect to table paddings and borders.");
   2
   3 function computeCSSTableOffsetWidth(extraTableStyle)
   4 {
   5     return computeCSSTableProperty('offsetWidth', extraTableStyle)
   6 }
   7
   8 function computeCSSTableOffsetHeight(extraTableStyle)
   9 {
  10     return computeCSSTableProperty('offsetHeight', extraTableStyle)
  11 }
  12
  13 function computeCSSTableProperty(propertyName, extraTableStyle)
  14 {
  15     var table = document.createElement("div");
  16     table.setAttribute("style", "display: table; " + extraTableStyle);
  17
  18     var rowGroup = document.createElement("div");
  19     rowGroup.setAttribute("style", "display: table-row-group;");
  20
  21     var row = document.createElement("div");
  22     row.setAttribute("style", "display: table-row;");
  23
  24     var cell = document.createElement("div");
  25     cell.setAttribute("style", "display: table-cell;");
  26
  27     var cellContent = document.createElement("div");
  28     cellContent.setAttribute("style", "width: 100px; height: 50px; background-color: #090;");
  29
  30     document.body.appendChild(table);
  31     table.appendChild(rowGroup);
  32     rowGroup.appendChild(row);
  33     row.appendChild(cell);
  34     cell.appendChild(cellContent);
  35
  36     var propertyValue = table[propertyName];
  37
  38     document.body.removeChild(table);
  39
  40     return propertyValue;
  41 }
  42
  43 // separated borders
  44
  45 shouldEvaluateTo("computeCSSTableOffsetWidth('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px;')", 200+2+4+6+8);
  46 shouldEvaluateTo("computeCSSTableOffsetWidth('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; direction: rtl;')", 200+2+4+6+8);
  47
  48 shouldEvaluateTo("computeCSSTableOffsetHeight('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl;')", 150+10+30+50+70);
  49 shouldEvaluateTo("computeCSSTableOffsetHeight('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; -webkit-text-orientation: upright; text-orientation: upright;')", 150+10+30+50+70);
  50 shouldEvaluateTo("computeCSSTableOffsetHeight('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; direction: rtl;')", 150+10+30+50+70);
  51 shouldEvaluateTo("computeCSSTableOffsetHeight('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; direction: rtl; -webkit-text-orientation: upright; text-orientation: upright;')", 150+10+30+50+70);
  52
  53 shouldEvaluateTo("computeCSSTableOffsetHeight('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr;')", 150+10+30+50+70);
  54 shouldEvaluateTo("computeCSSTableOffsetHeight('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr; -webkit-text-orientation: upright; text-orientation: upright;')", 150+10+30+50+70);
  55 shouldEvaluateTo("computeCSSTableOffsetHeight('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr; direction: rtl;')", 150+10+30+50+70);
  56 shouldEvaluateTo("computeCSSTableOffsetHeight('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr; direction: rtl; -webkit-text-orientation: upright; text-orientation: upright;')", 150+10+30+50+70);
  57
  58 // collapsed borders
  59
  60 shouldEvaluateTo("computeCSSTableOffsetWidth('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; border-collapse: collapse;')", 200+(2+4)/2);
  61 shouldEvaluateTo("computeCSSTableOffsetWidth('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; border-collapse: collapse; direction: rtl;')", 200+(2+4)/2);
  62
  63 shouldEvaluateTo("computeCSSTableOffsetHeight('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; border-collapse: collapse; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl;')", 150+(10+30)/2);
  64 shouldEvaluateTo("computeCSSTableOffsetHeight('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; border-collapse: collapse; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; -webkit-text-orientation: upright; text-orientation: upright;')", 150+(10+30)/2);
  65 shouldEvaluateTo("computeCSSTableOffsetHeight('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; border-collapse: collapse; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; direction: rtl;')", 150+(10+30)/2);
  66 shouldEvaluateTo("computeCSSTableOffsetHeight('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; border-collapse: collapse; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; direction: rtl; -webkit-text-orientation: upright; text-orientation: upright;')", 150+(10+30)/2);
  67
  68 shouldEvaluateTo("computeCSSTableOffsetHeight('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; border-collapse: collapse; -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr;')", 150+(10+30)/2);
  69 shouldEvaluateTo("computeCSSTableOffsetHeight('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; border-collapse: collapse; -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr; -webkit-text-orientation: upright; text-orientation: upright;')", 150+(10+30)/2);
  70 shouldEvaluateTo("computeCSSTableOffsetHeight('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; border-collapse: collapse; -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr; direction: rtl;')", 150+(10+30)/2);
  71 shouldEvaluateTo("computeCSSTableOffsetHeight('width: 200px; height: 150px; border-style: solid; border-width: 10px 2px 30px 4px; padding: 50px 6px 70px 8px; border-collapse: collapse; -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr; direction: rtl; -webkit-text-orientation: upright; text-orientation: upright;')", 150+(10+30)/2);