Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-06 06:00:15 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision 0d318188757a9c996e20b82db201fd04de5aa255

Browse source
This commit is contained in:
James Graham 2015-03-27 09:15:38 +00:00
parent b2a5225831
commit 1a81b18b9f
12321 changed files with 544385 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

0
tests/wpt/web-platform-tests/html/semantics/embedded-content/the-img-element/.gitkeep Normal file
View file

BIN
tests/wpt/web-platform-tests/html/semantics/embedded-content/the-img-element/3.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 89 KiB

4
tests/wpt/web-platform-tests/html/semantics/embedded-content/the-img-element/brokenimg.jpg Normal file
View file

@ -0,0 +1,4 @@
<!DOCTYPE HTML>
<html>
</html>

60
tests/wpt/web-platform-tests/html/semantics/embedded-content/the-img-element/contains.json Normal file
View file

@ -0,0 +1,60 @@
[
{
"id": "alt",
"original_id": "alt",
"children": [
{
"id": "general-guidelines",
"original_id": "general-guidelines"
},
{
"id": "a-link-or-button-containing-nothing-but-the-image",
"original_id": "a-link-or-button-containing-nothing-but-the-image"
},
{
"id": "a-phrase-or-paragraph-with-an-alternative-graphical-representation-charts-diagrams-graphs-maps-illustrations",
"original_id": "a-phrase-or-paragraph-with-an-alternative-graphical-representation:-charts,-diagrams,-graphs,-maps,-illustrations"
},
{
"id": "a-short-phrase-or-label-with-an-alternative-graphical-representation-icons-logos",
"original_id": "a-short-phrase-or-label-with-an-alternative-graphical-representation:-icons,-logos"
},
{
"id": "text-that-has-been-rendered-to-a-graphic-for-typographical-effect",
"original_id": "text-that-has-been-rendered-to-a-graphic-for-typographical-effect"
},
{
"id": "a-graphical-representation-of-some-of-the-surrounding-text",
"original_id": "a-graphical-representation-of-some-of-the-surrounding-text"
},
{
"id": "a-purely-decorative-image-that-doesn-t-add-any-information",
"original_id": "a-purely-decorative-image-that-doesn't-add-any-information"
},
{
"id": "a-group-of-images-that-form-a-single-larger-picture-with-no-links",
"original_id": "a-group-of-images-that-form-a-single-larger-picture-with-no-links"
},
{
"id": "a-group-of-images-that-form-a-single-larger-picture-with-links",
"original_id": "a-group-of-images-that-form-a-single-larger-picture-with-links"
},
{
"id": "a-key-part-of-the-content",
"original_id": "a-key-part-of-the-content"
},
{
"id": "an-image-not-intended-for-the-user",
"original_id": "an-image-not-intended-for-the-user"
},
{
"id": "guidance-for-markup-generators",
"original_id": "guidance-for-markup-generators"
},
{
"id": "guidance-for-conformance-checkers",
"original_id": "guidance-for-conformance-checkers"
}
]
}
]

33
tests/wpt/web-platform-tests/html/semantics/embedded-content/the-img-element/current-pixel-density/basic.html Normal file
View file

@ -0,0 +1,33 @@
<!doctype html>
<title>img current pixel density basic</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id=log></div>
<img src="/images/green-256x256.png" data-expect="256">
<img srcset="/images/green-256x256.png 1x" data-expect="256">
<img srcset="/images/green-256x256.png 1.6x" data-expect="160">
<img srcset="/images/green-256x256.png 2x" data-expect="128">
<img srcset="/images/green-256x256.png 10000x" data-expect="0">
<img srcset="/images/green-256x256.png 9e99999999999999999999999x" data-expect="0">
<img srcset="/images/green-256x256.png 256w" sizes="256px" data-expect="256">
<img srcset="/images/green-256x256.png 512w" sizes="256px" data-expect="128">
<img srcset="/images/green-256x256.png 256w" sizes="512px" data-expect="512">
<img srcset="/images/green-256x256.png 256w" sizes="1px" data-expect="1">
<img srcset="/images/green-256x256.png 256w" sizes="0px" data-expect="0">
<script>
setup({explicit_done:true});
onload = function() {
[].forEach.call(document.images, function(img) {
test(function() {
var expected = parseFloat(img.dataset.expect);
assert_equals(img.width, expected, 'width');
assert_equals(img.height, expected, 'height');
assert_equals(img.clientWidth, expected, 'clientWidth');
assert_equals(img.clientHeight, expected, 'clientHeight');
assert_equals(img.naturalWidth, 256, 'naturalWidth');
assert_equals(img.naturalHeight, 256, 'naturalHeight');
}, img.outerHTML);
});
done();
};
</script>

30
tests/wpt/web-platform-tests/html/semantics/embedded-content/the-img-element/current-pixel-density/error.html Normal file
View file

@ -0,0 +1,30 @@
<!doctype html>
<title>img current pixel density error</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id=log></div>
<img id=ref src="404" alt="testing">
<img srcset="404" alt="testing">
<img srcset="404 0.5x" alt="testing">
<img srcset="404 2x" alt="testing">
<img srcset="404 100w" alt="testing">
<img srcset="404 100w" sizes="500px" alt="testing">
<picture><img src="404 100w" sizes="500px" alt="testing"></picture>
<script>
setup({explicit_done:true});
onload = function() {
var expected_width = ref.width;
var expected_height = ref.height;
[].forEach.call(document.images, function(img) {
test(function() {
assert_not_equals(expected_width, 0, 'expected_width');
assert_not_equals(expected_height, 0, 'expected_height');
assert_equals(img.width, expected_width, 'width');
assert_equals(img.height, expected_height, 'height');
assert_equals(img.naturalWidth, 0, 'naturalWidth');
assert_equals(img.naturalHeight, 0, 'naturalHeight');
}, img.outerHTML);
});
done();
};
</script>

78
tests/wpt/web-platform-tests/html/semantics/embedded-content/the-img-element/environment-changes/iframed.sub.html Normal file
View file

@ -0,0 +1,78 @@
<!doctype html>
<img
data-desc="img (no src)"
data-narrow=""
data-wide=""
data-no-change>
<img src=""
data-desc="img (empty src)"
data-narrow=""
data-wide=""
data-no-change>
<img src="/images/broken.png?30-{{GET[id]}}"
data-desc="img (src only) broken image"
data-narrow="/images/broken.png?30-{{GET[id]}}"
data-wide="/images/broken.png?30-{{GET[id]}}"
data-no-change>
<img src="/images/green-1x1.png?40-{{GET[id]}}"
data-desc="img (src only) valid image"
data-narrow="/images/green-1x1.png?40-{{GET[id]}}"
data-wide="/images/green-1x1.png?40-{{GET[id]}}"
data-no-change>
<img srcset="/images/broken.png?50-{{GET[id]}}"
data-desc="img (srcset 1 cand) broken image"
data-narrow="/images/broken.png?50-{{GET[id]}}"
data-wide="/images/broken.png?50-{{GET[id]}}"
data-no-change>
<img srcset="/images/green-1x1.png?60-{{GET[id]}}"
data-desc="img (srcset 1 cand) valid image"
data-narrow="/images/green-1x1.png?60-{{GET[id]}}"
data-wide="/images/green-1x1.png?60-{{GET[id]}}"
data-no-change>
<picture>
<source media="(max-width:500px)" srcset="/images/broken.png?70-{{GET[id]}}">
<img src="/images/broken.png?71-{{GET[id]}}"
data-desc="picture: source (max-width:500px) broken image, img broken image"
data-narrow="/images/broken.png?70-{{GET[id]}}"
data-wide="/images/broken.png?71-{{GET[id]}}">
</picture>
<picture>
<source media="(max-width:500px)" srcset="/images/broken.png?80-{{GET[id]}}">
<img src="/images/green-2x2.png?81-{{GET[id]}}"
data-desc="picture: source (max-width:500px) broken image, img valid image"
data-narrow="/images/broken.png?80-{{GET[id]}}"
data-wide="/images/green-2x2.png?81-{{GET[id]}}">
</picture>
<picture>
<source media="(max-width:500px)" srcset="/images/green-1x1.png?90-{{GET[id]}}">
<img src="/images/broken.png?91-{{GET[id]}}"
data-desc="picture: source (max-width:500px) valid image, img broken image"
data-narrow="/images/green-1x1.png?90-{{GET[id]}}"
data-wide="/images/broken.png?91-{{GET[id]}}">
</picture>
<picture>
<source media="(max-width:500px)" srcset="/images/green-1x1.png?100-{{GET[id]}}">
<img src="/images/green-2x2.png?101-{{GET[id]}}"
data-desc="picture: source (max-width:500px) valid image, img valid image"
data-narrow="/images/green-1x1.png?100-{{GET[id]}}"
data-wide="/images/green-2x2.png?101-{{GET[id]}}">
</picture>
<picture>
<source media="(max-width:500px)" srcset="/images/green-1x1.png?110-{{GET[id]}}">
<img src="/images/green-1x1.png?110-{{GET[id]}}"
data-desc="picture: same URL in source (max-width:500px) and img"
data-narrow="/images/green-1x1.png?110-{{GET[id]}}"
data-wide="/images/green-1x1.png?110-{{GET[id]}}"
data-no-change>
</picture>

65
tests/wpt/web-platform-tests/html/semantics/embedded-content/the-img-element/environment-changes/viewport-change.html Normal file
View file

@ -0,0 +1,65 @@
<!doctype html>
<title>img viewport change</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/common/utils.js"></script>
<style>
.narrow { width:50px }
.wide { width:1000px }
</style>
<div id=log></div>
<script>
setup({explicit_done:true});
function resolve(url) {
if (url === "") {
return url;
}
var a = document.createElement('a');
a.href = url;
return a.href;
}
function insertIframe(className) {
var iframe = document.createElement('iframe');
iframe.className = className;
iframe.src = 'iframed.sub.html?id=' + token();
document.body.appendChild(iframe);
}
insertIframe('narrow');
insertIframe('wide');
var start_date = new Date();
onload = function() {
var load_time = new Date() - start_date;
var iframes = document.getElementsByTagName('iframe');
[].forEach.call(iframes, function(iframe) {
[].forEach.call(iframe.contentDocument.images, function(img) {
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') !== 0 && !('noChange' in img.dataset);
test(function() {
assert_equals(img.currentSrc, expected[current]);
}, img.dataset.desc + ', onload, ' + current);
async_test(function() {
img.onload = this.unreached_func('Got unexpected load event');
img.onerror = this.unreached_func('Got unexpected error event');
if (expect_change) {
img.onload = this.step_func_done(function() {
assert_equals(img.currentSrc, expected[next]);
});
} else {
setTimeout(this.step_func_done(), 500 + load_time);
}
}, img.dataset.desc + ', resize to ' + next);
});
iframe.classList.toggle('wide');
iframe.classList.toggle('narrow');
});
done();
}
</script>

