Skip to content

Commit

Permalink
HTML: test <img sizes=auto>
Browse files Browse the repository at this point in the history 
See whatwg/html#8008
  • Loading branch information
@zcorpan
zcorpan authored Jun 2, 2023
1 parent 983934d commit 1d96e07
Show file tree
Hide file tree
Showing 5 changed files with 241 additions and 17 deletions.
78 changes: 78 additions & 0 deletions html/semantics/embedded-content/the-img-element/relevant-mutations-lazy.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
<!doctype html>
<title>img relevant mutations, lazy-loaded</title>
<meta name="timeout" content="long">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/relevant-mutations.js"></script>
<div id=log></div>

<img src="/images/green-2x2.png"> <!-- block the window load event -->

<!-- should invoke update the image data, but omit events for layout changes -->
<!-- but also see https://github.com/whatwg/html/issues/8492 -->

<img srcset="/images/green-2x2.png 2w" sizes="auto" width="2" loading="lazy" data-desc="width attribute changes">

<img srcset="/images/green-2x2.png 2w" sizes="auto" style="width: 2px" loading="lazy" data-desc="width property changes">

<div style="width: 2px">
<img srcset="/images/green-2x2.png 2w" sizes="auto" style="width: 100%" loading="lazy" data-desc="percentage width, CB width changes">
</div>

<img srcset="/images/green-2x2.png 2w" sizes="auto" style="height: 2px; aspect-ratio: 2 / 2" loading="lazy" data-desc="height property changes (with aspect-ratio)">

<img srcset="/images/green-2x2.png 2w" sizes="auto" style="width: 2px" loading="lazy" data-desc="being rendered changes">

<!-- should not invoke update the image data -->

<img srcset="/images/green-2x2.png 2w" sizes="auto" style="width: 2px" loading="lazy" data-desc="loading attribute state changes">

<img srcset="/images/green-2x2.png 2w" sizes="auto" style="width: 2px" loading="lazy" data-desc="display property changes to inline-block">

<img srcset="/images/green-2x2.png 2w" sizes="auto" style="width: 2px" loading="lazy" data-desc="loading attribute changes to LAZY">

<script>
const rAF = () => new Promise(resolve => requestAnimationFrame(resolve));

onload = async function() {

await rAF();
await rAF();

// lazy-loaded images should have fired their first 'load' event at this point.

t('width attribute changes', function(img) {
img.width = '4';
}, 'load');

t('width property changes', function(img) {
img.style.width = '4px';
}, 'timeout');

t('percentage width, CB width changes', function(img) {
img.parentNode.style.width = '4px';
}, 'timeout');

t('height property changes (with aspect-ratio)', function(img) {
img.style.height = '4px';
}, 'timeout');

t('loading attribute state changes', function(img) {
img.loading = 'eager';
}, 'timeout');

t('being rendered changes', function(img) {
img.style.display = 'none';
}, 'timeout');

t('display property changes to inline-block', function(img) {
img.style.display = 'inline-block';
}, 'timeout');

t('loading attribute changes to LAZY', function(img) {
img.setAttribute('loading', 'LAZY');
}, 'timeout');

done();
};
</script>
17 changes: 1 addition & 16 deletions html/semantics/embedded-content/the-img-element/relevant-mutations.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<meta name="timeout" content="long">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/relevant-mutations.js"></script>
<div id=log></div>

<!-- should invoke update the image data -->
Expand Down Expand Up @@ -152,22 +153,6 @@


<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(), 1000);
} else {
img['on' + expect] = this.step_func_done();
setTimeout(this.unreached_func('update the image data didn\'t run'), 1000);
}
func.call(this, img);
}, desc);
}

