CSS: WPTs for flex-* computed value
Test that computed values of the flex properties
are as specified.
Test that flex-basis computed value is non-negative.
Change-Id: I1640dc52f0b72c1cff686eb0d717ef0846bf50ba
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1614857
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Commit-Queue: Eric Willigers <ericwilligers@chromium.org>
Cr-Commit-Position: refs/heads/master@{#660305}
diff --git a/css/css-flexbox/parsing/flex-basis-computed.html b/css/css-flexbox/parsing/flex-basis-computed.html
new file mode 100644
index 0000000..79781dd
--- /dev/null
+++ b/css/css-flexbox/parsing/flex-basis-computed.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Flexible Box Layout: getComputedValue().flexBasis</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-basis">
+<meta name="assert" content="flex-basis computed value is as specified, with length made absolute.">
+<meta name="assert" content="flex-basis computed value is non-negative.">
+<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("flex-basis", "1px");
+test_computed_value("flex-basis", "calc(10px + 0.5em)", "30px");
+test_computed_value("flex-basis", "calc(10px - 0.5em)", "0px");
+test_computed_value("flex-basis", "400%");
+test_computed_value("flex-basis", "auto");
+</script>
+</body>
+</html>
diff --git a/css/css-flexbox/parsing/flex-direction-computed.html b/css/css-flexbox/parsing/flex-direction-computed.html
new file mode 100644
index 0000000..13b2f7e
--- /dev/null
+++ b/css/css-flexbox/parsing/flex-direction-computed.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Flexible Box Layout: getComputedValue().flexDirection</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-direction">
+<meta name="assert" content="flex-direction 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("flex-direction", "row");
+test_computed_value("flex-direction", "row-reverse");
+test_computed_value("flex-direction", "column");
+test_computed_value("flex-direction", "column-reverse");
+</script>
+</body>
+</html>
diff --git a/css/css-flexbox/parsing/flex-flow-computed.html b/css/css-flexbox/parsing/flex-flow-computed.html
new file mode 100644
index 0000000..cb4acbb
--- /dev/null
+++ b/css/css-flexbox/parsing/flex-flow-computed.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Animations: getComputedValue().flexFlow</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-flow">
+<meta name="assert" content="flex-flow 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("flex-flow", "column wrap-reverse");
+test_computed_value("flex-flow", "row-reverse wrap");
+</script>
+</body>
+</html>
diff --git a/css/css-flexbox/parsing/flex-grow-computed.html b/css/css-flexbox/parsing/flex-grow-computed.html
new file mode 100644
index 0000000..fa67446
--- /dev/null
+++ b/css/css-flexbox/parsing/flex-grow-computed.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Flexible Box Layout: getComputedValue().flexGrow</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-grow">
+<meta name="assert" content="flex-grow 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("flex-grow", "1");
+test_computed_value("flex-grow", "2.34e+06");
+test_computed_value("flex-grow", "6.78e+08");
+test_computed_value("flex-grow", "0");
+</script>
+</body>
+</html>
diff --git a/css/css-flexbox/parsing/flex-shrink-computed.html b/css/css-flexbox/parsing/flex-shrink-computed.html
new file mode 100644
index 0000000..299d622
--- /dev/null
+++ b/css/css-flexbox/parsing/flex-shrink-computed.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Flexible Box Layout: getComputedValue().flexShrink</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-shrink">
+<meta name="assert" content="flex-shrink 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("flex-shrink", "1");
+test_computed_value("flex-shrink", "2.34e+06");
+test_computed_value("flex-shrink", "6.78e+08");
+test_computed_value("flex-shrink", "0");
+</script>
+</body>
+</html>
diff --git a/css/css-flexbox/parsing/flex-wrap-computed.html b/css/css-flexbox/parsing/flex-wrap-computed.html
new file mode 100644
index 0000000..46df87f
--- /dev/null
+++ b/css/css-flexbox/parsing/flex-wrap-computed.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Flexible Box Layout: getComputedValue().flexWrap</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-wrap">
+<meta name="assert" content="flex-wrap 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("flex-wrap", "nowrap");
+test_computed_value("flex-wrap", "wrap");
+test_computed_value("flex-wrap", "wrap-reverse");
+</script>
+</body>
+</html>
