mirror of
https://github.com/servo/servo.git
synced 2025-08-06 22:15:33 +01:00
Update web-platform-tests to revision b'468d01bbd84da2babf265c6af46947be68713440'
This commit is contained in:
WPT Sync Bot
cybai
parent
35e95f55a1
commit
58e8ee674b
9438 changed files with 266112 additions and 106976 deletions
|
|
@ -1,10 +1,4 @@
|
|||
import base64
|
||||
import six
|
||||
|
||||
def decodebytes(s):
|
||||
if six.PY3:
|
||||
return base64.decodebytes(six.ensure_binary(s))
|
||||
return base64.decodestring(s)
|
||||
from base64 import decodebytes
|
||||
|
||||
def main(req, res):
|
||||
return 404, [(b'Content-Type', b'image/png')], decodebytes(b"iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAhSURBVDhPY3wro/KfgQLABKXJBqMGjBoAAqMGDLwBDAwAEsoCTFWunmQAAAAASUVORK5CYII=")
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
<!doctype html>
|
||||
<title>The list of available images gets checked before deciding to make a load lazy</title>
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/images.html#update-the-image-data">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/images.html#will-lazy-load-image-steps">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1709577">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<img src="/images/green-256x256.png">
|
||||
<div style="height:1000vh;"></div>
|
||||
<script>
|
||||
promise_test(async t => {
|
||||
await new Promise(resolve => {
|
||||
window.addEventListener("load", resolve);
|
||||
});
|
||||
let nonLazy = document.querySelector("img");
|
||||
assert_equals(nonLazy.width, 256);
|
||||
assert_equals(nonLazy.height, 256);
|
||||
|
||||
let lazy = document.createElement("img");
|
||||
lazy.loading = "lazy";
|
||||
lazy.src = nonLazy.src;
|
||||
document.body.appendChild(lazy);
|
||||
|
||||
await new Promise(resolve => setTimeout(resolve));
|
||||
|
||||
assert_equals(lazy.width, 256, "The list of available images should be checked before delaying the image load");
|
||||
assert_equals(lazy.height, 256, "The list of available images should be checked before delaying the image load");
|
||||
});
|
||||
</script>
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
// to it when it sets up the request at parse-time.
|
||||
window.history.pushState(1, document.title, 'resources/')
|
||||
</script>
|
||||
<img id="below-viewport" src="image.png" loading="lazy"
|
||||
<img id="below-viewport" src="image.png?base-url-2" loading="lazy"
|
||||
onload="below_viewport_img.resolve()"
|
||||
onerror="below_viewport_img.reject()">
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
|
||||
<body>
|
||||
<div style="height:1000vh"></div>
|
||||
<img id="below-viewport" src="image.png" loading="lazy"
|
||||
<img id="below-viewport" src="image.png?base-url" loading="lazy"
|
||||
onload="below_viewport_img.resolve()"
|
||||
onerror="below_viewport_img.reject()">
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
<div class=texty style="column-count: 2; height: 300px">
|
||||
<div style="border: 1px solid black">
|
||||
<h2 style="column-span: all"></h2>
|
||||
<img loading="lazy" src="resources/image.png?first" width="160" height="120"
|
||||
<img loading="lazy" src="resources/image.png?loading-lazy-multicol-first" width="160" height="120"
|
||||
onload="in_viewport_img_onload()">
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
below-viewport image out-of-view later in the test -->
|
||||
<div id="top_div"></div>
|
||||
<div style="height:1000vh;"></div>
|
||||
<img id="below_viewport" loading="lazy" src="resources/image.png?first">
|
||||
<img id="below_viewport" loading="lazy" src="resources/image.png?image-loading-lazy-multiple-times-first">
|
||||
|
||||
<script>
|
||||
const t = async_test("Images with loading='lazy' can be lazy loaded multiple times");
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
top_div.scrollIntoView();
|
||||
|
||||
// Lazily load a "different" image.
|
||||
image.src = 'resources/image.png?second';
|
||||
image.src = 'resources/image.png?image-loading-lazy-multiple-times-second';
|
||||
image.onload =
|
||||
t.unreached_func("The loading=lazy below-viewport image should lazily " +
|
||||
"load its second image, and not load it eagerly when " +
|
||||
|
|
|
|||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Images with loading='lazy' defers images in a hidden area as a result
|
||||
of negative margins</title>
|
||||
<link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script>
|
||||
window.negative_margin_test =
|
||||
async_test("A loading=lazy image that is pulled into an `overflow: hidden` " +
|
||||
"area by a negative margin will not load because " +
|
||||
"IntersectionObserver sees it as non-intersecting");
|
||||
|
||||
// If the `negative_margin` image in the DOM loads, the test should fail
|
||||
// immediately.
|
||||
window.negative_margin_onload =
|
||||
negative_margin_test.step_func_done(
|
||||
negative_margin_test.unreached_func("The image with a negative margin " +
|
||||
"should never load"));
|
||||
</script>
|
||||
|
||||
<div style="width: 200px; height: 200px; overflow: hidden;">
|
||||
<img id="negative_margin" width="5px"; style="margin-left: -10px;"
|
||||
loading="lazy" src="resources/image.png"
|
||||
onload="window.negative_margin_onload()">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const intersection_observer_promise = new Promise(resolve => {
|
||||
function io_callback(entries) {
|
||||
assert_equals(entries.length, 1);
|
||||
resolve(entries[0].isIntersecting);
|
||||
}
|
||||
|
||||
const options = {
|
||||
root: document,
|
||||
rootMargin: '0px',
|
||||
threshold: 1.0,
|
||||
}
|
||||
|
||||
const observer = new IntersectionObserver(io_callback, options);
|
||||
observer.observe(document.querySelector('#negative_margin'));
|
||||
});
|
||||
|
||||
const timeout_promise = new Promise(resolve => {
|
||||
window.negative_margin_test.step_timeout(resolve, 500);
|
||||
});
|
||||
|
||||
Promise.all([intersection_observer_promise, timeout_promise]).then(
|
||||
window.negative_margin_test.step_func_done(values => {
|
||||
assert_equals(values.length, 2);
|
||||
assert_equals(values[0], false, "The IntersectionObserver sees that " +
|
||||
"the image does not intersect the " +
|
||||
"viewport");
|
||||
}));
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -7,8 +7,8 @@
|
|||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<div style="height:1000vh;"></div>
|
||||
<img srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAG0lEQVR42mP8z0A%2BYKJA76jmUc2jmkc1U0EzACKcASfOgGoMAAAAAElFTkSuQmCC" loading="lazy">
|
||||
<img loading="lazy" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAAG0lEQVR42mP8z0A%2BYKJA76jmUc2jmkc1U0EzACKcASfOgGoMAAAAAElFTkSuQmCC">
|
||||
<img srcset="resources/image.png?loading-lazy-srcset" loading="lazy">
|
||||
<img loading="lazy" srcset="resources/image.png?loading-lazy-srcset">
|
||||
<script>
|
||||
promise_test(async t => {
|
||||
let loaded_images = 0;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<title>Lazyload images can load immediately from the list of available images</title>
|
||||
<link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/images.html#updating-the-image-data">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<!-- A `loading=lazy` image will be placed below this div so that it is below
|
||||
the viewport -->
|
||||
<div style="height: 1000vh;"></div>
|
||||
<div id="below-viewport-img-container"></div>
|
||||
|
||||
<script>
|
||||
const image_path = location.origin + '/html/semantics/embedded-content/the-img-element/resources/image.png';
|
||||
|
||||
promise_test(async t => {
|
||||
const eager_image_promise = new Promise((resolve, reject) => {
|
||||
const img = new Image();
|
||||
img.onload = resolve;
|
||||
img.onerror = e => { reject(new Error("The img should not fail to load")) };
|
||||
img.src = image_path;
|
||||
});
|
||||
|
||||
await eager_image_promise;
|
||||
|
||||
// At this point, the image fetched eagerly above exists in the "list of
|
||||
// available images". As per the spec's #updating-the-image-data algorithm [1]
|
||||
// step 6, the "list of avalable images" is consulted before we take any
|
||||
// lazyload-specific action. This means that lazyload images can load eagerly
|
||||
// if they target a resource in the list of available images, which the image
|
||||
// below is doing.
|
||||
//
|
||||
// Note that if https://github.com/whatwg/html/issues/7005 resolves in favor
|
||||
// of allowing in-flight image requests to be placed in the list of available
|
||||
// images, as opposed to just complete images, this would allow lazyload
|
||||
// images (in addition to non-lazyload ones) to coalesce with these in-flight
|
||||
// entries in the list of available images too. In that case we'd need to test
|
||||
// for this here.
|
||||
// [1]: https://html.spec.whatwg.org/multipage/images.html#updating-the-image-data
|
||||
const lazyload_image_promise = new Promise((resolve, reject) => {
|
||||
const img = new Image();
|
||||
img.loading = 'lazy';
|
||||
img.onload = resolve;
|
||||
img.onerror = e => { reject("The img should not fail to load") };
|
||||
|
||||
document.querySelector('#below-viewport-img-container').append(img);
|
||||
img.src = image_path;
|
||||
});
|
||||
const timeout_promise = new Promise((resolve, reject) => {
|
||||
t.step_timeout(() => {
|
||||
reject(new Error("The `loading=lazy` image should load immediately from " +
|
||||
"the list of available images, beating this timeout " +
|
||||
"promise."));
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
// The `lazyload_image_promise` should resolve first because lazyload images
|
||||
// are able to eagerly use resources in the "list of available images".
|
||||
await Promise.race([lazyload_image_promise, timeout_promise]);
|
||||
}, 'Lazyload images can load immediately from the list of available images');
|
||||
</script>
|
||||
|
|
@ -97,10 +97,10 @@
|
|||
<!-- |in_viewport| takes 2 seconds to load, so that in browsers that don't
|
||||
support lazy loading, |below_viewport| finishes before |in_viewport|, and
|
||||
the test will dependably fail without relying on a timeout. -->
|
||||
<img id="in_viewport" loading="lazy" src="resources/image.png?first&pipe=trickle(d2)"
|
||||
<img id="in_viewport" loading="lazy" src="resources/image.png?image-loading-lazy-first&pipe=trickle(d2)"
|
||||
onload="in_viewport_img_onload()">
|
||||
<div style="height:1000vh;"></div>
|
||||
<img id="below_viewport" loading="lazy" src="resources/image.png?second"
|
||||
<img id="below_viewport" loading="lazy" src="resources/image.png?image-loading-lazy-second"
|
||||
onload="below_viewport_img_onload()">
|
||||
<img id="below_viewport_data_url" loading="lazy"
|
||||
src="data:image/png;base64,R0lGODlhDAAMAKIFAF5LAP/zxAAAANyuAP/gaP///wAAAAAAACH5BAEAAAUALAAAAAAMAAwAAAMlWLPcGjDKFYi9lxKBOaGcF35DhWHamZUW0K4mAbiwWtuf0uxFAgA"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
<!doctype html>
|
||||
<style>
|
||||
body { margin: 0 }
|
||||
img {
|
||||
margin: 16px; /* to account for iframe + body margin in the test */
|
||||
}
|
||||
</style>
|
||||
<img src="/images/green-100x50.png" alt="FAIL">
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<!doctype html>
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1710822">
|
||||
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
|
||||
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
||||
<link rel="match" href="image-srcdoc-relative-uri-print-ref.html">
|
||||
<iframe frameborder=0 srcdoc="<img src=/images/green-100x50.png>">
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<title>img should only look at a parent picture element</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<picture>
|
||||
<source media="not all" srcset="data:,a">
|
||||
<source media="all" srcset="data:,b">
|
||||
<img src="data:,c">
|
||||
<picture>
|
||||
<source media="not all" srcset="data:,e">
|
||||
<source media="all" srcset="data:,f">
|
||||
<img src="data:,g">
|
||||
</picture>
|
||||
</picture>
|
||||
<script>
|
||||
const picture1 = document.querySelector("picture");
|
||||
const picture2 = document.querySelector("picture > picture");
|
||||
const img1 = document.querySelector("picture > img");
|
||||
const img2 = document.querySelector("picture > picture > img");
|
||||
|
||||
const div = document.createElement("div");
|
||||
|
||||
const imgInsideDiv = document.createElement("img");
|
||||
imgInsideDiv.src = "data:,d";
|
||||
div.append(imgInsideDiv);
|
||||
|
||||
test(function() {
|
||||
assert_equals(img1.currentSrc, "data:,b");
|
||||
}, "currentSrc of img in normally parented picture is correct");
|
||||
|
||||
test(function() {
|
||||
assert_equals(img2.currentSrc, "data:,f");
|
||||
}, "currentSrc of img in nested picture element is correct");
|
||||
|
||||
async_test(function(t) {
|
||||
picture1.append(div);
|
||||
queueMicrotask(t.step_func(function() {
|
||||
assert_equals(imgInsideDiv.currentSrc, "data:,d");
|
||||
t.done();
|
||||
}));
|
||||
}, "currentSrc of img with picture ancestor but non-picture parent is correct");
|
||||
|
||||
async_test(function(t) {
|
||||
picture2.remove();
|
||||
queueMicrotask(t.step_func(function() {
|
||||
assert_equals(img2.currentSrc, "data:,f");
|
||||
t.done();
|
||||
}));
|
||||
}, "currentSrc of img in nested picture element remains correct when the inner picture is removed from the document");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<title>List of available images does not coalesce in-flight requests</title>
|
||||
<link rel="author" title="Dom Farolino" href="mailto:dom@chromium.org">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-list-of-available-images">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<script>
|
||||
const uuid = "{{uuid()}}";
|
||||
const path = location.origin + '/html/semantics/embedded-content/the-img-element/resources/image-and-stash.py';
|
||||
|
||||
promise_test(async t => {
|
||||
let first_image_promise = new Promise((resolve, reject) => {
|
||||
const img = new Image();
|
||||
img.onload = resolve;
|
||||
img.onerror = e => { reject(new Error("The img should not fail to load")) };
|
||||
img.src = path + `?increment=${uuid}&pipe=trickle(d1)`;
|
||||
});
|
||||
|
||||
// As of right now, the spec's #updating-the-image-data step 6 [1] does not
|
||||
// place images into the "list of available images" until they are completely
|
||||
// downloaded and the `load` event is fired. The spec also explicitly states
|
||||
// that coalescing in-flight image requests is not what the list of available
|
||||
// images is for. This test asserts this behavior, though since no browsers
|
||||
// follow this behavior (they all allow coalescing in-flight requests for the
|
||||
// same image resource) we've started discussion about this in
|
||||
// https://github.com/whatwg/html/issues/7005. If that issue resolves in
|
||||
// letting in-flight requests into the list of available images, then we
|
||||
// should changes the expectations of this test.
|
||||
//
|
||||
// [1]: https://html.spec.whatwg.org/multipage/images.html#updating-the-image-data
|
||||
let second_image_promise = new Promise((resolve, reject) => {
|
||||
const img = new Image();
|
||||
img.onload = resolve;
|
||||
img.onerror = e => { reject("The img should not fail to load") };
|
||||
img.src = path + `?increment=${uuid}&pipe=trickle(d1)`;
|
||||
});
|
||||
|
||||
await Promise.all([first_image_promise, second_image_promise]);
|
||||
const response = await fetch(path + `?read=${uuid}`);
|
||||
const request_count = await response.text();
|
||||
|
||||
assert_equals(request_count, "2", "The server should have seen exactly two " +
|
||||
"requests, since the second image request " +
|
||||
"above did not coalesce with the first " +
|
||||
"in-flight one");
|
||||
}, 'list of available images does not coalesce in-flight requests');
|
||||
</script>
|
||||
|
|
@ -12,11 +12,11 @@
|
|||
<body>
|
||||
<!-- These images must not attempt to load when scrolled into the
|
||||
viewport -->
|
||||
<img id="display_none" style="display:none;" src="resources/image.png?2" loading="lazy"
|
||||
<img id="display_none" style="display:none;" src="resources/image.png?not-rendered-2" loading="lazy"
|
||||
onload="display_none_img.resolve();" onerror="display_none_img.reject();">
|
||||
<img id="attribute_hidden" hidden src="resources/image.png?3" loading="lazy"
|
||||
<img id="attribute_hidden" hidden src="resources/image.png?not-rendered-3" loading="lazy"
|
||||
onload="attribute_hidden_img.resolve();" onerror="attribute_hidden_img.reject();">
|
||||
<img id="js_display_none" src="resources/image.png?4" loading="lazy"
|
||||
<img id="js_display_none" src="resources/image.png?not-rendered-4" loading="lazy"
|
||||
onload="js_display_none_img.resolve();" onerror="js_display_none_img.reject();">
|
||||
<script>
|
||||
document.getElementById("js_display_none").style = 'display:none;';
|
||||
|
|
|
|||
|
|
@ -10,11 +10,11 @@
|
|||
|
||||
<body>
|
||||
<!-- These images must not attempt to load -->
|
||||
<img id="display_none" style="display:none;" src="resources/image.png?2" loading="lazy"
|
||||
<img id="display_none" style="display:none;" src="resources/image.png?not-rendered-image-loading-lazy-2" loading="lazy"
|
||||
onload="display_none_img.resolve();" onerror="display_none_img.reject();">
|
||||
<img id="attribute_hidden" hidden src="resources/image.png?3" loading="lazy"
|
||||
<img id="attribute_hidden" hidden src="resources/image.png?not-rendered-image-loading-lazy-3" loading="lazy"
|
||||
onload="attribute_hidden_img.resolve();" onerror="attribute_hidden_img.reject();">
|
||||
<img id="js_display_none" src="resources/image.png?4" loading="lazy"
|
||||
<img id="js_display_none" src="resources/image.png?not-rendered-image-loading-lazy-4" loading="lazy"
|
||||
onload="js_display_none_img.resolve();" onerror="js_display_none_img.reject();">
|
||||
<script>
|
||||
document.getElementById("js_display_none").style = 'display:none;';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,44 @@
|
|||
# This is a simple implementation of a server-side stash that supports two
|
||||
# operations:
|
||||
# - increment:
|
||||
# Increments a value in the stash keyed by a given uuid, and returns an
|
||||
# image file
|
||||
# - read:
|
||||
# Returns the value in the stash keyed by a given uuid or 0 otherwise.
|
||||
# This is a read-only operation, and does not remove the value from the
|
||||
# stash as-is the default WPT stash behavior:
|
||||
# https://web-platform-tests.org/tools/wptserve/docs/stash.html.
|
||||
|
||||
import os
|
||||
|
||||
from wptserve.utils import isomorphic_decode
|
||||
|
||||
def main(request, response):
|
||||
if b"increment" in request.GET:
|
||||
uuid = request.GET[b"increment"]
|
||||
|
||||
# First, increment the stash value keyed by `uuid`, and write it back to the
|
||||
# stash. Writing it back to the stash is necessary since `take()` actually
|
||||
# removes the value whereas we want to increment it.
|
||||
stash_value = request.server.stash.take(uuid)
|
||||
if stash_value is None:
|
||||
stash_value = 0
|
||||
request.server.stash.put(uuid, stash_value + 1)
|
||||
|
||||
# Return a basic image.
|
||||
response_headers = [(b"Content-Type", b"image/png")]
|
||||
image_path = os.path.join(os.path.dirname(isomorphic_decode(__file__)), u"image.png")
|
||||
return (200, response_headers, open(image_path, mode='rb').read())
|
||||
|
||||
elif b"read" in request.GET:
|
||||
uuid = request.GET[b"read"]
|
||||
stash_value = request.server.stash.take(uuid)
|
||||
|
||||
if stash_value is None:
|
||||
stash_value = 0
|
||||
# Write the stash value keyed by `uuid` back to the stash. This is necessary
|
||||
# because `take()` actually removes it, but we want a read-only read.
|
||||
request.server.stash.put(uuid, stash_value);
|
||||
return (200, [], str(stash_value))
|
||||
|
||||
return (404 , [], "Not found")
|
||||
|
|
@ -2,11 +2,14 @@
|
|||
|
||||
<!-- This frame is used by image-loading-lazy-in-cross-origin-iframe-002.sub.html -->
|
||||
|
||||
<img id="img" loading="lazy" src="image.png">
|
||||
<img id="img" loading="lazy">
|
||||
|
||||
<script>
|
||||
const img = document.querySelector('#img');
|
||||
|
||||
// Prevent the list of available images check from loading the image non-lazily.
|
||||
img.src = "image.png?image-loading-lazy-in-viewport-" + Math.random() + "-" + Date.now();
|
||||
|
||||
img.addEventListener("load", () => {
|
||||
parent.postMessage("image_loaded", "*");
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Image source selection using media queries is performed for img elements outside the document</title>
|
||||
<link rel="help" href="https://html.spec.whatwg.org/#reacting-to-environment-changes">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/#reacting-to-dom-mutations">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<iframe width="350" height="100" onload="async_test(this.contentWindow.run)" srcdoc="
|
||||
<!DOCTYPE html>
|
||||
<script>
|
||||
const { assert_equals } = parent;
|
||||
const iframe = parent.document.querySelector('iframe');
|
||||
|
||||
function run(t) {
|
||||
const picture = document.createElement('picture');
|
||||
|
||||
const source1 = document.createElement('source');
|
||||
source1.setAttribute('media', '(min-width: 300px)');
|
||||
source1.setAttribute('srcset', 'data:,a');
|
||||
picture.append(source1);
|
||||
|
||||
const source2 = document.createElement('source');
|
||||
source2.setAttribute('media', '(min-width: 200px)');
|
||||
source2.setAttribute('srcset', 'data:,b');
|
||||
picture.append(source2);
|
||||
|
||||
const img = document.createElement('img');
|
||||
img.src = 'data:,c';
|
||||
picture.append(img);
|
||||
|
||||
queueMicrotask(t.step_func(function() {
|
||||
assert_equals(img.currentSrc, 'data:,a', 'Initial currentSrc value');
|
||||
matchMedia(source1.media).addEventListener(
|
||||
'change',
|
||||
function() {
|
||||
queueMicrotask(t.step_func(function() {
|
||||
assert_equals(img.currentSrc, 'data:,b', 'After MQ change');
|
||||
img.remove();
|
||||
queueMicrotask(t.step_func(function() {
|
||||
assert_equals(img.currentSrc, 'data:,c', 'After removing img');
|
||||
t.done();
|
||||
}));
|
||||
}));
|
||||
},
|
||||
{ once: true }
|
||||
);
|
||||
iframe.width = 250;
|
||||
}));
|
||||
}
|
||||
</script>
|
||||
"></iframe>
|
||||
Loading…
Add table
Add a link
Reference in a new issue