onload = function() {

t('src set', function(img) {
Expand Down
147 changes: 147 additions & 0 deletions html/semantics/embedded-content/the-img-element/sizes/sizes-auto.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
<!doctype html>
<title>img parse a sizes attribute: sizes=auto</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
img { height: 10px; } /* Keep all images in the viewport, so lazy images load */
#narrow-div { width: 10px; }
#wide-div { width: 500px; }
</style>
<div id=log></div>
<script src="support/parse-a-sizes-attribute.js"></script>
<img srcset='/images/green-1x1.png?ref1 50w, /images/green-16x16.png?ref1 51w' sizes='1px' id=ref1>
<img srcset='/images/green-1x1.png?ref2 50w, /images/green-16x16.png?ref2 51w' sizes='100vw' id=ref2>
<div id='narrow-div'></div>
<div id='wide-div'></div>
<script>
"use strict";

// https://github.com/web-platform-tests/rfcs/pull/75
let async_promise_test = (promise, description) => {
async_test(test => {
promise(test)
.then(() => {test.done();})
.catch(test.step_func(error => { throw error; }));
}, description);
};

function check(imgOrPicture) {
let img = imgOrPicture;
let source;
if (imgOrPicture.localName === 'picture') {
source = imgOrPicture.firstChild;
img = imgOrPicture.lastChild;
}
const ref = document.getElementById(img.dataset.ref);
async_promise_test(async (t) => {
let expect = ref.currentSrc;
if (expect) {
expect = expect.split('?')[0];
}
if (expect === '' || expect === null || expect === undefined) {
assert_unreached('ref currentSrc was ' + format_value(expect));
}
await new Promise((resolve, reject) => {
img.onload = resolve;
img.onerror = reject;
});
t.step(() => {
let got = img.currentSrc;
assert_greater_than(got.indexOf('?'), -1, 'expected a "?" in currentSrc');
got = got.split('?')[0];
assert_equals(got, expect);
})
}, imgOrPicture.outerHTML);
}

const tests = [
// Smoke tests
{sizes: '1px', 'data-ref': 'ref1'},
{sizes: '', 'data-ref': 'ref2'},
// Actual tests
{loading: 'lazy', sizes: 'auto', width: '10', 'data-ref': 'ref1'},
{loading: 'lazy', sizes: 'AUTO', width: '10', 'data-ref': 'ref1'},
{loading: 'lazy', width: '10', 'data-ref': 'ref1'},
{loading: 'lazy', style: 'width: 10px', 'data-ref': 'ref1'},
{loading: 'lazy', style: 'max-width: 10px', 'data-ref': 'ref2'}, // no specified width -> 0 -> 100vw
{loading: 'lazy', style: 'width: 100%; max-width: 10px', 'data-ref': 'ref1'},
{loading: 'lazy', sizes: 'auto', width: '500', 'data-ref': 'ref2'},
{loading: 'lazy', sizes: 'auto', width: '10', style: 'visibility: hidden', 'data-ref': 'ref1'},
{loading: 'lazy', sizes: 'auto', width: '10', style: 'display: inline', hidden: '', 'data-ref': 'ref1'},
{loading: 'lazy', sizes: 'auto', width: '0', 'data-ref': 'ref2'}, // 0 -> 100vw
{loading: 'lazy', sizes: 'auto', style: 'width: 0px', 'data-ref': 'ref2'}, // 0 -> 100vw
{loading: 'lazy', sizes: 'auto', 'data-ref': 'ref2'}, // no specified width -> 0 -> 100vw
{loading: 'lazy', sizes: 'auto, 100vw', width: '10', 'data-ref': 'ref1'},
{loading: 'lazy', sizes: '100vw, auto', width: '10', 'data-ref': 'ref2'},
{loading: 'eager', sizes: 'auto', width: '10', 'data-ref': 'ref2'},
{loading: 'lazy', sizes: 'auto', width: '100%', parent: 'narrow-div', 'data-ref': 'ref1'},
{loading: 'lazy', sizes: 'auto', width: '100%', parent: 'wide-div', 'data-ref': 'ref2'},
{loading: 'lazy', sizes: 'auto', style: 'height: 10px; aspect-ratio: 10 / 10', 'data-ref': 'ref1'},
{loading: 'lazy', sizes: 'auto', style: 'height: 10px; aspect-ratio: 500 / 10', 'data-ref': 'ref2'},
{loading: 'lazy', sizes: 'auto', style: 'min-height: 10px; aspect-ratio: 10 / 10', 'data-ref': 'ref1'},
{loading: 'lazy', sizes: 'auto', style: 'min-height: 10px; aspect-ratio: 500 / 10', 'data-ref': 'ref2'},
{loading: 'lazy', sizes: 'auto', style: 'inline-size: 10px', 'data-ref': 'ref1'},
{loading: 'lazy', sizes: 'auto', style: 'min-inline-size: 10px', 'data-ref': 'ref1'},
{loading: 'lazy', sizes: 'auto', style: 'block-size: 10px; aspect-ratio: 10 / 10', 'data-ref': 'ref1'},
{loading: 'lazy', sizes: 'auto', style: 'min-block-size: 10px; aspect-ratio: 10 / 10', 'data-ref': 'ref1'},
{loading: 'lazy', sizes: 'auto', style: 'block-size: 10px; writing-mode: vertical-rl', 'data-ref': 'ref1'},
{loading: 'lazy', sizes: 'auto', style: 'min-block-size: 10px; writing-mode: vertical-rl', 'data-ref': 'ref1'},
{loading: 'lazy', sizes: 'auto', style: 'inline-size: 10px; aspect-ratio: 10/10; writing-mode: vertical-rl', 'data-ref': 'ref1'},
{loading: 'lazy', sizes: 'auto', style: 'min-inline-size: 10px; aspect-ratio: 10/10; writing-mode: vertical-rl', 'data-ref': 'ref1'},
{loading: 'lazy', sizes: 'auto', style: '--my-width: 10px; width: var(--my-width)', 'data-ref': 'ref1'},
{loading: 'lazy', sizes: 'auto', style: 'width: calc(5px + 5px)', 'data-ref': 'ref1'},
{loading: 'lazy', sizes: 'auto', style: 'position: absolute; left: 50%; right: 49%', 'data-ref': 'ref2'}, // replaced elements don't get the width resolved from 'left'/'right' per https://drafts.csswg.org/css2/#abs-replaced-width
];

function test_img(obj, i) {
const img = document.createElement('img');
let parent = document.body;
for (const attr in obj) {
if (attr === 'parent') {
parent = document.getElementById(obj.parent);
} else {
img.setAttribute(attr, obj[attr]);
}
}
img.srcset = `/images/green-1x1.png?img${i} 50w, /images/green-16x16.png?img${i} 51w`
parent.appendChild(img);
check(img);
}

function test_picture(obj, i) {
const picture = document.createElement('picture');
const source = document.createElement('source');
const img = document.createElement('img');
let parent = document.body;
for (const attr in obj) {
switch (attr) {
case 'parent':
parent = document.getElementById(obj.parent);
break;
case 'sizes':
case 'type':
case 'media':
source.setAttribute(attr, obj[attr]);
break;
default:
img.setAttribute(attr, obj[attr]);
break;
}
}
source.srcset = `/images/green-1x1.png?picture${i} 50w, /images/green-16x16.png?picture${i} 51w`;
picture.appendChild(source);
picture.appendChild(img);
parent.appendChild(picture);
check(picture);
}

onload = () => {
let i = 0;
for (const obj of tests) {
i++;
test_img(obj, i);
test_picture(obj, i);
}
done();
}
</script>
1 change: 0 additions & 1 deletion html/semantics/embedded-content/the-img-element/sizes/support/sizes-iframed.sub.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,6 @@
<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'>
Expand Down
15 changes: 15 additions & 0 deletions html/semantics/embedded-content/the-img-element/support/relevant-mutations.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
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(), 1000);
} else {
img['on' + expect] = this.step_func_done();
setTimeout(this.unreached_func('update the image data didn\'t run'), 1000);
}
func.call(this, img);
}, desc);
}

0 comments on commit 1d96e07

Please sign in to comment.