align.html (2234B)
1 <!doctype html> 2 <title>align attribute mapping on replaced elements</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <img id="replaced" src="/images/green.png"> 6 <something id="non-replaced"></something> 7 <script> 8 const kMapping = { 9 "left": ["float", "left"], 10 "right": ["float", "right"], 11 12 "top": ["vertical-align", "top"], 13 14 // This one requires a magic value (`-moz-middle-with-baseline` on Gecko, 15 // `-webkit-baseline-middle` on WebKit-based browsers). 16 "middle": ["vertical-align", undefined], 17 // These are inconsistent across browsers. WebKit maps it to "middle", Gecko 18 // to the aforementioned value. 19 "center": ["vertical-align", undefined], 20 21 "baseline": ["vertical-align", "baseline"], 22 "bottom": ["vertical-align", "baseline"], // *shrug* 23 24 "texttop": ["vertical-align", "text-top"], 25 "absmiddle": ["vertical-align", "middle"], 26 "abscenter": ["vertical-align", "middle"], 27 "absbottom": ["vertical-align", "bottom"], 28 }; 29 30 const kInitialValues = { 31 "vertical-align": "baseline", 32 "float": "none", 33 }; 34 35 let replaced = document.getElementById("replaced"); 36 let nonReplaced = document.getElementById("non-replaced"); 37 let t = async_test("align attribute mapping"); 38 onload = t.step_func_done(function() { 39 for (const attributeValue in kMapping) { 40 for (const element of [replaced, nonReplaced]) { 41 test(function() { 42 element.setAttribute("align", attributeValue); 43 let [property, expected] = kMapping[attributeValue]; 44 let actual = getComputedStyle(element).getPropertyValue(property); 45 if (element == nonReplaced) { 46 assert_equals(actual, kInitialValues[property], "align shouldn't map to non-replaced elements") 47 } else { 48 if (expected) { 49 assert_equals(actual, expected, `align=${attributeValue} should map to ${property}: ${expected}`); 50 } else { 51 assert_equals(property, "vertical-align"); 52 assert_not_equals(actual, "baseline", `align=${attributeValue} should map a vertical-align value`); 53 } 54 } 55 }, `align=${attributeValue} on ${element == replaced ? "replaced" : "non-replaced"} elements`); 56 } 57 } 58 }); 59 </script>