BIN
tests/wpt/web-platform-tests/html/semantics/embedded-content/the-img-element/image-1.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 380 KiB

82
tests/wpt/web-platform-tests/html/semantics/embedded-content/the-img-element/img.complete.html Normal file
View file

@ -0,0 +1,82 @@
<!DOCTYPE HTML>
<title>DOM img complete Test</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<link rel="author" title="Anselm Hannemann" href="http://anselm-hannemann.com/" />
<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-img-complete" />
<meta name="assert" content="Tests the complete status of the img-element">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<img id="imgTestTag">
<img src="" id="imgTestTag2">
<img id="imgTestTag3" style="width: 80px; height:auto;">
<img id="imgTestTag4">
<script>
var imageInstance = document.createElement('img');
imageInstance.style.display = 'none';
document.body.appendChild(imageInstance);
</script>
<div id="log"></div>
<script>
test(function() {
assert_true(document.getElementById("imgTestTag").complete);
}, "img src omitted");
test(function() {
assert_true(document.getElementById("imgTestTag2").complete);
}, "img src empty");
// test if set to true after img is completely available
var t = async_test("async src complete test");
t.step(function(){
document.getElementById("imgTestTag3").src = '3.jpg?nocache=' + Math.random();
//test if img.complete is set to false if src is changed
assert_false(document.getElementById("imgTestTag3").complete, "src changed, should be set to false")
});
document.getElementById("imgTestTag3").onload = t.step_func(function(){
assert_true(document.getElementById("imgTestTag3").complete);
t.done();
});
// https://html.spec.whatwg.org/multipage/multipage/embedded-content-1.html#update-the-image-data
// says to "await a stable state" before fetching so we use a separate <script>
imageInstance.src = 'image-1.jpg?pipe=trickle(d1)&nocache=' + Math.random(); // make sure the image isn't in cache
</script>
<script>
// test: The final task that is queued by the networking task source once the resource has been fetched has been queued, but has not yet been run, and the img element is not in the broken state
async_test(function(t) {
assert_false(imageInstance.complete, "imageInstance.complete should be false");
var startTime = Date.now();
while (true) {
if (Date.now() - startTime > 2000)
assert_unreached('.complete didn\'t change to true');
if (imageInstance.complete === true) break;
}
t.done();
},
'IDL attribute complete returns true when image resource has been fetched but not run yet & image is not in broken state');
// test if broken img does not pass
var t2 = async_test("async src broken test");
var img4 = document.getElementById("imgTestTag4");
t2.step(
function(){
img4.src = 'brokenimg.jpg';
//test if img.complete is set to false if src is changed
assert_false(img4.complete, "src changed to broken img, should be set to false");
});
img4.onload = img4.onerror = t2.step_func(function(event){
assert_equals(event.type, "error");
assert_true(img4.complete);
t2.done();
});
</script>

386
tests/wpt/web-platform-tests/html/semantics/embedded-content/the-img-element/relevant-mutations.html Normal file
View file

@ -0,0 +1,386 @@
<!doctype html>
<title>img relevant mutations</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id=log></div>
<!-- should invoke update the image data -->
<img data-desc="src set">
<img src="/images/green-2x2.png" data-desc="src changed">
<img src="/images/green-2x2.png" data-desc="src removed">
<img data-desc="srcset set">
<img srcset="/images/green-2x2.png" data-desc="srcset changed">
<img srcset="/images/green-2x2.png" data-desc="srcset removed">
<img data-desc="sizes set">
<img sizes="" data-desc="sizes changed">
<img sizes="" data-desc="sizes removed">
<img src="/images/green-2x2.png" data-desc="src set to same value">
<img data-desc="crossorigin absent to empty">
<img data-desc="crossorigin absent to anonymous">
<img data-desc="crossorigin absent to use-credentials">
<img crossorigin data-desc="crossorigin empty to absent">
<img crossorigin data-desc="crossorigin empty to use-credentials">
<img crossorigin=anonymous data-desc="crossorigin anonymous to absent">
<img crossorigin=anonymous data-desc="crossorigin anonymous to use-credentials">
<img crossorigin=use-credentials data-desc="crossorigin use-credentials to absent">
<img crossorigin=use-credentials data-desc="crossorigin use-credentials to empty">
<img crossorigin=use-credentials data-desc="crossorigin use-credentials to anonymous">
<img src="/images/green-2x2.png" data-desc="inserted into picture"><picture></picture>
<picture><img src="/images/green-2x2.png" data-desc="removed from picture"></picture>
<picture><img src="/images/green-2x2.png" data-desc="parent is picture, previous source inserted"></picture>
<picture><source><img src="/images/green-2x2.png" data-desc="parent is picture, previous source removed"></picture>
<picture><source><img src="/images/green-2x2.png" data-desc="parent is picture, previous source has srcset set"></picture>
<picture><source srcset=""><img src="/images/green-2x2.png" data-desc="parent is picture, previous source has srcset changed"></picture>
<picture><source srcset=""><img src="/images/green-2x2.png" data-desc="parent is picture, previous source has srcset removed"></picture>
<picture><source><img src="/images/green-2x2.png" data-desc="parent is picture, previous source has sizes set"></picture>
<picture><source sizes=""><img src="/images/green-2x2.png" data-desc="parent is picture, previous source has sizes changed"></picture>
<picture><source sizes=""><img src="/images/green-2x2.png" data-desc="parent is picture, previous source has sizes removed"></picture>
<picture><source><img src="/images/green-2x2.png" data-desc="parent is picture, previous source has media set"></picture>
<picture><source media=""><img src="/images/green-2x2.png" data-desc="parent is picture, previous source has media changed"></picture>
<picture><source media=""><img src="/images/green-2x2.png" data-desc="parent is picture, previous source has media removed"></picture>
<picture><source><img src="/images/green-2x2.png" data-desc="parent is picture, previous source has type set"></picture>
<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">
<img src="/images/green-2x2.png" data-desc="crossorigin state not changed: absent, removeAttribute">
<img src="/images/green-2x2.png" crossorigin data-desc="crossorigin state not changed: empty to anonymous">
<img src="/images/green-2x2.png" crossorigin=anonymous data-desc="crossorigin state not changed: anonymous to foobar">
<img src="/images/green-2x2.png" crossorigin=use-credentials data-desc="crossorigin state not changed: use-credentials to USE-CREDENTIALS">
<img src="/images/green-2x2.png" data-desc="inserted into picture ancestor"><picture><span></span></picture>
<picture><span><img src="/images/green-2x2.png" data-desc="removed from picture ancestor"></span></picture>
<picture><span><img src="/images/green-2x2.png" data-desc="ancestor picture has a source inserted"></span></picture>
<picture><source><span><img src="/images/green-2x2.png" data-desc="ancestor picture has a source removed"></span></picture>
<picture><span><img src="/images/green-2x2.png" data-desc="ancestor picture; previous sibling source inserted"></span></picture>
<picture><span><source><img src="/images/green-2x2.png" data-desc="ancestor picture; previous sibling source removed"></span></picture>
<picture><img src="/images/green-2x2.png" data-desc="parent is picture, following sibling source inserted"></picture>
<picture><img src="/images/green-2x2.png" data-desc="parent is picture, following sibling source removed"><source></picture>
<picture><img src="/images/green-2x2.png" data-desc="parent is picture, following sibling source has srcset set"><source></picture>
<img src="/images/green-2x2.png" data-desc="media on img set">
<img src="/images/green-2x2.png" data-desc="type on img set">
<img src="/images/green-2x2.png" data-desc="class on img set">
<img src="/images/green-2x2.png" data-desc="alt on img set">
<picture><source><img src="/images/green-2x2.png" data-desc="src on previous sibling source set"></picture>
<picture><source><img src="/images/green-2x2.png" data-desc="class on previous sibling source set"></picture>
<img src="/images/green-2x2.png" data-desc="inserted/removed children of img">
<picture><img src="/images/green-2x2.png" data-desc="picture is inserted"></picture><span></span>
<picture><img src="/images/green-2x2.png" data-desc="picture is removed"></picture>
<picture><img src="/images/green-2x2.png" data-desc="parent is picture, following img inserted"></picture>
<picture><img src="/images/green-2x2.png" data-desc="parent is picture, following img removed"><img></picture>
<picture><img src="/images/green-2x2.png" data-desc="parent is picture, following img has src set"><img></picture>
<picture><img src="/images/green-2x2.png" data-desc="parent is picture, following img has srcset set"><img></picture>
<picture><img src="/images/green-2x2.png" data-desc="parent is picture, following img has sizes set"><img></picture>
<script>
setup({explicit_done:true});
function t(desc, func, expect) {
async_test(function() {
var img = document.querySelector('[data-desc="' + desc + '"]');
img.onload = img.onerror = this.unreached_func('update the image data was run');
if (expect == 'timeout') {
setTimeout(this.step_func_done(), 250);
} else {
img['on' + expect] = this.step_func_done(function() {});
setTimeout(this.unreached_func('update the image data was not run'), 250)
}
func.call(this, img);
}, desc);
}
onload = function() {
t('src set', function(img) {
img.src = '/images/green-2x2.png';
}, 'load');
t('src changed', function(img) {
img.src = '/images/green-2x2.png ';
}, 'load');
t('src removed', function(img) {
img.removeAttribute('src');
}, 'error');
t('srcset set', function(img) {
img.srcset = '/images/green-2x2.png';
}, 'load');
t('srcset changed', function(img) {
img.srcset = '/images/green-2x2.png ';
}, 'load');
t('srcset removed', function(img) {
img.removeAttribute('srcset');
}, 'error');
t('sizes set', function(img) {
img.sizes = '';
}, 'error');
t('sizes changed', function(img) {
img.sizes = ' ';
}, 'error');
t('sizes removed', function(img) {
img.removeAttribute('sizes');
}, 'error');
t('src set to same value', function(img) {
img.src = '/images/green-2x2.png';
}, 'load');
t('crossorigin absent to empty', function(img) {
img.crossOrigin = '';
}, 'error');
t('crossorigin absent to anonymous', function(img) {
img.crossOrigin = 'anonymous';
}, 'error');
t('crossorigin absent to use-credentials', function(img) {
img.crossOrigin = 'use-credentials';
}, 'error');
t('crossorigin empty to absent', function(img) {
img.removeAttribute('crossorigin');
}, 'error');
t('crossorigin empty to use-credentials', function(img) {
img.crossOrigin = 'use-credentials';
}, 'error');
t('crossorigin anonymous to absent', function(img) {
img.removeAttribute('crossorigin');
}, 'error');
t('crossorigin anonymous to use-credentials', function(img) {
img.crossOrigin = 'use-credentials';
}, 'error');
t('crossorigin use-credentials to absent', function(img) {
img.removeAttribute('crossorigin');
}, 'error');
t('crossorigin use-credentials to empty', function(img) {
img.crossOrigin = '';
});
t('crossorigin use-credentials to anonymous', function(img) {
img.crossOrigin = 'anonymous';
});
t('inserted into picture', function(img) {
img.nextSibling.appendChild(img);
}, 'load');
t('removed from picture', function(img) {
img.parentNode.removeChild(img);
}, 'load');
t('parent is picture, previous source inserted', function(img) {
img.parentNode.insertBefore(document.createElement('source'), img);
}, 'load');
t('parent is picture, previous source removed', function(img) {
img.parentNode.removeChild(img.previousSibling);
}, 'load');
t('parent is picture, previous source has srcset set', function(img) {
img.previousSibling.srcset = '';
}, 'load');
t('parent is picture, previous source has srcset changed', function(img) {
img.previousSibling.srcset = ' ';
}, 'load');
t('parent is picture, previous source has srcset removed', function(img) {
img.previousSibling.removeAttribute('srcset');
}, 'load');
t('parent is picture, previous source has sizes set', function(img) {
img.previousSibling.sizes = '';
}, 'load');
t('parent is picture, previous source has sizes changed', function(img) {
img.previousSibling.sizes = ' ';
}, 'load');
t('parent is picture, previous source has sizes removed', function(img) {
img.previousSibling.removeAttribute('sizes');
}, 'load');
t('parent is picture, previous source has media set', function(img) {
img.previousSibling.media = '';
}, 'load');
t('parent is picture, previous source has media changed', function(img) {
img.previousSibling.media = ' ';
}, 'load');
t('parent is picture, previous source has media removed', function(img) {
img.previousSibling.removeAttribute('media');
}, 'load');
t('parent is picture, previous source has type set', function(img) {
img.previousSibling.type = '';
}, 'load');
t('parent is picture, previous source has type changed', function(img) {
img.previousSibling.type = ' ';
}, 'load');
t('parent is picture, previous source has type removed', function(img) {
img.previousSibling.removeAttribute('type');
}, 'load');
t('srcset is set to same value', function(img) {
img.srcset = "/images/green-2x2.png";
}, 'timeout');
t('sizes is set to same value', function(img) {
img.sizes = '';
}, 'timeout');
t('crossorigin state not changed: absent, removeAttribute', function(img) {
img.removeAttribute('crossorigin');
}, 'timeout');
t('crossorigin state not changed: empty to anonymous', function(img) {
img.crossOrigin = 'anonymous';
}, 'timeout');
t('crossorigin state not changed: anonymous to foobar', function(img) {
img.crossOrigin = 'foobar';
}, 'timeout');
t('crossorigin state not changed: use-credentials to USE-CREDENTIALS', function(img) {
img.crossOrigin = 'USE-CREDENTIALS';
}, 'timeout');
t('inserted into picture ancestor', function(img) {
img.nextSibling.firstChild.appendChild(img);
}, 'timeout');
t('removed from picture ancestor', function(img) {
img.parentNode.removeChild(img);
}, 'timeout');
t('ancestor picture has a source inserted', function(img) {
img.parentNode.parentNode.insertBefore(document.createElement('source'), img.parentNode);
}, 'timeout');
t('ancestor picture has a source removed', function(img) {
img.parentNode.parentNode.removeChild(img.parentNode.previousSibling);
}, 'timeout');
t('ancestor picture; previous sibling source inserted', function(img) {
img.parentNode.insertBefore(document.createElement('source'), img);
}, 'timeout');
t('ancestor picture; previous sibling source removed', function(img) {
img.parentNode.removeChild(img.previousSibling);
}, 'timeout');
t('parent is picture, following sibling source inserted', function(img) {
img.parentNode.appendChild(document.createElement('source'));
}, 'timeout');
t('parent is picture, following sibling source removed', function(img) {
img.parentNode.removeChild(img.nextSibling);
}, 'timeout');
t('parent is picture, following sibling source has srcset set', function(img) {
img.nextSibling.srcset = '';
}, 'timeout');
t('media on img set', function(img) {
img.setAttribute('media', '');
}, 'timeout');
t('type on img set', function(img) {
img.setAttribute('type', '');
}, 'timeout');
t('class on img set', function(img) {
img.className = '';
}, 'timeout');
t('alt on img set', function(img) {
img.alt = '';
}, 'timeout');
t('src on previous sibling source set', function(img) {
img.previousSibling.setAttribute('src', '');
}, 'timeout');
t('class on previous sibling source set', function(img) {
img.previousSibling.className = '';
}, 'timeout');
t('inserted/removed children of img', function(img) {
img.appendChild(document.createElement('source'));
setTimeout(this.step_func(function() {
img.removeChild(img.firstChild);
}), 0);
}, 'timeout');
t('picture is inserted', function(img) {
img.parentNode.nextSibling.appendChild(img.parentNode);
}, 'timeout');
t('picture is removed', function(img) {
img.parentNode.parentNode.removeChild(img.parentNode);
}, 'timeout');
t('parent is picture, following img inserted', function(img) {
img.parentNode.appendChild(document.createElement('img'));
}, 'timeout');
t('parent is picture, following img removed', function(img) {
img.parentNode.removeChild(img.nextSibling);
}, 'timeout');
t('parent is picture, following img has src set', function(img) {
img.nextSibling.src = '';
}, 'timeout');
t('parent is picture, following img has srcset set', function(img) {
img.nextSibling.srcset = '';
}, 'timeout');
t('parent is picture, following img has sizes set', function(img) {
img.nextSibling.sizes = '';
}, 'timeout');
done();
};
</script>

42
tests/wpt/web-platform-tests/html/semantics/embedded-content/the-img-element/sizes/parse-a-sizes-attribute.html Normal file
View file

@ -0,0 +1,42 @@
<!doctype html>
<title>img parse a sizes attribute</title>
<meta name="timeout" content="long">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id=log></div>
<iframe data-desc="standards mode" style="width:1000px; height:1000px" src="sizes-iframed.sub.html?doctype=doctype%20html&style="></iframe>
<iframe data-desc="quirks mode" style="width:1000px; height:1000px" src="sizes-iframed.sub.html?doctype=----&style="></iframe>
<iframe data-desc="display:none" style="width:1000px; height:1000px" src="sizes-iframed.sub.html?doctype=doctype%20html&style=display:none"></iframe>
<iframe data-desc="width:1000px" style="width:1000px; height:1000px" src="sizes-iframed.sub.html?doctype=doctype%20html&style=width:1000px%3B%20height:16px"></iframe>
<script>
setup({explicit_done:true});
function check(p, iframe) {
var current = p.firstElementChild;
var ref_sizes = current.getAttribute('sizes');
var expect = p.firstElementChild.currentSrc;
if (expect) {
expect = expect.split('?')[0];
}
while (current = current.nextElementSibling) {
test(function() {
if (expect === '' || expect === null || expect === undefined) {
assert_unreached('ref currentSrc was ' + format_value(expect));
}
var got = current.currentSrc;
assert_greater_than(got.indexOf('?'), -1, 'expected a "?" in currentSrc');
got = got.split('?')[0];
assert_equals(got, expect);
}, current.outerHTML + ' ref sizes=' + format_value(ref_sizes) + ' (' + iframe.getAttribute('data-desc') + ')');
}
}
onload = function() {
[].forEach.call(document.querySelectorAll('iframe'), function(iframe) {
[].forEach.call(iframe.contentDocument.querySelectorAll('p'), function(p) {
check(p, iframe);
});
});
done();
}
</script>

170
tests/wpt/web-platform-tests/html/semantics/embedded-content/the-img-element/sizes/sizes-iframed.sub.html Normal file
View file

@ -0,0 +1,170 @@
<!{{GET[doctype]}}>
<style> img { {{GET[style]}} } </style>
<!-- First <img> in a <p> is the reference. The following <img>s should be equivalent -->
<!-- default is 100vw, not 300px -->
<p>
<img srcset='/images/green-1x1.png?a1 300w, /images/green-16x16.png?a1 301w' sizes='100vw'>
<img srcset='/images/green-1x1.png?a2 300w, /images/green-16x16.png?a2 301w'>
<p>
<img srcset='/images/green-1x1.png?b1 450w, /images/green-16x16.png?b1 451w' sizes='100vw'>
<img srcset='/images/green-1x1.png?b2 450w, /images/green-16x16.png?b2 451w'>
<p>
<img srcset='/images/green-1x1.png?c1 600w, /images/green-16x16.png?c1 601w' sizes='100vw'>
<img srcset='/images/green-1x1.png?c2 600w, /images/green-16x16.png?c2 601w'>
<p>
<img srcset='/images/green-1x1.png?d1 900w, /images/green-16x16.png?d1 901w' sizes='100vw'>
<img srcset='/images/green-1x1.png?d2 900w, /images/green-16x16.png?d2 901w'>
<p>
<img srcset='/images/green-1x1.png?e1 50w, /images/green-16x16.png?e1 51w' sizes='1px'>
<img srcset='/images/green-1x1.png?e2 50w, /images/green-16x16.png?e2 51w' sizes='0'>
<img srcset='/images/green-1x1.png?e3 50w, /images/green-16x16.png?e3 51w' sizes='-0'>
<img srcset='/images/green-1x1.png?e4 50w, /images/green-16x16.png?e4 51w' sizes='+0'>
<img srcset='/images/green-1x1.png?e5 50w, /images/green-16x16.png?e5 51w' sizes='+1px'>
<img srcset='/images/green-1x1.png?e6 50w, /images/green-16x16.png?e6 51w' sizes='.1px'>
<img srcset='/images/green-1x1.png?e7 50w, /images/green-16x16.png?e7 51w' sizes='0.1em'>
<img srcset='/images/green-1x1.png?e8 50w, /images/green-16x16.png?e8 51w' sizes='0.1ex'>
<img srcset='/images/green-1x1.png?e9 50w, /images/green-16x16.png?e9 51w' sizes='0.1ch'>
<img srcset='/images/green-1x1.png?e10 50w, /images/green-16x16.png?e10 51w' sizes='0.1rem'>
<img srcset='/images/green-1x1.png?e11 50w, /images/green-16x16.png?e11 51w' sizes='0.1vw'>
<img srcset='/images/green-1x1.png?e12 50w, /images/green-16x16.png?e12 51w' sizes='0.1vh'>
<img srcset='/images/green-1x1.png?e13 50w, /images/green-16x16.png?e13 51w' sizes='0.1vmin'>
<img srcset='/images/green-1x1.png?e14 50w, /images/green-16x16.png?e14 51w' sizes='0.1vmax'>
<img srcset='/images/green-1x1.png?e15 50w, /images/green-16x16.png?e15 51w' sizes='0.1cm'>
<img srcset='/images/green-1x1.png?e16 50w, /images/green-16x16.png?e16 51w' sizes='1mm'>
<img srcset='/images/green-1x1.png?e17 50w, /images/green-16x16.png?e17 51w' sizes='1q'>
<img srcset='/images/green-1x1.png?e18 50w, /images/green-16x16.png?e18 51w' sizes='0.01in'>
<img srcset='/images/green-1x1.png?e19 50w, /images/green-16x16.png?e19 51w' sizes='0.1pc'>
<img srcset='/images/green-1x1.png?e20 50w, /images/green-16x16.png?e20 51w' sizes='0.1pt'>
<img srcset='/images/green-1x1.png?e21 50w, /images/green-16x16.png?e21 51w' sizes='/* */1px/* */'>
<img srcset='/images/green-1x1.png?e22 50w, /images/green-16x16.png?e22 51w' sizes=' /**/ /**/ 1px /**/ /**/ '>
<img srcset='/images/green-1x1.png?e23 50w, /images/green-16x16.png?e23 51w' sizes='(),1px'>
<img srcset='/images/green-1x1.png?e24 50w, /images/green-16x16.png?e24 51w' sizes='x(),1px'>
<img srcset='/images/green-1x1.png?e25 50w, /images/green-16x16.png?e25 51w' sizes='{},1px'>
<img srcset='/images/green-1x1.png?e26 50w, /images/green-16x16.png?e26 51w' sizes='[],1px'>
<img srcset='/images/green-1x1.png?e27 50w, /images/green-16x16.png?e27 51w' sizes='1px,('>
<img srcset='/images/green-1x1.png?e28 50w, /images/green-16x16.png?e28 51w' sizes='1px,x('>
<img srcset='/images/green-1x1.png?e29 50w, /images/green-16x16.png?e29 51w' sizes='1px,{'>
<img srcset='/images/green-1x1.png?e30 50w, /images/green-16x16.png?e30 51w' sizes='1px,['>
<img srcset='/images/green-1x1.png?e31 50w, /images/green-16x16.png?e31 51w' sizes='\(,1px'>
<img srcset='/images/green-1x1.png?e32 50w, /images/green-16x16.png?e32 51w' sizes='x\(,1px'>
<img srcset='/images/green-1x1.png?e33 50w, /images/green-16x16.png?e33 51w' sizes='\{,1px'>
<img srcset='/images/green-1x1.png?e34 50w, /images/green-16x16.png?e34 51w' sizes='\[,1px'>
<img srcset='/images/green-1x1.png?e35 50w, /images/green-16x16.png?e35 51w' sizes='1\p\x'>
<img srcset='/images/green-1x1.png?e36 50w, /images/green-16x16.png?e36 51w' sizes='calc(1px)'>
<img srcset='/images/green-1x1.png?e37 50w, /images/green-16x16.png?e37 51w' sizes='(min-width:0) calc(1px)'>
<img srcset='/images/green-1x1.png?e38 50w, /images/green-16x16.png?e38 51w' sizes='(min-width:calc(0)) 1px'>
<img srcset='/images/green-1x1.png?e39 50w, /images/green-16x16.png?e39 51w' sizes='(min-width:0) 1px, 100vw'>
<img srcset='/images/green-1x1.png?e40 50w, /images/green-16x16.png?e40 51w' sizes='(min-width:0) 1px, (min-width:0) 100vw, 100vw'>
<img srcset='/images/green-1x1.png?e41 50w, /images/green-16x16.png?e41 51w' sizes='(min-width:0) 1px'>
<img srcset='/images/green-1x1.png?e42 50w, /images/green-16x16.png?e42 51w' sizes='not (min-width:0) 100vw, 1px'>
<img srcset='/images/green-1x1.png?e43 50w, /images/green-16x16.png?e43 51w' sizes='(min-width:unknown-mf-value) 100vw, 1px'>
<img srcset='/images/green-1x1.png?e44 50w, /images/green-16x16.png?e44 51w' sizes='not (min-width:unknown-mf-value) 1px'>
<img srcset='/images/green-1x1.png?e45 50w, /images/green-16x16.png?e45 51w' sizes='(min-width:-1px) 100vw, 1px'>
<img srcset='/images/green-1x1.png?e46 50w, /images/green-16x16.png?e46 51w' sizes='not (min-width:-1px) 1px'>
<img srcset='/images/green-1x1.png?e47 50w, /images/green-16x16.png?e47 51w' sizes='(unknown-mf-name) 100vw, 1px'>
<img srcset='/images/green-1x1.png?e48 50w, /images/green-16x16.png?e48 51w' sizes='not (unknown-mf-name) 1px'>
<img srcset='/images/green-1x1.png?e49 50w, /images/green-16x16.png?e49 51w' sizes='("unknown-general-enclosed") 100vw, 1px'>
<img srcset='/images/green-1x1.png?e50 50w, /images/green-16x16.png?e50 51w' sizes='not ("unknown-general-enclosed") 1px'>
<img srcset='/images/green-1x1.png?e51 50w, /images/green-16x16.png?e51 51w' sizes='unknown-general-enclosed(foo) 100vw, 1px'>
<img srcset='/images/green-1x1.png?e52 50w, /images/green-16x16.png?e52 51w' sizes='not unknown-general-enclosed(foo) 1px'>
<img srcset='/images/green-1x1.png?e53 50w, /images/green-16x16.png?e53 51w' sizes='print 100vw, 1px'>
<img srcset='/images/green-1x1.png?e54 50w, /images/green-16x16.png?e54 51w' sizes='not print 100vw, 1px'>
<img srcset='/images/green-1x1.png?e55 50w, /images/green-16x16.png?e55 51w' sizes='unknown-media-type 100vw, 1px'>
<img srcset='/images/green-1x1.png?e56 50w, /images/green-16x16.png?e56 51w' sizes='not unknown-media-type 100vw, 1px'>
<img srcset='/images/green-1x1.png?e57 50w, /images/green-16x16.png?e57 51w' sizes='(min-width:0) or (min-width:0) 1px'>
<img srcset='/images/green-1x1.png?e58 50w, /images/green-16x16.png?e58 51w' sizes='(min-width:0) or (unknown-mf-name) 1px'>
<img srcset='/images/green-1x1.png?e59 50w, /images/green-16x16.png?e59 51w' sizes='(min-width:0) or (min-width:unknown-mf-value) 1px'>
<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?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) 1px'>
<img srcset='/images/green-1x1.png?e67 50w, /images/green-16x16.png?e67 51w' sizes='(!) 100vw, 1px'>
<img srcset='/images/green-1x1.png?e68 50w, /images/green-16x16.png?e68 51w' sizes='not (!) 100vw, 1px'>
<img srcset='/images/green-1x1.png?e69 50w, /images/green-16x16.png?e69 51w' sizes='! 100vw, 1px'>
<img srcset='/images/green-1x1.png?e70 50w, /images/green-16x16.png?e70 51w' sizes='not ! 100vw, 1px'>
<img srcset='/images/green-1x1.png?e71 50w, /images/green-16x16.png?e71 51w' sizes='(]) 100vw, 1px'>
<img srcset='/images/green-1x1.png?e72 50w, /images/green-16x16.png?e72 51w' sizes='not (]) 100vw, 1px'>
<img srcset='/images/green-1x1.png?e73 50w, /images/green-16x16.png?e73 51w' sizes='] 100vw, 1px'>
<img srcset='/images/green-1x1.png?e74 50w, /images/green-16x16.png?e74 51w' sizes='not ] 100vw, 1px'>
<img srcset='/images/green-1x1.png?e75 50w, /images/green-16x16.png?e75 51w' sizes='(}) 100vw, 1px'>
<img srcset='/images/green-1x1.png?e76 50w, /images/green-16x16.png?e76 51w' sizes='not (}) 100vw, 1px'>
<img srcset='/images/green-1x1.png?e77 50w, /images/green-16x16.png?e77 51w' sizes='} 100vw, 1px'>
<img srcset='/images/green-1x1.png?e78 50w, /images/green-16x16.png?e78 51w' sizes='not } 100vw, 1px'>
<img srcset='/images/green-1x1.png?e79 50w, /images/green-16x16.png?e79 51w' sizes=') 100vw, 1px'>
<img srcset='/images/green-1x1.png?e80 50w, /images/green-16x16.png?e80 51w' sizes='not ) 100vw, 1px'>
<img srcset='/images/green-1x1.png?e81 50w, /images/green-16x16.png?e81 51w' sizes='(;) 100vw, 1px'>
<img srcset='/images/green-1x1.png?e82 50w, /images/green-16x16.png?e82 51w' sizes='not (;) 100vw, 1px'>
<img srcset='/images/green-1x1.png?e83 50w, /images/green-16x16.png?e83 51w' sizes='(.) 100vw, 1px'>
<img srcset='/images/green-1x1.png?e84 50w, /images/green-16x16.png?e84 51w' sizes='not (.) 1px'>
<img srcset='/images/green-1x1.png?e85 50w, /images/green-16x16.png?e85 51w' sizes='; 100vw, 1px'>
<img srcset='/images/green-1x1.png?e86 50w, /images/green-16x16.png?e86 51w' sizes='not ; 100vw, 1px'>
<img srcset='/images/green-1x1.png?e87 50w, /images/green-16x16.png?e87 51w' sizes=', 1px'>
<img srcset='/images/green-1x1.png?e88 50w, /images/green-16x16.png?e88 51w' sizes='1px,'>
<img srcset='/images/green-1x1.png?e89 50w, /images/green-16x16.png?e89 51w' sizes='(min-width:0) 1px,'>
<img srcset='/images/green-1x1.png?e90 50w, /images/green-16x16.png?e90 51w' sizes='-0e-0px'>
<img srcset='/images/green-1x1.png?e91 50w, /images/green-16x16.png?e91 51w' sizes='+0.11e+01px'>
<img srcset='/images/green-1x1.png?e92 50w, /images/green-16x16.png?e92 51w' sizes='0.2e1px'>
<img srcset='/images/green-1x1.png?e93 50w, /images/green-16x16.png?e93 51w' sizes='0.3E1px'>
<img srcset='/images/green-1x1.png?e94 50w, /images/green-16x16.png?e94 51w' sizes='.4E1px'>
<img srcset='/images/green-1x1.png?e95 50w, /images/green-16x16.png?e95 51w' sizes='all 100vw, 1px'>
<img srcset='/images/green-1x1.png?e96 50w, /images/green-16x16.png?e96 51w' sizes='all and (min-width:0) 100vw, 1px'>
<img srcset='/images/green-1x1.png?e97 50w, /images/green-16x16.png?e97 51w' sizes='min-width:0 100vw, 1px'>
<img srcset='/images/green-1x1.png?e98 50w, /images/green-16x16.png?e98 51w' sizes='1px, 100vw'>
<img srcset='/images/green-1x1.png?e99 50w, /images/green-16x16.png?e99 51w' sizes='1px, (min-width:0) 100vw'>
<img srcset='/images/green-1x1.png?e100 50w, /images/green-16x16.png?e100 51w' sizes='1px, foo bar'>
<img srcset='/images/green-1x1.png?e101 50w, /images/green-16x16.png?e101 51w' sizes='(min-width:0) 1px, foo bar'>
<p>
<img srcset='/images/green-1x1.png?f1 50w, /images/green-16x16.png?f1 51w' sizes='100vw'>
<img srcset='/images/green-1x1.png?f2 50w, /images/green-16x16.png?f2 51w' sizes=''>
<img srcset='/images/green-1x1.png?f3 50w, /images/green-16x16.png?f3 51w' sizes=','>
<img srcset='/images/green-1x1.png?f4 50w, /images/green-16x16.png?f4 51w' sizes='-1px'>
<img srcset='/images/green-1x1.png?f5 50w, /images/green-16x16.png?f5 51w' sizes='1'>
<img srcset='/images/green-1x1.png?f6 50w, /images/green-16x16.png?f6 51w' sizes='0.1%'>
<img srcset='/images/green-1x1.png?f7 50w, /images/green-16x16.png?f7 51w' sizes='0.1deg'>
<img srcset='/images/green-1x1.png?f8 50w, /images/green-16x16.png?f8 51w' sizes='0.1grad'>
<img srcset='/images/green-1x1.png?f9 50w, /images/green-16x16.png?f9 51w' sizes='0.1rad'>
<img srcset='/images/green-1x1.png?f10 50w, /images/green-16x16.png?f10 51w' sizes='0.1turn'>
<img srcset='/images/green-1x1.png?f11 50w, /images/green-16x16.png?f11 51w' sizes='0.1s'>
<img srcset='/images/green-1x1.png?f12 50w, /images/green-16x16.png?f12 51w' sizes='0.1ms'>
<img srcset='/images/green-1x1.png?f13 50w, /images/green-16x16.png?f13 51w' sizes='0.1Hz'>
<img srcset='/images/green-1x1.png?f14 50w, /images/green-16x16.png?f14 51w' sizes='0.1kHz'>
<img srcset='/images/green-1x1.png?f15 50w, /images/green-16x16.png?f15 51w' sizes='0.1dpi'>
<img srcset='/images/green-1x1.png?f16 50w, /images/green-16x16.png?f16 51w' sizes='0.1dpcm'>
<img srcset='/images/green-1x1.png?f17 50w, /images/green-16x16.png?f17 51w' sizes='0.1dppx'>
<img srcset='/images/green-1x1.png?f18 50w, /images/green-16x16.png?f18 51w' data-foo='1px' sizes='attr(data-foo, length, 1px)'>
<img srcset='/images/green-1x1.png?f19 50w, /images/green-16x16.png?f19 51w' data-foo='1' sizes='attr(data-foo, px, 1px)'>
<img srcset='/images/green-1x1.png?f20 50w, /images/green-16x16.png?f20 51w' sizes='toggle(1px)'>
<img srcset='/images/green-1x1.png?f21 50w, /images/green-16x16.png?f21 51w' sizes='inherit'>
<img srcset='/images/green-1x1.png?f22 50w, /images/green-16x16.png?f22 51w' sizes='auto'>
<img srcset='/images/green-1x1.png?f23 50w, /images/green-16x16.png?f23 51w' sizes='initial'>
<img srcset='/images/green-1x1.png?f24 50w, /images/green-16x16.png?f24 51w' sizes='unset'>
<img srcset='/images/green-1x1.png?f25 50w, /images/green-16x16.png?f25 51w' sizes='default'>
<img srcset='/images/green-1x1.png?f26 50w, /images/green-16x16.png?f26 51w' sizes='1/* */px'>
<img srcset='/images/green-1x1.png?f27 50w, /images/green-16x16.png?f27 51w' sizes='1p/* */x'>
<img srcset='/images/green-1x1.png?f28 50w, /images/green-16x16.png?f28 51w' sizes='-/**/0'>
<img srcset='/images/green-1x1.png?f29 50w, /images/green-16x16.png?f29 51w' sizes='((),1px'>
<img srcset='/images/green-1x1.png?f30 50w, /images/green-16x16.png?f30 51w' sizes='x(x(),1px'>
<img srcset='/images/green-1x1.png?f31 50w, /images/green-16x16.png?f31 51w' sizes='{{},1px'>
<img srcset='/images/green-1x1.png?f32 50w, /images/green-16x16.png?f32 51w' sizes='[[],1px'>
<img srcset='/images/green-1x1.png?f33 50w, /images/green-16x16.png?f33 51w' sizes='1px !important'>
<img srcset='/images/green-1x1.png?f34 50w, /images/green-16x16.png?f34 51w' sizes='\1px'>
<img srcset='/images/green-1x1.png?f35 50w, /images/green-16x16.png?f35 51w' sizes='all 1px'>
<img srcset='/images/green-1x1.png?f36 50w, /images/green-16x16.png?f36 51w' sizes='all and (min-width:0) 1px'>
<img srcset='/images/green-1x1.png?f37 50w, /images/green-16x16.png?f37 51w' sizes='min-width:0 1px'>
<img srcset='/images/green-1x1.png?f38 50w, /images/green-16x16.png?f38 51w' sizes='100vw, 1px'>
<img srcset='/images/green-1x1.png?f39 50w, /images/green-16x16.png?f39 51w' sizes='100vw, (min-width:0) 1px'>
<img srcset='/images/green-1x1.png?f40 50w, /images/green-16x16.png?f40 51w' sizes='foo bar'>
<img srcset='/images/green-1x1.png?f41 50w, /images/green-16x16.png?f41 51w' sizes='foo-bar'>
<img srcset='/images/green-1x1.png?f42 50w, /images/green-16x16.png?f42 51w' sizes='(min-width:0) 1px foo bar'>
<img srcset='/images/green-1x1.png?f43 50w, /images/green-16x16.png?f43 51w' sizes='(min-width:0) 0.1%'>
<img srcset='/images/green-1x1.png?f44 50w, /images/green-16x16.png?f44 51w' sizes='(min-width:0) 1'>
<img srcset='/images/green-1x1.png?f45 50w, /images/green-16x16.png?f45 51w' sizes='-1e0px'>
<img srcset='/images/green-1x1.png?f46 50w, /images/green-16x16.png?f46 51w' sizes='1e1.5px'>
<img srcset='/images/green-1x1.png?f47 50w, /images/green-16x16.png?f47 51w' style='--foo: 1px' sizes='var(--foo)'>
<img srcset='/images/green-1x1.png?f48 50w, /images/green-16x16.png?f48 51w' sizes='calc(1px'>
<img srcset='/images/green-1x1.png?f49 50w, /images/green-16x16.png?f49 51w' sizes='(min-width:0) calc(1px'>

