Commit d3f89783 authored by Mario Sanchez Prada's avatar Mario Sanchez Prada Committed by Commit Bot

[css-filters] Migrate direct-image-dynamic-filter.html test to WPT

Migrate this test out of third_party/blink/web_tests/css3/filters
and into the WPT-specific directory, adding links to the relevant
specs and a test assertion describing its purpose.

In addition, this test uses <html class="reftest-wait"> as described
in [1] to replace the code that was depending on testRunner in order
to make sure that the screenshot is taking at the right time.

Last, the original test relied on a green-256x256.jpg image that is
exactly equivalent to the PNG version already in WPT, so this test
has been migrated to use that one instead.

[1] https://web-platform-tests.org/writing-tests/reftests.html?highlight=reftests#controlling-when-comparison-occurs

Bug: 1063749
Change-Id: Idcd76fcf3b1e82fe14be602c120d8c105f5c658a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2134258Reviewed-by: default avatarPhilip Rogers <pdr@chromium.org>
Commit-Queue: Mario Sanchez Prada <mario@igalia.com>
Cr-Commit-Position: refs/heads/master@{#756456}
parent 1a2cb1e3
<!DOCTYPE html>
<html>
<style>
.composited {
will-change: transform;
}
.filter {
filter: invert(100%);
}
</style>
<!-- There should be a bright pink box on this page -->
<body>
<img class="composited" onload="load(this)" src="../../images/resources/green-256x256.jpg">
</body>
<script>
function load(element) {
element.classList.add('filter');
setTimeout(done, 0);
}
function done() {
if (window.testRunner)
testRunner.notifyDone();
}
if (window.testRunner) {
testRunner.waitUntilDone();
}
</script>
</html>
<!DOCTYPE html>
<html class="reftest-wait">
<title>CSS Filters: dynamic filter changes on images with will-change: transform</title>
<link rel="author" title="Noel Gordon" href="mailto:noel@chromium.org">
<link rel="help" href="https://drafts.fxtf.org/filter-effects-1/#FilterProperty">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=405803">
<link rel="match" href="reference/dynamic-filter-changes-001-ref.html">
<meta name="assert" content="A filtered image should be visible after adding a filter to an image with will-change: transform."/>
<style>
.filter {
filter: invert(100%);
}
</style>
<script src="/common/reftest-wait.js"></script>
<script>
function load(element) {
element.classList.add('filter');
takeScreenshotDelayed(0);
}
</script>
<body>
<img style="will-change: transform" onload="load(this)" src="/images/green-256x256.png">
</body>
</html>
......@@ -9,7 +9,7 @@
<!-- There should be a bright pink box on this page -->
<body>
<img class="filter" src="../../images/resources/green-256x256.jpg">
<img class="filter" src="/images/green-256x256.png">
</body>
</html>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment