1 files changed, 51 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-backgrounds/background-position-xy-three-four-values-passthru.html b/testing/web-platform/tests/css/css-backgrounds/background-position-xy-three-four-values-passthru.html
new file mode 100644
index 0000000000..e504ecca7d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-backgrounds/background-position-xy-three-four-values-passthru.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+
+<title>CSS Test: 'Background-position' with three and four values</title>
+<link rel="help" href="http://www.w3.org/TR/css3-background/#background-position" />
+<meta name="assert" content="background-position-x/y will round-trip serialized values even if the new three/four value syntax is used for background-position." />
+<link rel="match" href="reference/background-position-three-four-values-ref.html">
+<style type="text/css">
+div {
+  width: 200px;
+  height: 200px;
+  border: 2px solid black;
+  background-image: url("support/blue_color.png");
+  background-repeat: no-repeat;
+  display: inline-block;
+}
+#test1  {
+  background-position: left 50px center;
+}
+#test2 {
+  background-position: right 25px top 75%;
+}
+#test3 {
+  background-position: left 25px bottom 75%;
+}
+#test4 {
+  background-position: right 25px bottom 25%;
+}
+</style>
+
+</head>
+<body>
+
+<div id="test1"></div>
+<div id="test2"></div>
+<div id="test3"></div>
+<div id="test4"></div>
+
+<script>
+for (let id of ['test1','test2','test3','test4']) {
+  let d = document.getElementById(id);
+  let x = getComputedStyle(d).backgroundPositionX;
+  let y = getComputedStyle(d).backgroundPositionY;
+  d.style.backgroundPositionX = x;
+  d.style.backgroundPositionY = y;
+}
+</script>
+
+</body>
+</html>
+\ No newline at end of file