25
tests/wpt/web-platform-tests/html/semantics/embedded-content/the-img-element/srcset/common.js Normal file
View file

@ -0,0 +1,25 @@
setup({explicit_done:true});
function check(img) {
var name = format_value(img.getAttribute('srcset'));
if (img.hasAttribute('sizes')) {
name += ' sizes=' + format_value(img.getAttribute('sizes'));
}
if (img.hasAttribute('data-desc')) {
name += ' (' + img.getAttribute('data-desc') + ')';
}
test(function() {
var expect = img.dataset.expect;
if ('resolve' in img.dataset) {
var a = document.createElement('a');
a.href = expect;
expect = a.href;
}
assert_equals(img.currentSrc, expect);
}, name);
}
onload = function() {
[].forEach.call(document.images, check);
done();
};

244
tests/wpt/web-platform-tests/html/semantics/embedded-content/the-img-element/srcset/parse-a-srcset-attribute.html Normal file
View file

@ -0,0 +1,244 @@
<!doctype html>
<title>img parse a srcset attribute</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src=common.js></script>
<div id=log></div>
<!-- splitting loop -->
<img srcset='' data-expect=''>
<img srcset=',' data-expect=''>
<img srcset=',,,' data-expect=''>
<img srcset=' data:,a 1x ' data-expect='data:,a'>
<img srcset='&#x9;&#x9;data:,a&#x9;&#x9;1x&#x9;&#x9;' data-expect='data:,a'>
<img srcset='&#xA;&#xA;data:,a&#xA;&#xA;1x&#xA;&#xA;' data-expect='data:,a'>
<img srcset='&#xB;&#xB;data:,a&#xB;&#xB;1x&#xB;&#xB;' data-expect='&#xB;&#xB;data:,a&#xB;&#xB;1x&#xB;&#xB;' data-resolve>
<img srcset='&#xC;&#xC;data:,a&#xC;&#xC;1x&#xC;&#xC;' data-expect='data:,a'>
<img srcset='&#xD;&#xD;data:,a&#xD;&#xD;1x&#xD;&#xD;' data-expect='data:,a'>
<img srcset='&#xE;&#xE;data:,a&#xE;&#xE;1x&#xE;&#xE;' data-expect='&#xE;&#xE;data:,a&#xE;&#xE;1x&#xE;&#xE;' data-resolve>
<img srcset='&#xF;&#xF;data:,a&#xF;&#xF;1x&#xF;&#xF;' data-expect='&#xF;&#xF;data:,a&#xF;&#xF;1x&#xF;&#xF;' data-resolve>
<img srcset='&#x10;&#x10;data:,a&#x10;&#x10;1x&#x10;&#x10;' data-expect='&#x10;&#x10;data:,a&#x10;&#x10;1x&#x10;&#x10;' data-resolve>
<img srcset='data:,a' data-expect='data:,a'>
<img srcset='data:,a ' data-expect='data:,a'>
<img srcset='data:,a ,' data-expect='data:,a'>
<img srcset='data:,a,' data-expect='data:,a'>
<img srcset='data:,a, ' data-expect='data:,a'>
<img srcset='data:,a,,,' data-expect='data:,a'>
<img srcset='data:,a,, , ' data-expect='data:,a'>
<img srcset=' data:,a' data-expect='data:,a'>
<img srcset=',,,data:,a' data-expect='data:,a'>
<img srcset=' , ,,data:,a' data-expect='data:,a'>
<img srcset='&nbsp;data:,a' data-expect='&nbsp;data:,a' data-resolve>
<img srcset='data:,a&nbsp;' data-expect='data:,a&nbsp;' data-resolve>
<!-- descriptor tokenizer -->
<img srcset='data:,a 1x' data-expect='data:,a'>
<img srcset='data:,a 1x ' data-expect='data:,a'>
<img srcset='data:,a 1x,' data-expect='data:,a'>
<img srcset='data:,a ( , data:,b 1x, ), data:,c' data-expect='data:,c'>
<img srcset='data:,a ((( , data:,b 1x, ), data:,c' data-expect='data:,c'>
<img srcset='data:,a [ , data:,b 1x, ], data:,c' data-expect='data:,b'>
<img srcset='data:,a { , data:,b 1x, }, data:,c' data-expect='data:,b'>
<img srcset='data:,a " , data:,b 1x, ", data:,c' data-expect='data:,b'>
<img srcset='data:,a \,data:;\,b, data:,c' data-expect='data:;\,b'>
<img srcset='data:,a, data:,b (' data-expect='data:,a'>
<img srcset='data:,a, data:,b ( ' data-expect='data:,a'>
<img srcset='data:,a, data:,b (,' data-expect='data:,a'>
<img srcset='data:,a, data:,b (x' data-expect='data:,a'>
<img srcset='data:,a, data:,b ()' data-expect='data:,a'>
<img srcset='data:,a (, data:,b' data-expect=''>
<img srcset='data:,a /*, data:,b, data:,c */' data-expect='data:,b'>
<img srcset='data:,a //, data:,b' data-expect='data:,b'>
<!-- descriptor parser -->
<img srcset='data:,a foo' data-expect=''>
<img srcset='data:,a foo foo' data-expect=''>
<img srcset='data:,a foo 1x' data-expect=''>
<img srcset='data:,a foo 1x foo' data-expect=''>
<img srcset='data:,a foo 1w' data-expect=''>
<img srcset='data:,a foo 1w foo' data-expect=''>
<img srcset='data:,a 1x 1x' data-expect=''>
<img srcset='data:,a 1w 1w' data-expect=''>
<img srcset='data:,a 1w 1x' data-expect=''>
<img srcset='data:,a 1x 1w' data-expect=''>
<img srcset='data:,a 1w 1h' data-expect='data:,a'>
<img srcset='data:,a 1h 1w' data-expect='data:,a'>
<img srcset='data:,a 1h 1h' data-expect=''>
<img srcset='data:,a 1h 1x' data-expect=''>
<img srcset='data:,a 1h 1w 1x' data-expect=''>
<img srcset='data:,a 1x 1w 1h' data-expect=''>
<img srcset='data:,a 1h' data-expect=''>
<img srcset='data:,a 1h foo' data-expect=''>
<img srcset='data:,a foo 1h' data-expect=''>
<img srcset='data:,a 0w' data-expect=''>
<img srcset='data:,a -1w' data-expect=''>
<img srcset='data:,a 1w -1w' data-expect=''>
<img srcset='data:,a 1.0w' data-expect=''>
<img srcset='data:,a 1w 1.0w' data-expect=''>
<img srcset='data:,a 1e0w' data-expect=''>
<img srcset='data:,a 1w 1e0w' data-expect=''>
<img srcset='data:,a 1www' data-expect=''>
<img srcset='data:,a 1w 1www' data-expect=''>
<img srcset='data:,a +1w' data-expect=''>
<img srcset='data:,a 1w +1w' data-expect=''>
<img srcset='data:,a 1W' data-expect=''>
<img srcset='data:,a 1w 1W' data-expect=''>
<img srcset='data:,a Infinityw' data-expect=''>
<img srcset='data:,a 1w Infinityw' data-expect=''>
<img srcset='data:,a NaNw' data-expect=''>
<img srcset='data:,a 1w NaNw' data-expect=''>
<img srcset='data:,a 0x1w' data-expect=''>
<img srcset='data:,a 0X1w' data-expect=''>
<img srcset='data:,a 1&#x1;w' data-expect='' data-desc='trailing U+0001'>
<img srcset='data:,a 1&nbsp;w' data-expect='' data-desc='trailing U+00A0'>
<img srcset='data:,a 1&#x1680;w' data-expect='' data-desc='trailing U+1680'>
<img srcset='data:,a 1&#x2000;w' data-expect='' data-desc='trailing U+2000'>
<img srcset='data:,a 1&#x2001;w' data-expect='' data-desc='trailing U+2001'>
<img srcset='data:,a 1&#x2002;w' data-expect='' data-desc='trailing U+2002'>
<img srcset='data:,a 1&#x2003;w' data-expect='' data-desc='trailing U+2003'>
<img srcset='data:,a 1&#x2004;w' data-expect='' data-desc='trailing U+2004'>
<img srcset='data:,a 1&#x2005;w' data-expect='' data-desc='trailing U+2005'>
<img srcset='data:,a 1&#x2006;w' data-expect='' data-desc='trailing U+2006'>
<img srcset='data:,a 1&#x2007;w' data-expect='' data-desc='trailing U+2007'>
<img srcset='data:,a 1&#x2008;w' data-expect='' data-desc='trailing U+2008'>
<img srcset='data:,a 1&#x2009;w' data-expect='' data-desc='trailing U+2009'>
<img srcset='data:,a 1&#x200A;w' data-expect='' data-desc='trailing U+200A'>
<img srcset='data:,a 1&#x200C;w' data-expect='' data-desc='trailing U+200C'>
<img srcset='data:,a 1&#x200D;w' data-expect='' data-desc='trailing U+200D'>
<img srcset='data:,a 1&#x202F;w' data-expect='' data-desc='trailing U+202F'>
<img srcset='data:,a 1&#x205F;w' data-expect='' data-desc='trailing U+205F'>
<img srcset='data:,a 1&#x3000;w' data-expect='' data-desc='trailing U+3000'>
<img srcset='data:,a 1&#xFEFF;w' data-expect='' data-desc='trailing U+FEFF'>
<img srcset='data:,a &#x1;1w' data-expect='' data-desc='leading U+0001'>
<img srcset='data:,a &nbsp;1w' data-expect='' data-desc='leading U+00A0'>
<img srcset='data:,a &#x1680;1w' data-expect='' data-desc='leading U+1680'>
<img srcset='data:,a &#x2000;1w' data-expect='' data-desc='leading U+2000'>
<img srcset='data:,a &#x2001;1w' data-expect='' data-desc='leading U+2001'>
<img srcset='data:,a &#x2002;1w' data-expect='' data-desc='leading U+2002'>
<img srcset='data:,a &#x2003;1w' data-expect='' data-desc='leading U+2003'>
<img srcset='data:,a &#x2004;1w' data-expect='' data-desc='leading U+2004'>
<img srcset='data:,a &#x2005;1w' data-expect='' data-desc='leading U+2005'>
<img srcset='data:,a &#x2006;1w' data-expect='' data-desc='leading U+2006'>
<img srcset='data:,a &#x2007;1w' data-expect='' data-desc='leading U+2007'>
<img srcset='data:,a &#x2008;1w' data-expect='' data-desc='leading U+2008'>
<img srcset='data:,a &#x2009;1w' data-expect='' data-desc='leading U+2009'>
<img srcset='data:,a &#x200A;1w' data-expect='' data-desc='leading U+200A'>
<img srcset='data:,a &#x200C;1w' data-expect='' data-desc='leading U+200C'>
<img srcset='data:,a &#x200D;1w' data-expect='' data-desc='leading U+200D'>
<img srcset='data:,a &#x202F;1w' data-expect='' data-desc='leading U+202F'>
<img srcset='data:,a &#x205F;1w' data-expect='' data-desc='leading U+205F'>
<img srcset='data:,a &#x3000;1w' data-expect='' data-desc='leading U+3000'>
<img srcset='data:,a &#xFEFF;1w' data-expect='' data-desc='leading U+FEFF'>
<img srcset='data:,a 0x' data-expect='data:,a'>
<img srcset='data:,a -0x' data-expect='data:,a'>
<img srcset='data:,a 1x -0x' data-expect=''>
<img srcset='data:,a -1x' data-expect=''>
<img srcset='data:,a 1x -1x' data-expect=''>
<img srcset='data:,a 1e0x' data-expect='data:,a'>
<img srcset='data:,a 1E0x' data-expect='data:,a'>
<img srcset='data:,a 1e-1x' data-expect='data:,a'>
<img srcset='data:,a 1.5e1x' data-expect='data:,a'>
<img srcset='data:,a -x' data-expect=''>
<img srcset='data:,a .x' data-expect=''>
<img srcset='data:,a -.x' data-expect=''>
<img srcset='data:,a 1.x' data-expect=''>
<img srcset='data:,a .5x' data-expect='data:,a'>
<img srcset='data:,a .5e1x' data-expect='data:,a'>
<img srcset='data:,a 1x 1.5e1x' data-expect=''>
<img srcset='data:,a 1x 1e1.5x' data-expect=''>
<img srcset='data:,a 1.0x' data-expect='data:,a'>
<img srcset='data:,a 1x 1.0x' data-expect=''>
<img srcset='data:,a +1x' data-expect=''>
<img srcset='data:,a 1X' data-expect=''>
<img srcset='data:,a Infinityx' data-expect=''>
<img srcset='data:,a NaNx' data-expect=''>
<img srcset='data:,a 0x1x' data-expect=''>
<img srcset='data:,a 0X1x' data-expect=''>
<img srcset='data:,a 1&#x1;x' data-expect='' data-desc='trailing U+0001'>
<img srcset='data:,a 1&nbsp;x' data-expect='' data-desc='trailing U+00A0'>
<img srcset='data:,a 1&#x1680;x' data-expect='' data-desc='trailing U+1680'>
<img srcset='data:,a 1&#x2000;x' data-expect='' data-desc='trailing U+2000'>
<img srcset='data:,a 1&#x2001;x' data-expect='' data-desc='trailing U+2001'>
<img srcset='data:,a 1&#x2002;x' data-expect='' data-desc='trailing U+2002'>
<img srcset='data:,a 1&#x2003;x' data-expect='' data-desc='trailing U+2003'>
<img srcset='data:,a 1&#x2004;x' data-expect='' data-desc='trailing U+2004'>
<img srcset='data:,a 1&#x2005;x' data-expect='' data-desc='trailing U+2005'>
<img srcset='data:,a 1&#x2006;x' data-expect='' data-desc='trailing U+2006'>
<img srcset='data:,a 1&#x2007;x' data-expect='' data-desc='trailing U+2007'>
<img srcset='data:,a 1&#x2008;x' data-expect='' data-desc='trailing U+2008'>
<img srcset='data:,a 1&#x2009;x' data-expect='' data-desc='trailing U+2009'>
<img srcset='data:,a 1&#x200A;x' data-expect='' data-desc='trailing U+200A'>
<img srcset='data:,a 1&#x200C;x' data-expect='' data-desc='trailing U+200C'>
<img srcset='data:,a 1&#x200D;x' data-expect='' data-desc='trailing U+200D'>
<img srcset='data:,a 1&#x202F;x' data-expect='' data-desc='trailing U+202F'>
<img srcset='data:,a 1&#x205F;x' data-expect='' data-desc='trailing U+205F'>
<img srcset='data:,a 1&#x3000;x' data-expect='' data-desc='trailing U+3000'>
<img srcset='data:,a 1&#xFEFF;x' data-expect='' data-desc='trailing U+FEFF'>
<img srcset='data:,a &#x1;1x' data-expect='' data-desc='leading U+0001'>
<img srcset='data:,a &nbsp;1x' data-expect='' data-desc='leading U+00A0'>
<img srcset='data:,a &#x1680;1x' data-expect='' data-desc='leading U+1680'>
<img srcset='data:,a &#x2000;1x' data-expect='' data-desc='leading U+2000'>
<img srcset='data:,a &#x2001;1x' data-expect='' data-desc='leading U+2001'>
<img srcset='data:,a &#x2002;1x' data-expect='' data-desc='leading U+2002'>
<img srcset='data:,a &#x2003;1x' data-expect='' data-desc='leading U+2003'>
<img srcset='data:,a &#x2004;1x' data-expect='' data-desc='leading U+2004'>
<img srcset='data:,a &#x2005;1x' data-expect='' data-desc='leading U+2005'>
<img srcset='data:,a &#x2006;1x' data-expect='' data-desc='leading U+2006'>
<img srcset='data:,a &#x2007;1x' data-expect='' data-desc='leading U+2007'>
<img srcset='data:,a &#x2008;1x' data-expect='' data-desc='leading U+2008'>
<img srcset='data:,a &#x2009;1x' data-expect='' data-desc='leading U+2009'>
<img srcset='data:,a &#x200A;1x' data-expect='' data-desc='leading U+200A'>
<img srcset='data:,a &#x200C;1x' data-expect='' data-desc='leading U+200C'>
<img srcset='data:,a &#x200D;1x' data-expect='' data-desc='leading U+200D'>
<img srcset='data:,a &#x202F;1x' data-expect='' data-desc='leading U+202F'>
<img srcset='data:,a &#x205F;1x' data-expect='' data-desc='leading U+205F'>
<img srcset='data:,a &#x3000;1x' data-expect='' data-desc='leading U+3000'>
<img srcset='data:,a &#xFEFF;1x' data-expect='' data-desc='leading U+FEFF'>
<img srcset='data:,a 1w 0h' data-expect=''>
<img srcset='data:,a 1w -1h' data-expect=''>
<img srcset='data:,a 1w 1.0h' data-expect=''>
<img srcset='data:,a 1w 1e0h' data-expect=''>
<img srcset='data:,a 1w 1hhh' data-expect=''>
<img srcset='data:,a 1w +1h' data-expect=''>
<img srcset='data:,a 1w 1H' data-expect=''>
<img srcset='data:,a 1w Infinityh' data-expect=''>
<img srcset='data:,a 1w NaNh' data-expect=''>
<img srcset='data:,a 0x1h' data-expect=''>
<img srcset='data:,a 0X1h' data-expect=''>
<img srcset='data:,a 1w 1&#x1;h' data-expect='' data-desc='trailing U+0001'>
<img srcset='data:,a 1w 1&nbsp;h' data-expect='' data-desc='trailing U+00A0'>
<img srcset='data:,a 1w 1&#x1680;h' data-expect='' data-desc='trailing U+1680'>
<img srcset='data:,a 1w 1&#x2000;h' data-expect='' data-desc='trailing U+2000'>
<img srcset='data:,a 1w 1&#x2001;h' data-expect='' data-desc='trailing U+2001'>
<img srcset='data:,a 1w 1&#x2002;h' data-expect='' data-desc='trailing U+2002'>
<img srcset='data:,a 1w 1&#x2003;h' data-expect='' data-desc='trailing U+2003'>
<img srcset='data:,a 1w 1&#x2004;h' data-expect='' data-desc='trailing U+2004'>
<img srcset='data:,a 1w 1&#x2005;h' data-expect='' data-desc='trailing U+2005'>
<img srcset='data:,a 1w 1&#x2006;h' data-expect='' data-desc='trailing U+2006'>
<img srcset='data:,a 1w 1&#x2007;h' data-expect='' data-desc='trailing U+2007'>
<img srcset='data:,a 1w 1&#x2008;h' data-expect='' data-desc='trailing U+2008'>
<img srcset='data:,a 1w 1&#x2009;h' data-expect='' data-desc='trailing U+2009'>
<img srcset='data:,a 1w 1&#x200A;h' data-expect='' data-desc='trailing U+200A'>
<img srcset='data:,a 1w 1&#x200C;h' data-expect='' data-desc='trailing U+200C'>
<img srcset='data:,a 1w 1&#x200D;h' data-expect='' data-desc='trailing U+200D'>
<img srcset='data:,a 1w 1&#x202F;h' data-expect='' data-desc='trailing U+202F'>
<img srcset='data:,a 1w 1&#x205F;h' data-expect='' data-desc='trailing U+205F'>
<img srcset='data:,a 1w 1&#x3000;h' data-expect='' data-desc='trailing U+3000'>
<img srcset='data:,a 1w 1&#xFEFF;h' data-expect='' data-desc='trailing U+FEFF'>
<img srcset='data:,a 1w &#x1;1h' data-expect='' data-desc='leading U+0001'>
<img srcset='data:,a 1w &nbsp;1h' data-expect='' data-desc='leading U+00A0'>
<img srcset='data:,a 1w &#x1680;1h' data-expect='' data-desc='leading U+1680'>
<img srcset='data:,a 1w &#x2000;1h' data-expect='' data-desc='leading U+2000'>
<img srcset='data:,a 1w &#x2001;1h' data-expect='' data-desc='leading U+2001'>
<img srcset='data:,a 1w &#x2002;1h' data-expect='' data-desc='leading U+2002'>
<img srcset='data:,a 1w &#x2003;1h' data-expect='' data-desc='leading U+2003'>
<img srcset='data:,a 1w &#x2004;1h' data-expect='' data-desc='leading U+2004'>
<img srcset='data:,a 1w &#x2005;1h' data-expect='' data-desc='leading U+2005'>
<img srcset='data:,a 1w &#x2006;1h' data-expect='' data-desc='leading U+2006'>
<img srcset='data:,a 1w &#x2007;1h' data-expect='' data-desc='leading U+2007'>
<img srcset='data:,a 1w &#x2008;1h' data-expect='' data-desc='leading U+2008'>
<img srcset='data:,a 1w &#x2009;1h' data-expect='' data-desc='leading U+2009'>
<img srcset='data:,a 1w &#x200A;1h' data-expect='' data-desc='leading U+200A'>
<img srcset='data:,a 1w &#x200C;1h' data-expect='' data-desc='leading U+200C'>
<img srcset='data:,a 1w &#x200D;1h' data-expect='' data-desc='leading U+200D'>
<img srcset='data:,a 1w &#x202F;1h' data-expect='' data-desc='leading U+202F'>
<img srcset='data:,a 1w &#x205F;1h' data-expect='' data-desc='leading U+205F'>
<img srcset='data:,a 1w &#x3000;1h' data-expect='' data-desc='leading U+3000'>
<img srcset='data:,a 1w &#xFEFF;1h' data-expect='' data-desc='leading U+FEFF'>

