mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
Update web-platform-tests to revision b'b728032f59a396243864b0f8584e7211e3632005'
This commit is contained in:
parent
ace9b32b1c
commit
df68c4e5d1
15632 changed files with 514865 additions and 155000 deletions
|
@ -0,0 +1,20 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Image dimensions are available synchronously after changing src to an already-loaded image</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1797798">
|
||||
<img id="existing">
|
||||
<script>
|
||||
let src = "/images/green.png";
|
||||
let existing = document.getElementById("existing");
|
||||
async_test(function(t) {
|
||||
let tmp = document.createElement("img");
|
||||
tmp.src = src;
|
||||
tmp.onload = t.step_func_done(function() {
|
||||
existing.src = src;
|
||||
assert_equals(existing.width, 100);
|
||||
assert_equals(existing.height, 50);
|
||||
});
|
||||
});
|
||||
</script>
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Inline image element blocks load until source is changed to empty source</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<img src="/images/blue.png?pipe=trickle(d100)">
|
||||
<script>
|
||||
|
||||
async_test(t => {
|
||||
const image = document.querySelector("img");
|
||||
|
||||
assert_false(image.complete, "The image is loading initially");
|
||||
|
||||
// Complete the test as soon as we obtained the window "load" event,
|
||||
// which should happen as soon as the image stops loading by moving
|
||||
// to an empty source.
|
||||
window.addEventListener("load", t.step_func_done(() => {
|
||||
assert_true(image.complete, "The image is no longer loading once the window 'load' event is dispatched");
|
||||
}));
|
||||
|
||||
// Stop loading the image.
|
||||
image.src = "";
|
||||
}, "Image element delays window's load event until the image changes to empty source");
|
||||
|
||||
</script>
|
|
@ -39,7 +39,7 @@ onload = function() {
|
|||
var expected = {wide:resolve(img.dataset.wide), narrow:resolve(img.dataset.narrow)};
|
||||
var current = iframe.className;
|
||||
var next = current === 'wide' ? 'narrow' : 'wide';
|
||||
var expect_change = expected[next].indexOf('broken.png') === -1 && !('noChange' in img.dataset);
|
||||
var expect_change = expected[next].indexOf('undecodable.png') === -1 && !('noChange' in img.dataset);
|
||||
|
||||
test(function() {
|
||||
assert_equals(img.currentSrc, expected[current]);
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
|
||||
<style>
|
||||
html { overflow: hidden; }
|
||||
#change {
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
<html class="reftest-wait">
|
||||
<title>Composited images correctly display under large scale transform changes</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
|
||||
<link rel="match" href="image-compositing-large-scale-change-ref.html"/>
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-img-element">
|
||||
<style>
|
||||
|
|
|
@ -0,0 +1,2 @@
|
|||
<!DOCTYPE html>
|
||||
<img src="resources/image.png">
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes">
|
||||
<link rel="help" href="https://crbug.com/1308299">
|
||||
<link rel="match" href="image-loading-lazy-clip-path-ref.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<img id=target loading="lazy"
|
||||
src="resources/image.png"
|
||||
style="vertical-align: middle; clip-path: polygon(0 0, 110% 0, 110% 110%, 0 110%, 0 0)">
|
||||
<script>
|
||||
target.onload = takeScreenshot;
|
||||
</script>
|
||||
</html>
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
img.promise
|
||||
.then(t.unreached_func("The image should not load."))
|
||||
.catch(t.step_func_done());
|
||||
.catch(t.step_func(() => { img.element().onload = t.step_func_done(); img.element().src = 'resources/image.png'; }));
|
||||
}, "Test that when deferred image is loaded, it uses the latest crossorigin attribute.");
|
||||
</script>
|
||||
|
||||
|
|
|
@ -0,0 +1,2 @@
|
|||
<!DOCTYPE html>
|
||||
<img src="resources/image.png">
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<title>Lazy loaded Images with data url placeholders can be overwritten by a src change</title>
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/images.html#update-the-image-data">
|
||||
<link rel="match" href="image-loading-lazy-data-url-to-https-ref.html">
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<img id="image" loading="lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 872 490' width='872' height='490' style='background: green' %3E%3C/svg%3E">
|
||||
|
||||
<script>
|
||||
const image = document.querySelector('#image');
|
||||
|
||||
window.onload = function() {
|
||||
// trigger intersection observer through forced layout.
|
||||
image.offsetWidth;
|
||||
image.setAttribute("src", 'resources/image.png');
|
||||
setTimeout(() => { takeScreenshot(); }, 100);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>Lazy loaded Images handle correctly when setting src to empty</title>
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/images.html#update-the-image-data">
|
||||
<div id=log></div>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<img id="image" loading="lazy" src="resources/image.png">
|
||||
|
||||
<script>
|
||||
const image = document.querySelector('#image');
|
||||
|
||||
async_test(function(t) {
|
||||
image.onerror = t.step_func(function(e) {
|
||||
assert_equals(e.type, "error", "null image source check failed");
|
||||
image.onload = t.step_func(function() {
|
||||
t.done();
|
||||
});
|
||||
image.src = "resources/image.png";
|
||||
});
|
||||
image.src = "";
|
||||
}, "lazy loaded image and empty src");
|
||||
|
||||
</script>
|
|
@ -10,8 +10,7 @@
|
|||
<div style="height:1000vh;"></div>
|
||||
<iframe id="iframe" src="resources/image-loading-lazy-in-viewport.html">
|
||||
</iframe>
|
||||
<iframe id="sandboxediframe" sandbox="allow-same-origin"
|
||||
src="resources/subframe.html">
|
||||
<iframe id="sandboxediframe" sandbox="allow-same-origin">
|
||||
</iframe>
|
||||
<script>
|
||||
promise_test(async t => {
|
||||
|
|
|
@ -37,19 +37,24 @@
|
|||
function changeImageSourceAndScrollToTop() {
|
||||
top_div.scrollIntoView();
|
||||
|
||||
// Lazily load a "different" image.
|
||||
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 " +
|
||||
"the `src` attribute is changed");
|
||||
|
||||
// In 1s, scroll the image *back* into view, and record that it loads
|
||||
// successfully.
|
||||
// Allow some time for scroll back to top, since we don't
|
||||
// want the image to still be in the viewport and trigger a
|
||||
// load due to the scroll being slow.
|
||||
t.step_timeout(() => {
|
||||
image.onload = t.step_func_done();
|
||||
image.scrollIntoView();
|
||||
}, 1000);
|
||||
// Lazily load a "different" image.
|
||||
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 " +
|
||||
"the `src` attribute is changed");
|
||||
|
||||
// In 1s, scroll the image *back* into view, and record that it loads
|
||||
// successfully.
|
||||
t.step_timeout(() => {
|
||||
image.onload = t.step_func_done();
|
||||
image.scrollIntoView();
|
||||
}, 1000);
|
||||
}, 500);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Image with zero intersection area is lazy-loaded</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-img-element">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/#lazy-load-intersection-observer">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1785186">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div style="height: 0; overflow: hidden;">
|
||||
<img style="display: block" id=target loading="lazy" width="100" height="100">
|
||||
</div>
|
||||
<script>
|
||||
async_test(function(t) {
|
||||
target.addEventListener("load", t.step_func_done(function() {}));
|
||||
target.src = "resources/image.png?zero-intersection-area";
|
||||
});
|
||||
</script>
|
|
@ -95,8 +95,6 @@
|
|||
<picture><source type=""><img src="/images/green-2x2.png" data-desc="parent is picture, previous source has type changed"></picture>
|
||||
<picture><source type=""><img src="/images/green-2x2.png" data-desc="parent is picture, previous source has type removed"></picture>
|
||||
|
||||
<!-- should not invoke update the image data -->
|
||||
|
||||
<img srcset="/images/green-2x2.png" data-desc="srcset is set to same value">
|
||||
<img srcset="/images/green-2x2.png" sizes data-desc="sizes is set to same value">
|
||||
|
||||
|
@ -475,11 +473,11 @@ onload = function() {
|
|||
|
||||
t('srcset is set to same value', function(img) {
|
||||
img.srcset = "/images/green-2x2.png";
|
||||
}, 'timeout');
|
||||
}, 'load');
|
||||
|
||||
t('sizes is set to same value', function(img) {
|
||||
img.sizes = '';
|
||||
}, 'timeout');
|
||||
}, 'load');
|
||||
|
||||
t('crossorigin state not changed: absent, removeAttribute', function(img) {
|
||||
img.removeAttribute('crossorigin');
|
||||
|
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Scrolling a lazy loaded image into view in an iframe</title>
|
||||
<script src='/resources/testharness.js'></script>
|
||||
<script src='/resources/testharnessreport.js'></script>
|
||||
<iframe onload="async_test(this.contentWindow.run)" srcdoc="
|
||||
<!DOCTYPE html>
|
||||
<script src='/resources/testharness.js'></script>
|
||||
<script src='/resources/testharnessreport.js'></script>
|
||||
<script src='../resources/common.js'></script>
|
||||
|
||||
<h1>Scroll down...</h1>
|
||||
<p>Scroll down...</p>
|
||||
<p>Scroll down...</p>
|
||||
<img id='below_iframe_viewport_img' src='resources/image.png' loading='lazy'
|
||||
onload='below_iframe_viewport_img.resolve();' onerror='below_iframe_viewport_img.reject();'>
|
||||
|
||||
<script>
|
||||
const scroll_trigger_img = new ElementLoadPromise('visible');
|
||||
const below_iframe_viewport_img = new ElementLoadPromise('below_iframe_viewport_img');
|
||||
|
||||
function run(t) {
|
||||
below_iframe_viewport_img.element().scrollIntoView();
|
||||
below_iframe_viewport_img.promise
|
||||
.then(t.step_func(() => {
|
||||
assert_not_equals(below_iframe_viewport_img.element().width, 0, 'width should be greater than zero after scrolling');
|
||||
assert_not_equals(below_iframe_viewport_img.element().height, 0, 'height should be greater than zero after scrolling');
|
||||
t.done();
|
||||
}))
|
||||
.catch(t.unreached_func('The below_iframe_viewport image should load'));
|
||||
};
|
||||
</script>
|
||||
"></iframe>
|
|
@ -82,7 +82,7 @@
|
|||
<img srcset='/images/green-1x1.png?e60 50w, /images/green-16x16.png?e60 51w' sizes='(min-width:0) or (min-width:-1px) 1px'>
|
||||
<img srcset='/images/green-1x1.png?e61 50w, /images/green-16x16.png?e61 51w' sizes='(min-width:0) or (unknown "general-enclosed") 1px'>
|
||||
<img srcset='/images/green-1x1.png?e62 50w, /images/green-16x16.png?e62 51w' sizes='(min-width:0) or unknown-general-enclosed(foo) 1px'>
|
||||
<img srcset='/images/green-1x1.png?e63 50w, /images/green-16x16.png?e63 51w' sizes='(min-width:0) or (!) 100vw, 1px'>
|
||||
<img srcset='/images/green-1x1.png?e63 50w, /images/green-16x16.png?e63 51w' sizes='(min-width:0) or (]) 100vw, 1px'>
|
||||
<img srcset='/images/green-1x1.png?e64 50w, /images/green-16x16.png?e64 51w' sizes='(min-width:0) or unknown-media-type 100vw, 1px'>
|
||||
<img srcset='/images/green-1x1.png?e65 50w, /images/green-16x16.png?e65 51w' sizes='(123) 100vw, 1px'>
|
||||
<img srcset='/images/green-1x1.png?e66 50w, /images/green-16x16.png?e66 51w' sizes='not (123) 100vw, 1px'>
|
||||
|
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<title>An img's current request should be updated in a microtask after selecting an image source</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id=log></div>
|
||||
|
||||
<script>
|
||||
async_test(function(t) {
|
||||
const picture = document.createElement("picture");
|
||||
|
||||
const nonMatchingSource = document.createElement("source");
|
||||
nonMatchingSource.media = "not all";
|
||||
nonMatchingSource.srcset = "data:,a";
|
||||
picture.append(nonMatchingSource);
|
||||
|
||||
const matchingSource = document.createElement("source");
|
||||
matchingSource.media = "all";
|
||||
matchingSource.srcset = "data:,b";
|
||||
picture.append(matchingSource);
|
||||
|
||||
const img = document.createElement("img");
|
||||
img.src = "data:,c";
|
||||
|
||||
assert_equals(img.currentSrc, "", "after assigning to img.src but before the corresponding microtask is run");
|
||||
|
||||
queueMicrotask(t.step_func(function() {
|
||||
assert_equals(img.currentSrc, "data:,c", "after assigning to img.src and after corresponding microtask is run");
|
||||
|
||||
picture.append(img);
|
||||
assert_equals(img.currentSrc, "data:,c", "after appending img to picture but before the corresponding microtask is run");
|
||||
|
||||
queueMicrotask(t.step_func(function() {
|
||||
assert_equals(img.currentSrc, "data:,b", "after appending img to picture and after the corresponding microtask is run");
|
||||
t.done();
|
||||
}));
|
||||
}));
|
||||
}, "currentSrc is updated only after the microtask that updates the current request is run");
|
||||
</script>
|
Loading…
Add table
Add a link
Reference in a new issue