1 files changed, 59 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/align.html b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/align.html
new file mode 100644
index 0000000000..b5f3ec1aa6
--- /dev/null
+++ b/testing/web-platform/tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/align.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<title>align attribute mapping on replaced elements</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<img id="replaced" src="/images/green.png">
+<something id="non-replaced"></something>
+<script>
+const kMapping = {
+  "left": ["float", "left"],
+  "right": ["float", "right"],
+
+  "top": ["vertical-align", "top"],
+
+  // This one requires a magic value (`-moz-middle-with-baseline` on Gecko,
+  // `-webkit-baseline-middle` on WebKit-based browsers).
+  "middle": ["vertical-align", undefined],
+  // These are inconsistent across browsers. WebKit maps it to "middle", Gecko
+  // to the aforementioned value.
+  "center": ["vertical-align", undefined],
+
+  "baseline": ["vertical-align", "baseline"],
+  "bottom": ["vertical-align", "baseline"], // *shrug*
+
+  "texttop": ["vertical-align", "text-top"],
+  "absmiddle": ["vertical-align", "middle"],
+  "abscenter": ["vertical-align", "middle"],
+  "absbottom": ["vertical-align", "bottom"],
+};
+
+const kInitialValues = {
+  "vertical-align": "baseline",
+  "float": "none",
+};
+
+let replaced = document.getElementById("replaced");
+let nonReplaced = document.getElementById("non-replaced");
+let t = async_test("align attribute mapping");
+onload = t.step_func_done(function() {
+  for (const attributeValue in kMapping) {
+    for (const element of [replaced, nonReplaced]) {
+      test(function() {
+        element.setAttribute("align", attributeValue);
+        let [property, expected] = kMapping[attributeValue];
+        let actual = getComputedStyle(element).getPropertyValue(property);
+        if (element == nonReplaced) {
+          assert_equals(actual, kInitialValues[property], "align shouldn't map to non-replaced elements")
+        } else {
+          if (expected) {
+            assert_equals(actual, expected, `align=${attributeValue} should map to ${property}: ${expected}`);
+          } else {
+            assert_equals(property, "vertical-align");
+            assert_not_equals(actual, "baseline", `align=${attributeValue} should map a vertical-align value`);
+          }
+        }
+      }, `align=${attributeValue} on ${element == replaced ? "replaced" : "non-replaced"} elements`);
+    }
+  }
+});
+</script>