20
tests/wpt/web-platform-tests/html/semantics/embedded-content/the-img-element/srcset/select-an-image-source.html Normal file
View file

@ -0,0 +1,20 @@
<!doctype html>
<title>img select an image source</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src=common.js></script>
<div id=log></div>
<!-- dup entries -->
<img srcset='data:,a 1x, data:,b 1x' data-expect='data:,a'>
<img srcset='data:,a , data:,b 1x' data-expect='data:,a'>
<img srcset='data:,a 1x, data:,b' data-expect='data:,a'>
<img srcset='data:,a 1w, data:,b 1w' data-expect='data:,a'>
<img srcset='data:,a 1w 1h, data:,b 1w' data-expect='data:,a'>
<img srcset='data:,a 1w, data:,b 1w 1h' data-expect='data:,a'>
<img srcset='data:,a 1w 1h, data:,b 1w 2h' data-expect='data:,a'>
<img srcset='data:,a 1w 2h, data:,b 1w 1h' data-expect='data:,a'>
<img srcset='data:,a , data:,b' data-expect='data:,a'>
<img srcset='data:,a 1w, data:,b 1x' sizes='1px' data-expect='data:,a'>
<img srcset='data:,a 1x, data:,b 1w' sizes='1px' data-expect='data:,a'>
<img srcset='data:,a 1w, data:,b 2x' sizes='0.5px' data-expect='data:,a'>
<img srcset='data:,a 2x, data:,b 1w' sizes='0.5px' data-expect='data:,a'>

