table-attribute.html (5851B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>Table attribute test</title> 4 <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#tables-2"> 5 <link rel="author" title="Intel" href="http://www.intel.com"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 9 <style> 10 .div_tbl table { 11 width: 400px; 12 height: 300px; 13 border-spacing: 0px; 14 } 15 .div_tbl td { 16 padding: 0px; 17 } 18 .div_tbl th { 19 padding: 0px; 20 } 21 .div_200 { 22 height: 200px; 23 } 24 </style> 25 26 <div id="div"> 27 <table id="table"> 28 <thead id="thead"> 29 <tr> 30 <th id="th">Month</th> 31 <th>Savings</th> 32 </tr> 33 </thead> 34 <tbody id="tbody"> 35 <tr id="tr"> 36 <td>January</td> 37 <td>$60</td> 38 </tr> 39 <tr> 40 <td id="td">February</td> 41 <td>$80</td> 42 </tr> 43 </tbody> 44 <tfoot id="tfoot"> 45 <tr> 46 <td>Sum</td> 47 <td>$140</td> 48 </tr> 49 </tfoot> 50 </table> 51 </div> 52 53 <script> 54 55 const ids = ["table", "thead", "tbody", "tfoot", "tr", "td", "th"]; 56 const alignIds = ["thead", "tbody", "tfoot", "tr", "td", "th"]; 57 const heightIds = ["tr", "td", "th"]; 58 const div = document.getElementById("div"); 59 const table = document.getElementById("table"); 60 const aligns = [ 61 ["center", "center"], 62 ["middle", "center"], 63 ["left", "left"], 64 ["right", "right"], 65 ["justify", "justify"] 66 ]; 67 68 function commonTest(id, attr, value, cssProp, expected) { 69 test(t => { 70 let elem = document.getElementById(id); 71 t.add_cleanup(() => { 72 elem.removeAttribute(attr); 73 }); 74 elem.setAttribute(attr, value); 75 let css = window.getComputedStyle(elem, null).getPropertyValue(cssProp); 76 assert_equals(css, expected); 77 }, `${id} ${attr} attribute is correct`); 78 } 79 80 function commonAlignTest(id, attr, value, cssProp, expected) { 81 test(t => { 82 let elem = document.getElementById(id); 83 t.add_cleanup(() => { 84 elem.removeAttribute(attr); 85 }); 86 elem.setAttribute(attr, value); 87 let css = window.getComputedStyle(elem, null).getPropertyValue(cssProp); 88 assert_equals(css, expected); 89 }, `table ${id} align attribute ${value} is correct`); 90 } 91 92 function commonHeightTest(id, attr, value, cssProp, expected, type="", divClass) { 93 test(t => { 94 let elem = document.getElementById(id); 95 t.add_cleanup(() => { 96 elem.removeAttribute(attr); 97 div.classList.remove(divClass); 98 }); 99 elem.setAttribute(attr, value); 100 div.classList.add(divClass); 101 let css = window.getComputedStyle(elem, null).getPropertyValue(cssProp); 102 assert_equals(css, expected); 103 }, `${id} ${attr} attribute ${type} is correct`); 104 } 105 106 // table#bordercolor 107 commonTest("table", "bordercolor", "red", "border-color", "rgb(255, 0, 0)"); 108 // table#cellspacing 109 commonTest("table", "cellspacing", "10", "border-spacing", "10px", "10"); 110 111 // {table, thead, body, tfoot, tr, td, th}#background 112 // {table, thead, body, tfoot, tr, td, th}#bgcolor 113 const url = new URL('/images/threecolors.png', window.location.href).href; 114 for (let id of ids) { 115 commonTest(id, "background", "/images/threecolors.png", "background-image", `url(\"${url}\")`); 116 117 commonTest(id, "bgcolor", "red", "background-color", "rgb(255, 0, 0)"); 118 } 119 120 // {thead, body, tfoot, tr, td, th}#align#{center, middle, left, right, justify} 121 for (let id of alignIds) { 122 for (let [value, expected] of aligns) { 123 commonAlignTest(id, "align", value, "text-align", expected); 124 } 125 } 126 127 // {tr, td, th}#height#pixel 128 for (let id of heightIds) { 129 commonHeightTest(id, "height", "60", "height", "60px", "pixel", "div_tbl"); 130 } 131 132 // {tr, td, th}#height#percentage 133 let tbl = document.createElement("table"); 134 tbl.innerHTML = '<tr id="table_tr"><th id="table_th"></th></tr><tr><td id="table_td"></td></tr>'; 135 div.appendChild(tbl); 136 const heightPercIds = ["table_tr", "table_td", "table_th"]; 137 for (let id of heightPercIds) { 138 commonHeightTest(id, "height", "20%", "height", "60px", "percentage", "div_tbl"); 139 } 140 div.removeChild(tbl); 141 142 // table#height#{pixel, percentage} 143 commonHeightTest("table", "height", "180", "height", "180px", "pixel", "div_200"); 144 commonHeightTest("table", "height", "90%", "height", "180px", "90%", "div_200"); 145 commonHeightTest("table", "height", "110%", "height", "220px", "110%", "div_200"); 146 147 // table#cellpadding 148 test(t => { 149 t.add_cleanup(() => { 150 table.removeAttribute("cellpadding"); 151 }); 152 table.setAttribute("cellpadding", "10"); 153 154 let th = document.getElementById("th"); 155 let th_css = window.getComputedStyle(th, null).getPropertyValue("padding"); 156 assert_equals(th_css, "10px"); 157 158 let td = document.getElementById("td"); 159 let td_css = window.getComputedStyle(td, null).getPropertyValue("padding"); 160 assert_equals(td_css, "10px"); 161 }, "table cellpadding attribute is correct"); 162 163 // th default text-align property is center 164 test(t => { 165 let elem = document.getElementById("th"); 166 let css = window.getComputedStyle(elem, null).getPropertyValue("text-align"); 167 assert_equals(css, "center"); 168 }, "th default align attribute is center"); 169 170 // col#width#{pixel, percentage} 171 test(t => { 172 let colgroup = document.createElement("colgroup"); 173 let col1 = document.createElement("col"); 174 let col2 = document.createElement("col"); 175 t.add_cleanup(() => { 176 table.removeChild(colgroup); 177 div.classList.remove("div_tbl"); 178 }); 179 colgroup.appendChild(col1); 180 colgroup.appendChild(col2); 181 table.insertBefore(colgroup, table.firstChild); 182 div.classList.add("div_tbl"); 183 184 col1.setAttribute("width", "100"); 185 let td = document.getElementById("td"); 186 let css = window.getComputedStyle(td, null).getPropertyValue("width"); 187 assert_equals(css, "100px"); 188 189 col1.setAttribute("width", "50%"); 190 css = window.getComputedStyle(td, null).getPropertyValue("width"); 191 assert_equals(css, "200px"); 192 }, "table col width attribute is correct"); 193 194 </script>