Port display interpolation to wpt

Both Chrome and Firefox pass

Bug: 900581
Change-Id: Ic686da5cf98667dd8c2be2e004c7f9b368a5d03d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1940871
Reviewed-by: Xida Chen <xidachen@chromium.org>
Commit-Queue: Hao Sheng <haozhes@chromium.org>
Cr-Commit-Position: refs/heads/master@{#719750}
diff --git a/css/css-display/animations/display-interpolation.html b/css/css-display/animations/display-interpolation.html
new file mode 100644
index 0000000..d0b1d95
--- /dev/null
+++ b/css/css-display/animations/display-interpolation.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>display interpolation</title>
+<link rel="help" href="https://www.w3.org/TR/CSS2/visuren.html#display-prop">
+<meta name="assert" content="display supports animation">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+
+<style>
+.target {
+  display: block;
+}
+</style>
+
+<body>
+<script>
+test_interpolation({
+  property: 'display',
+  from: 'none',
+  to: 'flex',
+  method: 'CSS Animations',
+}, [
+  {at: -0.3, expect: 'block'},
+  {at: 0, expect: 'block'},
+  {at: 0.3, expect: 'block'},
+  {at: 0.6, expect: 'block'},
+  {at: 1, expect: 'block'},
+  {at: 1.5, expect: 'block'},
+]);
+test_interpolation({
+  property: 'display',
+  from: 'none',
+  to: 'flex',
+  method: 'Web Animations',
+}, [
+  {at: -0.3, expect: 'block'},
+  {at: 0, expect: 'block'},
+  {at: 0.3, expect: 'block'},
+  {at: 0.6, expect: 'block'},
+  {at: 1, expect: 'block'},
+  {at: 1.5, expect: 'block'},
+]);
+</script>
+</body>