CSS: Parsing tests for background-position longhands

Inheritance, parsing and computed value tests for
background-position-x, background-position-y
https://drafts.csswg.org/css-backgrounds-4/#background-position-longhands

BUG=964885

Change-Id: I55630b41918557be536f28e3eb640bb3fc803c4f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1614007
Commit-Queue: Eric Willigers <ericwilligers@chromium.org>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#661315}
diff --git a/third_party/blink/web_tests/external/wpt/css/css-backgrounds/inheritance-expected.txt b/third_party/blink/web_tests/external/wpt/css/css-backgrounds/inheritance-expected.txt
index fabdb48..e4bce58 100644
--- a/third_party/blink/web_tests/external/wpt/css/css-backgrounds/inheritance-expected.txt
+++ b/third_party/blink/web_tests/external/wpt/css/css-backgrounds/inheritance-expected.txt
@@ -1,5 +1,5 @@
 This is a testharness.js-based test.
-Found 60 tests; 59 PASS, 1 FAIL, 0 TIMEOUT, 0 NOTRUN.
+Found 64 tests; 63 PASS, 1 FAIL, 0 TIMEOUT, 0 NOTRUN.
 PASS Property background-attachment has initial value scroll
 PASS Property background-attachment does not inherit
 PASS Property background-clip has initial value border-box
@@ -12,6 +12,10 @@
 PASS Property background-origin does not inherit
 PASS Property background-position has initial value 0% 0%
 PASS Property background-position does not inherit
+PASS Property background-position-x has initial value 0%
+PASS Property background-position-x does not inherit
+PASS Property background-position-y has initial value 0%
+PASS Property background-position-y does not inherit
 PASS Property background-repeat has initial value repeat
 PASS Property background-repeat does not inherit
 PASS Property background-size has initial value auto
diff --git a/third_party/blink/web_tests/external/wpt/css/css-backgrounds/inheritance.html b/third_party/blink/web_tests/external/wpt/css/css-backgrounds/inheritance.html
index 768b18a..fb8a69b 100644
--- a/third_party/blink/web_tests/external/wpt/css/css-backgrounds/inheritance.html
+++ b/third_party/blink/web_tests/external/wpt/css/css-backgrounds/inheritance.html
@@ -4,6 +4,7 @@
 <meta charset="utf-8">
 <title>Inheritance of CSS Backgrounds and Borders properties</title>
 <link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#property-index">
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#property-index">
 <meta name="assert" content="Properties inherit or not according to the spec.">
 <meta name="assert" content="Properties have initial values according to the spec.">
 <script src="/resources/testharness.js"></script>
@@ -42,6 +43,8 @@
 assert_not_inherited('background-image', 'none', 'url("https://example.com/")');
 assert_not_inherited('background-origin', 'padding-box', 'content-box');
 assert_not_inherited('background-position', '0% 0%', '10px 20px');
+assert_not_inherited('background-position-x', '0%', '10px');
+assert_not_inherited('background-position-y', '0%', '20px');
 assert_not_inherited('background-repeat', 'repeat', 'space round');
 assert_not_inherited('background-size', 'auto', 'contain');
 
