Align <img> with no src to the updated spec.

This commit is contained in:
Fedor 2020-06-10 21:11:41 +03:00
parent 6a49e31e07
commit 5aec39511c
26 changed files with 138 additions and 108 deletions

View File

@ -83,7 +83,7 @@
'listitem-2-3']);
queueTraversalSequence(gQueue, docAcc, TraversalRules.Graphic, null,
['image-2', 'image-3']);
['image-1', 'image-2', 'image-3']);
queueTraversalSequence(gQueue, docAcc, TraversalRules.Link, null,
['link-0', 'link-1', 'link-2', 'link-3']);
@ -117,7 +117,7 @@
'1. Scheme', '2. Racket', '3. Clojure',
'4. Standard Lisp', 'link-0', ' Lisp',
'checkbox-1-5', ' LeLisp', '• JavaScript',
'heading-5', 'image-2', 'image-3',
'heading-5', 'image-1', 'image-2', 'image-3',
'Not actually an image', 'link-1', 'anchor-1',
'link-2', 'anchor-2', 'link-3', '3', '1', '4',
'1', 'Sunday', 'M', 'Week 1', '3', '4', '7', '2',

View File

@ -20,8 +20,8 @@
document.getElementsByTagName("img")[0].firstChild.data = "2";
var accTree = {
role: ROLE_TEXT,
children: [ { role: ROLE_TEXT_LEAF } ]
role: ROLE_GRAPHIC,
children: []
};
testAccessibleTree("the_img", accTree);
SimpleTest.finish();

View File

