Bug 1969478 part 4: Extend WPT naturalWidth-naturalHeight-width-height.tentative.html to repeat each test with 'display:none' on the image. a=RyanVM
When the image isn't rendered, the values returned by img.width and img.height are supposed to be different in many cases, and that's what we're testing for here. Relevant spec text on these differences is here: https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-width "if the image is being rendered; or else ..." (though that spec text needs some nuance added per https://github.com/whatwg/html/issues/11287#issuecomment-2923467541 ) Firefox Nightly fails a bunch of the new tests added here, and those failures will be fixed in bug 1965560 as noted in the .ini file. Original Revision: https://phabricator.services.mozilla.com/D251972 Differential Revision: https://phabricator.services.mozilla.com/D267123
This commit is contained in:
Daniel Holbert
committed by
rvandermeulen@mozilla.com
rvandermeulen@mozilla.com
parent
210b5e9bf9
commit
126265d69e
@@ -2,3 +2,211 @@
|
||||
# TODO(dholbert): Look into this crash in bug 1969597
|
||||
expected:
|
||||
if (processor == "x86") and (os == "linux"): CRASH
|
||||
|
||||
# These "when not rendered" expected-failures are all bug 1965560:
|
||||
[SVG image, no natural dimensions (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image with width attr, no natural dimensions (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image with height attr, no natural dimensions (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, percengage natural dimensions (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, negative percengage natural dimensions (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural width (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural height (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural width of 0 (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural height of 0 (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural width being negative (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural height being negative (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, no natural dimensions, and aspect ratio from viewBox (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, percengage natural dimensions, and aspect ratio from viewBox (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, negative percengage natural dimensions, and aspect ratio from viewBox (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, no natural dimensions, viewBox with 0 width/height (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, no natural dimensions, viewBox with 0 width (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, no natural dimensions, viewBox with 0 height (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural width, viewBox with 0 width/height (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural width, viewBox with 0 width (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural width, viewBox with 0 height (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural height, viewBox with 0 width/height (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural height, viewBox with 0 width (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural height, viewBox with 0 height (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, no natural dimensions (with srcset/1x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image with width attr, no natural dimensions (with srcset/1x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image with height attr, no natural dimensions (with srcset/1x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, percengage natural dimensions (with srcset/1x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, negative percengage natural dimensions (with srcset/1x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural width (with srcset/1x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural height (with srcset/1x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural width of 0 (with srcset/1x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural height of 0 (with srcset/1x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural width being negative (with srcset/1x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural height being negative (with srcset/1x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, no natural dimensions, and aspect ratio from viewBox (with srcset/1x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, percengage natural dimensions, and aspect ratio from viewBox (with srcset/1x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, negative percengage natural dimensions, and aspect ratio from viewBox (with srcset/1x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, no natural dimensions, viewBox with 0 width/height (with srcset/1x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, no natural dimensions, viewBox with 0 width (with srcset/1x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, no natural dimensions, viewBox with 0 height (with srcset/1x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural width, viewBox with 0 width/height (with srcset/1x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural width, viewBox with 0 width (with srcset/1x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural width, viewBox with 0 height (with srcset/1x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural height, viewBox with 0 width/height (with srcset/1x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural height, viewBox with 0 width (with srcset/1x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural height, viewBox with 0 height (with srcset/1x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, no natural dimensions (with srcset/2x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image with width attr, no natural dimensions (with srcset/2x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image with height attr, no natural dimensions (with srcset/2x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, percengage natural dimensions (with srcset/2x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, negative percengage natural dimensions (with srcset/2x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural width (with srcset/2x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural height (with srcset/2x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural width of 0 (with srcset/2x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural height of 0 (with srcset/2x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural width being negative (with srcset/2x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural height being negative (with srcset/2x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, no natural dimensions, and aspect ratio from viewBox (with srcset/2x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, percengage natural dimensions, and aspect ratio from viewBox (with srcset/2x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, negative percengage natural dimensions, and aspect ratio from viewBox (with srcset/2x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, no natural dimensions, viewBox with 0 width/height (with srcset/2x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, no natural dimensions, viewBox with 0 width (with srcset/2x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, no natural dimensions, viewBox with 0 height (with srcset/2x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural width, viewBox with 0 width/height (with srcset/2x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural width, viewBox with 0 width (with srcset/2x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural width, viewBox with 0 height (with srcset/2x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural height, viewBox with 0 width/height (with srcset/2x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural height, viewBox with 0 width (with srcset/2x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
[SVG image, with natural height, viewBox with 0 height (with srcset/2x) (when not rendered)]
|
||||
expected: FAIL
|
||||
|
||||
@@ -65,7 +65,8 @@ img {
|
||||
<img src="resources/cat.jpg" width="10" height="10"
|
||||
title="raster image with width/height attributes"
|
||||
data-natural-width="320" data-natural-height="240"
|
||||
data-width="10" data-height="10">
|
||||
data-width="10" data-height="10"
|
||||
data-not-rendered-width="10" data-not-rendered-height="10">
|
||||
<!-- Use "size-comes-from-broken-image-icon" attribute to opt out of checking
|
||||
img.width and img.height, because they come from the UA-dependent
|
||||
size of the broken image icon: -->
|
||||
@@ -76,7 +77,8 @@ img {
|
||||
<img src="non-existent.jpg" width="10" height="10"
|
||||
title="non existent image with width/height attributes, no natural dimensions"
|
||||
data-natural-width="0" data-natural-height="0"
|
||||
data-width="10" data-height="10">
|
||||
data-width="10" data-height="10"
|
||||
data-not-rendered-width="10" data-not-rendered-height="10">
|
||||
|
||||
<!-- First group of SVG images: no viewBox, with a missing (or edge-casey, i.e.
|
||||
negative or percent-valued) value for the width and/or height attr on the
|
||||
@@ -84,6 +86,22 @@ img {
|
||||
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>"
|
||||
title="SVG image, no natural dimensions"
|
||||
data-natural-width="300" data-natural-height="150">
|
||||
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>"
|
||||
width="40" height="10"
|
||||
data-width="40" data-height="10"
|
||||
data-not-rendered-width="40" data-not-rendered-height="10"
|
||||
title="SVG image with width/height attrs, no natural dimensions"
|
||||
data-natural-width="300" data-natural-height="150">
|
||||
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>"
|
||||
width="40"
|
||||
data-width="40" data-not-rendered-width="40"
|
||||
title="SVG image with width attr, no natural dimensions"
|
||||
data-natural-width="300" data-natural-height="150">
|
||||
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>"
|
||||
height="10"
|
||||
data-height="10" data-not-rendered-height="10"
|
||||
title="SVG image with height attr, no natural dimensions"
|
||||
data-natural-width="300" data-natural-height="150">
|
||||
<!-- Note: percent values can't be resolved when determining natural
|
||||
dimensions, so the exact percentage shouldn't matter. -->
|
||||
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='400%' height='10%'></svg>"
|
||||
@@ -241,21 +259,40 @@ function cloneTemplateWithDensity(density) {
|
||||
const isUsingConcreteObjectHeight = (img.dataset.naturalHeight == "150");
|
||||
|
||||
// Scale our 'data-natural-{width,height}' expectations by the density.
|
||||
// But also, preserve the original 'data-natural-{width,height}' as the
|
||||
// But also:
|
||||
// * Preserve the original 'data-natural-{width,height}' as the
|
||||
// 'data-{width,height}' expectation if it's just the concrete object size
|
||||
// (which doesn't actually get scaled by the density in practice when
|
||||
// the image actually renders).
|
||||
// * Preserve the original 'data-natural-{width,height}' as the
|
||||
// 'data-not-rendered-{width,height}' expectation (if we don't already have
|
||||
// one) since browsers don't do density-correction on .width and .height when
|
||||
// the image is not being rendered, as discussed in
|
||||
// https://github.com/whatwg/html/issues/11287#issuecomment-2923467541
|
||||
for (let name in img.dataset) {
|
||||
if (name.startsWith("natural")) {
|
||||
let origExpectation = img.dataset[name];
|
||||
|
||||
// Scale our img.natural{Width,Height} expectation:
|
||||
img.dataset[name] = origExpectation / density;
|
||||
|
||||
let isWidthAxis = (name == "naturalWidth");
|
||||
let nameWithoutNatural = (isWidthAxis ? "width" : "height");
|
||||
|
||||
let isConcreteObjectSize =
|
||||
(isWidthAxis ? isUsingConcreteObjectWidth : isUsingConcreteObjectHeight);
|
||||
if (isConcreteObjectSize && !(nameWithoutNatural in img.dataset)) {
|
||||
img.dataset[nameWithoutNatural] = origExpectation;
|
||||
}
|
||||
|
||||
// Construct a string for "data-not-rendered-{width,height}" for
|
||||
// whichever axis we're currently handling, and stash the
|
||||
// origExpectation in there if we don't already have some expectation
|
||||
// set there:
|
||||
let notRenderedName = name.replace("natural", "notRendered");
|
||||
if (!(notRenderedName in img.dataset)) {
|
||||
img.dataset[notRenderedName] = origExpectation;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -280,11 +317,12 @@ containingBlock.appendChild(cloneTemplateWithDensity(2));
|
||||
// we run the various tests:
|
||||
onload = function() {
|
||||
Array.from(document.images).forEach(img => {
|
||||
const expectedNaturalWidth = parseFloat(img.dataset.naturalWidth);
|
||||
const expectedNaturalHeight = parseFloat(img.dataset.naturalHeight);
|
||||
|
||||
test(function() {
|
||||
// We expect naturalWidth to match the provided data-natural-width
|
||||
// (and similar for 'height').
|
||||
const expectedNaturalWidth = parseFloat(img.dataset.naturalWidth);
|
||||
const expectedNaturalHeight = parseFloat(img.dataset.naturalHeight);
|
||||
assert_equals(img.naturalWidth, expectedNaturalWidth, 'naturalWidth');
|
||||
assert_equals(img.naturalHeight, expectedNaturalHeight, 'naturalHeight');
|
||||
|
||||
@@ -303,6 +341,35 @@ onload = function() {
|
||||
assert_equals(img.height, expectedHeight, 'height');
|
||||
}
|
||||
}, `${img.title}`);
|
||||
|
||||
test(function() {
|
||||
// Now test what we get when the img is not rendered.
|
||||
// * naturalWidth and naturalHeight shouldn't change.
|
||||
// * width and height should generally match naturalWidth and
|
||||
// naturalHeight. (Exceptions are indicated via the
|
||||
// 'data-not-rendered-{width/height} attributes).
|
||||
this.add_cleanup(function() {
|
||||
img.style.display = "";
|
||||
});
|
||||
|
||||
img.style.display = "none";
|
||||
img.getBoundingClientRect(); // Flush layout.
|
||||
|
||||
assert_equals(img.naturalWidth, expectedNaturalWidth,
|
||||
'naturalWidth when not rendered');
|
||||
assert_equals(img.naturalHeight, expectedNaturalHeight,
|
||||
'naturalHeight when not rendered');
|
||||
|
||||
const expectedNotRenderedWidth = 'notRenderedWidth' in img.dataset ?
|
||||
parseFloat(img.dataset.notRenderedWidth) : expectedNaturalWidth;
|
||||
const expectedNotRenderedHeight = 'notRenderedHeight' in img.dataset ?
|
||||
parseFloat(img.dataset.notRenderedHeight) : expectedNaturalHeight;
|
||||
|
||||
assert_equals(img.width, expectedNotRenderedWidth,
|
||||
'width when not rendered');
|
||||
assert_equals(img.height, expectedNotRenderedHeight,
|
||||
'height when not rendered');
|
||||
}, `${img.title} (when not rendered)`);
|
||||
});
|
||||
done();
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user