From 26a029d407be480d791972afb5975cf62c9360a6 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Fri, 19 Apr 2024 02:47:55 +0200
Subject: Adding upstream version 124.0.1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 testing/web-platform/tests/compat/META.yml         |  5 ++
 .../css-style-declaration-alias-enumeration.html   | 70 +++++++++++++++++++++
 testing/web-platform/tests/compat/green-ref.html   |  6 ++
 testing/web-platform/tests/compat/historical.html  | 18 ++++++
 .../web-platform/tests/compat/idlharness.window.js | 18 ++++++
 .../compat/webkit-background-origin-text-ref.html  |  6 ++
 .../compat/webkit-background-origin-text.html      | 19 ++++++
 .../compat/webkit-box-clamp-bottom-border-ref.html | 12 ++++
 .../compat/webkit-box-clamp-bottom-border.html     | 18 ++++++
 .../webkit-box-clamp-visibility-change-ref.html    | 24 +++++++
 .../compat/webkit-box-clamp-visibility-change.html | 34 ++++++++++
 .../tests/compat/webkit-box-fieldset-ref.html      |  5 ++
 .../tests/compat/webkit-box-fieldset.html          |  6 ++
 .../compat/webkit-box-fixed-position-child.html    | 17 +++++
 ...webkit-box-horizontal-reverse-variants-ref.html | 73 ++++++++++++++++++++++
 .../webkit-box-horizontal-reverse-variants.html    | 70 +++++++++++++++++++++
 .../webkit-box-horizontal-rtl-variants-ref.html    | 72 +++++++++++++++++++++
 .../compat/webkit-box-horizontal-rtl-variants.html | 69 ++++++++++++++++++++
 .../tests/compat/webkit-box-ignore-box-pack.html   | 25 ++++++++
 ...it-box-removing-triggering-anonymous-merge.html | 15 +++++
 .../tests/compat/webkit-box-rtl-flex-ref.html      | 24 +++++++
 .../tests/compat/webkit-box-rtl-flex.html          | 26 ++++++++
 .../compat/webkit-box-vertically-centered.html     | 22 +++++++
 .../tests/compat/webkit-gradient-comma.html        | 15 +++++
 ...webkit-linear-gradient-diff-unprefixed-ref.html | 11 ++++
 .../webkit-linear-gradient-diff-unprefixed.html    | 18 ++++++
 .../compat/webkit-linear-gradient-line-bottom.html | 23 +++++++
 .../compat/webkit-linear-gradient-line-left.html   | 23 +++++++
 .../compat/webkit-linear-gradient-line-right.html  | 23 +++++++
 .../compat/webkit-linear-gradient-line-top.html    | 23 +++++++
 .../tests/compat/webkit-mask-box-enumeration.html  | 25 ++++++++
 .../tests/compat/webkit-radial-gradient-radii.html | 21 +++++++
 .../webkit-text-fill-color-currentColor.html       | 19 ++++++
 .../webkit-text-fill-color-property-001-ref.html   |  6 ++
 .../webkit-text-fill-color-property-001a.html      |  9 +++
 .../webkit-text-fill-color-property-001b.html      |  9 +++
 .../webkit-text-fill-color-property-001c.html      |  9 +++
 .../webkit-text-fill-color-property-001d.html      |  9 +++
 .../webkit-text-fill-color-property-002-ref.html   | 25 ++++++++
 .../webkit-text-fill-color-property-002.html       | 29 +++++++++
 .../webkit-text-fill-color-property-003-ref.html   | 28 +++++++++
 .../webkit-text-fill-color-property-003.html       | 35 +++++++++++
 .../webkit-text-fill-color-property-004-ref.html   | 34 ++++++++++
 .../webkit-text-fill-color-property-004.html       | 38 +++++++++++
 .../webkit-text-fill-color-property-005-ref.html   | 15 +++++
 .../webkit-text-fill-color-property-005.html       | 19 ++++++
 .../webkit-text-fill-color-property-006-ref.html   | 25 ++++++++
 .../webkit-text-fill-color-property-006.html       | 29 +++++++++
 48 files changed, 1174 insertions(+)
 create mode 100644 testing/web-platform/tests/compat/META.yml
 create mode 100644 testing/web-platform/tests/compat/css-style-declaration-alias-enumeration.html
 create mode 100644 testing/web-platform/tests/compat/green-ref.html
 create mode 100644 testing/web-platform/tests/compat/historical.html
 create mode 100644 testing/web-platform/tests/compat/idlharness.window.js
 create mode 100644 testing/web-platform/tests/compat/webkit-background-origin-text-ref.html
 create mode 100644 testing/web-platform/tests/compat/webkit-background-origin-text.html
 create mode 100644 testing/web-platform/tests/compat/webkit-box-clamp-bottom-border-ref.html
 create mode 100644 testing/web-platform/tests/compat/webkit-box-clamp-bottom-border.html
 create mode 100644 testing/web-platform/tests/compat/webkit-box-clamp-visibility-change-ref.html
 create mode 100644 testing/web-platform/tests/compat/webkit-box-clamp-visibility-change.html
 create mode 100644 testing/web-platform/tests/compat/webkit-box-fieldset-ref.html
 create mode 100644 testing/web-platform/tests/compat/webkit-box-fieldset.html
 create mode 100644 testing/web-platform/tests/compat/webkit-box-fixed-position-child.html
 create mode 100644 testing/web-platform/tests/compat/webkit-box-horizontal-reverse-variants-ref.html
 create mode 100644 testing/web-platform/tests/compat/webkit-box-horizontal-reverse-variants.html
 create mode 100644 testing/web-platform/tests/compat/webkit-box-horizontal-rtl-variants-ref.html
 create mode 100644 testing/web-platform/tests/compat/webkit-box-horizontal-rtl-variants.html
 create mode 100644 testing/web-platform/tests/compat/webkit-box-ignore-box-pack.html
 create mode 100644 testing/web-platform/tests/compat/webkit-box-removing-triggering-anonymous-merge.html
 create mode 100644 testing/web-platform/tests/compat/webkit-box-rtl-flex-ref.html
 create mode 100644 testing/web-platform/tests/compat/webkit-box-rtl-flex.html
 create mode 100644 testing/web-platform/tests/compat/webkit-box-vertically-centered.html
 create mode 100644 testing/web-platform/tests/compat/webkit-gradient-comma.html
 create mode 100644 testing/web-platform/tests/compat/webkit-linear-gradient-diff-unprefixed-ref.html
 create mode 100644 testing/web-platform/tests/compat/webkit-linear-gradient-diff-unprefixed.html
 create mode 100644 testing/web-platform/tests/compat/webkit-linear-gradient-line-bottom.html
 create mode 100644 testing/web-platform/tests/compat/webkit-linear-gradient-line-left.html
 create mode 100644 testing/web-platform/tests/compat/webkit-linear-gradient-line-right.html
 create mode 100644 testing/web-platform/tests/compat/webkit-linear-gradient-line-top.html
 create mode 100644 testing/web-platform/tests/compat/webkit-mask-box-enumeration.html
 create mode 100644 testing/web-platform/tests/compat/webkit-radial-gradient-radii.html
 create mode 100644 testing/web-platform/tests/compat/webkit-text-fill-color-currentColor.html
 create mode 100644 testing/web-platform/tests/compat/webkit-text-fill-color-property-001-ref.html
 create mode 100644 testing/web-platform/tests/compat/webkit-text-fill-color-property-001a.html
 create mode 100644 testing/web-platform/tests/compat/webkit-text-fill-color-property-001b.html
 create mode 100644 testing/web-platform/tests/compat/webkit-text-fill-color-property-001c.html
 create mode 100644 testing/web-platform/tests/compat/webkit-text-fill-color-property-001d.html
 create mode 100644 testing/web-platform/tests/compat/webkit-text-fill-color-property-002-ref.html
 create mode 100644 testing/web-platform/tests/compat/webkit-text-fill-color-property-002.html
 create mode 100644 testing/web-platform/tests/compat/webkit-text-fill-color-property-003-ref.html
 create mode 100644 testing/web-platform/tests/compat/webkit-text-fill-color-property-003.html
 create mode 100644 testing/web-platform/tests/compat/webkit-text-fill-color-property-004-ref.html
 create mode 100644 testing/web-platform/tests/compat/webkit-text-fill-color-property-004.html
 create mode 100644 testing/web-platform/tests/compat/webkit-text-fill-color-property-005-ref.html
 create mode 100644 testing/web-platform/tests/compat/webkit-text-fill-color-property-005.html
 create mode 100644 testing/web-platform/tests/compat/webkit-text-fill-color-property-006-ref.html
 create mode 100644 testing/web-platform/tests/compat/webkit-text-fill-color-property-006.html

