diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/compat | |
| parent | Initial commit. (diff) | |
| download | firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/compat')
48 files changed, 1174 insertions, 0 deletions
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..dd38690dd9 --- /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-4000"> +<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… +</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..ab45b5917d --- /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-4000"> +<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..795a97bbfe --- /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-4000"> +<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..91d0f7b49f --- /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-4000"> +<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..2df36ef3cd --- /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-4000"> +<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"> </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"> </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> |