Bug 1510061 [wpt PR 14240] - CSS: WPTs for Positioned Layout parsing, a=testonly
authorEric Willigers <ericwilligers@chromium.org>
Fri, 30 Nov 2018 18:04:46 +0000
changeset 450024 fa55ea9ce7054a01995d553c1dd67c482e047353
parent 450023 a70bc74ff257120b88932b096b97d5ff4f6e43fa
child 450025 bbdf0c639e0894bcb296769140508e1234e44c4d
push id110435
push userjames@hoppipolla.co.uk
push dateTue, 11 Dec 2018 15:53:47 +0000
treeherdermozilla-inbound@add833a587f5 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1510061, 14240, 1350409, 611349
milestone66.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1510061 [wpt PR 14240] - CSS: WPTs for Positioned Layout parsing, a=testonly Automatic update from web-platform-tests CSS: WPTs for Positioned Layout parsing Test parsing and computed value for https://drafts.csswg.org/css-position/ - bottom left right top - position - z-index - inset-after inset-before inset-end inset-start (not currently implemented) Change-Id: I586271fe584fadb19e5683a2781c32142fd9001a Reviewed-on: https://chromium-review.googlesource.com/c/1350409 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Eric Willigers <ericwilligers@chromium.org> Cr-Commit-Position: refs/heads/master@{#611349} -- wpt-commits: 09972ca7bd566c05f4451b5dda4678e28850a563 wpt-pr: 14240
testing/web-platform/tests/css/css-position/parsing/bottom-computed.html
testing/web-platform/tests/css/css-position/parsing/bottom-invalid.html
testing/web-platform/tests/css/css-position/parsing/bottom-valid.html
testing/web-platform/tests/css/css-position/parsing/inset-after-computed.html
testing/web-platform/tests/css/css-position/parsing/inset-after-invalid.html
testing/web-platform/tests/css/css-position/parsing/inset-after-valid.html
testing/web-platform/tests/css/css-position/parsing/inset-before-computed.html
testing/web-platform/tests/css/css-position/parsing/inset-before-invalid.html
testing/web-platform/tests/css/css-position/parsing/inset-before-valid.html
testing/web-platform/tests/css/css-position/parsing/inset-end-computed.html
testing/web-platform/tests/css/css-position/parsing/inset-end-invalid.html
testing/web-platform/tests/css/css-position/parsing/inset-end-valid.html
testing/web-platform/tests/css/css-position/parsing/inset-start-computed.html
testing/web-platform/tests/css/css-position/parsing/inset-start-invalid.html
testing/web-platform/tests/css/css-position/parsing/inset-start-valid.html
testing/web-platform/tests/css/css-position/parsing/left-computed.html
testing/web-platform/tests/css/css-position/parsing/left-invalid.html
testing/web-platform/tests/css/css-position/parsing/left-valid.html
testing/web-platform/tests/css/css-position/parsing/position-computed.html
testing/web-platform/tests/css/css-position/parsing/position-invalid.html
testing/web-platform/tests/css/css-position/parsing/position-valid.html
testing/web-platform/tests/css/css-position/parsing/right-computed.html
testing/web-platform/tests/css/css-position/parsing/right-invalid.html
testing/web-platform/tests/css/css-position/parsing/right-valid.html
testing/web-platform/tests/css/css-position/parsing/top-computed.html
testing/web-platform/tests/css/css-position/parsing/top-invalid.html
testing/web-platform/tests/css/css-position/parsing/top-valid.html
testing/web-platform/tests/css/css-position/parsing/z-index-computed.html
testing/web-platform/tests/css/css-position/parsing/z-index-invalid.html
testing/web-platform/tests/css/css-position/parsing/z-index-valid.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/parsing/bottom-computed.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Positioned Layout Module Level 3: getComputedValue().bottom</title>
+<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-bottom">
+<meta name="assert" content="bottom lengths are made absolute.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<style>
+  #target {
+    font-size: 40px;
+  }
+</style>
+<script>
+test_computed_value("bottom", "auto");
+
+test_computed_value("bottom", "calc(10px + 0.5em)", "30px");
+test_computed_value("bottom", "calc(10px - 0.5em)", "-10px");
+test_computed_value("bottom", "-40%");
+test_computed_value("bottom", "calc(50% + 60px)");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/parsing/bottom-invalid.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Positioned Layout Module Level 3: parsing bottom with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-bottom">
+<meta name="assert" content="bottom supports only the grammar 'auto | <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("bottom", "min-content");
+
+test_invalid_value("bottom", "60");
+test_invalid_value("bottom", "10px 20%");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/parsing/bottom-valid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Positioned Layout Module Level 3: parsing bottom with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-bottom">
+<meta name="assert" content="bottom supports the full grammar 'auto | <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("bottom", "auto");
+
+test_valid_value("bottom", "-10px");
+test_valid_value("bottom", "-20%");
+test_valid_value("bottom", "calc(2em + 3ex)");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/parsing/inset-after-computed.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Positioned Layout Module Level 3: getComputedValue().insetAfter</title>
+<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-after">
+<meta name="assert" content="inset-after lengths are made absolute.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<style>
+  #target {
+    font-size: 40px;
+  }
+</style>
+<script>
+test_computed_value("inset-after", "auto");
+
+test_computed_value("inset-after", "calc(10px + 0.5em)", "30px");
+test_computed_value("inset-after", "calc(10px - 0.5em)", "-10px");
+test_computed_value("inset-after", "-40%");
+test_computed_value("inset-after", "calc(50% + 60px)");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/parsing/inset-after-invalid.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Positioned Layout Module Level 3: parsing inset-after with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-after">
+<meta name="assert" content="inset-after supports only the grammar 'auto | <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("inset-after", "min-content");
+
+test_invalid_value("inset-after", "60");
+test_invalid_value("inset-after", "10px 20%");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/parsing/inset-after-valid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Positioned Layout Module Level 3: parsing inset-after with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-after">
+<meta name="assert" content="inset-after supports the full grammar 'auto | <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("inset-after", "auto");
+
+test_valid_value("inset-after", "-10px");
+test_valid_value("inset-after", "-20%");
+test_valid_value("inset-after", "calc(2em + 3ex)");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/parsing/inset-before-computed.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Positioned Layout Module Level 3: getComputedValue().insetBefore</title>
+<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-before">
+<meta name="assert" content="inset-before lengths are made absolute.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<style>
+  #target {
+    font-size: 40px;
+  }
+</style>
+<script>
+test_computed_value("inset-before", "auto");
+
+test_computed_value("inset-before", "calc(10px + 0.5em)", "30px");
+test_computed_value("inset-before", "calc(10px - 0.5em)", "-10px");
+test_computed_value("inset-before", "-40%");
+test_computed_value("inset-before", "calc(50% + 60px)");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/parsing/inset-before-invalid.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Positioned Layout Module Level 3: parsing inset-before with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-before">
+<meta name="assert" content="inset-before supports only the grammar 'auto | <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("inset-before", "min-content");
+
+test_invalid_value("inset-before", "60");
+test_invalid_value("inset-before", "10px 20%");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/parsing/inset-before-valid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Positioned Layout Module Level 3: parsing inset-before with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-before">
+<meta name="assert" content="inset-before supports the full grammar 'auto | <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("inset-before", "auto");
+
+test_valid_value("inset-before", "-10px");
+test_valid_value("inset-before", "-20%");
+test_valid_value("inset-before", "calc(2em + 3ex)");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/parsing/inset-end-computed.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Positioned Layout Module Level 3: getComputedValue().insetEnd</title>
+<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-end">
+<meta name="assert" content="inset-end lengths are made absolute.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<style>
+  #target {
+    font-size: 40px;
+  }
+</style>
+<script>
+test_computed_value("inset-end", "auto");
+
+test_computed_value("inset-end", "calc(10px + 0.5em)", "30px");
+test_computed_value("inset-end", "calc(10px - 0.5em)", "-10px");
+test_computed_value("inset-end", "-40%");
+test_computed_value("inset-end", "calc(50% + 60px)");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/parsing/inset-end-invalid.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Positioned Layout Module Level 3: parsing inset-end with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-end">
+<meta name="assert" content="inset-end supports only the grammar 'auto | <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("inset-end", "min-content");
+
+test_invalid_value("inset-end", "60");
+test_invalid_value("inset-end", "10px 20%");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/parsing/inset-end-valid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Positioned Layout Module Level 3: parsing inset-end with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-end">
+<meta name="assert" content="inset-end supports the full grammar 'auto | <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("inset-end", "auto");
+
+test_valid_value("inset-end", "-10px");
+test_valid_value("inset-end", "-20%");
+test_valid_value("inset-end", "calc(2em + 3ex)");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/parsing/inset-start-computed.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Positioned Layout Module Level 3: getComputedValue().insetStart</title>
+<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-start">
+<meta name="assert" content="inset-start lengths are made absolute.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<style>
+  #target {
+    font-size: 40px;
+  }
+</style>
+<script>
+test_computed_value("inset-start", "auto");
+
+test_computed_value("inset-start", "calc(10px + 0.5em)", "30px");
+test_computed_value("inset-start", "calc(10px - 0.5em)", "-10px");
+test_computed_value("inset-start", "-40%");
+test_computed_value("inset-start", "calc(50% + 60px)");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/parsing/inset-start-invalid.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Positioned Layout Module Level 3: parsing inset-start with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-start">
+<meta name="assert" content="inset-start supports only the grammar 'auto | <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("inset-start", "min-content");
+
+test_invalid_value("inset-start", "60");
+test_invalid_value("inset-start", "10px 20%");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/parsing/inset-start-valid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Positioned Layout Module Level 3: parsing inset-start with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-inset-start">
+<meta name="assert" content="inset-start supports the full grammar 'auto | <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("inset-start", "auto");
+
+test_valid_value("inset-start", "-10px");
+test_valid_value("inset-start", "-20%");
+test_valid_value("inset-start", "calc(2em + 3ex)");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/parsing/left-computed.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Positioned Layout Module Level 3: getComputedValue().left</title>
+<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-left">
+<meta name="assert" content="left lengths are made absolute.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<style>
+  #target {
+    font-size: 40px;
+  }
+</style>
+<script>
+test_computed_value("left", "auto");
+
+test_computed_value("left", "calc(10px + 0.5em)", "30px");
+test_computed_value("left", "calc(10px - 0.5em)", "-10px");
+test_computed_value("left", "-40%");
+test_computed_value("left", "calc(50% + 60px)");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/parsing/left-invalid.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Positioned Layout Module Level 3: parsing left with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-left">
+<meta name="assert" content="left supports only the grammar 'auto | <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("left", "min-content");
+
+test_invalid_value("left", "60");
+test_invalid_value("left", "10px 20%");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/parsing/left-valid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Positioned Layout Module Level 3: parsing left with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-left">
+<meta name="assert" content="left supports the full grammar 'auto | <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("left", "auto");
+
+test_valid_value("left", "-10px");
+test_valid_value("left", "-20%");
+test_valid_value("left", "calc(2em + 3ex)");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/parsing/position-computed.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Positioned Layout Module Level 3: getComputedValue().position</title>
+<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-position">
+<meta name="assert" content="position computed value is as specified.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("position", "static");
+test_computed_value("position", "relative");
+test_computed_value("position", "absolute");
+test_computed_value("position", "sticky");
+test_computed_value("position", "fixed");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/parsing/position-invalid.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Positioned Layout Module Level 3: parsing position with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-position">
+<meta name="assert" content="position supports only the grammar 'static | relative | absolute | sticky | fixed'.">
+<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("position", "auto");
+test_invalid_value("position", "static relative");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/parsing/position-valid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Positioned Layout Module Level 3: parsing position with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-position">
+<meta name="assert" content="position supports the full grammar 'static | relative | absolute | sticky | fixed'.">
+<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("position", "static");
+test_valid_value("position", "relative");
+test_valid_value("position", "absolute");
+test_valid_value("position", "sticky");
+test_valid_value("position", "fixed");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/parsing/right-computed.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Positioned Layout Module Level 3: getComputedValue().right</title>
+<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-right">
+<meta name="assert" content="right lengths are made absolute.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<style>
+  #target {
+    font-size: 40px;
+  }
+</style>
+<script>
+test_computed_value("right", "auto");
+
+test_computed_value("right", "calc(10px + 0.5em)", "30px");
+test_computed_value("right", "calc(10px - 0.5em)", "-10px");
+test_computed_value("right", "-40%");
+test_computed_value("right", "calc(50% + 60px)");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/parsing/right-invalid.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Positioned Layout Module Level 3: parsing right with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-right">
+<meta name="assert" content="right supports only the grammar 'auto | <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("right", "min-content");
+
+test_invalid_value("right", "60");
+test_invalid_value("right", "10px 20%");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/parsing/right-valid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Positioned Layout Module Level 3: parsing right with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-right">
+<meta name="assert" content="right supports the full grammar 'auto | <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("right", "auto");
+
+test_valid_value("right", "-10px");
+test_valid_value("right", "-20%");
+test_valid_value("right", "calc(2em + 3ex)");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/parsing/top-computed.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Positioned Layout Module Level 3: getComputedValue().top</title>
+<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-top">
+<meta name="assert" content="top lengths are made absolute.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<style>
+  #target {
+    font-size: 40px;
+  }
+</style>
+<script>
+test_computed_value("top", "auto");
+
+test_computed_value("top", "calc(10px + 0.5em)", "30px");
+test_computed_value("top", "calc(10px - 0.5em)", "-10px");
+test_computed_value("top", "-40%");
+test_computed_value("top", "calc(50% + 60px)");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/parsing/top-invalid.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Positioned Layout Module Level 3: parsing top with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-top">
+<meta name="assert" content="top supports only the grammar 'auto | <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("top", "min-content");
+
+test_invalid_value("top", "60");
+test_invalid_value("top", "10px 20%");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/parsing/top-valid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Positioned Layout Module Level 3: parsing top with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-top">
+<meta name="assert" content="top supports the full grammar 'auto | <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("top", "auto");
+
+test_valid_value("top", "-10px");
+test_valid_value("top", "-20%");
+test_valid_value("top", "calc(2em + 3ex)");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/parsing/z-index-computed.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Positioned Layout Module Level 3: getComputedValue().zIndex</title>
+<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-z-index">
+<meta name="assert" content="z-index computed value is the keyword auto or an integer.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<style>
+  #target {
+    position: absolute;
+  }
+</style>
+<script>
+test_computed_value("z-index", "auto");
+test_computed_value("z-index", "-1");
+test_computed_value("z-index", "calc(3 - 2)", "1");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/parsing/z-index-invalid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Positioned Layout Module Level 3: parsing z-index with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-z-index">
+<meta name="assert" content="z-index supports only the grammar 'auto | <integer>'.">
+<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("z-index", "none");
+test_invalid_value("z-index", "10px");
+test_invalid_value("z-index", "0.5");
+test_invalid_value("z-index", "calc(0.5)");
+
+test_invalid_value("z-index", "auto 123");
+</script>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/parsing/z-index-valid.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Positioned Layout Module Level 3: parsing z-index with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-position/#propdef-z-index">
+<meta name="assert" content="z-index supports the full grammar 'auto | <integer>'.">
+<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("z-index", "auto");
+
+test_valid_value("z-index", "-789");
+test_valid_value("z-index", "0");
+test_valid_value("z-index", "123");
+</script>
+</body>
+</html>