@ -68,7 +68,7 @@ interface nsIImageLoadingContent : imgINotificationObserver
* the image was blocked. This status always refers to the
* CURRENT_REQUEST load.
*/
readonly attribute short imageBlockingStatus;
[infallible] readonly attribute short imageBlockingStatus;
/**
* Used to register an image decoder observer. Typically, this will

View File

@ -2,6 +2,7 @@
<html>
<body>
<img id="image1" src="">
<img id="image2">
<input id="image3" type="image">
</body>
</html>

View File

@ -4,7 +4,8 @@
<title>Delayed image reftest wrapper</title>
</head>
<body>
<img id="image1">
<!-- non-empty alt to avoid the broken image icon -->
<img id="image1" alt=" ">
<script>
// This loads a externally specified image, forces a draw (in case of
// decode-on-draw), waits 350ms, and then triggers the reftest snapshot.

View File

@ -9,7 +9,8 @@ img {
</style>
</head>
<body>
<img id="image1">
<!-- non-empty alt to avoid the broken image icon -->
<img id="image1" alt=" ">
<script>
// Loads an externally specified image and displays it
// with a green background. Intended for use with tests

View File

@ -4,7 +4,8 @@
<title>Delayed image reftest wrapper</title>
</head>
<body>
<img id="image1">
<!-- non-empty alt to avoid the broken image icon -->
<img id="image1" alt=" ">
<script>
// This loads a externally specified image, forces a draw (in case of
// decode-on-draw), waits 100ms, and then triggers the reftest snapshot.

View File

@ -14,13 +14,13 @@
</script>
</head>
<body>
<img id="image1">
<!-- non-empty alt to avoid the broken image icon -->
<img id="image1" alt=" ">
<script>
// Use as "wrapper.html?image.png"
var imgURL = document.location.search.substr(1);
document.images[0].onload = onImageLoad;
document.images[0].onerror = onImageLoad;
document.images[0].alt = "";
document.images[0].src = imgURL;
</script>
</body>

View File

@ -14,13 +14,13 @@
</script>
</head>
<body>
<img id="image1">
<!-- non-empty alt to avoid the broken image icon -->
<img id="image1" alt=" ">
<script>
// Use as "wrapper.html?image.png"
var imgURL = document.location.search.substr(1);
document.images[0].onload = onImageLoad;
document.images[0].onerror = onImageLoad;
document.images[0].alt = "";
document.images[0].src = imgURL;
</script>
</body>

View File

@ -14,13 +14,13 @@
</script>
</head>
<body>
<img id="image1">
<!-- non-empty alt to avoid the broken image icon -->
<img id="image1" alt=" ">
<script>
// Use as "wrapper.html?image.png"
var imgURL = document.location.search.substr(1);
document.images[0].onload = onImageLoad;
document.images[0].onerror = onImageLoad;
document.images[0].alt = "";
document.images[0].src = imgURL;
</script>
</body>

View File

@ -14,13 +14,13 @@
</script>
</head>
<body>
<img width="16px" height="16px" id="image1">
<!-- non-empty alt to avoid the broken image icon -->
<img width="16px" height="16px" id="image1" alt=" ">
<script>
// Use as "wrapper.html?image.png"
var imgURL = document.location.search.substr(1);
document.images[0].onload = onImageLoad;
document.images[0].onerror = onImageLoad;
document.images[0].alt = "";
document.images[0].src = imgURL;
</script>
</body>

View File

@ -14,7 +14,8 @@
</script>
</head>
<body>
<img width="8px" id="image1">
<!-- non-empty alt to avoid the broken image icon -->
<img width="8px" id="image1" alt=" ">
<script>
// Use as "wrapper.html?image.png"
var imgURL = document.location.search.substr(1);

View File

@ -4,7 +4,8 @@
<title>Delayed image reftest wrapper</title>
</head>
<body>
<img id="image1">
<!-- non-empty alt to avoid the broken image icon -->
<img id="image1" alt=" ">
<script>
// This loads a externally specified image, forces a draw (in case of
// decode-on-draw), waits 100ms, and then triggers the reftest snapshot.

View File

@ -14,7 +14,8 @@
</script>
</head>
<body>
<img id="image1">
<!-- non-empty alt to avoid the broken image icon -->
<img id="image1" alt=" ">
<script>
// Use as "wrapper.html?image.png
var imgURL = document.location.search.substr(1);

View File

@ -51,7 +51,6 @@
// code.
var finalImg = document.getElementById('image1');
finalImg.alt = "";
finalImg.onload = finalImg.onerror = step3;
finalImg.src = gImg.src;
}
@ -68,7 +67,8 @@
</script>
</head>
<body>
<img id="image1">
<!-- non-empty alt to avoid the broken image icon -->
<img id="image1" alt=" ">
<script>
// Use as "wrapper.html?image.png
gImg = document.createElement('img');

View File

@ -14,13 +14,13 @@
</script>
</head>
<body>
<img id="image1">
<!-- non-empty alt to avoid the broken image icon -->
<img id="image1" alt=" ">
<script>
// Use as "wrapper.html?image.png
var imgURL = document.location.search.substr(1);
document.images[0].onload = onImageLoad;
document.images[0].onerror = onImageLoad;
document.images[0].alt = "";
document.images[0].src = imgURL;
</script>
</body>

View File

@ -14,7 +14,8 @@
</script>
</head>
<body>
<img id="image1">
<!-- non-empty alt to avoid the broken image icon -->
<img id="image1" alt=" ">
<script>
// Use as "wrapper.html?image.png
var imgURL = document.location.search.substr(1);

View File

@ -14,13 +14,13 @@
</script>
</head>
<body>
<img id="image1">
<!-- non-empty alt to avoid the broken image icon -->
<img id="image1" alt=" ">
<script>
// Use as "wrapper.html?image.png
var imgURL = document.location.search.substr(1);
document.images[0].onload = onImageLoad;
document.images[0].onerror = onImageLoad;
document.images[0].alt = "";
document.images[0].src = imgURL;
</script>
</body>

View File

@ -14,7 +14,8 @@
</script>
</head>
<body>
<img id="image1">
<!-- non-empty alt to avoid the broken image icon -->
<img id="image1" alt=" ">
<script>
// Use as "wrapper.html?image.png
var imgURL = document.location.search.substr(1);

View File

@ -116,7 +116,7 @@ static bool HaveSpecifiedSize(const nsStylePosition* aStylePosition)
// Decide whether we can optimize away reflows that result from the
// image's intrinsic size changing.
inline bool HaveFixedSize(const ReflowInput& aReflowInput)
static bool HaveFixedSize(const ReflowInput& aReflowInput)
{
NS_ASSERTION(aReflowInput.mStylePosition, "crappy reflowInput - null stylePosition");
// Don't try to make this optimization when an image has percentages
@ -430,66 +430,56 @@ nsImageFrame::SourceRectToDest(const nsIntRect& aRect)
// that we'll construct image frames for them as needed if their display is
// toggled from "none" (though we won't paint them, unless their visibility
// is changed too).
#define BAD_STATES (NS_EVENT_STATE_BROKEN | NS_EVENT_STATE_USERDISABLED | \
NS_EVENT_STATE_LOADING)
#define BAD_STATES (NS_EVENT_STATE_BROKEN | NS_EVENT_STATE_USERDISABLED)
// This is a macro so that we don't evaluate the boolean last arg
// unless we have to; it can be expensive
#define IMAGE_OK(_state, _loadingOK) \
(!(_state).HasAtLeastOneOfStates(BAD_STATES) || \
(!(_state).HasAtLeastOneOfStates(NS_EVENT_STATE_BROKEN | NS_EVENT_STATE_USERDISABLED) && \
(_state).HasState(NS_EVENT_STATE_LOADING) && (_loadingOK)))
static bool ImageOk(EventStates aState) {
return !aState.HasAtLeastOneOfStates(BAD_STATES);
}
/* static */
bool
nsImageFrame::ShouldCreateImageFrameFor(Element* aElement,
nsStyleContext* aStyleContext)
static bool HasAltText(Element* aElement)
{
EventStates state = aElement->State();
if (IMAGE_OK(state,
HaveSpecifiedSize(aStyleContext->StylePosition()))) {
// Image is fine; do the image frame thing
// We always return some alternate text for <input>, see
// nsCSSFrameConstructor::GetAlternateTextFor.
if (aElement->IsHTMLElement(nsGkAtoms::input)) {
return true;
}
// Check if we want to use a placeholder box with an icon or just
// let the presShell make us into inline text. Decide as follows:
//
// - if our special "force icons" style is set, show an icon
// - else if our "do not show placeholders" pref is set, skip the icon
// - else:
// - if there is a src attribute, there is no alt attribute,
// and this is not an <object> (which could not possibly have
// such an attribute), show an icon.
// - if QuirksMode, and the IMG has a size show an icon.
// - otherwise, skip the icon
bool useSizedBox;
if (aStyleContext->StyleUIReset()->mForceBrokenImageIcon) {
useSizedBox = true;
}
else if (gIconLoad && gIconLoad->mPrefForceInlineAltText) {
useSizedBox = false;
}
else if (aElement->HasAttr(kNameSpaceID_None, nsGkAtoms::src) &&
!aElement->HasAttr(kNameSpaceID_None, nsGkAtoms::alt) &&
!aElement->IsHTMLElement(nsGkAtoms::object) &&
!aElement->IsHTMLElement(nsGkAtoms::input)) {
// Use a sized box if we have no alt text. This means no alt attribute
// and the node is not an object or an input (since those always have alt
// text).
useSizedBox = true;
}
else if (aStyleContext->PresContext()->CompatibilityMode() !=
eCompatibility_NavQuirks) {
useSizedBox = false;
}
else {
// check whether we have specified size
useSizedBox = HaveSpecifiedSize(aStyleContext->StylePosition());
MOZ_ASSERT(aElement->IsHTMLElement(nsGkAtoms::img));
nsAutoString altText;
return aElement->GetAttr(kNameSpaceID_None, nsGkAtoms::alt, altText) && !altText.IsEmpty();
}
// Check if we want to use an image frame or just let the frame constructor make
// us into an inline.
/* static */ bool
nsImageFrame::ShouldCreateImageFrameFor(Element* aElement,
nsStyleContext* aStyleContext)
{
if (ImageOk(aElement->State())) {
// Image is fine or loading; do the image frame thing
return true;
}
return useSizedBox;
// If our special "force icons" style is set, show an icon
if (aStyleContext->StyleUIReset()->mForceBrokenImageIcon) {
return true;
}
// If our "do not show placeholders" pref is set, skip the icon
if (gIconLoad && gIconLoad->mPrefForceInlineAltText) {
return false;
}
// If there is no Alt text, always create an image frame (regardless of src)
if (!HasAltText(aElement)) {
return true;
}
if (aStyleContext->PresContext()->CompatibilityMode() == eCompatibility_NavQuirks) {
return HaveSpecifiedSize(aStyleContext->StylePosition());
}
return false;
}
nsresult
@ -775,6 +765,25 @@ nsImageFrame::PredictedDestRect(const nsRect& aFrameContentBox)
StylePosition());
}
bool nsImageFrame::ShouldShowBrokenImageIcon() const
{
bool imageBroken = false;
// Check for broken images. valid null images (eg. img src="") are
// not considered broken because they have no image requests
nsCOMPtr<nsIImageLoadingContent> imageLoader = do_QueryInterface(mContent);
if (imageLoader) {
nsCOMPtr<imgIRequest> currentRequest;
imageLoader->GetRequest(nsIImageLoadingContent::CURRENT_REQUEST,
getter_AddRefs(currentRequest));
uint32_t imageStatus;
imageBroken =
currentRequest &&
NS_SUCCEEDED(currentRequest->GetImageStatus(&imageStatus)) &&
(imageStatus & imgIRequest::STATUS_ERROR);
}
return imageBroken;
}
void
nsImageFrame::EnsureIntrinsicSizeAndRatio()
{
@ -789,25 +798,11 @@ nsImageFrame::EnsureIntrinsicSizeAndRatio()
UpdateIntrinsicSize(mImage);
UpdateIntrinsicRatio(mImage);
} else {
// image request is null or image size not known, probably an
// invalid image specified
// Image request is null or image size not known.
if (!(GetStateBits() & NS_FRAME_GENERATED_CONTENT)) {
bool imageBroken = false;
// check for broken images. valid null images (eg. img src="") are
// not considered broken because they have no image requests
nsCOMPtr<nsIImageLoadingContent> imageLoader = do_QueryInterface(mContent);
if (imageLoader) {
nsCOMPtr<imgIRequest> currentRequest;
imageLoader->GetRequest(nsIImageLoadingContent::CURRENT_REQUEST,
getter_AddRefs(currentRequest));
uint32_t imageStatus;
imageBroken =
currentRequest &&
NS_SUCCEEDED(currentRequest->GetImageStatus(&imageStatus)) &&
(imageStatus & imgIRequest::STATUS_ERROR);
}
// invalid image specified. make the image big enough for the "broken" icon
if (imageBroken) {
// Likely an invalid image. Check if we should display it as broken.
if (ShouldShowBrokenImageIcon()) {
// Invalid image specified. make the image big enough for the "broken" icon
nscoord edgeLengthToUse =
nsPresContext::CSSPixelsToAppUnits(
ICON_SIZE + (2 * (ICON_PADDING + ALT_BORDER_WIDTH)));
@ -1015,8 +1010,7 @@ nsImageFrame::Reflow(nsPresContext* aPresContext,
}
aMetrics.SetOverflowAreasToDesiredBounds();
EventStates contentState = mContent->AsElement()->State();
bool imageOK = IMAGE_OK(contentState, true);
bool imageOK = ImageOk(mContent->AsElement()->State());
// Determine if the size is available
bool haveSize = false;
@ -1335,7 +1329,7 @@ nsImageFrame::DisplayAltFeedback(nsRenderingContext& aRenderingContext,
MOZ_ASSERT(gIconLoad, "How did we succeed in Init then?");
// Whether we draw the broken or loading icon.
bool isLoading = IMAGE_OK(GetContent()->AsElement()->State(), true);
bool isLoading = ImageOk(mContent->AsElement()->State());
// Calculate the inner area
nsRect inner = GetInnerArea() + aPt;
@ -1389,7 +1383,8 @@ nsImageFrame::DisplayAltFeedback(nsRenderingContext& aRenderingContext,
DrawResult result = DrawResult::NOT_READY;
// Check if we should display image placeholders
if (!gIconLoad->mPrefShowPlaceholders ||
if (!ShouldShowBrokenImageIcon() ||
!gIconLoad->mPrefShowPlaceholders ||
(isLoading && !gIconLoad->mPrefShowLoadingPlaceholder)) {
result = DrawResult::SUCCESS;
} else {
@ -1754,8 +1749,7 @@ nsImageFrame::BuildDisplayList(nsDisplayListBuilder* aBuilder,
getter_AddRefs(currentRequest));
}
EventStates contentState = mContent->AsElement()->State();
bool imageOK = IMAGE_OK(contentState, true);
bool imageOK = ImageOk(mContent->AsElement()->State());
// XXX(seth): The SizeIsAvailable check here should not be necessary - the
// intention is that a non-null mImage means we have a size, but there is

View File

@ -106,6 +106,8 @@ public:
void OnVisibilityChange(Visibility aNewVisibility,
Maybe<OnNonvisible> aNonvisibleAction = Nothing()) override;
bool ShouldShowBrokenImageIcon() const;
#ifdef ACCESSIBILITY
virtual mozilla::a11y::AccType AccessibleType() override;
#endif

View File

@ -1,2 +1,2 @@
<!DOCTYPE html>
<img style="background-image: url(really-big-background.png); width: 1600px; height: 1200px; position: absolute;"></img>
<img alt=" " style="background-image: url(really-big-background.png); width: 1600px; height: 1200px; position: absolute;"></img>

File diff suppressed because one or more lines are too long

View File

@ -642,7 +642,6 @@ hr[size="1"] {
img:-moz-broken::before, input:-moz-broken::before,
img:-moz-user-disabled::before, input:-moz-user-disabled::before,
img:-moz-loading::before, input:-moz-loading::before,
applet:-moz-empty-except-children-with-localname(param):-moz-broken::before,
applet:-moz-empty-except-children-with-localname(param):-moz-user-disabled::before {
content: -moz-alt-content !important;

View File

@ -109,7 +109,7 @@ asserts(8) load 420654-1.xhtml # bug 458238, bug 436123, bug 457397
load 423514-1.xhtml
load 430374.html
load 444431-1.html
load 444702-1.html
asserts(1) load 444702-1.html # nscoord overflow.
load 448988-1.xhtml
load 450311-1.html
load 451170.html

View File

@ -0,0 +1,25 @@
<!doctype html>
<title>Images without alt attribute or with an empty alt attribute render as replaced elements regardless of src</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="author" href="https://mozilla.org" title="Mozilla">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1196668">
<style>
img {
width: 100px;
height: 150px;
}
</style>
<img>
<img src="broken">
<img alt="">
<script>
const t = async_test("Images without alt attribute or with an empty alt attribute render as replaced elements regardless of src");
onload = t.step_func_done(function() {
for (const img of document.querySelectorAll("img")) {
assert_equals(img.offsetWidth, 100, `width: ${img.outerHTML}`);
assert_equals(img.offsetHeight, 150, `height: ${img.outerHTML}`);
}
});
</script>