diff --git a/third_party/blink/web_tests/external/wpt/css/css-backgrounds/parsing/background-position-x-computed-expected.txt b/third_party/blink/web_tests/external/wpt/css/css-backgrounds/parsing/background-position-x-computed-expected.txt
new file mode 100644
index 0000000..777dc05
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-backgrounds/parsing/background-position-x-computed-expected.txt
@@ -0,0 +1,18 @@
+This is a testharness.js-based test.
+PASS Property background-position-x value 'center' computes to '50%'
+PASS Property background-position-x value 'left' computes to '0%'
+PASS Property background-position-x value 'right' computes to '100%'
+FAIL Property background-position-x value 'x-start' computes to 'x-start' assert_equals: expected "x-start" but got "0%"
+FAIL Property background-position-x value 'x-end' computes to 'x-end' assert_equals: expected "x-end" but got "0%"
+PASS Property background-position-x value '-20%' computes to '-20%'
+PASS Property background-position-x value '10px' computes to '10px'
+PASS Property background-position-x value '0.5em' computes to '20px'
+PASS Property background-position-x value 'calc(10px - 0.5em)' computes to '-10px'
+FAIL Property background-position-x value 'left -20%' computes to '-20%' assert_equals: expected "-20%" but got "0%"
+FAIL Property background-position-x value 'right 10px' computes to 'calc(100% + 10px)' assert_equals: expected "calc(100% + 10px)" but got "0%"
+FAIL Property background-position-x value '-20%, 10px' computes to '-20%, 10px' assert_equals: expected "-20%, 10px" but got "-20%"
+FAIL Property background-position-x value 'center, left, right' computes to '50%, 0%, 100px' assert_equals: expected "50%, 0%, 100px" but got "50%"
+FAIL Property background-position-x value '0.5em, x-start, x-end' computes to '20px, x-start, x-end' assert_equals: expected "20px, x-start, x-end" but got "0%"
+FAIL Property background-position-x value 'calc(10px - 0.5em), left -20%, right 10px' computes to '-10px, -20%, calc(100% + 10px)' assert_equals: expected "-10px, -20%, calc(100% + 10px)" but got "0%"
+Harness: the test ran to completion.
+
diff --git a/third_party/blink/web_tests/external/wpt/css/css-backgrounds/parsing/background-position-x-computed.html b/third_party/blink/web_tests/external/wpt/css/css-backgrounds/parsing/background-position-x-computed.html
new file mode 100644
index 0000000..6e997c9
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-backgrounds/parsing/background-position-x-computed.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Backgrounds and Borders Module Level 4: getComputedValue().backgroundPositionX</title>
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-x">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+  #target {
+    font-size: 40px;
+  }
+</style>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("background-position-x", "center", "50%");
+test_computed_value("background-position-x", "left", "0%");
+test_computed_value("background-position-x", "right", "100%");
+test_computed_value("background-position-x", "x-start");
+test_computed_value("background-position-x", "x-end");
+test_computed_value("background-position-x", "-20%");
+test_computed_value("background-position-x", "10px");
+test_computed_value("background-position-x", "0.5em", "20px");
+test_computed_value("background-position-x", "calc(10px - 0.5em)", "-10px");
+test_computed_value("background-position-x", "left -20%", "-20%");
+test_computed_value("background-position-x", "right 10px", "calc(100% + 10px)");
+test_computed_value("background-position-x", "-20%, 10px");
+test_computed_value("background-position-x", "center, left, right", "50%, 0%, 100px");
+test_computed_value("background-position-x", "0.5em, x-start, x-end", "20px, x-start, x-end");
+test_computed_value("background-position-x", "calc(10px - 0.5em), left -20%, right 10px", "-10px, -20%, calc(100% + 10px)");
+</script>
+</body>
+</html>
diff --git a/third_party/blink/web_tests/external/wpt/css/css-backgrounds/parsing/background-position-x-invalid.html b/third_party/blink/web_tests/external/wpt/css/css-backgrounds/parsing/background-position-x-invalid.html
new file mode 100644
index 0000000..7cdfcf4
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-backgrounds/parsing/background-position-x-invalid.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Backgrounds and Borders Module Level 4: parsing background-position-x with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-x">
+<meta name="assert" content="background-position-x supports only the grammar '[ center | [ left | right | x-start | x-end ]? <length-percentage>? ]#'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("background-position-x", "top");
+test_invalid_value("background-position-x", "bottom");
+test_invalid_value("background-position-x", "y-start");
+test_invalid_value("background-position-x", "y-end");
+test_invalid_value("background-position-x", "center 10px");
+test_invalid_value("background-position-x", "20% left");
+test_invalid_value("background-position-x", "right left");
+test_invalid_value("background-position-x", "x-start center");
+test_invalid_value("background-position-x", "left, center right");
+</script>
+</body>
+</html>
diff --git a/third_party/blink/web_tests/external/wpt/css/css-backgrounds/parsing/background-position-x-valid-expected.txt b/third_party/blink/web_tests/external/wpt/css/css-backgrounds/parsing/background-position-x-valid-expected.txt
new file mode 100644
index 0000000..32c47f4
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-backgrounds/parsing/background-position-x-valid-expected.txt
@@ -0,0 +1,18 @@
+This is a testharness.js-based test.
+FAIL e.style['background-position-x'] = "center" should set the property value assert_equals: serialization should be canonical expected "center" but got "50%"
+FAIL e.style['background-position-x'] = "left" should set the property value assert_equals: serialization should be canonical expected "left" but got "0%"
+FAIL e.style['background-position-x'] = "right" should set the property value assert_equals: serialization should be canonical expected "right" but got "100%"
+FAIL e.style['background-position-x'] = "x-start" should set the property value assert_not_equals: property should be set got disallowed value ""
+FAIL e.style['background-position-x'] = "x-end" should set the property value assert_not_equals: property should be set got disallowed value ""
+PASS e.style['background-position-x'] = "-20%" should set the property value
+PASS e.style['background-position-x'] = "10px" should set the property value
+PASS e.style['background-position-x'] = "0.5em" should set the property value
+PASS e.style['background-position-x'] = "calc(10px - 0.5em)" should set the property value
+FAIL e.style['background-position-x'] = "left -20%" should set the property value assert_not_equals: property should be set got disallowed value ""
+FAIL e.style['background-position-x'] = "right 10px" should set the property value assert_not_equals: property should be set got disallowed value ""
+PASS e.style['background-position-x'] = "-20%, 10px" should set the property value
+FAIL e.style['background-position-x'] = "center, left, right" should set the property value assert_equals: serialization should be canonical expected "center, left, right" but got "50%, 0%, 100%"
+FAIL e.style['background-position-x'] = "0.5em, x-start, x-end" should set the property value assert_not_equals: property should be set got disallowed value ""
+FAIL e.style['background-position-x'] = "calc(10px - 0.5em), left -20%, right 10px" should set the property value assert_not_equals: property should be set got disallowed value ""
+Harness: the test ran to completion.
+
diff --git a/third_party/blink/web_tests/external/wpt/css/css-backgrounds/parsing/background-position-x-valid.html b/third_party/blink/web_tests/external/wpt/css/css-backgrounds/parsing/background-position-x-valid.html
new file mode 100644
index 0000000..282d7d2
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-backgrounds/parsing/background-position-x-valid.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Backgrounds and Borders Module Level 4: parsing background-position-x with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-x">
+<meta name="assert" content="background-position-x supports the full grammar '[ center | [ left | right | x-start | x-end ]? <length-percentage>? ]#'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("background-position-x", "center");
+test_valid_value("background-position-x", "left");
+test_valid_value("background-position-x", "right");
+test_valid_value("background-position-x", "x-start");
+test_valid_value("background-position-x", "x-end");
+test_valid_value("background-position-x", "-20%");
+test_valid_value("background-position-x", "10px");
+test_valid_value("background-position-x", "0.5em");
+test_valid_value("background-position-x", "calc(10px - 0.5em)");
+test_valid_value("background-position-x", "left -20%");
+test_valid_value("background-position-x", "right 10px");
+test_valid_value("background-position-x", "-20%, 10px");
+test_valid_value("background-position-x", "center, left, right");
+test_valid_value("background-position-x", "0.5em, x-start, x-end");
+test_valid_value("background-position-x", "calc(10px - 0.5em), left -20%, right 10px");
+</script>
+</body>
+</html>
diff --git a/third_party/blink/web_tests/external/wpt/css/css-backgrounds/parsing/background-position-y-computed-expected.txt b/third_party/blink/web_tests/external/wpt/css/css-backgrounds/parsing/background-position-y-computed-expected.txt
new file mode 100644
index 0000000..86634ba
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-backgrounds/parsing/background-position-y-computed-expected.txt
@@ -0,0 +1,18 @@
+This is a testharness.js-based test.
+PASS Property background-position-y value 'center' computes to '50%'
+PASS Property background-position-y value 'top' computes to '0%'
+PASS Property background-position-y value 'bottom' computes to '100%'
+FAIL Property background-position-y value 'y-start' computes to 'y-start' assert_equals: expected "y-start" but got "0%"
+FAIL Property background-position-y value 'y-end' computes to 'y-end' assert_equals: expected "y-end" but got "0%"
+PASS Property background-position-y value '-20%' computes to '-20%'
+PASS Property background-position-y value '10px' computes to '10px'
+PASS Property background-position-y value '0.5em' computes to '20px'
+PASS Property background-position-y value 'calc(10px - 0.5em)' computes to '-10px'
+FAIL Property background-position-y value 'top -20%' computes to '-20%' assert_equals: expected "-20%" but got "0%"
+FAIL Property background-position-y value 'bottom 10px' computes to 'calc(100% + 10px)' assert_equals: expected "calc(100% + 10px)" but got "0%"
+FAIL Property background-position-y value '-20%, 10px' computes to '-20%, 10px' assert_equals: expected "-20%, 10px" but got "-20%"
+FAIL Property background-position-y value 'center, top, bottom' computes to '50%, 0%, 100px' assert_equals: expected "50%, 0%, 100px" but got "50%"
+FAIL Property background-position-y value '0.5em, y-start, y-end' computes to '20px, y-start, y-end' assert_equals: expected "20px, y-start, y-end" but got "0%"
+FAIL Property background-position-y value 'calc(10px - 0.5em), top -20%, bottom 10px' computes to '-10px, -20%, calc(100% + 10px)' assert_equals: expected "-10px, -20%, calc(100% + 10px)" but got "0%"
+Harness: the test ran to completion.
+
diff --git a/third_party/blink/web_tests/external/wpt/css/css-backgrounds/parsing/background-position-y-computed.html b/third_party/blink/web_tests/external/wpt/css/css-backgrounds/parsing/background-position-y-computed.html
new file mode 100644
index 0000000..ceff11f
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-backgrounds/parsing/background-position-y-computed.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Backgrounds and Borders Module Level 4: getComputedValue().backgroundPositionY</title>
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-y">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+  #target {
+    font-size: 40px;
+  }
+</style>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("background-position-y", "center", "50%");
+test_computed_value("background-position-y", "top", "0%");
+test_computed_value("background-position-y", "bottom", "100%");
+test_computed_value("background-position-y", "y-start");
+test_computed_value("background-position-y", "y-end");
+test_computed_value("background-position-y", "-20%");
+test_computed_value("background-position-y", "10px");
+test_computed_value("background-position-y", "0.5em", "20px");
+test_computed_value("background-position-y", "calc(10px - 0.5em)", "-10px");
+test_computed_value("background-position-y", "top -20%", "-20%");
+test_computed_value("background-position-y", "bottom 10px", "calc(100% + 10px)");
+test_computed_value("background-position-y", "-20%, 10px");
+test_computed_value("background-position-y", "center, top, bottom", "50%, 0%, 100px");
+test_computed_value("background-position-y", "0.5em, y-start, y-end", "20px, y-start, y-end");
+test_computed_value("background-position-y", "calc(10px - 0.5em), top -20%, bottom 10px", "-10px, -20%, calc(100% + 10px)");
+</script>
+</body>
+</html>
diff --git a/third_party/blink/web_tests/external/wpt/css/css-backgrounds/parsing/background-position-y-invalid.html b/third_party/blink/web_tests/external/wpt/css/css-backgrounds/parsing/background-position-y-invalid.html
new file mode 100644
index 0000000..7885b14
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-backgrounds/parsing/background-position-y-invalid.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Backgrounds and Borders Module Level 4: parsing background-position-y with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-y">
+<meta name="assert" content="background-position-y supports only the grammar '[ center | [ top | bottom | y-start | y-end ]? <length-percentage>? ]#'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("background-position-y", "left");
+test_invalid_value("background-position-y", "right");
+test_invalid_value("background-position-y", "x-start");
+test_invalid_value("background-position-y", "x-end");
+test_invalid_value("background-position-y", "center 10px");
+test_invalid_value("background-position-y", "20% top");
+test_invalid_value("background-position-y", "bottom top");
+test_invalid_value("background-position-y", "y-start center");
+test_invalid_value("background-position-y", "top, center bottom");
+</script>
+</body>
+</html>
diff --git a/third_party/blink/web_tests/external/wpt/css/css-backgrounds/parsing/background-position-y-valid-expected.txt b/third_party/blink/web_tests/external/wpt/css/css-backgrounds/parsing/background-position-y-valid-expected.txt
new file mode 100644
index 0000000..b3a864b
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-backgrounds/parsing/background-position-y-valid-expected.txt
@@ -0,0 +1,18 @@
+This is a testharness.js-based test.
+FAIL e.style['background-position-y'] = "center" should set the property value assert_equals: serialization should be canonical expected "center" but got "50%"
+FAIL e.style['background-position-y'] = "top" should set the property value assert_equals: serialization should be canonical expected "top" but got "0%"
+FAIL e.style['background-position-y'] = "bottom" should set the property value assert_equals: serialization should be canonical expected "bottom" but got "100%"
+FAIL e.style['background-position-y'] = "y-start" should set the property value assert_not_equals: property should be set got disallowed value ""
+FAIL e.style['background-position-y'] = "y-end" should set the property value assert_not_equals: property should be set got disallowed value ""
+PASS e.style['background-position-y'] = "-20%" should set the property value
+PASS e.style['background-position-y'] = "10px" should set the property value
+PASS e.style['background-position-y'] = "0.5em" should set the property value
+PASS e.style['background-position-y'] = "calc(10px - 0.5em)" should set the property value
+FAIL e.style['background-position-y'] = "top -20%" should set the property value assert_not_equals: property should be set got disallowed value ""
+FAIL e.style['background-position-y'] = "bottom 10px" should set the property value assert_not_equals: property should be set got disallowed value ""
+PASS e.style['background-position-y'] = "-20%, 10px" should set the property value
+FAIL e.style['background-position-y'] = "center, top, bottom" should set the property value assert_equals: serialization should be canonical expected "center, top, bottom" but got "50%, 0%, 100%"
+FAIL e.style['background-position-y'] = "0.5em, y-start, y-end" should set the property value assert_not_equals: property should be set got disallowed value ""
+FAIL e.style['background-position-y'] = "calc(10px - 0.5em), top -20%, bottom 10px" should set the property value assert_not_equals: property should be set got disallowed value ""
+Harness: the test ran to completion.
+
diff --git a/third_party/blink/web_tests/external/wpt/css/css-backgrounds/parsing/background-position-y-valid.html b/third_party/blink/web_tests/external/wpt/css/css-backgrounds/parsing/background-position-y-valid.html
new file mode 100644
index 0000000..1413a2e
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-backgrounds/parsing/background-position-y-valid.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Backgrounds and Borders Module Level 4: parsing background-position-y with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-y">
+<meta name="assert" content="background-position-y supports the full grammar '[ center | [ top | bottom | y-start | y-end ]? <length-percentage>? ]#'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("background-position-y", "center");
+test_valid_value("background-position-y", "top");
+test_valid_value("background-position-y", "bottom");
+test_valid_value("background-position-y", "y-start");
+test_valid_value("background-position-y", "y-end");
+test_valid_value("background-position-y", "-20%");
+test_valid_value("background-position-y", "10px");
+test_valid_value("background-position-y", "0.5em");
+test_valid_value("background-position-y", "calc(10px - 0.5em)");
+test_valid_value("background-position-y", "top -20%");
+test_valid_value("background-position-y", "bottom 10px");
+test_valid_value("background-position-y", "-20%, 10px");
+test_valid_value("background-position-y", "center, top, bottom");
+test_valid_value("background-position-y", "0.5em, y-start, y-end");
+test_valid_value("background-position-y", "calc(10px - 0.5em), top -20%, bottom 10px");
+</script>
+</body>
+</html>