140
tests/wpt/web-platform-tests/html/semantics/embedded-content/the-img-element/update-the-source-set.html Normal file
View file

@ -0,0 +1,140 @@
<!doctype html>
<title>img update the source set</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
setup({explicit_done:true});
function check(p) {
var img = p.querySelector('[data-expect]');
test(function() {
var expect = img.dataset.expect;
if ('resolve' in img.dataset) {
var a = document.createElement('a');
a.href = expect;
expect = a.href;
}
assert_equals(img.currentSrc, expect);
}, p.innerHTML);
}
onload = function() {
[].forEach.call(document.querySelectorAll('div:not([id])'), check);
done();
};
</script>
<div id=log></div>
<div><img data-expect=''></div>
<div><img src data-expect=''></div>
<div><img src='data:,a' data-expect='data:,a'></div>
<div><img srcset src='data:,a' data-expect='data:,a'></div>
<div><img srcset='data:,b' src='data:,a' data-expect='data:,b'></div>
<div><img src='data:,a' srcset='data:,b' data-expect='data:,b'><!-- srcset after src --></div>
<div><img src='data:,a' srcset='data:,b 1x' data-expect='data:,b'></div>
<div><img src='data:,a' srcset='data:,b 1.0x' data-expect='data:,b'></div>
<div><img src='data:,a' srcset='data:,b 1e0x' data-expect='data:,b'></div>
<div><img src='data:,a' srcset='data:,b 10000w' sizes='1px' data-expect='data:,b'></div>
<div><img src='data:,a' srcset='data:,b 10000w, data:,c 10000x' sizes='1px' data-expect='data:,b'></div>
<div><img src='data:,a' srcset='data:,b 10000x, data:,c 10000w' sizes='1px' data-expect='data:,b'></div>
<div><img src='data:,a' srcset='data:,b 1w' sizes='10000px' data-expect='data:,b'></div>
<div><img src='data:,a' srcset='data:,b 1w, data:,c 0.0001x' sizes='10000px' data-expect='data:,b'></div>
<div><img src='data:,a' srcset='data:,b 0.0001x, data:,c 1w' sizes='10000px' data-expect='data:,b'></div>
<div><img srcset='data:,a' data-expect='data:,a'></div>
<!-- child is not a <source> -->
<div><picture>foo<img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><!--foo--><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><br><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><p></p><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><video><source srcset='data:,b'></video><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><span><source srcset='data:,b'></span><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><svg><source srcset='data:,b'/></svg><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><svg/><source srcset='data:,b'/><img src='data:,a' data-expect='data:,b'></picture></div>
<div><picture><svg><font/><source srcset='data:,b'/></svg><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><svg><!--<font face> tag breaks out of svg--><font face></font><source srcset='data:,b'/></svg><img src='data:,a' data-expect='data:,b'></picture></div>
<div><picture><img src='data:,a'><img src='data:,b' data-expect='data:,b'></picture></div>
<!-- <source> has no srcset -->
<div><picture><source><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><source src='data:,b'><img src='data:,a' data-expect='data:,a'></picture></div>
<!-- <source srcset> has zero candidates -->
<div><picture><source srcset><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><source srcset=', ,'><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><source srcset='data:,b 1x 1x'><img src='data:,a' data-expect='data:,a'></picture></div>
<!-- <source media> -->
<div><picture><source srcset='data:,b' media><img src='data:,a' data-expect='data:,b'></picture></div>
<div><picture><source srcset='data:,b' media='all'><img src='data:,a' data-expect='data:,b'></picture></div>
<div><picture><source srcset='data:,b' media='all and (min-width:0)'><img src='data:,a' data-expect='data:,b'></picture></div>
<div><picture><source srcset='data:,b' media='all and !'><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><source srcset='data:,b' media='all and (!)'><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><source srcset='data:,b' media='not all'><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><source srcset='data:,b' media='not all and (min-width:0)'><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><source srcset='data:,b' media='not all and (max-width:0)'><img src='data:,a' data-expect='data:,b'></picture></div>
<div><picture><source srcset='data:,b' media='not all and !'><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><source srcset='data:,b' media='not all and (!)'><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><source srcset='data:,b' media='all, !'><img src='data:,a' data-expect='data:,b'></picture></div>
<div><picture><source srcset='data:,b' media=','><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><source srcset='data:,b' media=', all'><img src='data:,a' data-expect='data:,b'></picture></div>
<!-- <source type> assume support for gif, png, jpg, svg, ico -->
<div><picture><source srcset='data:,b' type><img src='data:,a' data-expect='data:,b'></picture></div>
<div><picture><source srcset='data:,b' type=' '><img src='data:,a' data-expect='data:,b'></picture></div>
<div><picture><source srcset='data:,b' type='image/gif'><img src='data:,a' data-expect='data:,b'></picture></div>
<div><picture><source srcset='data:,b' type=' image/gif'><img src='data:,a' data-expect='data:,b'></picture></div>
<div><picture><source srcset='data:,b' type='image/gif '><img src='data:,a' data-expect='data:,b'></picture></div>
<div><picture><source srcset='data:,b' type='image/gif;'><img src='data:,a' data-expect='data:,b'></picture></div>
<div><picture><source srcset='data:,b' type='image/gif;encodings'><img src='data:,a' data-expect='data:,b'></picture></div>
<div><picture><source srcset='data:,b' type='image/gif;encodings='><img src='data:,a' data-expect='data:,b'></picture></div>
<div><picture><source srcset='data:,b' type='image/gif;encodings=foobar'><img src='data:,a' data-expect='data:,b'></picture></div>
<div><picture><source srcset='data:,b' type='image/png'><img src='data:,a' data-expect='data:,b'></picture></div>
<div><picture><source srcset='data:,b' type='image/jpeg'><img src='data:,a' data-expect='data:,b'></picture></div>
<div><picture><source srcset='data:,b' type='image/svg+xml'><img src='data:,a' data-expect='data:,b'></picture></div>
<div><picture><source srcset='data:,b' type='image/x-icon'><img src='data:,a' data-expect='data:,b'></picture></div>
<div><picture><source srcset='data:,b' type='text/xml'><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><source srcset='data:,b' type='text/html'><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><source srcset='data:,b' type='text/plain'><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><source srcset='data:,b' type='text/css'><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><source srcset='data:,b' type='video/mp4'><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><source srcset='data:,b' type='video/ogg'><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><source srcset='data:,b' type='video/webm'><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><source srcset='data:,b' type='unknown/unknown'><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><source srcset='data:,b' type='application/octet-stream'><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><source srcset='data:,b' type='application/x-shockwave-flash'><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><source srcset='data:,b' type='image\gif'><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><source srcset='data:,b' type='gif'><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><source srcset='data:,b' type='.gif'><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><source srcset='data:,b' type='*'><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><source srcset='data:,b' type='*/*'><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><source srcset='data:,b' type='image/*'><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><source srcset='data:,b' type=','><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><source srcset='data:,b' type='image/gif, image/png'><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><source srcset='data:,b' type='image/gif image/png'><img src='data:,a' data-expect='data:,a'></picture></div>
<div><picture><source srcset='data:,b' type='image/foobarbaz'><img src='data:,a' data-expect='data:,a'></picture></div>
<!-- trailing garbage -->
<div><picture><img src='data:,a' data-expect='data:,a'>foo</picture></div>
<div><picture><img src='data:,a' data-expect='data:,a'><br></picture></div>
<div><picture><img src='data:,a' data-expect='data:,a'><!--foo--></picture></div>
<div><picture><img src='data:,a' data-expect='data:,a'><img src='data:,b'></picture></div>
<div><picture><img data-expect=''><img src='data:,b'></picture></div>
<div><picture><img src='data:,a' data-expect='data:,a'><source srcset='data:,b'></picture></div>
<div><picture><img data-expect=''><source srcset='data:,b'></picture></div>
<!-- parent not picture -->
<div><picture><span><source srcset='data:,b'><img data-expect=''></span></picture></div>
<div><picture><span><source srcset='data:,b'><img src='data:,a' data-expect='data:,a'></span></picture></div>
<div><picture><source srcset='data:,b'><span><img src='data:,a' data-expect='data:,a'></span></picture></div>
<!-- no src -->
<div><picture><source srcset='data:,b'><img data-expect='data:,b'></picture></div>