Use 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

Review URL: https://codereview.chromium.org/481753002

git-svn-id: svn://svn.chromium.org/blink/trunk@186800 bbb929c8-8fbe-4397-9dbb-9b2b20218538

7 files changed, 26 insertions, 2 deletions

diff --git a/third_party/WebKit/LayoutTests/platform/linux/fast/hidpi/broken-image-icon-hidpi-expected.png b/third_party/WebKit/LayoutTests/platform/linux/fast/hidpi/broken-image-icon-hidpi-expected.png
new file mode 100644
index 0000000..0c0b537
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/platform/linux/fast/hidpi/broken-image-icon-hidpi-expected.png
diff --git a/third_party/WebKit/LayoutTests/platform/linux/fast/hidpi/broken-image-icon-hidpi-expected.txt b/third_party/WebKit/LayoutTests/platform/linux/fast/hidpi/broken-image-icon-hidpi-expected.txt
index 8a0a90b7e..fba4c0a 100644
--- a/third_party/WebKit/LayoutTests/platform/linux/fast/hidpi/broken-image-icon-hidpi-expected.txt
+++ b/third_party/WebKit/LayoutTests/platform/linux/fast/hidpi/broken-image-icon-hidpi-expected.txt
@@ -7,5 +7,8 @@ layer at (0,0) size 800x600
         RenderText {#text} at (0,0) size 700x19
           text run at (0,0) width 700: "This test passes if the broken image icon appears high-resolution in HiDPI and if the outline is of the appropriate size."
       RenderBlock (anonymous) at (0,20) size 784x20
-        RenderImage {IMG} at (0,0) size 20x20
+        RenderBlock {IMG} at (0,0) size 20x20
         RenderText {#text} at (0,0) size 0x0
+layer at (8,28) size 20x20 clip at (9,29) size 18x18
+  RenderBlock {DIV} at (0,0) size 20x20 [border: (1px solid #C0C0C0)]
+    RenderImage {IMG} at (2,2) size 16x16
diff --git a/third_party/WebKit/LayoutTests/platform/linux/fast/hidpi/broken-image-with-size-hidpi-expected.png b/third_party/WebKit/LayoutTests/platform/linux/fast/hidpi/broken-image-with-size-hidpi-expected.png
new file mode 100644
index 0000000..b0219ca
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/platform/linux/fast/hidpi/broken-image-with-size-hidpi-expected.png
diff --git a/third_party/WebKit/LayoutTests/platform/linux/fast/hidpi/broken-image-with-size-hidpi-expected.txt b/third_party/WebKit/LayoutTests/platform/linux/fast/hidpi/broken-image-with-size-hidpi-expected.txt
index 0d24013..3b997c4 100644
--- a/third_party/WebKit/LayoutTests/platform/linux/fast/hidpi/broken-image-with-size-hidpi-expected.txt
+++ b/third_party/WebKit/LayoutTests/platform/linux/fast/hidpi/broken-image-with-size-hidpi-expected.txt
@@ -7,5 +7,8 @@ layer at (0,0) size 800x600
         RenderText {#text} at (0,0) size 608x19
           text run at (0,0) width 608: "This test passes if the broken image icon appears high-resolution in HiDPI and is the appropriate size."
       RenderBlock (anonymous) at (0,20) size 784x150
-        RenderImage {IMG} at (0,0) size 300x150
+        RenderBlock {IMG} at (0,0) size 300x150
         RenderText {#text} at (0,0) size 0x0
+layer at (8,28) size 300x150 clip at (9,29) size 298x148
+  RenderBlock {DIV} at (0,0) size 300x150 [border: (1px solid #C0C0C0)]
+    RenderImage {IMG} at (2,2) size 16x16
diff --git a/third_party/WebKit/LayoutTests/platform/linux/fast/images/alt-text-wrapping-expected.png b/third_party/WebKit/LayoutTests/platform/linux/fast/images/alt-text-wrapping-expected.png
new file mode 100644
index 0000000..02d1845
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/platform/linux/fast/images/alt-text-wrapping-expected.png
diff --git a/third_party/WebKit/LayoutTests/platform/linux/fast/images/alt-text-wrapping-expected.txt b/third_party/WebKit/LayoutTests/platform/linux/fast/images/alt-text-wrapping-expected.txt
new file mode 100644
index 0000000..d1f09118
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/platform/linux/fast/images/alt-text-wrapping-expected.txt
@@ -0,0 +1,18 @@
+layer at (0,0) size 800x600
+  RenderView at (0,0) size 800x600
+layer at (0,0) size 800x600
+  RenderBlock {HTML} at (0,0) size 800x600
+    RenderBody {BODY} at (8,8) size 784x584
+      RenderBlock {IMG} at (0,0) size 100x100
+      RenderText {#text} at (0,0) size 0x0
+layer at (8,8) size 100x100 clip at (9,9) size 98x98 scrollHeight 102
+  RenderBlock {DIV} at (0,0) size 100x100 [border: (1px solid #C0C0C0)]
+    RenderImage {IMG} at (2,2) size 16x16
+layer at (26,10) size 80x100 backgroundClip at (26,10) size 80x97 clip at (26,10) size 80x97 outlineClip at (9,9) size 98x98
+  RenderBlock {DIV} at (18,2) size 80x100
+    RenderText {#text} at (0,0) size 74x99
+      text run at (0,0) width 51: "This text"
+      text run at (0,20) width 74: "should wrap"
+      text run at (0,40) width 56: "inside the"
+      text run at (0,60) width 47: "fallback"
+      text run at (0,80) width 48: "content."
diff --git a/third_party/WebKit/LayoutTests/platform/linux/http/tests/security/contentSecurityPolicy/image-blocked-alt-content-expected.png b/third_party/WebKit/LayoutTests/platform/linux/http/tests/security/contentSecurityPolicy/image-blocked-alt-content-expected.png
new file mode 100644
index 0000000..5f1c1a4
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/platform/linux/http/tests/security/contentSecurityPolicy/image-blocked-alt-content-expected.png