(limited to 'testing/web-platform/tests/compat')

diff --git a/testing/web-platform/tests/compat/META.yml b/testing/web-platform/tests/compat/META.yml
new file mode 100644
index 0000000000..f2aec22ba3
--- /dev/null
+++ b/testing/web-platform/tests/compat/META.yml
@@ -0,0 +1,5 @@
+spec: https://compat.spec.whatwg.org/
+suggested_reviewers:
+  - cdumez
+  - foolip
+  - miketaylr
diff --git a/testing/web-platform/tests/compat/css-style-declaration-alias-enumeration.html b/testing/web-platform/tests/compat/css-style-declaration-alias-enumeration.html
new file mode 100644
index 0000000000..8244afd29d
--- /dev/null
+++ b/testing/web-platform/tests/compat/css-style-declaration-alias-enumeration.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<title>Aliases enumerated on CSSStyleDeclaration</title>
+<link rel="help" href="https://compat.spec.whatwg.org/#css-simple-aliases">
+<meta name="assert" content="This test verifies that aliases are enumerated on CSSStyleDeclaration" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+</body>
+<script>
+const PREFIXED_PROPS = [
+  'webkitAlignContent',
+  'webkitAlignItems',
+  'webkitAlignSelf',
+  'webkitAnimation',
+  'webkitAnimationDelay',
+  'webkitAnimationDirection',
+  'webkitAnimationDuration',
+  'webkitAnimationFillMode',
+  'webkitAnimationIterationCount',
+  'webkitAnimationName',
+  'webkitAnimationPlayState',
+  'webkitAnimationTimingFunction',
+  'webkitBackfaceVisibility',
+  'WebKitBackgroundClip',
+  'webkitBackgroundOrigin',
+  'webkitBackgroundSize',
+  'webkitBorderBottomLeftRadius',
+  'webkitBorderBottomRightRadius',
+  'webkitBorderRadius',
+  'webkitBorderTopLeftRadius',
+  'webkitBorderTopRightRadius',
+  'webkitBoxShadow',
+  'webkitBoxSizing',
+  'webkitFilter',
+  'webkitFlex',
+  'webkitFlexBasis',
+  'webkitFlexDirection',
+  'webkitFlexFlow',
+  'webkitFlexGrow',
+  'webkitFlexShrink',
+  'webkitFlexWrap',
+  'webkitJustifyContent',
+  'webkitMask',
+  'webkitMaskClip',
+  'webkitMaskComposite',
+  'webkitMaskImage',
+  'webkitMaskOrigin',
+  'webkitMaskPosition',
+  'webkitMaskRepeat',
+  'webkitMaskSize',
+  'webkitOrder',
+  'webkitPerspective',
+  'webkitPerspectiveOrigin',
+  'webkitTransform',
+  'webkitTransformOrigin',
+  'webkitTransformStyle',
+  'webkitTransition',
+  'webkitTransitionDelay',
+  'webkitTransitionDuration',
+  'webkitTransitionProperty',
+  'webkitTransitionTimingFunction',
+];
+
+const docBodyStyle = document.body.style;
+for (let prop of PREFIXED_PROPS) {
+  test(() => {
+    assert_true(prop in docBodyStyle);
+  }, `${prop} found on CSSStyleDeclaration`);
+}
+</script>
diff --git a/testing/web-platform/tests/compat/green-ref.html b/testing/web-platform/tests/compat/green-ref.html
new file mode 100644
index 0000000000..2671ff6ddd
--- /dev/null
+++ b/testing/web-platform/tests/compat/green-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>A green 100x100 block</title>
+<link rel="author" title="Xidorn Quan" href="me@upsuper.ort">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<div style="width: 100px; height: 100px; background: green;"></div>
diff --git a/testing/web-platform/tests/compat/historical.html b/testing/web-platform/tests/compat/historical.html
new file mode 100644
index 0000000000..a1d80f9fe8
--- /dev/null
+++ b/testing/web-platform/tests/compat/historical.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<title>Historical non-standard features</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="log"></div>
+<script>
+test(function() {
+  assert_false("getMatchedCSSRules" in window);
+}, "getMatchedCSSRules() should not exist");
+
+test(function() {
+  assert_false("webkitHidden" in window);
+}, "webkitHidden should not exist");
+
+test(function() {
+  assert_false("webkitVisibilityState" in window);
+}, "webkitVisibilityState should not exist");
+</script>
diff --git a/testing/web-platform/tests/compat/idlharness.window.js b/testing/web-platform/tests/compat/idlharness.window.js
new file mode 100644
index 0000000000..8cb73acbde
--- /dev/null
+++ b/testing/web-platform/tests/compat/idlharness.window.js
@@ -0,0 +1,18 @@
+// META: script=/resources/WebIDLParser.js
+// META: script=/resources/idlharness.js
+// META: timeout=long
+
+'use strict';
+
+// https://compat.spec.whatwg.org/
+
+idl_test(
+  ['compat'],
+  ['html', 'dom'],
+  idl_array => {
+    idl_array.add_objects({
+      Window: ['window'],
+      HTMLBodyElement: ['document.body'],
+    });
+  }
+);
diff --git a/testing/web-platform/tests/compat/webkit-background-origin-text-ref.html b/testing/web-platform/tests/compat/webkit-background-origin-text-ref.html
new file mode 100644
index 0000000000..d1f183874c
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-background-origin-text-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>webkit-background-origin should not accept text as value</title>
+<link rel="author" title="Rob Buis" href="rob.buis@chromium.org">
+<p>There should be a green square below and no red.</p>
+<div style="width: 100px; height: 100px; background-color: green"></div>
diff --git a/testing/web-platform/tests/compat/webkit-background-origin-text.html b/testing/web-platform/tests/compat/webkit-background-origin-text.html
new file mode 100644
index 0000000000..38dfbc86ba
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-background-origin-text.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>webkit-background-origin should not accept text as value</title>
+<link rel="author" title="Rob Buis" href="rob.buis@chromium.org">
+<link rel="match" href="webkit-background-origin-text-ref.html">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-4400">
+<style>
+#target {
+  width: 0px;
+  background-image: linear-gradient(green, green 50%, red 50%, red);
+  background-size: 200px 200px;
+  background-origin: border-box;
+  -webkit-background-origin: text;
+  padding: 25px;
+  border: 25px solid transparent;
+}
+</style>
+<p>There should be a green square below and no red.</p>
+<div id="target"></div>
diff --git a/testing/web-platform/tests/compat/webkit-box-clamp-bottom-border-ref.html b/testing/web-platform/tests/compat/webkit-box-clamp-bottom-border-ref.html
new file mode 100644
index 0000000000..c759c4c7d7
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-box-clamp-bottom-border-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<style>
+  #wb {
+    white-space: pre;
+    border-bottom: red 14px solid;
+  }
+</style>
+<p>Line-clamp should respect bottom-border.
+<p id="wb">Line 1
+Line 2
+Line 3&#x2026;
+</p>
diff --git a/testing/web-platform/tests/compat/webkit-box-clamp-bottom-border.html b/testing/web-platform/tests/compat/webkit-box-clamp-bottom-border.html
new file mode 100644
index 0000000000..f133335e79
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-box-clamp-bottom-border.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<link rel="match" href="webkit-box-clamp-bottom-border-ref.html">
+<style>
+  #wb {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+    white-space: pre;
+    border-bottom: red 14px solid;
+  }
+</style>
+<p>Line-clamp should respect bottom-border.
+<div id="wb">Line 1
+Line 2
+Line 3
+Line 4
+</div>
diff --git a/testing/web-platform/tests/compat/webkit-box-clamp-visibility-change-ref.html b/testing/web-platform/tests/compat/webkit-box-clamp-visibility-change-ref.html
new file mode 100644
index 0000000000..20ec3bfaf8
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-box-clamp-visibility-change-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<link rel="help" href="https://crbug.com/1015987">
+<style>
+  #wb {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 3;
+      overflow: hidden;
+  }
+</style>
+<p>Line-clamp should be respected after removing and changing visibility.
+<div id="root" style="border: solid; width: 200px;">
+  <div id="container">
+    <p id="wb">
+      text text text text
+      text text text text
+      text text text text
+      text text text text
+      text text text text
+      text text text text
+      text text text text
+    </p>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/compat/webkit-box-clamp-visibility-change.html b/testing/web-platform/tests/compat/webkit-box-clamp-visibility-change.html
new file mode 100644
index 0000000000..115fa43665
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-box-clamp-visibility-change.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<link rel="help" href="https://crbug.com/1015987">
+<link rel="match" href="webkit-box-clamp-visibility-change-ref.html">
+<style>
+  #wb {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 3;
+      overflow: hidden;
+  }
+</style>
+<p>Line-clamp should be respected after removing and changing visibility.
+<div id="root" style="border: solid; width: 200px;">
+  <div id="container">
+    <p id="wb">
+      text text text text
+      text text text text
+      text text text text
+      text text text text
+      text text text text
+      text text text text
+      text text text text
+    </p>
+  </div>
+</div>
+<script>
+  const container = document.getElementById('container');
+  const root = document.getElementById('root');
+  container.remove();
+  container.style.visibility = 'hidden';
+  root.appendChild(container);
+  document.body.offsetTop;
+  container.style.visibility = '';
+</script>
diff --git a/testing/web-platform/tests/compat/webkit-box-fieldset-ref.html b/testing/web-platform/tests/compat/webkit-box-fieldset-ref.html
new file mode 100644
index 0000000000..b5d7176150
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-box-fieldset-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<p>Fieldset should contain a green div spanning the width.
+<fieldset>
+  <div id="child" style="background:green; height:10px"></div>
+</fieldset>
diff --git a/testing/web-platform/tests/compat/webkit-box-fieldset.html b/testing/web-platform/tests/compat/webkit-box-fieldset.html
new file mode 100644
index 0000000000..c3a2e64c11
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-box-fieldset.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<link rel="match" href="webkit-box-fieldset-ref.html">
+<p>Fieldset should contain a green div spanning the width.
+<fieldset style="display: -webkit-box">
+  <div id="child" style="background:green; height:10px"></div>
+</fieldset>
diff --git a/testing/web-platform/tests/compat/webkit-box-fixed-position-child.html b/testing/web-platform/tests/compat/webkit-box-fixed-position-child.html
new file mode 100644
index 0000000000..bb61b63133
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-box-fixed-position-child.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<title>Verifies changing 'display' with a fixed position webkit-box that
+  has a fixed position child</title>
+<body>
+  <div id="outer" style="position:fixed;">
+  <div style="display:-webkit-box; float:left; padding-left:100%;">
+    <div style="position:fixed; width:100px; height:100px;"></div>
+  </div>
+  <div style="display:inline-block; width:100px; height:20px;"></div>
+</div>
+<div id="elm"></div>
+A
+</body>
+<script>
+  document.body.offsetTop;
+  elm.style.display = 'none';
+</script>
diff --git a/testing/web-platform/tests/compat/webkit-box-horizontal-reverse-variants-ref.html b/testing/web-platform/tests/compat/webkit-box-horizontal-reverse-variants-ref.html
new file mode 100644
index 0000000000..72d0b2c6f6
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-box-horizontal-reverse-variants-ref.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<style>
+.flexbox {
+  width: 300px;
+  display: flex;
+  border-style: solid;
+  border-width: 1px 2px 1px 4px;
+}
+
+.reverse {
+  flex-direction: row-reverse;
+}
+
+.redbox {
+  background: red;
+  width: 100px;
+  flex-shrink: 0;
+}
+
+.greenbox {
+  background: green;
+  width: 100px;
+  flex-shrink: 0;
+}
+
+</style>
+<p>Exercises -webkit-box with various box-pack settings when direction is
+   reverse. In all cases the order of letters in the boxes should be
+   alphabetized left to right.
+<p>Start. Boxes should be aligned to left side.
+<div class="flexbox reverse" style="justify-content: flex-end;">
+  <div class="redbox">B</div>
+  <div class="greenbox">A</div>
+</div>
+
+<p>Centered. Boxes should be centered.
+<div class="flexbox reverse" style="justify-content: center;">
+  <div class="redbox">B</div>
+  <div class="greenbox">A</div>
+</div>
+
+<p>End. Boxes should be aligned to right side.
+<div class="flexbox reverse">
+  <div class="redbox">B</div>
+  <div class="greenbox">A</div>
+</div>
+
+<p>Start, content too big. Boxes should start at left edge and extend
+   outside border.
+<div class="flexbox">
+  <div class="greenbox">A</div>
+  <div class="redbox">B</div>
+  <div class="greenbox">C</div>
+  <div class="redbox">D</div>
+</div>
+
+<p>Center, content too big. Boxes should start at left edge and extend
+   outside border.
+<div class="flexbox">
+  <div class="greenbox">A</div>
+  <div class="redbox">B</div>
+  <div class="greenbox">C</div>
+  <div class="redbox">D</div>
+</div>
+
+<p>End, content too big. Boxes should start at left edge and extend
+   outside border.
+<div class="flexbox">
+  <div class="greenbox">A</div>
+  <div class="redbox">B</div>
+  <div class="greenbox">C</div>
+  <div class="redbox">D</div>
+</div>
diff --git a/testing/web-platform/tests/compat/webkit-box-horizontal-reverse-variants.html b/testing/web-platform/tests/compat/webkit-box-horizontal-reverse-variants.html
new file mode 100644
index 0000000000..09dba694f2
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-box-horizontal-reverse-variants.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<link rel="help" href="https://crbug.com/1034461">
+<link rel="match" href="webkit-box-horizontal-reverse-variants-ref.html">
+<style>
+.webkitbox {
+  width: 300px;
+  display: -webkit-box;
+  -webkit-box-direction: reverse;
+  border-style: solid;
+  border-width: 1px 2px 1px 4px;
+}
+
+.redbox {
+  background: red;
+  width: 100px;
+}
+
+.greenbox {
+  background: green;
+  width: 100px;
+}
+
+</style>
+<p>Exercises -webkit-box with various box-pack settings when direction is
+   reverse. In all cases the order of letters in the boxes should be
+   alphabetized left to right.
+<p>Start. Boxes should be aligned to left side.
+<div class="webkitbox">
+  <div class="redbox">B</div>
+  <div class="greenbox">A</div>
+</div>
+
+<p>Centered. Boxes should be centered.
+<div class="webkitbox" style="-webkit-box-pack: center">
+  <div class="redbox">B</div>
+  <div class="greenbox">A</div>
+</div>
+
+<p>End. Boxes should be aligned to right side.
+<div class="webkitbox" style="-webkit-box-pack: end">
+  <div class="redbox">B</div>
+  <div class="greenbox">A</div>
+</div>
+
+<p>Start, content too big. Boxes should start at left edge and extend
+   outside border.
+<div class="webkitbox">
+  <div class="redbox">D</div>
+  <div class="greenbox">C</div>
+  <div class="redbox">B</div>
+  <div class="greenbox">A</div>
+</div>
+
+<p>Center, content too big. Boxes should start at left edge and extend
+   outside border.
+<div class="webkitbox" style="-webkit-box-pack: center">
+  <div class="redbox">D</div>
+  <div class="greenbox">C</div>
+  <div class="redbox">B</div>
+  <div class="greenbox">A</div>
+</div>
+
+<p>End, content too big. Boxes should start at left edge and extend
+   outside border.
+<div class="webkitbox" style="-webkit-box-pack: end">
+  <div class="redbox">D</div>
+  <div class="greenbox">C</div>
+  <div class="redbox">B</div>
+  <div class="greenbox">A</div>
+</div>
diff --git a/testing/web-platform/tests/compat/webkit-box-horizontal-rtl-variants-ref.html b/testing/web-platform/tests/compat/webkit-box-horizontal-rtl-variants-ref.html
new file mode 100644
index 0000000000..42321c5069
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-box-horizontal-rtl-variants-ref.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<style>
+.flexbox {
+  width: 300px;
+  display: flex;
+  border-style: solid;
+  border-width: 1px 2px 1px 4px;
+}
+
+.rtl {
+  direction: rtl;
+}
+
+.redbox {
+  background: red;
+  width: 100px;
+  flex-shrink: 0;
+}
+
+.greenbox {
+  background: green;
+  width: 100px;
+  flex-shrink: 0;
+}
+
+</style>
+<p>Exercises -webkit-box with various box-pack settings when rtl. In all cases
+   the order of letters in the boxes should be alphabetized left to right.
+<p>Start. Boxes should be aligned to right side.
+<div class="flexbox rtl">
+  <div class="redbox">B</div>
+  <div class="greenbox">A</div>
+</div>
+
+<p>Centered. Boxes should be centered.
+<div class="flexbox rtl" style="justify-content: center;">
+  <div class="redbox">B</div>
+  <div class="greenbox">A</div>
+</div>
+
+<p>End. Boxes should be aligned to left side.
+<div class="flexbox rtl" style="justify-content: flex-end;">
+  <div class="redbox">B</div>
+  <div class="greenbox">A</div>
+</div>
+
+<p>Start, content too big. Boxes should start at left edge and extend
+   outside border.
+<div class="flexbox">
+  <div class="greenbox rtl">A</div>
+  <div class="redbox rtl">B</div>
+  <div class="greenbox rtl">C</div>
+  <div class="redbox rtl">D</div>
+</div>
+
+<p>Center, content too big. Boxes should start at left edge and extend
+   outside border.
+<div class="flexbox">
+  <div class="greenbox rtl">A</div>
+  <div class="redbox rtl">B</div>
+  <div class="greenbox rtl">C</div>
+  <div class="redbox rtl">D</div>
+</div>
+
+<p>End, content too big. Boxes should start at left edge and extend
+   outside border.
+<div class="flexbox">
+  <div class="greenbox rtl">A</div>
+  <div class="redbox rtl">B</div>
+  <div class="greenbox rtl">C</div>
+  <div class="redbox rtl">D</div>
+</div>
diff --git a/testing/web-platform/tests/compat/webkit-box-horizontal-rtl-variants.html b/testing/web-platform/tests/compat/webkit-box-horizontal-rtl-variants.html
new file mode 100644
index 0000000000..085a5899bc
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-box-horizontal-rtl-variants.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<link rel="help" href="https://crbug.com/1034461">
+<link rel="match" href="webkit-box-horizontal-rtl-variants-ref.html">
+<style>
+.webkitbox {
+  width: 300px;
+  display: -webkit-box;
+  direction: rtl;
+  border-style: solid;
+  border-width: 1px 2px 1px 4px;
+}
+
+.redbox {
+  background: red;
+  width: 100px;
+}
+
+.greenbox {
+  background: green;
+  width: 100px;
+}
+
+</style>
+<p>Exercises -webkit-box with various box-pack settings when rtl. In all cases
+   the order of letters in the boxes should be alphabetized left to right.
+<p>Start. Boxes should be aligned to right side.
+<div class="webkitbox">
+  <div class="redbox">B</div>
+  <div class="greenbox">A</div>
+</div>
+
+<p>Centered. Boxes should be centered.
+<div class="webkitbox" style="-webkit-box-pack: center">
+  <div class="redbox">B</div>
+  <div class="greenbox">A</div>
+</div>
+
+<p>End. Boxes should be aligned to left side.
+<div class="webkitbox" style="-webkit-box-pack: end">
+  <div class="redbox">B</div>
+  <div class="greenbox">A</div>
+</div>
+
+<p>Start, content too big. Boxes should start at left edge and extend
+   outside border.
+<div class="webkitbox">
+  <div class="redbox">D</div>
+  <div class="greenbox">C</div>
+  <div class="redbox">B</div>
+  <div class="greenbox">A</div>
+</div>
+
+<p>Center, content too big. Boxes should start at left edge and extend
+   outside border.
+<div class="webkitbox" style="-webkit-box-pack: center">
+  <div class="redbox">D</div>
+  <div class="greenbox">C</div>
+  <div class="redbox">B</div>
+  <div class="greenbox">A</div>
+</div>
+
+<p>End, content too big. Boxes should start at left edge and extend
+   outside border.
+<div class="webkitbox" style="-webkit-box-pack: end">
+  <div class="redbox">D</div>
+  <div class="greenbox">C</div>
+  <div class="redbox">B</div>
+  <div class="greenbox">A</div>
+</div>
diff --git a/testing/web-platform/tests/compat/webkit-box-ignore-box-pack.html b/testing/web-platform/tests/compat/webkit-box-ignore-box-pack.html
new file mode 100644
index 0000000000..80b52fbf1f
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-box-ignore-box-pack.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+#outer {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-box-pack: center;
+  width: 100px;
+  height: 100px;
+}
+#inner {
+  width: 100px;
+  height: 200px;
+}
+</style>
+<div id="outer">
+  <div id="inner"></div>
+</div>
+<script>
+  test(function() {
+    var child = document.getElementById("inner");
+    assert_greater_than(child.offsetTop, 0);
+  }, "Child should be positioned at y-offset greater than 0 if children exceed bounds of parent");
+</script>
diff --git a/testing/web-platform/tests/compat/webkit-box-removing-triggering-anonymous-merge.html b/testing/web-platform/tests/compat/webkit-box-removing-triggering-anonymous-merge.html
new file mode 100644
index 0000000000..30c243b301
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-box-removing-triggering-anonymous-merge.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div style="display: -webkit-box">
+  <span><div></div></span>
+  <div id="target"></div>
+  text
+</div>
+<script>
+test(function() {
+  // Force a layout before removing.
+  document.body.offsetTop;
+  document.getElementById('target').remove();
+}, '-webkit-box: removal of child');
+</script>
diff --git a/testing/web-platform/tests/compat/webkit-box-rtl-flex-ref.html b/testing/web-platform/tests/compat/webkit-box-rtl-flex-ref.html
new file mode 100644
index 0000000000..10b9eb73fd
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-box-rtl-flex-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<style>
+#flexbox {
+  width: 500px;
+  display: flex;
+  direction: rtl;
+}
+
+#redbox {
+  background: red;
+  flex: 1;
+}
+
+#greenbox {
+  background: green;
+  flex: 1;
+}
+
+</style>
+<p>There should be a green box followed by a red box, both on the same line.
+<div id="flexbox">
+  <div id="redbox">A</div>
+  <div id="greenbox">B</div>
+</div>
diff --git a/testing/web-platform/tests/compat/webkit-box-rtl-flex.html b/testing/web-platform/tests/compat/webkit-box-rtl-flex.html
new file mode 100644
index 0000000000..d20b3a0a9d
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-box-rtl-flex.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<link rel="help" href="https://crbug.com/1034461">
+<link rel="match" href="webkit-box-rtl-flex-ref.html">
+<style>
+#webkitbox {
+  width: 500px;
+  display: -webkit-box;
+  direction: rtl;
+}
+
+#redbox {
+  background: red;
+  -webkit-box-flex: 1;
+}
+
+#greenbox {
+  background: green;
+  -webkit-box-flex: 1;
+}
+
+</style>
+<p>There should be a green box followed by a red box, both on the same line.
+<div id="webkitbox">
+  <div id="redbox">A</div>
+  <div id="greenbox">B</div>
+</div>
diff --git a/testing/web-platform/tests/compat/webkit-box-vertically-centered.html b/testing/web-platform/tests/compat/webkit-box-vertically-centered.html
new file mode 100644
index 0000000000..4932274e90
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-box-vertically-centered.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+#wb {
+  display: -webkit-box;
+  -webkit-box-align: center;
+  -webkit-box-orient: vertical;
+}
+</style>
+<div id="wb">
+  <span id="t">text</span>
+</div>
+<script>
+  test(function() {
+    var child = document.getElementById("t");
+    var webkitBox = document.getElementById("wb");
+    // |webkitBox| should be centered, this at least ensures it's not left
+    // aligned.
+    assert_greater_than(child.offsetLeft, webkitBox.offsetLeft);
+  }, "Child in vertically centered webkit-box is centered");
+</script>
diff --git a/testing/web-platform/tests/compat/webkit-gradient-comma.html b/testing/web-platform/tests/compat/webkit-gradient-comma.html
new file mode 100644
index 0000000000..b288a9a43f
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-gradient-comma.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<link rel="help" href="https://compat.spec.whatwg.org/#css-gradients-webkit-radial-gradient">
+<link rel="help" href="https://www.w3.org/TR/css3-images/#radial-gradients">
+<meta name="assert" content="Negative radii values are invalid.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+test(function() {
+    assert_true(CSS.supports("background-image", "-webkit-radial-gradient(1px 2px, 3% 4%, red, blue)"));
+}, '-webkit-radial-gradient accepts comma before color stops.');
+
+test(function() {
+    assert_false(CSS.supports("background-image", "-webkit-radial-gradient(1px 2px, 3% 4% red, blue)"));
+}, '-webkit-radial-gradient rejects missing comma before color stops.');
+</script>
diff --git a/testing/web-platform/tests/compat/webkit-linear-gradient-diff-unprefixed-ref.html b/testing/web-platform/tests/compat/webkit-linear-gradient-diff-unprefixed-ref.html
new file mode 100644
index 0000000000..96c2089d65
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-linear-gradient-diff-unprefixed-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<title>Compatibility Test Reference</title>
+<style>
+  #square {
+    height: 100px;
+    width: 100px;
+    background-image: linear-gradient(to bottom, orange, blue);
+  }
+</style>
+<p>You should see a square, orange at the top, blue at the bottom.</p>
+<div id="square"></div>
diff --git a/testing/web-platform/tests/compat/webkit-linear-gradient-diff-unprefixed.html b/testing/web-platform/tests/compat/webkit-linear-gradient-diff-unprefixed.html
new file mode 100644
index 0000000000..ee49dc4e15
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-linear-gradient-diff-unprefixed.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>Compatibility Test: -webkit-linear-gradient() diff with linear-gradient()</title>
+<link rel="help" href="https://compat.spec.whatwg.org/#css-gradients-webkit-linear-gradient">
+<link rel="match" href="webkit-linear-gradient-diff-unprefixed-ref.html">
+<style>
+  #square {
+    height: 100px;
+    width: 100px;
+  }
+</style>
+<p>You should see a square, orange at the top, blue at the bottom.</p>
+<div id="square"></div>
+<script>
+  square.offsetTop;
+  square.style.backgroundImage = "-webkit-linear-gradient(bottom, orange, blue)";
+  square.offsetTop;
+  square.style.backgroundImage = "linear-gradient(to bottom, orange, blue)";
+</script>
diff --git a/testing/web-platform/tests/compat/webkit-linear-gradient-line-bottom.html b/testing/web-platform/tests/compat/webkit-linear-gradient-line-bottom.html
new file mode 100644
index 0000000000..8e840f1025
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-linear-gradient-line-bottom.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<title>-webkit-linear-gradient(bottom)</title>
+<link rel="author" title="Xidorn Quan" href="me@upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://compat.spec.whatwg.org/#css-gradients-webkit-linear-gradient">
+<meta name="assert" content="'bottom' in -webkit-linear-gradient is equivalent to 'to top' in modern syntax">
+<link rel="match" href="green-ref.html">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-4400">
+<style>
+  #outer {
+    width: 100px;
+    height: 100px;
+    overflow: hidden;
+  }
+  #inner {
+    width: 100px;
+    height: 200px;
+    background-image: -webkit-linear-gradient(bottom, red 50%, green 50%);
+  }
+</style>
+<div id="outer">
+  <div id="inner"></div>
+</div>
diff --git a/testing/web-platform/tests/compat/webkit-linear-gradient-line-left.html b/testing/web-platform/tests/compat/webkit-linear-gradient-line-left.html
new file mode 100644
index 0000000000..22c2e0b04c
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-linear-gradient-line-left.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<title>-webkit-linear-gradient(left)</title>
+<link rel="author" title="Xidorn Quan" href="me@upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://compat.spec.whatwg.org/#css-gradients-webkit-linear-gradient">
+<meta name="assert" content="'left' in -webkit-linear-gradient is equivalent to 'to right' in modern syntax">
+<link rel="match" href="green-ref.html">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-4400">
+<style>
+  #outer {
+    width: 100px;
+    height: 100px;
+    overflow: hidden;
+  }
+  #inner {
+    width: 200px;
+    height: 100px;
+    background-image: -webkit-linear-gradient(left, green 50%, red 50%);
+  }
+</style>
+<div id="outer">
+  <div id="inner"></div>
+</div>
diff --git a/testing/web-platform/tests/compat/webkit-linear-gradient-line-right.html b/testing/web-platform/tests/compat/webkit-linear-gradient-line-right.html
new file mode 100644
index 0000000000..68e129d39e
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-linear-gradient-line-right.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<title>-webkit-linear-gradient(right)</title>
+<link rel="author" title="Xidorn Quan" href="me@upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://compat.spec.whatwg.org/#css-gradients-webkit-linear-gradient">
+<meta name="assert" content="'right' in -webkit-linear-gradient is equivalent to 'to left' in modern syntax">
+<link rel="match" href="green-ref.html">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-4400">
+<style>
+  #outer {
+    width: 100px;
+    height: 100px;
+    overflow: hidden;
+  }
+  #inner {
+    width: 200px;
+    height: 100px;
+    background-image: -webkit-linear-gradient(right, red 50%, green 50%);
+  }
+</style>
+<div id="outer">
+  <div id="inner"></div>
+</div>
diff --git a/testing/web-platform/tests/compat/webkit-linear-gradient-line-top.html b/testing/web-platform/tests/compat/webkit-linear-gradient-line-top.html
new file mode 100644
index 0000000000..61d205a700
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-linear-gradient-line-top.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<title>-webkit-linear-gradient(top)</title>
+<link rel="author" title="Xidorn Quan" href="me@upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://compat.spec.whatwg.org/#css-gradients-webkit-linear-gradient">
+<meta name="assert" content="'top' in -webkit-linear-gradient is equivalent to 'to bottom' in modern syntax">
+<link rel="match" href="green-ref.html">
+<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-4400">
+<style>
+  #outer {
+    width: 100px;
+    height: 100px;
+    overflow: hidden;
+  }
+  #inner {
+    width: 100px;
+    height: 200px;
+    background-image: -webkit-linear-gradient(top, green 50%, red 50%);
+  }
+</style>
+<div id="outer">
+  <div id="inner"></div>
+</div>
diff --git a/testing/web-platform/tests/compat/webkit-mask-box-enumeration.html b/testing/web-platform/tests/compat/webkit-mask-box-enumeration.html
new file mode 100644
index 0000000000..048170262a
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-mask-box-enumeration.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>WebKitMaxBoxImage on CSSStyleDeclaration</title>
+<link rel="help" href="https://compat.spec.whatwg.org/#css-simple-aliases">
+<meta name="assert" content="This test verifies that these WebKit properties are enumerated on CSSStyleDeclaration" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+</body>
+<script>
+const PREFIXED_PROPS = [
+  'webkitMaskBoxImage',
+  'webkitMaskBoxImageOutset',
+  'webkitMaskBoxImageRepeat',
+  'webkitMaskBoxImageSlice',
+  'webkitMaskBoxImageSource',
+  'webkitMaskBoxImageWidth',
+];
+
+const docBodyStyle = document.body.style;
+for (let prop of PREFIXED_PROPS) {
+  test(() => {
+    assert_true(prop in docBodyStyle);
+  }, `${prop} found on CSSStyleDeclaration`);
+}
+</script>
\ No newline at end of file
diff --git a/testing/web-platform/tests/compat/webkit-radial-gradient-radii.html b/testing/web-platform/tests/compat/webkit-radial-gradient-radii.html
new file mode 100644
index 0000000000..f34e352318
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-radial-gradient-radii.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<link rel="help" href="https://compat.spec.whatwg.org/#css-gradients-webkit-radial-gradient">
+<link rel="help" href="https://www.w3.org/TR/css3-images/#radial-gradients">
+<meta name="assert" content="Negative radii values are invalid.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+test(function() {
+    assert_true(CSS.supports("background-image", "-webkit-radial-gradient(1px 2px, 3% 4%, red, blue)"));
+}, '-webkit-radial-gradient accepts positive radii.');
+
+test(function() {
+    assert_true(CSS.supports("background-image", "-webkit-radial-gradient(1px 2px, 0% 4%, red, blue)"));
+}, '-webkit-radial-gradient accepts zero radii.');
+
+test(function() {
+    assert_false(CSS.supports("background-image", "-webkit-radial-gradient(1px 2px, -3% 4%, red, blue)"));
+    assert_false(CSS.supports("background-image", "-webkit-radial-gradient(1px 2px, 3% -4%, red, blue)"));
+    assert_false(CSS.supports("background-image", "-webkit-radial-gradient(1px 2px, -3% -4%, red, blue)"));
+}, '-webkit-radial-gradient rejects negative radii.');
+</script>
diff --git a/testing/web-platform/tests/compat/webkit-text-fill-color-currentColor.html b/testing/web-platform/tests/compat/webkit-text-fill-color-currentColor.html
new file mode 100644
index 0000000000..9b89781f9f
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-text-fill-color-currentColor.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<title>Test that currentColor is not affected by -webkit-text-fill-color</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<p id="target" style="text-decoration-color: currentColor; color: blue; -webkit-text-fill-color: red;"></p>
+<script>
+test(function() {
+  var target = document.getElementById("target");
+  var cs = window.getComputedStyle(target, null);
+
+  var textDecorationColor = cs.getPropertyValue('text-decoration-color');
+  var color = cs.getPropertyValue('color');
+  var webkiTextFillColor = cs.getPropertyValue('-webkit-text-fill-color');
+
+  assert_equals(textDecorationColor, color);
+  assert_not_equals(textDecorationColor, webkiTextFillColor);
+});
+
+</script>
\ No newline at end of file
diff --git a/testing/web-platform/tests/compat/webkit-text-fill-color-property-001-ref.html b/testing/web-platform/tests/compat/webkit-text-fill-color-property-001-ref.html
new file mode 100644
index 0000000000..8d9b8cc22e
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-text-fill-color-property-001-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>webkit-text-fill-color: untouched</title>
+<link rel="author" title="Jeremy Chen" href="jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<div style="color: green">These texts should be green</div>
diff --git a/testing/web-platform/tests/compat/webkit-text-fill-color-property-001a.html b/testing/web-platform/tests/compat/webkit-text-fill-color-property-001a.html
new file mode 100644
index 0000000000..363f5608ef
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-text-fill-color-property-001a.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>webkit-text-fill-color: green</title>
+<link rel="author" title="Jeremy Chen" href="jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://compat.spec.whatwg.org/#the-webkit-text-fill-color">
+<meta name="assert" content="The color of texts should be green">
+<link rel="match" href="webkit-text-fill-color-property-001-ref.html">
+<div style="-webkit-text-fill-color: green;">These texts should be green</div>
diff --git a/testing/web-platform/tests/compat/webkit-text-fill-color-property-001b.html b/testing/web-platform/tests/compat/webkit-text-fill-color-property-001b.html
new file mode 100644
index 0000000000..3b9a68cf77
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-text-fill-color-property-001b.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>webkit-text-fill-color: green</title>
+<link rel="author" title="Jeremy Chen" href="jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://compat.spec.whatwg.org/#the-webkit-text-fill-color">
+<meta name="assert" content="The color of texts should be green">
+<link rel="match" href="webkit-text-fill-color-property-001-ref.html">
+<div style="color: red; -webkit-text-fill-color: green;">These texts should be green</div>
diff --git a/testing/web-platform/tests/compat/webkit-text-fill-color-property-001c.html b/testing/web-platform/tests/compat/webkit-text-fill-color-property-001c.html
new file mode 100644
index 0000000000..54d6007623
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-text-fill-color-property-001c.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>webkit-text-fill-color: green</title>
+<link rel="author" title="Jeremy Chen" href="jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://compat.spec.whatwg.org/#the-webkit-text-fill-color">
+<meta name="assert" content="The color of texts should be green">
+<link rel="match" href="webkit-text-fill-color-property-001-ref.html">
+<div style="color: red; -webkit-text-fill-color: green;">These texts <span style="color: red">should be green</span></div>
diff --git a/testing/web-platform/tests/compat/webkit-text-fill-color-property-001d.html b/testing/web-platform/tests/compat/webkit-text-fill-color-property-001d.html
new file mode 100644
index 0000000000..a38653944a
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-text-fill-color-property-001d.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>webkit-text-fill-color: green</title>
+<link rel="author" title="Jeremy Chen" href="jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://compat.spec.whatwg.org/#the-webkit-text-fill-color">
+<meta name="assert" content="The color of texts should be green">
+<link rel="match" href="webkit-text-fill-color-property-001-ref.html">
+<div style="color: transparent; -webkit-text-fill-color: green;">These texts should be green</div>
diff --git a/testing/web-platform/tests/compat/webkit-text-fill-color-property-002-ref.html b/testing/web-platform/tests/compat/webkit-text-fill-color-property-002-ref.html
new file mode 100644
index 0000000000..00c5072f85
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-text-fill-color-property-002-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>webkit-text-fill-color on selected text reference</title>
+<link rel="author" title="Jeremy Chen" href="jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style>
+p {
+  color: green;
+}
+</style>
+<body onload="onload()">
+<p>Pass if color of <span id="selectMe">selected text</span> is green or inverted (depending on the platform convention), but not red</p>
+<script type="text/javascript">
+function onload() {
+  var elt = document.getElementById("selectMe");
+  var range = document.createRange();
+  range.selectNode(elt);
+  window.getSelection().removeAllRanges();
+  window.getSelection().addRange(range);
+  document.documentElement.classList.remove('reftest-wait');
+}
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/compat/webkit-text-fill-color-property-002.html b/testing/web-platform/tests/compat/webkit-text-fill-color-property-002.html
new file mode 100644
index 0000000000..8ed14ccc83
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-text-fill-color-property-002.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>webkit-text-fill-color should take effect while rendering selected text</title>
+<link rel="author" title="Jeremy Chen" href="jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://compat.spec.whatwg.org/#the-webkit-text-fill-color">
+<meta name="assert" content="The color of selected text should be green">
+<link rel="match" href="webkit-text-fill-color-property-002-ref.html">
+<style>
+p {
+  color: red;
+  -webkit-text-fill-color: green;
+}
+</style>
+<body onload="onload()">
+<p>Pass if color of <span id="selectMe">selected text</span> is green or inverted (depending on the platform convention), but not red</p>
+<script type="text/javascript">
+function onload() {
+  var elt = document.getElementById("selectMe");
+  var range = document.createRange();
+  range.selectNode(elt);
+  window.getSelection().removeAllRanges();
+  window.getSelection().addRange(range);
+  document.documentElement.classList.remove('reftest-wait');
+}
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/compat/webkit-text-fill-color-property-003-ref.html b/testing/web-platform/tests/compat/webkit-text-fill-color-property-003-ref.html
new file mode 100644
index 0000000000..bbfd78e37f
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-text-fill-color-property-003-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>webkit-text-fill-color on ::-moz-selection selected text reference</title>
+<link rel="author" title="Jeremy Chen" href="jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style>
+::-moz-selection {
+  color: green; background: skyblue;
+}
+::selection {
+  color: green; background: skyblue;
+}
+</style>
+<body onload="onload()">
+<p>Pass if color of <span id="selectMe">selected text</span> is green!!!</p>
+<script type="text/javascript">
+function onload() {
+  var elt = document.getElementById("selectMe");
+  var range = document.createRange();
+  range.selectNode(elt);
+  window.getSelection().removeAllRanges();
+  window.getSelection().addRange(range);
+  document.documentElement.classList.remove('reftest-wait');
+}
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/compat/webkit-text-fill-color-property-003.html b/testing/web-platform/tests/compat/webkit-text-fill-color-property-003.html
new file mode 100644
index 0000000000..dcbd70b18f
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-text-fill-color-property-003.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>webkit-text-fill-color should take effect while rendering ::-moz-selection selected text</title>
+<link rel="author" title="Jeremy Chen" href="jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://compat.spec.whatwg.org/#the-webkit-text-fill-color">
+<meta name="assert" content="The color of selected text should be green">
+<link rel="match" href="webkit-text-fill-color-property-003-ref.html">
+<style>
+::-moz-selection {
+  background: skyblue;
+  color: red;
+  -webkit-text-fill-color: green;
+}
+::selection {
+  background: skyblue;
+  color: red;
+  -webkit-text-fill-color: green;
+}
+</style>
+<body onload="onload()">
+<p>Pass if color of <span id="selectMe">selected text</span> is green!!!</p>
+<script type="text/javascript">
+function onload() {
+  var elt = document.getElementById("selectMe");
+  var range = document.createRange();
+  range.selectNode(elt);
+  window.getSelection().removeAllRanges();
+  window.getSelection().addRange(range);
+  document.documentElement.classList.remove('reftest-wait');
+}
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/compat/webkit-text-fill-color-property-004-ref.html b/testing/web-platform/tests/compat/webkit-text-fill-color-property-004-ref.html
new file mode 100644
index 0000000000..583cf9a358
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-text-fill-color-property-004-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>webkit-text-fill-color on MathML reference</title>
+<link rel="author" title="Jeremy Chen" href="jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style>
+math {
+  font-size: 50px;
+  color: green;
+}
+</style>
+<body>
+<p>Pass if color of operators and operands are all green!!!</p>
+  <math>
+    <mrow>
+      <mrow>
+        <msup>
+          <mi>a</mi>
+          <mn>2</mn>
+        </msup>
+        <mo>+</mo>
+        <msup>
+          <mi>b</mi>
+          <mn>2</mn>
+        </msup>
+      </mrow>
+      <mo>=</mo>
+      <msup>
+        <mi>c</mi>
+        <mn>2</mn>
+      </msup>
+    </mrow>
+  </math>
+</body>
diff --git a/testing/web-platform/tests/compat/webkit-text-fill-color-property-004.html b/testing/web-platform/tests/compat/webkit-text-fill-color-property-004.html
new file mode 100644
index 0000000000..739418d98e
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-text-fill-color-property-004.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>webkit-text-fill-color should take effect while rendering MathML</title>
+<link rel="author" title="Jeremy Chen" href="jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://compat.spec.whatwg.org/#the-webkit-text-fill-color">
+<meta name="assert" content="The color of MathML should be green">
+<link rel="match" href="webkit-text-fill-color-property-004-ref.html">
+<style>
+math {
+  font-size: 50px;
+  color: red;
+  -webkit-text-fill-color: green;
+}
+</style>
+<body>
+<p>Pass if color of operators and operands are all green!!!</p>
+  <math>
+    <mrow>
+      <mrow>
+        <msup>
+          <mi>a</mi>
+          <mn>2</mn>
+        </msup>
+        <mo>+</mo>
+        <msup>
+          <mi>b</mi>
+          <mn>2</mn>
+        </msup>
+      </mrow>
+      <mo>=</mo>
+      <msup>
+        <mi>c</mi>
+        <mn>2</mn>
+      </msup>
+    </mrow>
+  </math>
+</body>
diff --git a/testing/web-platform/tests/compat/webkit-text-fill-color-property-005-ref.html b/testing/web-platform/tests/compat/webkit-text-fill-color-property-005-ref.html
new file mode 100644
index 0000000000..1391e38c1e
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-text-fill-color-property-005-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>webkit-text-fill-color on text-decoration underline reference</title>
+<link rel="author" title="Jeremy Chen" href="jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style type="text/css">
+p {
+  color: green;
+}
+p.underline {
+  text-decoration: underline;
+}
+</style>
+<div><p>Pass if text underline is green!!!</p></div>
+<div><p class="underline">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p></div>
diff --git a/testing/web-platform/tests/compat/webkit-text-fill-color-property-005.html b/testing/web-platform/tests/compat/webkit-text-fill-color-property-005.html
new file mode 100644
index 0000000000..88ac17a815
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-text-fill-color-property-005.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>webkit-text-fill-color should not take effect while rendering text-decoration underline</title>
+<link rel="author" title="Jeremy Chen" href="jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://compat.spec.whatwg.org/#the-webkit-text-fill-color">
+<meta name="assert" content="The color of text-decoration underline should be green">
+<link rel="match" href="webkit-text-fill-color-property-005-ref.html">
+<style type="text/css">
+p {
+  color: green;
+}
+p.underline {
+  text-decoration: underline;
+  -webkit-text-fill-color: red
+}
+</style>
+<div><p>Pass if text underline is green!!!</p></div>
+<div><p class="underline">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p></div>
diff --git a/testing/web-platform/tests/compat/webkit-text-fill-color-property-006-ref.html b/testing/web-platform/tests/compat/webkit-text-fill-color-property-006-ref.html
new file mode 100644
index 0000000000..a26c944732
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-text-fill-color-property-006-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>webkit-text-fill-color on text-overflow ellipsis reference</title>
+<link rel="author" title="Jeremy Chen" href="jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font-size: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 150px;
+  color: green;
+}
+span {
+  font-family: Ahem;
+  font-size: 30px;
+}
+</style>
+<body>
+<p>Test passes if there is a <strong>green ellipsis</strong> after "TestChecks".</p>
+<div>
+  <span>TestChecksThatTextColorAndEllipsisColorShouldBeTheSame</span>
+</div>
+</body>
diff --git a/testing/web-platform/tests/compat/webkit-text-fill-color-property-006.html b/testing/web-platform/tests/compat/webkit-text-fill-color-property-006.html
new file mode 100644
index 0000000000..1d3965fca6
--- /dev/null
+++ b/testing/web-platform/tests/compat/webkit-text-fill-color-property-006.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>webkit-text-fill-color should take effect while rendering text-overflow ellipsis</title>
+<link rel="author" title="Jeremy Chen" href="jeremychen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://compat.spec.whatwg.org/#the-webkit-text-fill-color">
+<meta name="assert" content="The color of text-overflow ellipsis should be green">
+<link rel="match" href="webkit-text-fill-color-property-006-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+div {
+  font-size: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 150px;
+  color: red;
+  -webkit-text-fill-color: green;
+}
+span {
+  font-family: Ahem;
+  font-size: 30px;
+}
+</style>
+<body>
+<p>Test passes if there is a <strong>green ellipsis</strong> after "TestChecks".</p>
+<div>
+  <span>TestChecksThatTextColorAndEllipsisColorShouldBeTheSame</span>
+</div>
+</body>
-- 
cgit v1.2.3