Chromium Code Reviews Chromium Code Reviews
Issue
481753002:
Use Shadow DOM to display fallback content for images (Closed)
DescriptionUse Shadow DOM to display fallback content for images
This replaces the use of painting in RenderImage to display an image's alt text
with an implementation in shadow DOM. This initial implementation is close in
appearance to the legacy display of alt-text but will ultimately move closer to
the one seen in Firefox and described in http://hixie.ch/specs/alttext.
The alt-text and broken-image icon is now rendered as:
<style>
#alttext-container {
overflow: hidden;
border: 1px solid silver;
padding: 1px;
display: inline-block;
}
#alttext { display: none; overflow: hidden;}
</style>
<div id="alttext-container">
<img src="data:png, [broken-image-icon]" width="16" height="16" align="left" style="margin: 0px">
<div id="alt-text">Alt text in here</div>
</div>
Some notes on the way the fallback content is now rendered:
- The fallback content is rendered inside an inline-block so it does not calculate
its dimensions the way a replaced element (i.e. an image) would (as defined by
http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width). So where one of width
or height is auto but the other is not, the fallback content will not exactly match
the dimensions calculated by RenderImage in error mode currently. We do a modest
imitation of the logic in quirks mode, but in strict mode it will behave exactly like an inline-block.
- Where the image has no src attribute and no alt attribute RenderImage.cpp
still looks after the painting of the element - no fallback content is generated
and no broken image is displayed. This is consistent with existing behaviour.
- The only image resource requests that still use the synchronous load path are
those where the item is cached (and didn't error out),
where its the fallback image for an object element, or where it's the image
for a main resource load. All other image loads are now asynchronous so that
fallback content can be loaded outside the style recalc phase.
- Instead of aborting an image resource request when the src element is empty
(i.e. src='') we now allow the request to go through so that it can fail and
invoke the fallback content in HTMLImageLoader.cpp.
- As you can see in the new result for fast/borders/rtl-border-05.html, since
the alt-text is displayed as an inline-block it no longer artificially shrinks
any border on the element to the broken-image icon.
Some notes on the rebaselined test results:
- I've modified inspector/network/network-image-404.html to output the state of
both the resource requests, i.e. the failed one and the resource request for the
data:png to display the broken image icon.
- I've added a missing support file for fast/css/counters/complex-before.html -
its absence meant that the result was polluted by the behaviour of broken image
rendering.
- Likewise for fast/images/imagemap-polygon* tests - our new rendering of failed
image loads was interfering with an assumption in the tests that a broken image
still painted a RenderImage. So I've removed the src attribute to allow the
assumption hold (img elements without a src attribute are painted by
RenderImage).
- I have altered fast/forms/state-restore-to-non-edited-controls.html to wait
100ms before submitting the form as the image load in the input element is now
asynchronous. Likewise for fast/forms/basic-buttons.html.
- I did the same to svg/canvas/canvas-draw-image-globalalpha.html and
fast/canvas/canvas-drawImage-out-of-bounds-src.html. Since all image loads that
might need alt content are performed asynchronously canvas.drawImage() now needs
to ensure the content has loaded before drawing.
- http/tests/security/local-image-from-remote-whitelisted.html has been masking
a bug - blink does not load the image even though it is whitelisted. I am
rebaselining the test to reflect the failure revealed by this CL and tracking
a fix under crbug.com/410949.
- As the alt text is now always exposed if the image doesn't load, any input elements
that use an image will show the default alt title 'Submit'. This shows up in
the accessibility unit tests in content_browsertests. I plan to rebaseline these
in a separate CL.
Committed: https://src.chromium.org/viewvc/blink?view=rev&revision=185847
Committed: https://src.chromium.org/viewvc/blink?view=rev&revision=186800
Patch Set 1 #Patch Set 2 : git log #Patch Set 3 : Updated #Patch Set 4 : Updated #Patch Set 5 : Updated #Patch Set 6 : Updated #
Total comments: 61
Patch Set 7 : Updated #
Total comments: 1
Patch Set 8 : Updated #Patch Set 9 : Updated #Patch Set 10 : Updated #Patch Set 11 : Updated #Patch Set 12 : Updated again #Patch Set 13 : Updated #Patch Set 14 : Updated #Patch Set 15 : Updated #Patch Set 16 : Updated #Patch Set 17 : Updated #
Total comments: 1
Patch Set 18 : Updated #Patch Set 19 : Updated #Patch Set 20 : Updated #Patch Set 21 : Updated #Patch Set 22 : Updated #Patch Set 23 : Updated #Patch Set 24 : Updated #Patch Set 25 : Updated #Patch Set 26 : Updated #Patch Set 27 : Updated #Patch Set 28 : Updated #Patch Set 29 : Updated #Patch Set 30 : Updated #Patch Set 31 : Updated #Patch Set 32 : Updated #
Total comments: 6
Patch Set 33 : Updated #Patch Set 34 : Updated #Patch Set 35 : Updated #Patch Set 36 : Updated #
Total comments: 11
Patch Set 37 : Updated #
Total comments: 1
Patch Set 38 : Updated #Patch Set 39 : Updated #Patch Set 40 : Updated #Patch Set 41 : Updated #Patch Set 42 : Updated #Patch Set 43 : Updated #Patch Set 44 : Updated #Patch Set 45 : Updated #
Total comments: 1
Messages
Total messages: 41 (5 generated)
|
