diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-text-decor/text-shadow')
40 files changed, 397 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/basic-negcoord-ref.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/basic-negcoord-ref.html new file mode 100644 index 0000000000..79c3d996cf --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/basic-negcoord-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE HTML> + +<div style="position: absolute; top: 20px; left: 20px; color: green; z-index: 0;">Hello</div> +<div style="position: absolute; top: 24px; left: 24px; color: black; z-index: 1;">Hello</div> + diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/basic-negcoord.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/basic-negcoord.html new file mode 100644 index 0000000000..1e29b42f73 --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/basic-negcoord.html @@ -0,0 +1,5 @@ +<!DOCTYPE HTML> +<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property"> +<link rel="match" href="basic-negcoord-ref.html"> +<div style="position: absolute; top: 24px; left: 24px; color: black; text-shadow: green -4px -4px;">Hello</div> + diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/basic-opacity-ref.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/basic-opacity-ref.html new file mode 100644 index 0000000000..11aa6d5176 --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/basic-opacity-ref.html @@ -0,0 +1,2 @@ +<div style="position: absolute; top: 33px; left: 33px; color: rgba(0, 0, 255, 0.2); z-index: 0;">Hello</div> +<div style="position: absolute; top: 30px; left: 30px; color: green; z-index: 1;">Hello</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/basic-opacity.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/basic-opacity.html new file mode 100644 index 0000000000..a8cea6ad0e --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/basic-opacity.html @@ -0,0 +1,3 @@ +<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property"> +<link rel="match" href="basic-opacity-ref.html"> +<div style="position: absolute; top: 30px; left: 30px; color: green; text-shadow: rgba(0, 0, 255, 0.2) 3px 3px;">Hello</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/basic-ref.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/basic-ref.html new file mode 100644 index 0000000000..26b07d2e29 --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/basic-ref.html @@ -0,0 +1,2 @@ +<div style="position: absolute; top: 33px; left: 33px; color: grey; z-index: 0;">Hello</div> +<div style="position: absolute; top: 30px; left: 30px; color: green; z-index: 1;">Hello</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/basic.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/basic.html new file mode 100644 index 0000000000..fc470ea6d0 --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/basic.html @@ -0,0 +1,3 @@ +<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property"> +<link rel="match" href="basic-ref.html"> +<div style="position: absolute; top: 30px; left: 30px; color: green; text-shadow: grey 3px 3px;">Hello</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/blur-notref.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/blur-notref.html new file mode 100644 index 0000000000..28404095ac --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/blur-notref.html @@ -0,0 +1 @@ +<div style="text-shadow: blue 4px 4px">The shadow should be blurred</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/blur.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/blur.html new file mode 100644 index 0000000000..f6dd3cff8b --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/blur.html @@ -0,0 +1,3 @@ +<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property"> +<link rel="mismatch" href="blur-notref.html"> +<div style="text-shadow: blue 4px 4px 2px">The shadow should be blurred</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/color-inherit-ref.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/color-inherit-ref.html new file mode 100644 index 0000000000..8fa2dafa5e --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/color-inherit-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE HTML> + +<div style="position: absolute; top: 27px; left: 27px; color: blue; z-index: 0;">Hello</div> +<div style="position: absolute; top: 24px; left: 24px; color: blue; z-index: 1;">Hello</div> + diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/color-inherit.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/color-inherit.html new file mode 100644 index 0000000000..abb2cffd0a --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/color-inherit.html @@ -0,0 +1,5 @@ +<!DOCTYPE HTML> +<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property"> +<link rel="match" href="color-inherit-ref.html"> +<div style="position: absolute; top: 24px; left: 24px; color: blue; text-shadow: 3px 3px;">Hello</div> + diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/color-parserorder-ref.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/color-parserorder-ref.html new file mode 100644 index 0000000000..16d53ce0b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/color-parserorder-ref.html @@ -0,0 +1 @@ +<div style="text-shadow: green 3px 3px 2px;">Parser test</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/color-parserorder.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/color-parserorder.html new file mode 100644 index 0000000000..829383bf9c --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/color-parserorder.html @@ -0,0 +1,3 @@ +<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property"> +<link rel="match" href="color-parserorder-ref.html"> +<div style="text-shadow: 3px 3px 2px green;">Parser test</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/currentcolor-ref.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/currentcolor-ref.html new file mode 100644 index 0000000000..943c750f6f --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/currentcolor-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Dan Glastonbury" href="mailto:dglastonbury@mozilla.com" /> + <style type="text/css"> + p { + text-shadow: 0 0 10px green; + color: green; + font: 1.5em Georgia, serif; + } + </style> + </head> + <body> + <!-- content of test --> + <p>This text should have a green drop shadow</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/currentcolor.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/currentcolor.html new file mode 100644 index 0000000000..0bed948955 --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/currentcolor.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Test: 'text-shadow' respects 'currentcolor'</title> + <link rel="author" title="Dan Glastonbury" href="mailto:dglastonbury@mozilla.com" /> + <link rel="help" href="https://www.w3.org/TR/css-text-decor-3/#text-shadow-property" /> + <link rel="help" href="https://www.w3.org/TR/css-color-3/#currentcolor" /> + <link rel="match" href="currentcolor-ref.html" /> + <style> + body { + color: red; + text-shadow: 0 0 10px currentcolor; + } + + p { + text-shadow: inherit; + color: green; + font: 1.5em Georgia, serif; + } + </style> + </head> + <body> + <!-- content of test --> + <p>This text should have a green drop shadow</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/decorations-multiple-zorder-ref.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/decorations-multiple-zorder-ref.html new file mode 100644 index 0000000000..563867391d --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/decorations-multiple-zorder-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE HTML> +<style> +div { + text-decoration-skip-ink: none; +} +</style> +<!-- Shadows --> +<!-- Blue underline/text --> +<div style="position: absolute; top: 22px; left: 22px;"><span style="color: blue; text-decoration: underline">test</span></div> +<!-- Red overline/text --> +<!-- +There are some additional pixels appearing when two red texts are overlap. We +use transparent color for the first one to prevent the situation and the failure +of reftest. +--> +<div style="position: absolute; top: 22px; left: 22px;"><span style="color: rgba(0, 0, 0, 0);">test</span><span style="color: transparent; text-decoration: red underline;">for</span></div> +<div style="position: absolute; top: 22px; left: 22px;"><span style="color: rgba(0, 0, 0, 0);">test</span><span style="color: red; text-decoration: overline;">for</span></div> +<!-- Green text/underline --> +<!-- +There are some additional pixels appearing when two red texts are overlap. We +use transparent color for the first one to prevent the situation and the failure +of reftest. +--> +<div style="position: absolute; top: 22px; left: 22px;"><span style="color: rgba(0, 0, 0, 0);">testfor</span><span style="text-decoration: green underline; color: transparent;">quirks</span></div> +<div style="position: absolute; top: 22px; left: 22px;"><span style="color: rgba(0, 0, 0, 0);">testfor</span><span style="text-decoration: overline; color: green;">quirks</span></div> + +<!-- "Real" text --> +<!-- Blue underline/text --> +<div style="position: absolute; top: 20px; left: 20px; color: blue; text-decoration: underline;"><span style="color: rgba(0, 0, 0, 0);">testforquirks</span></div> +<div style="position: absolute; top: 20px; left: 20px;"><span style="color: blue;">test</span></div> +<!-- Red overline/text --> +<div style="position: absolute; top: 20px; left: 20px; color: rgba(0, 0, 0, 0);">test<span style="text-decoration: overline; color: red;"><span style="color: rgba(0, 0, 0, 0);">forquirks</span></span></div> +<div style="position: absolute; top: 20px; left: 20px;"><span style="color: rgba(0, 0, 0, 0);">test</span><span style="color: red;">for</span></div> +<!-- Green underline/text --> +<div style="position: absolute; top: 20px; left: 20px;"><span style="color: rgba(0, 0, 0, 0);">testfor</span><span style="text-decoration: underline; color: green;"><span style="color: rgba(0, 0, 0, 0);">quirks</span></span></div> +<div style="position: absolute; top: 20px; left: 20px;"><span style="color: rgba(0, 0, 0, 0);">testfor</span><span style="color: green;">quirks</span></div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/decorations-multiple-zorder.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/decorations-multiple-zorder.html new file mode 100644 index 0000000000..22406534b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/decorations-multiple-zorder.html @@ -0,0 +1,9 @@ +<!DOCTYPE HTML> +<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property"> +<link rel="match" href="decorations-multiple-zorder-ref.html"> +<style> +div { + text-decoration-skip-ink: none; +} +</style> +<div style="text-shadow: 2px 2px; color: blue; text-decoration: underline; position: absolute; top: 20px; left: 20px;">test<span style="text-decoration: overline; color: red;">for<span style="text-decoration: underline; color: green;">quirks</span></span></div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/dynamic-blur-ref.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/dynamic-blur-ref.html new file mode 100644 index 0000000000..779f4adcf4 --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/dynamic-blur-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<html style='text-shadow: 0.6em 0.6em 0.1em green'> +<body>I have a green shadow</body> +</html> + diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/dynamic-blur.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/dynamic-blur.html new file mode 100644 index 0000000000..3f1f02b37b --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/dynamic-blur.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> +<head> + <link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property"> + <link rel="match" href="dynamic-blur-ref.html"> +</head> +<body onload="document.documentElement.style.textShadow = '0.6em 0.6em 0.1em green';">I have a green shadow</body> +</html> + diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/lineoverflow-ref.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/lineoverflow-ref.html new file mode 100644 index 0000000000..07fad32ce7 --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/lineoverflow-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE HTML> + +<div style="position: absolute; top: 20px; left: 20px;"><span style="text-decoration: underline; text-shadow: 3px 3px 2px red; font-size: 40px;">Testingtestingtestingtesting</span></div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/lineoverflow.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/lineoverflow.html new file mode 100644 index 0000000000..050ee6583a --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/lineoverflow.html @@ -0,0 +1,4 @@ +<!DOCTYPE HTML> +<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property"> +<link rel="match" href="lineoverflow-ref.html"> +<div style="position: absolute; top: 20px; left: 20px; width: 50px; text-decoration: underline; text-shadow: 3px 3px 2px red; font-size: 40px;">Testingtestingtestingtesting</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/multiple-noblur-ref.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/multiple-noblur-ref.html new file mode 100644 index 0000000000..a5f125e475 --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/multiple-noblur-ref.html @@ -0,0 +1,5 @@ +<div style="position: absolute; top: 33px; left: 33px; color: grey; z-index: 0;">Hello</div> +<div style="position: absolute; top: 30px; left: 30px; color: green; z-index: 1;">Hello</div> +<div style="position: absolute; top: 27px; left: 27px; color: red; z-index: 2;">Hello</div> +<div style="position: absolute; top: 24px; left: 24px; color: purple; z-index: 3;">Hello</div> +<div style="position: absolute; top: 20px; left: 20px; color: black; z-index: 4;">Hello</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/multiple-noblur.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/multiple-noblur.html new file mode 100644 index 0000000000..cf86e4bb71 --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/multiple-noblur.html @@ -0,0 +1,3 @@ +<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property"> +<link rel="match" href="multiple-noblur-ref.html"> +<div style="position: absolute; top: 20px; left: 20px; color: black; text-shadow: purple 4px 4px, red 7px 7px, green 10px 10px, grey 13px 13px;">Hello</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/overflow-not-scrollable-1-ref.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/overflow-not-scrollable-1-ref.html new file mode 100644 index 0000000000..642d10181f --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/overflow-not-scrollable-1-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<style type="text/css"> + +div { + height: 200px; width: 200px; overflow: hidden; + text-shadow: 210px 210px 2px gray; + font-size: 50px; +} + +/* work around potential font overflow */ +span { margin-left: 5px } + +</style> +<div> +<span>text</span> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/overflow-not-scrollable-1-ref2.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/overflow-not-scrollable-1-ref2.html new file mode 100644 index 0000000000..4ed3a46ec2 --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/overflow-not-scrollable-1-ref2.html @@ -0,0 +1,15 @@ +<!DOCTYPE HTML> +<style type="text/css"> + +div { + height: 200px; width: 200px; + font-size: 50px; +} + +/* work around potential font overflow */ +span { margin-left: 5px } + +</style> +<div> +<span>text</span> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/overflow-not-scrollable-1.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/overflow-not-scrollable-1.html new file mode 100644 index 0000000000..ca9fc8c4ae --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/overflow-not-scrollable-1.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property"> +<link rel="match" href="overflow-not-scrollable-1-ref.html"> +<link rel="match" href="overflow-not-scrollable-1-ref2.html"> +<style> +div { + height: 200px; width: 200px; overflow: auto; + text-shadow: 210px 210px 2px gray; + font-size: 50px; +} + +/* work around potential font overflow */ +span { margin-left: 5px } +</style> +<div> +<span>text</span> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/overflow-not-scrollable-2-ref.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/overflow-not-scrollable-2-ref.html new file mode 100644 index 0000000000..4d0e7457f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/overflow-not-scrollable-2-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<style type="text/css"> + +div { + height: 200px; width: 200px; overflow: hidden; + text-shadow: 100px 100px 30px black; + font-size: 50px; + font-weight: bold; +} + +/* work around potential font overflow */ +span { margin-left: 5px } + +</style> +<div> +<span>text</span> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/overflow-not-scrollable-2.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/overflow-not-scrollable-2.html new file mode 100644 index 0000000000..b53278900c --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/overflow-not-scrollable-2.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property"> +<link rel="match" href="overflow-not-scrollable-2-ref.html"> +<style> +div { + height: 200px; width: 200px; overflow: auto; + text-shadow: 100px 100px 30px black; + font-size: 50px; + font-weight: bold; +} + +/* work around potential font overflow */ +span { margin-left: 5px } +</style> +<div> +<span>text</span> +</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/padding-decoration-ref.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/padding-decoration-ref.html new file mode 100644 index 0000000000..1cc1f5ec4e --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/padding-decoration-ref.html @@ -0,0 +1 @@ +<!DOCTYPE HTML><div><a href="http://test" style="margin-left: 20px; text-shadow: 2px 2px 2px blue;">Hello world hello world</a></div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/padding-decoration.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/padding-decoration.html new file mode 100644 index 0000000000..7512f28931 --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/padding-decoration.html @@ -0,0 +1,4 @@ +<!DOCTYPE HTML> +<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property"> +<link rel="match" href="padding-decoration-ref.html"> +<div><a href="http://test" style="padding-left: 20px; text-shadow: 2px 2px 2px blue;">Hello world hello world</a></div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/parsing/text-shadow-computed.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/parsing/text-shadow-computed.html new file mode 100644 index 0000000000..a90738d825 --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/parsing/text-shadow-computed.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Decoration Test: getComputedStyle().textShadow</title> +<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property"> +<meta name="assert" content="text-shadow computed value is none or a list, each item a color and lengths."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + font-size: 40px; + color: blue; + } +</style> +<div id="target"></div> +<script> +'use strict'; +const red = 'rgb(255, 0, 0)'; +const lime = 'rgb(0, 255, 0)'; +const currentColor = 'rgb(0, 0, 255)'; + +test_computed_value("text-shadow", "none"); + +test_computed_value("text-shadow", "10px 20px", currentColor + " 10px 20px 0px"); +test_computed_value("text-shadow", "red 10px 20px 30px", red + " 10px 20px 30px"); +test_computed_value("text-shadow", "calc(0.5em + 10px) calc(0.5em + 10px) calc(0.5em + 10px)", currentColor + " 30px 30px 30px"); +test_computed_value("text-shadow", "calc(-0.5em + 10px) calc(-0.5em + 10px) calc(-0.5em + 10px)", currentColor + " -10px -10px 0px"); + +test_computed_value("text-shadow", "10px 20px, 30px 40px", currentColor + " 10px 20px 0px, " + currentColor + " 30px 40px 0px"); +test_computed_value("text-shadow", "lime 10px 20px 30px, red 40px 50px", lime + " 10px 20px 30px, " + red + " 40px 50px 0px"); +</script> diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/parsing/text-shadow-invalid.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/parsing/text-shadow-invalid.html new file mode 100644 index 0000000000..dfaa4a5b48 --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/parsing/text-shadow-invalid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Decoration Test: Parsing text-shadow with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property"> +<meta name="assert" content="text-shadow supports only the grammar 'none | [ <color>? && <length>{2,3} ]#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<script> +test_invalid_value("text-shadow", "auto"); + +test_invalid_value("text-shadow", "10px 20px -30px"); + +test_invalid_value("text-shadow", "10px"); +test_invalid_value("text-shadow", "10px 20px 30px 40px"); +test_invalid_value("text-shadow", "red 10px 20px blue"); +test_invalid_value("text-shadow", "10% 20px"); +test_invalid_value("text-shadow", "10px 20% 30px"); +test_invalid_value("text-shadow", "lime 10px 20px 30%"); +</script> diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/parsing/text-shadow-valid.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/parsing/text-shadow-valid.html new file mode 100644 index 0000000000..cbf9df5479 --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/parsing/text-shadow-valid.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Text Decoration Test: Parsing text-shadow with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property"> +<meta name="assert" content="text-shadow supports the full grammar 'none | [ <color>? && <length>{2,3} ]#'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<script> +test_valid_value("text-shadow", "none"); + +test_valid_value("text-shadow", "10px 20px"); +test_valid_value("text-shadow", "10px 20px 30px"); +test_valid_value("text-shadow", "calc(1em + 2px) calc(3em + 4px) calc(5em + 6px)"); +test_valid_value("text-shadow", "-10px 20px 30px"); +test_valid_value("text-shadow", "10px -20px 30px"); +test_valid_value("text-shadow", "rgb(255, 0, 0) 10px 20px"); +test_valid_value("text-shadow", "10px 20px 30px lime", "lime 10px 20px 30px"); + +test_valid_value("text-shadow", "10px 20px, 30px 40px"); +test_valid_value("text-shadow", "lime 10px 20px 30px, blue 40px 50px"); +</script> diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/quirks-decor-noblur-ref.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/quirks-decor-noblur-ref.html new file mode 100644 index 0000000000..9644146226 --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/quirks-decor-noblur-ref.html @@ -0,0 +1,11 @@ +<style> +div { +text-decoration: underline; +} +</style> + +<div style="position: absolute; top: 33px; left: 33px; color: grey; z-index: 0;">Hello</div> +<div style="position: absolute; top: 30px; left: 30px; color: green; z-index: 1;">Hello</div> +<div style="position: absolute; top: 27px; left: 27px; color: red; z-index: 2;">Hello</div> +<div style="position: absolute; top: 24px; left: 24px; color: purple; z-index: 3;">Hello</div> +<div style="position: absolute; top: 20px; left: 20px; color: black; z-index: 4;">Hello</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/quirks-decor-noblur.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/quirks-decor-noblur.html new file mode 100644 index 0000000000..e5de43d67b --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/quirks-decor-noblur.html @@ -0,0 +1,3 @@ +<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property"> +<link rel="match" href="quirks-decor-noblur-ref.html"> +<div style="position: absolute; top: 20px; left: 20px; color: black; text-shadow: purple 4px 4px, red 7px 7px, green 10px 10px, grey 13px 13px; text-decoration: underline;">Hello</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/standards-decor-noblur-2-ref.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/standards-decor-noblur-2-ref.html new file mode 100644 index 0000000000..47880c2ed6 --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/standards-decor-noblur-2-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML> +<style> +.underlined { + position: absolute; + left: 20px; + font-size: 100px; + text-decoration: underline; +} +</style> +<div class="underlined" style="top: 24px; color: blue; z-index: 0">Hello</div> +<div class="underlined" style="top: 22px; color: green; z-index: 1">Hello</div> +<div class="underlined" style="top: 20px; color: grey; z-index: 2">Hello</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/standards-decor-noblur-2.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/standards-decor-noblur-2.html new file mode 100644 index 0000000000..75d95b578d --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/standards-decor-noblur-2.html @@ -0,0 +1,17 @@ +<!DOCTYPE HTML> +<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property"> +<link rel="match" href="standards-decor-noblur-2-ref.html"> +<meta name="fuzzy" content="0-40;0-14"> +<!-- Shadows are painted below text AND its decorations --> +<style> +#target { + position: absolute; + top: 20px; + left: 20px; + color: grey; + text-shadow: green 0px 2px, blue 0px 4px; + font-size: 100px; + text-decoration: underline; +} +</style> +<div id="target">Hello</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/standards-decor-noblur-ref.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/standards-decor-noblur-ref.html new file mode 100644 index 0000000000..8a962a41e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/standards-decor-noblur-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<style> +.underlined { +text-decoration: underline; +} + +span { +color: rgba(0, 0, 0, 0); +} +</style> + +<div class="underlined" style="position: absolute; top: 33px; left: 33px; color: grey; z-index: 0;">Hello</div> +<div class="underlined" style="position: absolute; top: 30px; left: 30px; color: green; z-index: 1;">Hello</div> +<div class="underlined" style="position: absolute; top: 27px; left: 27px; color: red; z-index: 2;">Hello</div> +<div class="underlined" style="position: absolute; top: 24px; left: 24px; color: purple; z-index: 3;">Hello</div> +<div class="underlined" style="position: absolute; top: 20px; left: 20px; color: black; z-index: 4;">Hello</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/standards-decor-noblur.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/standards-decor-noblur.html new file mode 100644 index 0000000000..d5a2f4e0ee --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/standards-decor-noblur.html @@ -0,0 +1,5 @@ +<!DOCTYPE HTML> +<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property"> +<link rel="match" href="standards-decor-noblur-ref.html"> +<!-- Shadows are painted below text AND its decorations --> +<div style="position: absolute; top: 20px; left: 20px; color: black; text-shadow: purple 4px 4px, red 7px 7px, green 10px 10px, grey 13px 13px; text-decoration: underline;">Hello</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/textindent-ref.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/textindent-ref.html new file mode 100644 index 0000000000..c3e3315e9b --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/textindent-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE HTML> + +<div style="position:absolute; top: 20px; left: 60px; text-decoration: underline; text-shadow: 5px 5px 3px blue; font-size: 40px;">M</div> diff --git a/testing/web-platform/tests/css/css-text-decor/text-shadow/textindent.html b/testing/web-platform/tests/css/css-text-decor/text-shadow/textindent.html new file mode 100644 index 0000000000..4b66f9dcb8 --- /dev/null +++ b/testing/web-platform/tests/css/css-text-decor/text-shadow/textindent.html @@ -0,0 +1,4 @@ +<!DOCTYPE HTML> +<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property"> +<link rel="match" href="textindent-ref.html"> +<div style="position:absolute; top: 20px; left: 120px; text-indent: -60px; text-decoration: underline; text-shadow: 5px 5px 3px blue; font-size: 40px;">M</div> |