Use srcset's pixel density to determine intrinsic size
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 5 Feb 2014 00:09:15 +0000 (00:09 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 5 Feb 2014 00:09:15 +0000 (00:09 +0000)
https://bugs.webkit.org/show_bug.cgi?id=123832

Patch by Yoav Weiss <yoav@yoav.ws> on 2014-02-04
Reviewed by Dean Jackson.

The patch is a port of a similar Blink patch: https://codereview.chromium.org/25105004
According to the spec "When an img element has a current pixel density that is not 1.0,
the element's image data must be treated as if its resolution, in device pixels per CSS pixels,
was the current pixel density."

Source/WebCore:

I've added that support using the following changes:
- bestFitSourceForImageAttributes now returns the image candidate to HTMLImageElement.
- HTMLImageElement passes the devicePixelRatio data to RenderImage, which stores it.
- Bitmap images are scaled using the devicePixelRatio at RenderImageResource's intrinsicSize() and imageSize().
- SVG images are scaled using the devicePixelRatio at RenderReplaced::computeAspectRatioInformationForRenderBox.
- Canvas support added at CanvasRenderingContext2D::size.

Tests: fast/hidpi/image-srcset-intrinsic-size.html
       fast/hidpi/image-srcset-png-canvas.html
       fast/hidpi/image-srcset-png.html
       fast/hidpi/image-srcset-relative-svg-canvas-2x.html
       fast/hidpi/image-srcset-relative-svg.html
       fast/hidpi/image-srcset-space-left-nomodifier.html
       fast/hidpi/image-srcset-svg-canvas-2x.html
       fast/hidpi/image-srcset-svg-canvas.html
       fast/hidpi/image-srcset-svg.html
       fast/hidpi/image-srcset-svg2.html

* html/HTMLImageElement.cpp:
(WebCore::HTMLImageElement::HTMLImageElement):
(WebCore::HTMLImageElement::parseAttribute):
(WebCore::HTMLImageElement::createRenderer):
* html/HTMLImageElement.h:
* html/canvas/CanvasRenderingContext2D.cpp:
(WebCore::size):
(WebCore::CanvasRenderingContext2D::drawImage):
* html/parser/HTMLParserIdioms.cpp:
(WebCore::compareByScaleFactor):
(WebCore::parseImagesWithScaleFromSrcsetAttribute):
(WebCore::bestFitSourceForImageAttributes):
* html/parser/HTMLParserIdioms.h:
(WebCore::ImageWithScale::ImageWithScale):
(WebCore::ImageWithScale::imageURL):
(WebCore::ImageWithScale::scaleFactor):
* html/parser/HTMLPreloadScanner.cpp:
(WebCore::TokenPreloadScanner::StartTagScanner::processAttributes):
* rendering/RenderImage.cpp:
(WebCore::RenderImage::RenderImage):
* rendering/RenderImage.h:
(WebCore::RenderImage::setImageDevicePixelRatio):
(WebCore::RenderImage::imageDevicePixelRatio):
* rendering/RenderImageResource.cpp:
(WebCore::RenderImageResource::imageSize):
(WebCore::RenderImageResource::intrinsicSize):
(WebCore::RenderImageResource::getImageSize):
* rendering/RenderImageResource.h:
* rendering/RenderReplaced.cpp:
(WebCore::RenderReplaced::computeAspectRatioInformationForRenderBox):

LayoutTests:

Layout test changes include modifications of existing tests to accomodate the new image dimensions, as well as new tests for this
specific functionality.

* fast/hidpi/image-srcset-change-dynamically-from-js-2x-expected.txt:
* fast/hidpi/image-srcset-change-dynamically-from-js-2x.html:
* fast/hidpi/image-srcset-data-escaped-srcset-expected.txt:
* fast/hidpi/image-srcset-data-escaped-srcset.html:
* fast/hidpi/image-srcset-data-src.html:
* fast/hidpi/image-srcset-data-srcset.html:
* fast/hidpi/image-srcset-fraction.html:
* fast/hidpi/image-srcset-intrinsic-size-expected.txt: Added.
* fast/hidpi/image-srcset-intrinsic-size.html: Added.
* fast/hidpi/image-srcset-invalid-inputs-correct-src-expected.txt:
* fast/hidpi/image-srcset-invalid-inputs-correct-src.html:
* fast/hidpi/image-srcset-invalid-inputs.html:
* fast/hidpi/image-srcset-invalid-inputs-expected.txt: Added.
* fast/hidpi/image-srcset-only-src-attribute-expected.txt: Added.
* fast/hidpi/image-srcset-only-src-attribute.html:
* fast/hidpi/image-srcset-png-canvas-expected.html: Added.
* fast/hidpi/image-srcset-png-canvas.html: Added.
* fast/hidpi/image-srcset-png-expected.html: Added.
* fast/hidpi/image-srcset-png.html: Added.
* fast/hidpi/image-srcset-relative-svg-expected.html: Added.
* fast/hidpi/image-srcset-relative-svg.html: Added.
* fast/hidpi/image-srcset-remove-dynamically-from-js.html:
* fast/hidpi/image-srcset-simple-2x-expected.txt:
* fast/hidpi/image-srcset-simple-2x.html:
* fast/hidpi/image-srcset-space-left-nomodifier-expected.txt: Added.
* fast/hidpi/image-srcset-space-left-nomodifier.html: Copied from LayoutTests/fast/hidpi/image-srcset-data-srcset.html.
* fast/hidpi/image-srcset-svg-expected.html: Added.
* fast/hidpi/image-srcset-svg.html: Added.
* fast/hidpi/image-srcset-svg2-expected.html: Added.
* fast/hidpi/image-srcset-svg2.html: Added.
* fast/hidpi/resources/green-400-px-square.png: Added.
* fast/hidpi/resources/relativesrcset.svg: Added.
* fast/hidpi/resources/srcset-helper.js:
(runTest):
* fast/hidpi/resources/srcset.png: Added.
* fast/hidpi/resources/srcset.svg: Added.
* fast/hidpi/resources/srcset_100px.svg: Added.
* fast/hidpi/resources/svg_canvas_helper.js: Added.
(drawCanvas):
* fast/hidpi/resources/svg_tests.css: Added.
(.test):
(.test img, .test canvas):
(.test .stats):
(.expected, .actual):
* platform/mac/fast/hidpi/image-srcset-only-src-attribute-expected.png: Removed.
* platform/mac/fast/hidpi/image-srcset-only-src-attribute-expected.txt: Removed.

The following tests were added, but skipped, since they reveal an unrelated SVG on canvas rendering issue:
* fast/hidpi/image-srcset-svg-canvas-2x-expected.html: Added.
* fast/hidpi/image-srcset-svg-canvas-2x.html: Added.
* fast/hidpi/image-srcset-svg-canvas-expected.html: Added.
* fast/hidpi/image-srcset-svg-canvas.html: Added.
* fast/hidpi/image-srcset-relative-svg-canvas-2x-expected.html: Added.
* fast/hidpi/image-srcset-relative-svg-canvas-2x.html: Added.
* fast/hidpi/image-srcset-relative-svg-canvas-expected.html: Added.
* fast/hidpi/image-srcset-relative-svg-canvas.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@163415 268f45cc-cd09-0410-ab3c-d52691b4dbfc

70 files changed:
LayoutTests/ChangeLog
LayoutTests/TestExpectations
LayoutTests/fast/hidpi/image-srcset-change-dynamically-from-js-2x-expected.txt
LayoutTests/fast/hidpi/image-srcset-change-dynamically-from-js-2x.html
LayoutTests/fast/hidpi/image-srcset-data-escaped-srcset-expected.txt
LayoutTests/fast/hidpi/image-srcset-data-escaped-srcset.html
LayoutTests/fast/hidpi/image-srcset-data-src.html
LayoutTests/fast/hidpi/image-srcset-data-srcset.html
LayoutTests/fast/hidpi/image-srcset-fraction-1.5x.html
LayoutTests/fast/hidpi/image-srcset-fraction.html
LayoutTests/fast/hidpi/image-srcset-intrinsic-size-expected.txt [new file with mode: 0644]
LayoutTests/fast/hidpi/image-srcset-intrinsic-size.html [new file with mode: 0644]
LayoutTests/fast/hidpi/image-srcset-invalid-inputs-correct-src-expected.txt
LayoutTests/fast/hidpi/image-srcset-invalid-inputs-correct-src.html
LayoutTests/fast/hidpi/image-srcset-invalid-inputs-except-one.html
LayoutTests/fast/hidpi/image-srcset-invalid-inputs-expected.txt [new file with mode: 0644]
LayoutTests/fast/hidpi/image-srcset-invalid-inputs.html
LayoutTests/fast/hidpi/image-srcset-only-src-attribute-expected.txt [new file with mode: 0644]
LayoutTests/fast/hidpi/image-srcset-only-src-attribute.html
LayoutTests/fast/hidpi/image-srcset-png-canvas-expected.html [new file with mode: 0644]
LayoutTests/fast/hidpi/image-srcset-png-canvas.html [new file with mode: 0644]
LayoutTests/fast/hidpi/image-srcset-png-expected.html [new file with mode: 0644]
LayoutTests/fast/hidpi/image-srcset-png.html [new file with mode: 0644]
LayoutTests/fast/hidpi/image-srcset-relative-svg-canvas-2x-expected.html [new file with mode: 0644]
LayoutTests/fast/hidpi/image-srcset-relative-svg-canvas-2x.html [new file with mode: 0644]
LayoutTests/fast/hidpi/image-srcset-relative-svg-canvas-expected.html [new file with mode: 0644]
LayoutTests/fast/hidpi/image-srcset-relative-svg-canvas.html [new file with mode: 0644]
LayoutTests/fast/hidpi/image-srcset-relative-svg-expected.html [new file with mode: 0644]
LayoutTests/fast/hidpi/image-srcset-relative-svg.html [new file with mode: 0644]
LayoutTests/fast/hidpi/image-srcset-remove-dynamically-from-js.html
LayoutTests/fast/hidpi/image-srcset-simple-2x-expected.txt
LayoutTests/fast/hidpi/image-srcset-simple-2x.html
LayoutTests/fast/hidpi/image-srcset-space-left-nomodifier-expected.txt [new file with mode: 0644]
LayoutTests/fast/hidpi/image-srcset-space-left-nomodifier.html [new file with mode: 0644]
LayoutTests/fast/hidpi/image-srcset-src-selection-2x.html
LayoutTests/fast/hidpi/image-srcset-svg-canvas-2x-expected.html [new file with mode: 0644]
LayoutTests/fast/hidpi/image-srcset-svg-canvas-2x.html [new file with mode: 0644]
LayoutTests/fast/hidpi/image-srcset-svg-canvas-expected.html [new file with mode: 0644]
LayoutTests/fast/hidpi/image-srcset-svg-canvas.html [new file with mode: 0644]
LayoutTests/fast/hidpi/image-srcset-svg-expected.html [new file with mode: 0644]
LayoutTests/fast/hidpi/image-srcset-svg.html [new file with mode: 0644]
LayoutTests/fast/hidpi/image-srcset-svg2-expected.html [new file with mode: 0644]
LayoutTests/fast/hidpi/image-srcset-svg2.html [new file with mode: 0644]
LayoutTests/fast/hidpi/resources/green-400-px-square.png [new file with mode: 0644]
LayoutTests/fast/hidpi/resources/relativesrcset.svg [new file with mode: 0644]
LayoutTests/fast/hidpi/resources/srcset-helper.js
LayoutTests/fast/hidpi/resources/srcset.png [new file with mode: 0644]
LayoutTests/fast/hidpi/resources/srcset.svg [new file with mode: 0644]
LayoutTests/fast/hidpi/resources/srcset_100px.svg [new file with mode: 0644]
LayoutTests/fast/hidpi/resources/svg_canvas_helper.js [new file with mode: 0644]
LayoutTests/fast/hidpi/resources/svg_tests.css [new file with mode: 0644]
LayoutTests/platform/gtk-wk2/fast/hidpi/image-srcset-change-dynamically-from-js-2x-expected.txt [new file with mode: 0644]
LayoutTests/platform/mac/fast/hidpi/image-srcset-invalid-inputs-correct-src-expected.png [deleted file]
LayoutTests/platform/mac/fast/hidpi/image-srcset-invalid-inputs-except-one-expected.png [deleted file]
LayoutTests/platform/mac/fast/hidpi/image-srcset-invalid-inputs-expected.png [deleted file]
LayoutTests/platform/mac/fast/hidpi/image-srcset-invalid-inputs-expected.txt [deleted file]
LayoutTests/platform/mac/fast/hidpi/image-srcset-only-src-attribute-expected.png [deleted file]
LayoutTests/platform/mac/fast/hidpi/image-srcset-only-src-attribute-expected.txt [deleted file]
Source/WebCore/ChangeLog
Source/WebCore/html/HTMLImageElement.cpp
Source/WebCore/html/HTMLImageElement.h
Source/WebCore/html/canvas/CanvasRenderingContext2D.cpp
Source/WebCore/html/parser/HTMLParserIdioms.cpp
Source/WebCore/html/parser/HTMLParserIdioms.h
Source/WebCore/html/parser/HTMLPreloadScanner.cpp
Source/WebCore/rendering/RenderImage.cpp
Source/WebCore/rendering/RenderImage.h
Source/WebCore/rendering/RenderImageResource.cpp
Source/WebCore/rendering/RenderImageResource.h
Source/WebCore/rendering/RenderReplaced.cpp

index 4e63f0e..59d91f9 100644 (file)
@@ -1,3 +1,75 @@
+2014-02-04  Yoav Weiss  <yoav@yoav.ws>
+
+        Use srcset's pixel density to determine intrinsic size
+        https://bugs.webkit.org/show_bug.cgi?id=123832
+
+        Reviewed by Dean Jackson.
+
+        The patch is a port of a similar Blink patch: https://codereview.chromium.org/25105004
+        According to the spec "When an img element has a current pixel density that is not 1.0,
+        the element's image data must be treated as if its resolution, in device pixels per CSS pixels,
+        was the current pixel density."
+
+        Layout test changes include modifications of existing tests to accomodate the new image dimensions, as well as new tests for this
+        specific functionality.
+
+        * fast/hidpi/image-srcset-change-dynamically-from-js-2x-expected.txt:
+        * fast/hidpi/image-srcset-change-dynamically-from-js-2x.html:
+        * fast/hidpi/image-srcset-data-escaped-srcset-expected.txt:
+        * fast/hidpi/image-srcset-data-escaped-srcset.html:
+        * fast/hidpi/image-srcset-data-src.html:
+        * fast/hidpi/image-srcset-data-srcset.html:
+        * fast/hidpi/image-srcset-fraction.html:
+        * fast/hidpi/image-srcset-intrinsic-size-expected.txt: Added.
+        * fast/hidpi/image-srcset-intrinsic-size.html: Added.
+        * fast/hidpi/image-srcset-invalid-inputs-correct-src-expected.txt:
+        * fast/hidpi/image-srcset-invalid-inputs-correct-src.html:
+        * fast/hidpi/image-srcset-invalid-inputs.html:
+        * fast/hidpi/image-srcset-invalid-inputs-expected.txt: Added.
+        * fast/hidpi/image-srcset-only-src-attribute-expected.txt: Added.
+        * fast/hidpi/image-srcset-only-src-attribute.html:
+        * fast/hidpi/image-srcset-png-canvas-expected.html: Added.
+        * fast/hidpi/image-srcset-png-canvas.html: Added.
+        * fast/hidpi/image-srcset-png-expected.html: Added.
+        * fast/hidpi/image-srcset-png.html: Added.
+        * fast/hidpi/image-srcset-relative-svg-expected.html: Added.
+        * fast/hidpi/image-srcset-relative-svg.html: Added.
+        * fast/hidpi/image-srcset-remove-dynamically-from-js.html:
+        * fast/hidpi/image-srcset-simple-2x-expected.txt:
+        * fast/hidpi/image-srcset-simple-2x.html:
+        * fast/hidpi/image-srcset-space-left-nomodifier-expected.txt: Added.
+        * fast/hidpi/image-srcset-space-left-nomodifier.html: Copied from LayoutTests/fast/hidpi/image-srcset-data-srcset.html.
+        * fast/hidpi/image-srcset-svg-expected.html: Added.
+        * fast/hidpi/image-srcset-svg.html: Added.
+        * fast/hidpi/image-srcset-svg2-expected.html: Added.
+        * fast/hidpi/image-srcset-svg2.html: Added.
+        * fast/hidpi/resources/green-400-px-square.png: Added.
+        * fast/hidpi/resources/relativesrcset.svg: Added.
+        * fast/hidpi/resources/srcset-helper.js:
+        (runTest):
+        * fast/hidpi/resources/srcset.png: Added.
+        * fast/hidpi/resources/srcset.svg: Added.
+        * fast/hidpi/resources/srcset_100px.svg: Added.
+        * fast/hidpi/resources/svg_canvas_helper.js: Added.
+        (drawCanvas):
+        * fast/hidpi/resources/svg_tests.css: Added.
+        (.test):
+        (.test img, .test canvas):
+        (.test .stats):
+        (.expected, .actual):
+        * platform/mac/fast/hidpi/image-srcset-only-src-attribute-expected.png: Removed.
+        * platform/mac/fast/hidpi/image-srcset-only-src-attribute-expected.txt: Removed.
+
+        The following tests were added, but skipped, since they reveal an unrelated SVG on canvas rendering issue:
+        * fast/hidpi/image-srcset-svg-canvas-2x-expected.html: Added.
+        * fast/hidpi/image-srcset-svg-canvas-2x.html: Added.
+        * fast/hidpi/image-srcset-svg-canvas-expected.html: Added.
+        * fast/hidpi/image-srcset-svg-canvas.html: Added.
+        * fast/hidpi/image-srcset-relative-svg-canvas-2x-expected.html: Added.
+        * fast/hidpi/image-srcset-relative-svg-canvas-2x.html: Added.
+        * fast/hidpi/image-srcset-relative-svg-canvas-expected.html: Added.
+        * fast/hidpi/image-srcset-relative-svg-canvas.html: Added.
+
 2014-02-04  Geoffrey Garen  <ggaren@apple.com>
 
         Rolled out <http://trac.webkit.org/changeset/163280>:
index 4795598..cc705b8 100644 (file)
@@ -58,6 +58,11 @@ webkit.org/b/120148 [ Debug ] webaudio/javascriptaudionode-upmix2-8channel-input
 webkit.org/b/120148 [ Release ] webaudio/javascriptaudionode-downmix8-2channel-input.html [ Pass Failure ]
 webkit.org/b/120148 [ Debug ] webaudio/javascriptaudionode-downmix8-2channel-input.html [ Pass Crash ]
 
+webkit.org/b/124342 fast/hidpi/image-srcset-svg-canvas.html [ Failure ]
+webkit.org/b/124342 fast/hidpi/image-srcset-svg-canvas-2x.html [ Failure ]
+webkit.org/b/124349 fast/hidpi/image-srcset-relative-svg-canvas-2x.html [ Failure ]
+webkit.org/b/124349 fast/hidpi/image-srcset-relative-svg-canvas.html [ Failure ]
+
 webaudio/javascriptaudionode-downmix8-2channel-input.html
 
 # The test frequently times out, and is just unsuccessful at detecting incorrect behavior when it passes.
index a298f6c..2489ef4 100644 (file)
@@ -1,4 +1,8 @@
-PASS internals.isPreloaded("resources/blue-100-px-square.png") is false
+blue-100-px-square.png has MIME type image/png
+image-srcset-change-dynamically-from-js-2x.html has MIME type text/html
+srcset-helper.js has MIME type text/javascript
+js-test-pre.js has MIME type text/javascript
+green-400-px-square.png has MIME type image/png
 PASS document.getElementById("foo").clientWidth==200 is true
 This test passes if this img tag below is a green square when the scale factor is 2. It ensures that attributes can be changed dynamically from javascript, and that only the correct resource is loaded.
 
index a520c29..541c9e2 100644 (file)
@@ -5,12 +5,13 @@
 <script>
     if (window.testRunner) {
         testRunner.dumpAsText();
+        testRunner.dumpResourceResponseMIMETypes();
     }
 
     function updateSrc() {
         var img = document.getElementById("foo");
         // srcset must be set first, otherwise 'src' is loaded as well
-        img.srcset = "resources/green-200-px-square.png 2x";
+        img.srcset = "resources/blue-100-px-square.png 1x, resources/green-400-px-square.png 2x";
         img.src = "resources/blue-100-px-square.png"
     }
 
@@ -18,8 +19,6 @@
         updateSrc();
     }, false);
     addEventListener("load", function() {
-        if (internals)
-            shouldBeFalse('internals.isPreloaded("resources/blue-100-px-square.png")');
         shouldBeTrue('document.getElementById("foo").clientWidth==200');
     }, false);
 </script>
index 0ed911a..4e41c4c 100644 (file)
@@ -1,3 +1,3 @@
-PASS document.getElementById("foo").clientWidth==100 is true
+PASS document.getElementById("foo").clientWidth==50 is true
 This test passes if the image below is not empty. It ensures that the srcset attribute support data URI schemes with escaped characters.
 
index 0bea23b..a37c88a 100644 (file)
@@ -7,7 +7,7 @@
     }
 
     addEventListener("load", function() {
-        shouldBeTrue('document.getElementById("foo").clientWidth==100');
+        shouldBeTrue('document.getElementById("foo").clientWidth==50');
     }, false);
 </script>
 </head>
index 14bb955..d849e9b 100644 (file)
@@ -2,10 +2,6 @@
 <head>
 <script src="../../resources/js-test-pre.js"></script>
 <script>
-    if (window.testRunner) {
-        testRunner.dumpAsText();
-    }
-
     addEventListener("load", function() {
         shouldBeTrue('document.getElementById("foo").clientWidth==150');
     }, false);
index ca0a47c..d4f164f 100644 (file)
@@ -2,10 +2,6 @@
 <head>
 <script src="../../resources/js-test-pre.js"></script>
 <script>
-    if (window.testRunner) {
-        testRunner.dumpAsText();
-    }
-
     addEventListener("load", function() {
         shouldBeTrue('document.getElementById("foo").clientWidth==150');
     }, false);
index 580307f..7b3b01c 100644 (file)
@@ -18,6 +18,6 @@
 </head>
 <body>
 <div>This test passes if the srcset resource is loaded and displayed as the image</div>
-<img src="resources/blue-100-px-square.png" srcset="resources/green-200-px-square.png 2x" id="testimg">
+<img src="resources/blue-100-px-square.png" srcset="resources/green-400-px-square.png 2x" id="testimg">
 </body>
 </html>
index cad3d07..119d165 100644 (file)
@@ -6,10 +6,6 @@
 <script src="resources/srcset-helper.js"></script>
 <script src="../../resources/js-test-pre.js"></script>
 <script>
-    if (window.testRunner) {
-        testRunner.dumpAsText();
-    }
-
     addEventListener("load", function() {
         if (internals)
             shouldBeTrue('document.getElementById("testimg").clientWidth==200');
@@ -18,7 +14,7 @@
 </head>
 <body>
 <div>This test passes if the srcset resource is loaded and displayed as the image</div>
-<img src="resources/blue-100-px-square.png" srcset="resources/green-200-px-square.png 2x" id="testimg">
+<img src="resources/blue-100-px-square.png" srcset="resources/green-400-px-square.png 2x" id="testimg">
 </body>
 </html>
 
diff --git a/LayoutTests/fast/hidpi/image-srcset-intrinsic-size-expected.txt b/LayoutTests/fast/hidpi/image-srcset-intrinsic-size-expected.txt
new file mode 100644 (file)
index 0000000..95f23ac
--- /dev/null
@@ -0,0 +1,9 @@
+PASS document.getElementById("foo").clientWidth==200 is true
+PASS document.getElementById("foo2").clientWidth==400 is true
+PASS document.getElementById("foo3").clientWidth==100 is true
+PASS document.getElementById("foo4").clientWidth==200 is true
+This test passes if the images are all displayed with appropriate dimensions.
+
diff --git a/LayoutTests/fast/hidpi/image-srcset-intrinsic-size.html b/LayoutTests/fast/hidpi/image-srcset-intrinsic-size.html
new file mode 100644 (file)
index 0000000..ff9c38a
--- /dev/null
@@ -0,0 +1,33 @@
+<html>
+<head>
+<script>
+    window.targetScaleFactor = 2;
+    if (window.testRunner) {
+        testRunner.dumpAsText();
+    }
+</script>
+<script src="resources/srcset-helper.js"></script>
+<script src="../../resources/js-test-pre.js"></script>
+<script>
+    addEventListener("load", function() {
+        shouldBeTrue('document.getElementById("foo").clientWidth==200');
+        shouldBeTrue('document.getElementById("foo2").clientWidth==400');
+        shouldBeTrue('document.getElementById("foo3").clientWidth==100');
+        shouldBeTrue('document.getElementById("foo4").clientWidth==200');
+    }, false);
+</script>
+</head>
+
+<body id="body">
+    <div>
+        This test passes if the images are all displayed with appropriate dimensions.
+    </div>
+    <img id="foo" srcset="resources/green-400-px-square.png 2x">
+    <br>
+    <img id="foo2" src="resources/green-400-px-square.png">
+    <br>
+    <img id="foo3" srcset="resources/srcset.svg 2x">
+    <br>
+    <img id="foo4" src="resources/srcset.svg">
+</body>
+</html>
index 60d7dba..86b7edc 100644 (file)
@@ -1,3 +1,3 @@
-PASS document.getElementById("foo").clientWidth==200 is true
+PASS document.getElementById("foo").clientWidth==400 is true
 This test passes if this img tag below is a green square regardless of the scale factor. It ensures that invalid inputs from srcset are ignored, and src is selected (since it's the only candidate left)
 
index f94c841..a949b1a 100644 (file)
@@ -8,7 +8,7 @@
     }
 
     addEventListener("load", function() {
-        shouldBeTrue('document.getElementById("foo").clientWidth==200');
+        shouldBeTrue('document.getElementById("foo").clientWidth==400');
     }, false);
 </script>
 </head>
@@ -16,6 +16,6 @@
 <body id="body">
     <div>This test passes if this img tag below is a green square regardless of the scale factor. It ensures that invalid inputs
     from srcset are ignored, and src is selected (since it's the only candidate left)</div>
-    <img id="foo" src="resources/green-200-px-square.png" srcset="1x,,  ,      , 2x ,,">
+    <img id="foo" src="resources/green-400-px-square.png" srcset="1x,,  ,      , 2x ,,">
 </body>
 </html>
index 29825b9..b21ca93 100644 (file)
@@ -16,6 +16,6 @@
 <body id="body">
     <div>This test passes if the img tag below is a green square regardless of the scale factor. It ensures that invalid inputs are
     ignored and well-formed images are chosen regardless of their qualifiers, once they are the only candidate left</div>
-    <img id="foo" src="" srcset="1x,,  ,   x    ,2x  , foo.jpg, 3x, bar.jpg 4x 100h, foo.jpg 5, bar.jpg dx, resources/green-200-px-square.png   2x ,"></img>
+    <img id="foo" src="" srcset="1x,,  ,   x    ,2x  , foo.jpg, 3x, bar.jpg 4x 100h, foo.jpg 5, bar.jpg dx, resources/green-400-px-square.png   2x ,"></img>
 </body>
 </html>
diff --git a/LayoutTests/fast/hidpi/image-srcset-invalid-inputs-expected.txt b/LayoutTests/fast/hidpi/image-srcset-invalid-inputs-expected.txt
new file mode 100644 (file)
index 0000000..d58f117
--- /dev/null
@@ -0,0 +1,3 @@
+PASS did not load invalid inputs
+This test passes if this img tag below is empty and displays nothing. It ensures that the srcset attribute supports invalid inputs
+
index 24da296..7d77601 100644 (file)
@@ -1,10 +1,11 @@
 <html>
 <head>
-<script src="resources/srcset-helper.js"></script>
+<script src="../../resources/js-test-pre.js"></script>
 </head>
 
 <body id="body">
     <div>This test passes if this img tag below is empty and displays nothing. It ensures that the srcset attribute supports invalid inputs</div>
-    <img height="100" width="100" src="" srcset="1x,,  ,   x    ,2x  , foo.jpg, 3x, bar.jpg 4x 100h, foo.jpg 5, bar.jpg dx,foo.jpg,bar.jpg,"></img>
+    <img id="foo" src="" srcset="1x,,  ,   x    ,2x  " onerror="testPassed('did not load invalid inputs')" onload="testFailed('Loaded
+    invalid inputs')"></img>
 </body>
 </html>
diff --git a/LayoutTests/fast/hidpi/image-srcset-only-src-attribute-expected.txt b/LayoutTests/fast/hidpi/image-srcset-only-src-attribute-expected.txt
new file mode 100644 (file)
index 0000000..56cb024
--- /dev/null
@@ -0,0 +1,3 @@
+PASS document.getElementById("foo").clientWidth==200 is true
+This test passes if this img tag below is a green square when the scale factor is 2. It ensures that the selection algorithm does not change the behavior of the src attribute, even with a scale factor greater than 1
+
index 24fc88d..56b13cb 100644 (file)
@@ -1,10 +1,18 @@
-<html>
 <head>
+<html>
 <script src="resources/srcset-helper.js"></script>
+<script src="../../resources/js-test-pre.js"></script>
+<script>
+    if (window.testRunner) {
+        testRunner.dumpAsText();
+    }
+    addEventListener("load", function() {
+        shouldBeTrue('document.getElementById("foo").clientWidth==200');
+    }, false);
+</script>
 </head>
-
 <body id="body">
     <div>This test passes if this img tag below is a green square when the scale factor is 2. It ensures that the selection algorithm does not change the behavior of the src attribute, even with a scale factor greater than 1</div>
-    <img height="100" width="100" src="resources/green-200-px-square.png"></img>
+    <img id="foo" src="resources/green-200-px-square.png"></img>
 </body>
 </html>
diff --git a/LayoutTests/fast/hidpi/image-srcset-png-canvas-expected.html b/LayoutTests/fast/hidpi/image-srcset-png-canvas-expected.html
new file mode 100644 (file)
index 0000000..1084b8a
--- /dev/null
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <link rel="stylesheet" href="resources/svg_tests.css">
+    <script src="resources/svg_canvas_helper.js"></script>
+    <script>
+        if (window.testRunner)
+            testRunner.waitUntilDone();
+    </script>
+</head>
+<body>
+  <h2><a href="http://www.w3.org/html/wg/drafts/srcset/w3c-srcset">srcset</a> testcases for SVG</h2>
+  <div class="test">
+    <h3>Canvas PNG without explicit dimensions - 1x</h3>
+    <div class="expected">expected<br/>
+      <img id="png5" src="" srcset="resources/srcset.png" width="200" height="100">
+    </div>
+    <div class="actual">actual<br/>
+      <canvas id="canvas3"></canvas>
+    </div>
+    This test should show a PNG image drawn into a canvas. The canvas and image should look the same and both should be 200x100.<br/>
+    <br clear="all"/>
+  </div>
+  <div class="test">
+    <h3>Canvas PNG without explicit dimensions - 2x</h3>
+    <div class="expected">expected<br/>
+      <img id="png6" src="" srcset="resources/srcset.png" width="100" height="50">
+    </div>
+    <div class="actual">actual<br/>
+      <canvas id="canvas4"></canvas>
+    </div>
+    This test should show an SVG image drawn into a canvas. The canvas and image should look the same and both should be 100x50.<br/>
+    <br clear="all"/>
+  </div>
+  <script>
+    window.addEventListener('load', function(){
+        drawCanvas('png5', 'canvas3', 200, 100);
+        drawCanvas('png6', 'canvas4', 100, 50);
+        if (window.testRunner)
+            testRunner.notifyDone();
+    });
+  </script>
+</body>
+</html>
diff --git a/LayoutTests/fast/hidpi/image-srcset-png-canvas.html b/LayoutTests/fast/hidpi/image-srcset-png-canvas.html
new file mode 100644 (file)
index 0000000..021489a
--- /dev/null
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <link rel="stylesheet" href="resources/svg_tests.css">
+    <script src="resources/svg_canvas_helper.js"></script>
+    <script>
+        if (window.testRunner)
+            testRunner.waitUntilDone();
+    </script>
+</head>
+<body>
+  <h2><a href="http://www.w3.org/html/wg/drafts/srcset/w3c-srcset">srcset</a> testcases for SVG</h2>
+  <div class="test">
+    <h3>Canvas PNG without explicit dimensions - 1x</h3>
+    <div class="expected">expected<br/>
+      <img id="png5" src="" srcset="resources/srcset.png">
+    </div>
+    <div class="actual">actual<br/>
+      <canvas id="canvas3"></canvas>
+    </div>
+    This test should show a PNG image drawn into a canvas. The canvas and image should look the same and both should be 200x100.<br/>
+    <br clear="all"/>
+  </div>
+  <div class="test">
+    <h3>Canvas PNG without explicit dimensions - 2x</h3>
+    <div class="expected">expected<br/>
+      <img id="png6" src="" srcset="resources/srcset.png 2x">
+    </div>
+    <div class="actual">actual<br/>
+      <canvas id="canvas4"></canvas>
+    </div>
+    This test should show an SVG image drawn into a canvas. The canvas and image should look the same and both should be 100x50.<br/>
+    <br clear="all"/>
+  </div>
+  <script>
+    window.addEventListener('load', function(){
+        drawCanvas('png5', 'canvas3', 200, 100);
+        drawCanvas('png6', 'canvas4', 100, 50);
+        if (window.testRunner)
+            testRunner.notifyDone();
+    });
+  </script>
+</body>
+</html>
diff --git a/LayoutTests/fast/hidpi/image-srcset-png-expected.html b/LayoutTests/fast/hidpi/image-srcset-png-expected.html
new file mode 100644 (file)
index 0000000..0af46bc
--- /dev/null
@@ -0,0 +1,59 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <link rel="stylesheet" href="resources/svg_tests.css">
+</head>
+<body>
+  <h2><a href="http://www.w3.org/html/wg/drafts/srcset/w3c-srcset">srcset</a> testcases for SVG</h2>
+  <div class="test">
+    <h3>PNG without explicit dimensions - 1x</h3>
+    <div class="expected">expected<br/>
+      <img src="resources/srcset.png" width="200" height="100">
+    </div>
+    <div class="actual">actual<br/>
+      <img src="resources/srcset.png" width="200" height="100">
+    </div>
+    This test should show a PNG image of size 200x100, and intrinsic/natural size 200x100. The left half of the image should be red and there should be a black circle in the center.<br/>
+    <code class="stats" id="code5"></code>
+    <br clear="all"/>
+  </div>
+  <div class="test">
+    <h3>PNG with explicit dimensions - 1x</h3>
+    <div class="expected">expected<br/>
+      <img src="resources/srcset.png" width="100" height="50">
+    </div>
+    <div class="actual">actual<br/>
+      <img src="resources/srcset.png" width="100" height="50">
+    </div>
+    This test should show a PNG image of size 100x50, and intrinsic/natural size 100x50. The left half of the image should be red and there should be a black circle in the center.<br/>
+    <code class="stats" id="code6"></code>
+    <br clear="all"/>
+  </div>
+  <div class="test">
+    <h3>PNG without explicit dimensions - 2x</h3>
+    <div class="expected">expected<br/>
+      <img src="resources/srcset.png" width="100" height="50">
+    </div>
+    <div class="actual">actual<br/>
+      <img src="resources/srcset.png" width="100" height="50">
+    </div>
+    This test should show a PNG image of size 100x50, and intrinsic/natural size 100x50. The left half of the image should be red and there should be a black circle in the center.<br/>
+    <code class="stats" id="code7"></code>
+    <br clear="all"/>
+  </div>
+  <div class="test">
+    <h3>PNG with explicit dimensions - 4x</h3>
+    <div class="expected">expected<br/>
+      <img src="resources/srcset.png" width="100" height="50">
+    </div>
+    <div class="actual">actual<br/>
+      <img src="resources/srcset.png" width="100" height="50">
+    </div>
+    This test should show a PNG image of size 100x50, and intrinsic/natural size 50x25. The left half of the image should be red and there should be a black circle in the center.<br/>
+    <code class="stats" id="code8"></code>
+    <br clear="all"/>
+  </div>
+
+
+</body>
+</html>
diff --git a/LayoutTests/fast/hidpi/image-srcset-png.html b/LayoutTests/fast/hidpi/image-srcset-png.html
new file mode 100644 (file)
index 0000000..a19e5d5
--- /dev/null
@@ -0,0 +1,59 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <link rel="stylesheet" href="resources/svg_tests.css">
+</head>
+<body>
+  <h2><a href="http://www.w3.org/html/wg/drafts/srcset/w3c-srcset">srcset</a> testcases for SVG</h2>
+  <div class="test">
+    <h3>PNG without explicit dimensions - 1x</h3>
+    <div class="expected">expected<br/>
+      <img src="resources/srcset.png" width="200" height="100">
+    </div>
+    <div class="actual">actual<br/>
+      <img id="png1" src="resources/srcset.png">
+    </div>
+    This test should show a PNG image of size 200x100, and intrinsic/natural size 200x100. The left half of the image should be red and there should be a black circle in the center.<br/>
+    <code class="stats" id="code5"></code>
+    <br clear="all"/>
+  </div>
+  <div class="test">
+    <h3>PNG with explicit dimensions - 1x</h3>
+    <div class="expected">expected<br/>
+      <img src="resources/srcset.png" width="100" height="50">
+    </div>
+    <div class="actual">actual<br/>
+      <img id="png2" src="resources/srcset.png" width="100" height="50">
+    </div>
+    This test should show a PNG image of size 100x50, and intrinsic/natural size 100x50. The left half of the image should be red and there should be a black circle in the center.<br/>
+    <code class="stats" id="code6"></code>
+    <br clear="all"/>
+  </div>
+  <div class="test">
+    <h3>PNG without explicit dimensions - 2x</h3>
+    <div class="expected">expected<br/>
+      <img src="resources/srcset.png" width="100" height="50">
+    </div>
+    <div class="actual">actual<br/>
+      <img id="png3" src="" srcset="resources/srcset.png 2x">
+    </div>
+    This test should show a PNG image of size 100x50, and intrinsic/natural size 100x50. The left half of the image should be red and there should be a black circle in the center.<br/>
+    <code class="stats" id="code7"></code>
+    <br clear="all"/>
+  </div>
+  <div class="test">
+    <h3>PNG with explicit dimensions - 4x</h3>
+    <div class="expected">expected<br/>
+      <img src="resources/srcset.png" width="100" height="50">
+    </div>
+    <div class="actual">actual<br/>
+      <img id="png4" src="" srcset="resources/srcset.png 4x" width="100" height="50">
+    </div>
+    This test should show a PNG image of size 100x50, and intrinsic/natural size 50x25. The left half of the image should be red and there should be a black circle in the center.<br/>
+    <code class="stats" id="code8"></code>
+    <br clear="all"/>
+  </div>
+
+
+</body>
+</html>
diff --git a/LayoutTests/fast/hidpi/image-srcset-relative-svg-canvas-2x-expected.html b/LayoutTests/fast/hidpi/image-srcset-relative-svg-canvas-2x-expected.html
new file mode 100644 (file)
index 0000000..ea35be5
--- /dev/null
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <link rel="stylesheet" href="resources/svg_tests.css">
+    <script src="resources/svg_canvas_helper.js"></script>
+    <script>
+        if (window.testRunner)
+            testRunner.waitUntilDone();
+    </script>
+</head>
+<body>
+  <h2><a href="http://www.w3.org/html/wg/drafts/srcset/w3c-srcset">srcset</a> testcases for SVG</h2>
+  <div class="test">
+    <h3>Canvas relative SVG with explicit dimensions - 2x</h3>
+    <div class="expected">expected<br/>
+      <img id="svg10" src="resources/relativesrcset.svg" width="100" height="50">
+    </div>
+    <div class="actual">actual<br/>
+      <canvas id="canvas6"></canvas>
+    </div>
+    This test should show an SVG image drawn into a canvas. The canvas and image should look the same and both should be 100x50.<br/>
+    <br clear="all"/>
+  </div>
+  <script>
+    window.addEventListener('load', function(){
+        drawCanvas('svg10', 'canvas6', 100, 50);
+        if (window.testRunner)
+            testRunner.notifyDone();
+    });
+  </script>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/hidpi/image-srcset-relative-svg-canvas-2x.html b/LayoutTests/fast/hidpi/image-srcset-relative-svg-canvas-2x.html
new file mode 100644 (file)
index 0000000..5b80b2d
--- /dev/null
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <link rel="stylesheet" href="resources/svg_tests.css">
+    <script src="resources/svg_canvas_helper.js"></script>
+    <script>
+        if (window.testRunner)
+            testRunner.waitUntilDone();
+    </script>
+</head>
+<body>
+  <h2><a href="http://www.w3.org/html/wg/drafts/srcset/w3c-srcset">srcset</a> testcases for SVG</h2>
+  <div class="test">
+    <h3>Canvas relative SVG with explicit dimensions - 2x</h3>
+    <div class="expected">expected<br/>
+      <img id="svg10" src="" srcset="resources/relativesrcset.svg 2x" width="100" height="50">
+    </div>
+    <div class="actual">actual<br/>
+      <canvas id="canvas6"></canvas>
+    </div>
+    This test should show an SVG image drawn into a canvas. The canvas and image should look the same and both should be 100x50.<br/>
+    <code class="stats" id="code16"></code>
+    <br clear="all"/>
+  </div>
+  <script>
+    window.addEventListener('load', function(){
+        drawCanvas('svg10', 'canvas6', 100, 50);
+        if (window.testRunner)
+            testRunner.notifyDone();
+    });
+  </script>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/hidpi/image-srcset-relative-svg-canvas-expected.html b/LayoutTests/fast/hidpi/image-srcset-relative-svg-canvas-expected.html
new file mode 100644 (file)
index 0000000..a6f1dd6
--- /dev/null
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <link rel="stylesheet" href="resources/svg_tests.css">
+    <script src="resources/svg_canvas_helper.js"></script>
+    <script>
+        if (window.testRunner)
+            testRunner.waitUntilDone();
+    </script>
+</head>
+<body>
+  <h2><a href="http://www.w3.org/html/wg/drafts/srcset/w3c-srcset">srcset</a> testcases for SVG</h2>
+  <div class="test">
+    <h3>Canvas relative SVG with explicit dimensions - 1x</h3>
+    <div class="expected">expected<br/>
+      <img id="svg10" src="resources/relativesrcset.svg" width="100" height="50">
+    </div>
+    <div class="actual">actual<br/>
+      <canvas id="canvas6"></canvas>
+    </div>
+    This test should show an SVG image drawn into a canvas. The canvas and image should look the same and both should be 100x50.<br/>
+    <br clear="all"/>
+  </div>
+  <script>
+    window.addEventListener('load', function(){
+        drawCanvas('svg10', 'canvas6', 100, 50);
+        if (window.testRunner)
+            testRunner.notifyDone();
+    });
+  </script>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/hidpi/image-srcset-relative-svg-canvas.html b/LayoutTests/fast/hidpi/image-srcset-relative-svg-canvas.html
new file mode 100644 (file)
index 0000000..1b58582
--- /dev/null
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <link rel="stylesheet" href="resources/svg_tests.css">
+    <script src="resources/svg_canvas_helper.js"></script>
+    <script>
+        if (window.testRunner)
+            testRunner.waitUntilDone();
+    </script>
+</head>
+<body>
+  <h2><a href="http://www.w3.org/html/wg/drafts/srcset/w3c-srcset">srcset</a> testcases for SVG</h2>
+  <div class="test">
+    <h3>Canvas relative SVG with explicit dimensions - 1x</h3>
+    <div class="expected">expected<br/>
+      <img id="svg10" src="resources/relativesrcset.svg" width="100" height="50">
+    </div>
+    <div class="actual">actual<br/>
+      <canvas id="canvas6"></canvas>
+    </div>
+    This test should show an SVG image drawn into a canvas. The canvas and image should look the same and both should be 100x50.<br/>
+    <code class="stats" id="code16"></code>
+    <br clear="all"/>
+  </div>
+  <script>
+    window.addEventListener('load', function(){
+        drawCanvas('svg10', 'canvas6', 100, 50);
+        if (window.testRunner)
+            testRunner.notifyDone();
+    });
+  </script>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/hidpi/image-srcset-relative-svg-expected.html b/LayoutTests/fast/hidpi/image-srcset-relative-svg-expected.html
new file mode 100644 (file)
index 0000000..06b40cd
--- /dev/null
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <link rel="stylesheet" href="resources/svg_tests.css">
+</head>
+<body>
+  <h2><a href="http://www.w3.org/html/wg/drafts/srcset/w3c-srcset">srcset</a> testcases for SVG</h2>
+  <div class="test">
+    <h3>Relative SVG with explicit dimensions - 1x</h3>
+    <div class="expected">expected<br/>
+      <img src="resources/relativesrcset.svg" width="100" height="50">
+    </div>
+    <div class="actual">actual<br/>
+      <img id="svg5" src="resources/relativesrcset.svg" width="100" height="50">
+    </div>
+    This test should show an SVG image of size 100x50, and intrinsic/natural size 100x50.The left half of the image should be pink and there should be a purple circle in the center.<br/>
+    <br clear="all"/>
+  </div>
+  <div class="test">
+    <h3>Relative SVG with explicit dimensions - 4x</h3>
+    <div class="expected">expected<br/>
+      <img src="resources/relativesrcset.svg" width="100" height="50">
+    </div>
+    <div class="actual">actual<br/>
+      <img src="resources/relativesrcset.svg" width="100" height="50">
+    </div>
+    This test should show an SVG image of size 100x50, and intrinsic/natural size 50x25. The left half of the image should be pink and there should be a purple circle in the center.<br/>
+    <br clear="all"/>
+  </div>
+
+</body>
+</html>
diff --git a/LayoutTests/fast/hidpi/image-srcset-relative-svg.html b/LayoutTests/fast/hidpi/image-srcset-relative-svg.html
new file mode 100644 (file)
index 0000000..1a893a0
--- /dev/null
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <link rel="stylesheet" href="resources/svg_tests.css">
+</head>
+<body>
+  <h2><a href="http://www.w3.org/html/wg/drafts/srcset/w3c-srcset">srcset</a> testcases for SVG</h2>
+  <div class="test">
+    <h3>Relative SVG with explicit dimensions - 1x</h3>
+    <div class="expected">expected<br/>
+      <img src="resources/relativesrcset.svg" width="100" height="50">
+    </div>
+    <div class="actual">actual<br/>
+      <img id="svg5" src="resources/relativesrcset.svg" width="100" height="50">
+    </div>
+    This test should show an SVG image of size 100x50, and intrinsic/natural size 100x50.The left half of the image should be pink and there should be a purple circle in the center.<br/>
+    <br clear="all"/>
+  </div>
+  <div class="test">
+    <h3>Relative SVG with explicit dimensions - 4x</h3>
+    <div class="expected">expected<br/>
+      <img src="resources/relativesrcset.svg" width="100" height="50">
+    </div>
+    <div class="actual">actual<br/>
+      <img id="svg6" src="" srcset="resources/relativesrcset.svg 4x" width="100" height="50">
+    </div>
+    This test should show an SVG image of size 100x50, and intrinsic/natural size 50x25. The left half of the image should be pink and there should be a purple circle in the center.<br/>
+    <br clear="all"/>
+  </div>
+
+</body>
+</html>
index ac965e4..1f79a38 100644 (file)
@@ -26,6 +26,6 @@
 </head>
 <body id="body">
     <div>This test passes if this img tag below is a green square. It ensures that attributes can be removed dynamically from javascript</div>
-    <img id="foo" src="resources/blue-100-px-square.png" srcset="resources/green-200-px-square.png 2x">
+    <img id="foo" src="resources/blue-100-px-square.png" srcset="resources/green-400-px-square.png 2x">
 </body>
 </html>
index b55c696..e2d3752 100644 (file)
@@ -1,3 +1,3 @@
-PASS document.getElementById("foo").clientWidth==800 is true
+PASS document.getElementById("foo").clientWidth==200 is true
 This test passes if the image below says 1x with a reddish background when the deviceScaleFactor is 1, and if says 2x with a greenish background when the deviceScaleFactor is 2.
 
index b026029..773ce7e 100644 (file)
@@ -6,18 +6,14 @@
 <script src="resources/srcset-helper.js"></script>
 <script src="../../resources/js-test-pre.js"></script>
 <script>
-    if (window.testRunner) {
-        testRunner.dumpAsText();
-    }
-
     addEventListener("load", function() {
-        shouldBeTrue('document.getElementById("foo").clientWidth==800');
+        shouldBeTrue('document.getElementById("foo").clientWidth==200');
     }, false);
 </script>
 </head>
 
 <body id="body">
     <div>This test passes if the image below says 1x with a reddish background when the deviceScaleFactor is 1, and if says 2x with a greenish background when the deviceScaleFactor is 2.</div>
-    <img id="foo" src="" srcset="resources/image-set-1x.png 1x, resources/deleteButton.png 3x, resources/image-set-2x.png 2x">
+    <img id="foo" src="" srcset="resources/blue-100-px-square.png 1x, resources/deleteButton.png 3x, resources/green-400-px-square.png 2x">
 </body>
 </html>
diff --git a/LayoutTests/fast/hidpi/image-srcset-space-left-nomodifier-expected.txt b/LayoutTests/fast/hidpi/image-srcset-space-left-nomodifier-expected.txt
new file mode 100644 (file)
index 0000000..bcb1813
--- /dev/null
@@ -0,0 +1,3 @@
+PASS document.getElementById("foo").clientWidth==150 is true
+This test passes if the image below is not empty. It ensures that a candidate without scale modifier get a default one, even with space left at the end.
+
diff --git a/LayoutTests/fast/hidpi/image-srcset-space-left-nomodifier.html b/LayoutTests/fast/hidpi/image-srcset-space-left-nomodifier.html
new file mode 100644 (file)
index 0000000..c351c16
--- /dev/null
@@ -0,0 +1,20 @@
+<html>
+<head>
+<script src="resources/srcset-helper.js"></script>
+<script src="../../resources/js-test-pre.js"></script>
+<script>
+    if (window.testRunner) {
+        testRunner.dumpAsText();
+    }
+
+    addEventListener("load", function() {
+        shouldBeTrue('document.getElementById("foo").clientWidth==150');
+    }, false);
+</script>
+</head>
+
+<body id="body">
+    <div>This test passes if the image below is not empty. It ensures that a candidate without scale modifier get a default one, even with space left at the end.</div>
+    <img id="foo" src="" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAA8CAIAAAAL5NQ9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH2woaBQc4oLEFpAAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAACMSURBVHja7dNBEYAgFEVRPhHMYgAzUIsmVnFvB/fsoQb+ObfBmzMvxneW1D1vzz2wFiEUQiFEKIRCKIQIhVAIhRChEAqhECIUQiEUQoRCKIRCiFAIhVAIEep3xTWTLzzu5oVCKIRCiFAIhVAIEQqhEAohQiEUQiFEKIRCKIQIhVAIhRChEAqhECLUZi3VEwcBMGr1NgAAAABJRU5ErkJggg==  ">
+</body>
+</html>
index 5076911..df3643a 100644 (file)
@@ -18,6 +18,6 @@
 
 <body id="body">
     <div>This test passes if the div below is a green 200px square when the deviceScaleFactor is 2. It simply ensures that the src attribute is taken into account by the selection algorithm when this one is processing the images candidates</div>
-    <img id="foo" src="resources/blue-100-px-square.png" srcset="resources/green-200-px-square.png 2x">
+    <img id="foo" src="resources/blue-100-px-square.png" srcset="resources/green-400-px-square.png 2x">
 </body>
 </html>
diff --git a/LayoutTests/fast/hidpi/image-srcset-svg-canvas-2x-expected.html b/LayoutTests/fast/hidpi/image-srcset-svg-canvas-2x-expected.html
new file mode 100644 (file)
index 0000000..8c3d4b4
--- /dev/null
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <link rel="stylesheet" href="resources/svg_tests.css">
+    <script src="resources/svg_canvas_helper.js"></script>
+    <script>
+        if (window.testRunner)
+            testRunner.waitUntilDone();
+    </script>
+</head>
+<body>
+  <h2><a href="http://www.w3.org/html/wg/drafts/srcset/w3c-srcset">srcset</a> testcases for SVG</h2>
+  <div class="test">
+    <h3>Canvas SVG without explicit dimensions - 2x</h3>
+    <div class="expected">expected<br/>
+      <img id="svg8" src="resources/srcset_100px.svg">
+    </div>
+    <div class="actual">actual<br/>
+      <canvas id="canvas2"></canvas>
+    </div>
+    This test should show an SVG image drawn into a canvas. The canvas and image should look the same and both should be 100x50.<br/>
+    <br clear="all"/>
+  </div>
+  <script>
+    window.addEventListener('load', function(){
+        drawCanvas('svg8', 'canvas2', 100, 50);
+        if (window.testRunner)
+            testRunner.notifyDone();
+    });
+  </script>
+</body>
+</html>
diff --git a/LayoutTests/fast/hidpi/image-srcset-svg-canvas-2x.html b/LayoutTests/fast/hidpi/image-srcset-svg-canvas-2x.html
new file mode 100644 (file)
index 0000000..c91b551
--- /dev/null
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <link rel="stylesheet" href="resources/svg_tests.css">
+    <!--
+    <script>
+        window.targetScaleFactor = 1;
+    </script>
+    <script src="resources/srcset_helper.js"></script>
+    -->
+    <script src="resources/svg_canvas_helper.js"></script>
+    <script>
+        if (window.testRunner)
+            testRunner.waitUntilDone();
+    </script>
+</head>
+<body>
+  <h2><a href="http://www.w3.org/html/wg/drafts/srcset/w3c-srcset">srcset</a> testcases for SVG</h2>
+  <div class="test">
+    <h3>Canvas SVG without explicit dimensions - 2x</h3>
+    <div class="expected">expected<br/>
+      <img id="svg8" srcset="resources/srcset.svg 2x">
+    </div>
+    <div class="actual">actual<br/>
+      <canvas id="canvas2"></canvas>
+    </div>
+    This test should show an SVG image drawn into a canvas. The canvas and image should look the same and both should be 100x50.<br/>
+    <br clear="all"/>
+  </div>
+  <script>
+    window.addEventListener('load', function(){
+        drawCanvas('svg8', 'canvas2', 100, 50);
+        if (window.testRunner)
+            testRunner.notifyDone();
+    });
+  </script>
+</body>
+</html>
diff --git a/LayoutTests/fast/hidpi/image-srcset-svg-canvas-expected.html b/LayoutTests/fast/hidpi/image-srcset-svg-canvas-expected.html
new file mode 100644 (file)
index 0000000..04d769b
--- /dev/null
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <link rel="stylesheet" href="resources/svg_tests.css">
+    <script src="resources/svg_canvas_helper.js"></script>
+    <script>
+        if (window.testRunner)
+            testRunner.waitUntilDone();
+    </script>
+</head>
+<body>
+  <h2><a href="http://www.w3.org/html/wg/drafts/srcset/w3c-srcset">srcset</a> testcases for SVG</h2>
+  <div class="test">
+    <h3>Canvas SVG without explicit dimensions - 1x</h3>
+    <div class="expected">expected<br/>
+      <img id="svg7" src="resources/srcset.svg">
+    </div>
+    <div class="actual">actual<br/>
+      <canvas id="canvas1"></canvas>
+    </div>
+    This test should show an SVG image drawn into a canvas. The canvas and image should look the same and both should be 200x100.<br/>
+    <br clear="all"/>
+  </div>
+  <script>
+    window.addEventListener('load', function(){
+        drawCanvas('svg7', 'canvas1', 200, 100);
+        if (window.testRunner)
+            testRunner.notifyDone();
+    });
+  </script>
+</body>
+</html>
diff --git a/LayoutTests/fast/hidpi/image-srcset-svg-canvas.html b/LayoutTests/fast/hidpi/image-srcset-svg-canvas.html
new file mode 100644 (file)
index 0000000..2bcfc76
--- /dev/null
@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <link rel="stylesheet" href="resources/svg_tests.css">
+    <script src="resources/svg_canvas_helper.js"></script>
+    <script>
+        if (window.testRunner)
+            testRunner.waitUntilDone();
+    </script>
+</head>
+<body>
+  <h2><a href="http://www.w3.org/html/wg/drafts/srcset/w3c-srcset">srcset</a> testcases for SVG</h2>
+  <div class="test">
+    <h3>Canvas SVG without explicit dimensions - 1x</h3>
+    <div class="expected">expected<br/>
+      <img id="svg7" srcset="resources/srcset.svg">
+    </div>
+    <div class="actual">actual<br/>
+      <canvas id="canvas1"></canvas>
+    </div>
+    This test should show an SVG image drawn into a canvas. The canvas and image should look the same and both should be 200x100.<br/>
+    <br clear="all"/>
+  </div>
+  <script>
+    window.addEventListener('load', function(){
+        drawCanvas('svg7', 'canvas1', 200, 100);
+        if (window.testRunner)
+            testRunner.notifyDone();
+    });
+  </script>
+</body>
+</html>
diff --git a/LayoutTests/fast/hidpi/image-srcset-svg-expected.html b/LayoutTests/fast/hidpi/image-srcset-svg-expected.html
new file mode 100644 (file)
index 0000000..bb932fe
--- /dev/null
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <link rel="stylesheet" href="resources/svg_tests.css">
+</head>
+<body>
+  <h2><a href="http://www.w3.org/html/wg/drafts/srcset/w3c-srcset">srcset</a> testcases for SVG</h2>
+  <div class="test">
+    <h3>SVG without explicit dimensions - 1x</h3>
+    <div class="expected">expected<br/>
+      <img src="resources/srcset.svg" width="200" height="100">
+    </div>
+    <div class="actual">actual<br/>
+      <img src="resources/srcset.svg" width="200" height="100">
+    </div>
+    This test should show an SVG image of size 200x100, and intrinsic/natural size 200x100. The left half of the image should be green and there should be a blue circle in the center.<br/>
+    <code class="stats" id="code1"></code>
+    <br clear="all"/>
+  </div>
+  <div class="test">
+    <h3>SVG with explicit dimensions - 1x</h3>
+    <div class="expected">expected<br/>
+      <img src="resources/srcset.svg" width="100" height="50">
+    </div>
+    <div class="actual">actual<br/>
+      <img src="resources/srcset.svg" width="100" height="50">
+    </div>
+    This test should show an SVG image of size 100x50, and intrinsic/natural size 100x50. The left half of the image should be green and there should be a blue circle in the center.<br/>
+    <code class="stats" id="code2"></code>
+    <br clear="all"/>
+  </div>
+</body>
+</html>
diff --git a/LayoutTests/fast/hidpi/image-srcset-svg.html b/LayoutTests/fast/hidpi/image-srcset-svg.html
new file mode 100644 (file)
index 0000000..826dd5b
--- /dev/null
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <link rel="stylesheet" href="resources/svg_tests.css">
+</head>
+<body>
+  <h2><a href="http://www.w3.org/html/wg/drafts/srcset/w3c-srcset">srcset</a> testcases for SVG</h2>
+  <div class="test">
+    <h3>SVG without explicit dimensions - 1x</h3>
+    <div class="expected">expected<br/>
+      <img src="resources/srcset.svg" width="200" height="100">
+    </div>
+    <div class="actual">actual<br/>
+      <img id='svg1' src="resources/srcset.svg">
+    </div>
+    This test should show an SVG image of size 200x100, and intrinsic/natural size 200x100. The left half of the image should be green and there should be a blue circle in the center.<br/>
+    <code class="stats" id="code1"></code>
+    <br clear="all"/>
+  </div>
+  <div class="test">
+    <h3>SVG with explicit dimensions - 1x</h3>
+    <div class="expected">expected<br/>
+      <img src="resources/srcset.svg" width="100" height="50">
+    </div>
+    <div class="actual">actual<br/>
+      <img id="svg2" src="resources/srcset.svg" width="100" height="50">
+    </div>
+    This test should show an SVG image of size 100x50, and intrinsic/natural size 100x50. The left half of the image should be green and there should be a blue circle in the center.<br/>
+    <code class="stats" id="code2"></code>
+    <br clear="all"/>
+  </div>
+</body>
+</html>
diff --git a/LayoutTests/fast/hidpi/image-srcset-svg2-expected.html b/LayoutTests/fast/hidpi/image-srcset-svg2-expected.html
new file mode 100644 (file)
index 0000000..33cb181
--- /dev/null
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <link rel="stylesheet" href="resources/svg_tests.css">
+</head>
+<body>
+  <h2><a href="http://www.w3.org/html/wg/drafts/srcset/w3c-srcset">srcset</a> testcases for SVG</h2>
+  <div class="test">
+    <h3>SVG without explicit dimensions - 2x</h3>
+    <div class="expected">expected<br/>
+      <img src="resources/srcset.svg" width="100" height="50">
+    </div>
+    <div class="actual">actual<br/>
+      <img src="resources/srcset.svg" width="100" height="50">
+    </div>
+    This test should show an SVG image of size 100x50, and intrinsic/natural size 100x50. The left half of the image should be green and there should be a blue circle in the center.<br/>
+    <br clear="all"/>
+  </div>
+  <div class="test">
+    <h3>SVG with explicit dimensions - 4x</h3>
+    <div class="expected">expected<br/>
+      <img src="resources/srcset.svg" width="100" height="50">
+    </div>
+    <div class="actual">actual<br/>
+      <img src="resources/srcset.svg" width="100" height="50">
+    </div>
+    This test should show an SVG image of size 100x50, and intrinsic/natural size 50x25. The left half of the image should be green and there should be a blue circle in the center.<br/>
+    <br clear="all"/>
+  </div>
+</body>
+</html>
diff --git a/LayoutTests/fast/hidpi/image-srcset-svg2.html b/LayoutTests/fast/hidpi/image-srcset-svg2.html
new file mode 100644 (file)
index 0000000..6f836a8
--- /dev/null
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <link rel="stylesheet" href="resources/svg_tests.css">
+</head>
+<body>
+  <h2><a href="http://www.w3.org/html/wg/drafts/srcset/w3c-srcset">srcset</a> testcases for SVG</h2>
+  <div class="test">
+    <h3>SVG without explicit dimensions - 2x</h3>
+    <div class="expected">expected<br/>
+      <img src="resources/srcset.svg" width="100" height="50">
+    </div>
+    <div class="actual">actual<br/>
+      <img id="svg3" src="" srcset="resources/srcset.svg 2x">
+    </div>
+    This test should show an SVG image of size 100x50, and intrinsic/natural size 100x50. The left half of the image should be green and there should be a blue circle in the center.<br/>
+    <br clear="all"/>
+  </div>
+  <div class="test">
+    <h3>SVG with explicit dimensions - 4x</h3>
+    <div class="expected">expected<br/>
+      <img src="resources/srcset.svg" width="100" height="50">
+    </div>
+    <div class="actual">actual<br/>
+      <img id="svg4" src="" srcset="resources/srcset.svg 4x" width="100" height="50">
+    </div>
+    This test should show an SVG image of size 100x50, and intrinsic/natural size 50x25. The left half of the image should be green and there should be a blue circle in the center.<br/>
+    <br clear="all"/>
+  </div>
+</body>
+</html>
diff --git a/LayoutTests/fast/hidpi/resources/green-400-px-square.png b/LayoutTests/fast/hidpi/resources/green-400-px-square.png
new file mode 100644 (file)
index 0000000..3eb611d
Binary files /dev/null and b/LayoutTests/fast/hidpi/resources/green-400-px-square.png differ
diff --git a/LayoutTests/fast/hidpi/resources/relativesrcset.svg b/LayoutTests/fast/hidpi/resources/relativesrcset.svg
new file mode 100644 (file)
index 0000000..3177f8f
--- /dev/null
@@ -0,0 +1,4 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'>
+  <rect fill='pink' width='50%' height='100%'/>
+  <circle fill='purple' cx='50' cy='25' r='15'/>
+</svg>
\ No newline at end of file
index 703b266..6c8182e 100644 (file)
@@ -13,7 +13,8 @@ function runTest() {
     if (sessionStorage.pageReloaded && sessionStorage.scaleFactorIsSet) {
         delete sessionStorage.pageReloaded;
         delete sessionStorage.scaleFactorIsSet;
-        testRunner.notifyDone();
+        if (!window.manualNotifyDone)
+            testRunner.notifyDone();
     } else {
         // Right now there is a bug that srcset does not properly deal with dynamic changes to the scale factor,
         // so to work around that, we must reload the page to get the new image.
diff --git a/LayoutTests/fast/hidpi/resources/srcset.png b/LayoutTests/fast/hidpi/resources/srcset.png
new file mode 100644 (file)
index 0000000..016b796
Binary files /dev/null and b/LayoutTests/fast/hidpi/resources/srcset.png differ
diff --git a/LayoutTests/fast/hidpi/resources/srcset.svg b/LayoutTests/fast/hidpi/resources/srcset.svg
new file mode 100644 (file)
index 0000000..955599b
--- /dev/null
@@ -0,0 +1,4 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100'>
+  <rect fill='green' width='50%' height='100%'/>
+  <circle fill='blue' cx='100' cy='50' r='30'/>
+</svg>
\ No newline at end of file
diff --git a/LayoutTests/fast/hidpi/resources/srcset_100px.svg b/LayoutTests/fast/hidpi/resources/srcset_100px.svg
new file mode 100644 (file)
index 0000000..9e702fd
--- /dev/null
@@ -0,0 +1,4 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='100' height='50'>
+  <rect fill='green' width='50%' height='100%'/>
+  <circle fill='blue' cx='50' cy='25' r='15'/>
+</svg>
diff --git a/LayoutTests/fast/hidpi/resources/svg_canvas_helper.js b/LayoutTests/fast/hidpi/resources/svg_canvas_helper.js
new file mode 100644 (file)
index 0000000..552591c
--- /dev/null
@@ -0,0 +1,8 @@
+function drawCanvas(imageId, canvasId, canvasWidth, canvasHeight) {
+  var image = document.getElementById(imageId);
+  var canvas = document.getElementById(canvasId);
+  canvas.width = canvasWidth;
+  canvas.height = canvasHeight;
+  var context = canvas.getContext('2d');
+  context.drawImage(image, 0, 0, canvasWidth, canvasHeight);
+}
diff --git a/LayoutTests/fast/hidpi/resources/svg_tests.css b/LayoutTests/fast/hidpi/resources/svg_tests.css
new file mode 100644 (file)
index 0000000..3ec5911
--- /dev/null
@@ -0,0 +1,20 @@
+  .test {
+    border: 1px solid gray;
+    padding: 1em;
+    margin-bottom: 1em;
+  }
+  .test img, .test canvas {
+    border: 1px solid black;
+  }
+  .test .stats {
+    display: inline-block;
+    margin-top: 1em;
+    font-style: italic;
+  }
+  .expected, .actual {
+    float: right;
+    background-color: #eee;
+    border: 1px solid #ccc;
+    padding: 0.4em;
+    margin-left: 1em;
+  }
diff --git a/LayoutTests/platform/gtk-wk2/fast/hidpi/image-srcset-change-dynamically-from-js-2x-expected.txt b/LayoutTests/platform/gtk-wk2/fast/hidpi/image-srcset-change-dynamically-from-js-2x-expected.txt
new file mode 100644 (file)
index 0000000..1f69265
--- /dev/null
@@ -0,0 +1,8 @@
+blue-100-px-square.png has MIME type image/png
+image-srcset-change-dynamically-from-js-2x.html has MIME type text/html
+srcset-helper.js has MIME type application/javascript
+js-test-pre.js has MIME type application/javascript
+green-400-px-square.png has MIME type image/png
+PASS document.getElementById("foo").clientWidth==200 is true
+This test passes if this img tag below is a green square when the scale factor is 2. It ensures that attributes can be changed dynamically from javascript, and that only the correct resource is loaded.
+
diff --git a/LayoutTests/platform/mac/fast/hidpi/image-srcset-invalid-inputs-correct-src-expected.png b/LayoutTests/platform/mac/fast/hidpi/image-srcset-invalid-inputs-correct-src-expected.png
deleted file mode 100644 (file)
index f8c77a2..0000000
Binary files a/LayoutTests/platform/mac/fast/hidpi/image-srcset-invalid-inputs-correct-src-expected.png and /dev/null differ
diff --git a/LayoutTests/platform/mac/fast/hidpi/image-srcset-invalid-inputs-except-one-expected.png b/LayoutTests/platform/mac/fast/hidpi/image-srcset-invalid-inputs-except-one-expected.png
deleted file mode 100644 (file)
index a48431e..0000000
Binary files a/LayoutTests/platform/mac/fast/hidpi/image-srcset-invalid-inputs-except-one-expected.png and /dev/null differ
diff --git a/LayoutTests/platform/mac/fast/hidpi/image-srcset-invalid-inputs-expected.png b/LayoutTests/platform/mac/fast/hidpi/image-srcset-invalid-inputs-expected.png
deleted file mode 100644 (file)
index c11447a..0000000
Binary files a/LayoutTests/platform/mac/fast/hidpi/image-srcset-invalid-inputs-expected.png and /dev/null differ
diff --git a/LayoutTests/platform/mac/fast/hidpi/image-srcset-invalid-inputs-expected.txt b/LayoutTests/platform/mac/fast/hidpi/image-srcset-invalid-inputs-expected.txt
deleted file mode 100644 (file)
index fc09daa..0000000
+++ /dev/null
@@ -1,11 +0,0 @@
-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 {DIV} at (0,0) size 784x18
-        RenderText {#text} at (0,0) size 779x18
-          text run at (0,0) width 779: "This test passes if this img tag below is empty and displays nothing. It ensures that the srcset attribute supports invalid inputs"
-      RenderBlock (anonymous) at (0,18) size 784x100
-        RenderImage {IMG} at (0,0) size 100x100
-        RenderText {#text} at (0,0) size 0x0
diff --git a/LayoutTests/platform/mac/fast/hidpi/image-srcset-only-src-attribute-expected.png b/LayoutTests/platform/mac/fast/hidpi/image-srcset-only-src-attribute-expected.png
deleted file mode 100644 (file)
index 5831fdb..0000000
Binary files a/LayoutTests/platform/mac/fast/hidpi/image-srcset-only-src-attribute-expected.png and /dev/null differ
diff --git a/LayoutTests/platform/mac/fast/hidpi/image-srcset-only-src-attribute-expected.txt b/LayoutTests/platform/mac/fast/hidpi/image-srcset-only-src-attribute-expected.txt
deleted file mode 100644 (file)
index 3afd431..0000000
+++ /dev/null
@@ -1,12 +0,0 @@
-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 {DIV} at (0,0) size 784x36
-        RenderText {#text} at (0,0) size 776x36
-          text run at (0,0) width 776: "This test passes if this img tag below is a green square when the scale factor is 2. It ensures that the selection algorithm does"
-          text run at (0,18) width 514: "not change the behavior of the src attribute, even with a scale factor greater than 1"
-      RenderBlock (anonymous) at (0,36) size 784x100
-        RenderImage {IMG} at (0,0) size 100x100
-        RenderText {#text} at (0,0) size 0x0
index abf2456..aea654e 100644 (file)
@@ -1,3 +1,64 @@
+2014-02-04  Yoav Weiss  <yoav@yoav.ws>
+
+        Use srcset's pixel density to determine intrinsic size
+        https://bugs.webkit.org/show_bug.cgi?id=123832
+
+        Reviewed by Dean Jackson.
+
+        The patch is a port of a similar Blink patch: https://codereview.chromium.org/25105004
+        According to the spec "When an img element has a current pixel density that is not 1.0,
+        the element's image data must be treated as if its resolution, in device pixels per CSS pixels,
+        was the current pixel density."
+
+        I've added that support using the following changes:
+        - bestFitSourceForImageAttributes now returns the image candidate to HTMLImageElement.
+        - HTMLImageElement passes the devicePixelRatio data to RenderImage, which stores it.
+        - Bitmap images are scaled using the devicePixelRatio at RenderImageResource's intrinsicSize() and imageSize().
+        - SVG images are scaled using the devicePixelRatio at RenderReplaced::computeAspectRatioInformationForRenderBox.
+        - Canvas support added at CanvasRenderingContext2D::size.
+
+        Tests: fast/hidpi/image-srcset-intrinsic-size.html
+               fast/hidpi/image-srcset-png-canvas.html
+               fast/hidpi/image-srcset-png.html
+               fast/hidpi/image-srcset-relative-svg-canvas-2x.html
+               fast/hidpi/image-srcset-relative-svg.html
+               fast/hidpi/image-srcset-space-left-nomodifier.html
+               fast/hidpi/image-srcset-svg-canvas-2x.html
+               fast/hidpi/image-srcset-svg-canvas.html
+               fast/hidpi/image-srcset-svg.html
+               fast/hidpi/image-srcset-svg2.html
+
+        * html/HTMLImageElement.cpp:
+        (WebCore::HTMLImageElement::HTMLImageElement):
+        (WebCore::HTMLImageElement::parseAttribute):
+        (WebCore::HTMLImageElement::createRenderer):
+        * html/HTMLImageElement.h:
+        * html/canvas/CanvasRenderingContext2D.cpp:
+        (WebCore::size):
+        (WebCore::CanvasRenderingContext2D::drawImage):
+        * html/parser/HTMLParserIdioms.cpp:
+        (WebCore::compareByScaleFactor):
+        (WebCore::parseImagesWithScaleFromSrcsetAttribute):
+        (WebCore::bestFitSourceForImageAttributes):
+        * html/parser/HTMLParserIdioms.h:
+        (WebCore::ImageWithScale::ImageWithScale):
+        (WebCore::ImageWithScale::imageURL):
+        (WebCore::ImageWithScale::scaleFactor):
+        * html/parser/HTMLPreloadScanner.cpp:
+        (WebCore::TokenPreloadScanner::StartTagScanner::processAttributes):
+        * rendering/RenderImage.cpp:
+        (WebCore::RenderImage::RenderImage):
+        * rendering/RenderImage.h:
+        (WebCore::RenderImage::setImageDevicePixelRatio):
+        (WebCore::RenderImage::imageDevicePixelRatio):
+        * rendering/RenderImageResource.cpp:
+        (WebCore::RenderImageResource::imageSize):
+        (WebCore::RenderImageResource::intrinsicSize):
+        (WebCore::RenderImageResource::getImageSize):
+        * rendering/RenderImageResource.h:
+        * rendering/RenderReplaced.cpp:
+        (WebCore::RenderReplaced::computeAspectRatioInformationForRenderBox):
+
 2014-02-04  Geoffrey Garen  <ggaren@apple.com>
 
         Rolled out <http://trac.webkit.org/changeset/163280>:
index 31aeb27..51f86e5 100644 (file)
@@ -45,6 +45,7 @@ HTMLImageElement::HTMLImageElement(const QualifiedName& tagName, Document& docum
     , m_imageLoader(this)
     , m_form(form)
     , m_compositeOperator(CompositeSourceOver)
+    , m_imageDevicePixelRatio(1.0f)
 {
     ASSERT(hasTagName(imgTag));
     setHasCustomStyleResolveCallbacks();
@@ -118,7 +119,13 @@ void HTMLImageElement::parseAttribute(const QualifiedName& name, const AtomicStr
         if (renderer() && renderer()->isRenderImage())
             toRenderImage(renderer())->updateAltText();
     } else if (name == srcAttr || name == srcsetAttr) {
-        m_bestFitImageURL = bestFitSourceForImageAttributes(document().deviceScaleFactor(), fastGetAttribute(srcAttr), fastGetAttribute(srcsetAttr));
+        ImageWithScale candidate = bestFitSourceForImageAttributes(document().deviceScaleFactor(), fastGetAttribute(srcAttr), fastGetAttribute(srcsetAttr));
+        m_bestFitImageURL = candidate.imageURL(fastGetAttribute(srcAttr), fastGetAttribute(srcsetAttr));
+        float candidateScaleFactor = candidate.scaleFactor();
+        if (candidateScaleFactor > 0)
+            m_imageDevicePixelRatio = 1 / candidateScaleFactor;
+        if (renderer() && renderer()->isImage())
+            toRenderImage(renderer())->setImageDevicePixelRatio(m_imageDevicePixelRatio);
         m_imageLoader.updateFromElementIgnoringPreviousError();
     } else if (name == usemapAttr) {
         setIsLink(!value.isNull() && !shouldProhibitLinks(this));
@@ -179,7 +186,7 @@ RenderPtr<RenderElement> HTMLImageElement::createElementRenderer(PassRef<RenderS
     if (style.get().hasContent())
         return RenderElement::createFor(*this, std::move(style));
 
-    return createRenderer<RenderImage>(*this, std::move(style));
+    return createRenderer<RenderImage>(*this, std::move(style), nullptr, m_imageDevicePixelRatio);
 }
 
 bool HTMLImageElement::canStartSelection() const
index d8689d1..f24bcb8 100644 (file)
@@ -121,6 +121,7 @@ private:
     CompositeOperator m_compositeOperator;
     AtomicString m_bestFitImageURL;
     AtomicString m_lowercasedUsemap;
+    float m_imageDevicePixelRatio;
 };
 
 NODE_TYPE_CASTS(HTMLImageElement)
index 47d87ed..0d7b69e 100755 (executable)
@@ -48,6 +48,7 @@
 #include "HTMLVideoElement.h"
 #include "ImageData.h"
 #include "RenderElement.h"
+#include "RenderImage.h"
 #include "RenderLayer.h"
 #include "SecurityOrigin.h"
 #include "StrokeStyleApplier.h"
@@ -1196,11 +1197,21 @@ bool CanvasRenderingContext2D::shouldDrawShadows() const
     return alphaChannel(state().m_shadowColor) && (state().m_shadowBlur || !state().m_shadowOffset.isZero());
 }
 
-static LayoutSize size(HTMLImageElement* image)
+enum ImageSizeType {
+    ImageSizeAfterDevicePixelRatio,
+    ImageSizeBeforeDevicePixelRatio
+};
+
+static LayoutSize size(HTMLImageElement* image, ImageSizeType sizeType)
 {
-    if (CachedImage* cachedImage = image->cachedImage())
-        return cachedImage->imageSizeForRenderer(image->renderer(), 1.0f); // FIXME: Not sure about this.
-    return IntSize();
+    LayoutSize size;
+    if (CachedImage* cachedImage = image->cachedImage()) {
+        size = cachedImage->imageSizeForRenderer(image->renderer(), 1.0f); // FIXME: Not sure about this.
+
+        if (sizeType == ImageSizeAfterDevicePixelRatio && image->renderer() && image->renderer()->isRenderImage() && cachedImage->image() && !cachedImage->image()->hasRelativeWidth())
+            size.scale(toRenderImage(image->renderer())->imageDevicePixelRatio());
+    }
+    return size;
 }
 
 #if ENABLE(VIDEO)
@@ -1226,8 +1237,8 @@ void CanvasRenderingContext2D::drawImage(HTMLImageElement* image, float x, float
         ec = TYPE_MISMATCH_ERR;
         return;
     }
-    LayoutSize s = size(image);
-    drawImage(image, x, y, s.width(), s.height(), ec);
+    LayoutSize destRectSize = size(image, ImageSizeAfterDevicePixelRatio);
+    drawImage(image, x, y, destRectSize.width(), destRectSize.height(), ec);
 }
 
 void CanvasRenderingContext2D::drawImage(HTMLImageElement* image,
@@ -1237,8 +1248,8 @@ void CanvasRenderingContext2D::drawImage(HTMLImageElement* image,
         ec = TYPE_MISMATCH_ERR;
         return;
     }
-    LayoutSize s = size(image);
-    drawImage(image, FloatRect(0, 0, s.width(), s.height()), FloatRect(x, y, width, height), ec);
+    LayoutSize sourceRectSize = size(image, ImageSizeBeforeDevicePixelRatio);
+    drawImage(image, FloatRect(0, 0, sourceRectSize.width(), sourceRectSize.height()), FloatRect(x, y, width, height), ec);
 }
 
 void CanvasRenderingContext2D::drawImage(HTMLImageElement* image,
@@ -1275,7 +1286,7 @@ void CanvasRenderingContext2D::drawImage(HTMLImageElement* image, const FloatRec
     FloatRect normalizedSrcRect = normalizeRect(srcRect);
     FloatRect normalizedDstRect = normalizeRect(dstRect);
 
-    FloatRect imageRect = FloatRect(FloatPoint(), size(image));
+    FloatRect imageRect = FloatRect(FloatPoint(), size(image, ImageSizeBeforeDevicePixelRatio));
     if (!srcRect.width() || !srcRect.height()) {
         ec = INDEX_SIZE_ERR;
         return;
index 941e3d7..e9eb399 100644 (file)
@@ -290,28 +290,11 @@ bool threadSafeMatch(const QualifiedName& a, const QualifiedName& b)
     return threadSafeEqual(*a.localName().impl(), *b.localName().impl());
 }
 
-struct ImageWithScale {
-    unsigned imageURLStart;
-    unsigned imageURLLength;
-    float scaleFactor;
-
-    ImageWithScale()
-        : imageURLStart(0)
-        , imageURLLength(0)
-        , scaleFactor(1)
-    { 
-    }
-
-    bool hasImageURL() const
-    {
-        return imageURLLength;
-    }
-};
 typedef Vector<ImageWithScale> ImageCandidates;
 
 static inline bool compareByScaleFactor(const ImageWithScale& first, const ImageWithScale& second)
 {
-    return first.scaleFactor < second.scaleFactor;
+    return first.scaleFactor() < second.scaleFactor();
 }
 
 static inline bool isHTMLSpaceOrComma(UChar character)
@@ -389,18 +372,14 @@ static void parseImagesWithScaleFromSrcsetAttribute(const String& srcsetAttribut
                 }
             }
         }
-        ImageWithScale image;
-        image.imageURLStart = imageURLStart;
-        image.imageURLLength = imageURLEnd - imageURLStart;
-        image.scaleFactor = imageScaleFactor;
-
+        ImageWithScale image(imageURLStart, imageURLEnd - imageURLStart, imageScaleFactor);
         imageCandidates.append(image);
         // 11. Return to the step labeled splitting loop.
         imageCandidateStart = separator + 1;
     }
 }
 
-String bestFitSourceForImageAttributes(float deviceScaleFactor, const String& srcAttribute, const String& srcsetAttribute)
+ImageWithScale bestFitSourceForImageAttributes(float deviceScaleFactor, const String& srcAttribute, const String& srcsetAttribute)
 {
     ImageCandidates imageCandidates;
 
@@ -412,16 +391,16 @@ String bestFitSourceForImageAttributes(float deviceScaleFactor, const String& sr
     }
 
     if (imageCandidates.isEmpty())
-        return String();
+        return ImageWithScale();
 
     std::stable_sort(imageCandidates.begin(), imageCandidates.end(), compareByScaleFactor);
 
     for (size_t i = 0; i < imageCandidates.size() - 1; ++i) {
-        if (imageCandidates[i].scaleFactor >= deviceScaleFactor)
-            return imageCandidates[i].hasImageURL() ? srcsetAttribute.substringSharingImpl(imageCandidates[i].imageURLStart, imageCandidates[i].imageURLLength) : srcAttribute;
+        if (imageCandidates[i].scaleFactor() >= deviceScaleFactor)
+            return imageCandidates[i];
     }
     const ImageWithScale& lastCandidate = imageCandidates.last();
-    return lastCandidate.hasImageURL() ? srcsetAttribute.substringSharingImpl(lastCandidate.imageURLStart, lastCandidate.imageURLLength) : srcAttribute;
+    return lastCandidate;
 }
 
 }
index 7c59142..82eba6d 100644 (file)
@@ -33,6 +33,38 @@ namespace WebCore {
 
 class Decimal;
 
+class ImageWithScale {
+public:
+    ImageWithScale()
+        : m_imageURLStart(0)
+        , m_imageURLLength(0)
+        , m_scaleFactor(1)
+    {
+    }
+
+    ImageWithScale(unsigned start, unsigned length, float scaleFactor)
+        : m_imageURLStart(start)
+        , m_imageURLLength(length)
+        , m_scaleFactor(scaleFactor)
+    {
+    }
+
+    String imageURL(const String& srcAttribute, const String& srcsetAttribute) const
+    {
+        return m_imageURLLength ? srcsetAttribute.substringSharingImpl(m_imageURLStart, m_imageURLLength) : srcAttribute;
+    }
+
+    float scaleFactor() const
+    {
+        return m_scaleFactor;
+    }
+
+private:
+    unsigned m_imageURLStart;
+    unsigned m_imageURLLength;
+    float m_scaleFactor;
+};
+
 // Space characters as defined by the HTML specification.
 bool isHTMLSpace(UChar);
 bool isHTMLLineBreak(UChar);
@@ -99,7 +131,7 @@ inline bool isHTMLSpaceButNotLineBreak(UChar character)
 
 bool threadSafeMatch(const QualifiedName&, const QualifiedName&);
 
-String bestFitSourceForImageAttributes(float deviceScaleFactor, const String& srcAttribute, const String& sourceSetAttribute);
+ImageWithScale bestFitSourceForImageAttributes(float deviceScaleFactor, const String& srcAttribute, const String& sourceSetAttribute);
 
 }
 
index 51c81e1..e100364 100644 (file)
@@ -104,7 +104,8 @@ public:
 
         // Resolve between src and srcSet if we have them.
         if (!m_srcSetAttribute.isEmpty()) {
-            String srcMatchingScale = bestFitSourceForImageAttributes(m_deviceScaleFactor, m_urlToLoad, m_srcSetAttribute);
+            ImageWithScale imageCandidate = bestFitSourceForImageAttributes(m_deviceScaleFactor, m_urlToLoad, m_srcSetAttribute);
+            String srcMatchingScale = imageCandidate.imageURL(m_urlToLoad, m_srcSetAttribute);
             setUrlToLoad(srcMatchingScale, true);
         }
     }
index 5264375..503064c 100644 (file)
@@ -116,12 +116,13 @@ void RenderImage::collectSelectionRects(Vector<SelectionRect>& rects, unsigned,
 
 using namespace HTMLNames;
 
-RenderImage::RenderImage(Element& element, PassRef<RenderStyle> style, StyleImage* styleImage)
+RenderImage::RenderImage(Element& element, PassRef<RenderStyle> style, StyleImage* styleImage, const float imageDevicePixelRatio)
     : RenderReplaced(element, std::move(style), IntSize())
     , m_imageResource(styleImage ? std::make_unique<RenderImageResourceStyleImage>(*styleImage) : std::make_unique<RenderImageResource>())
     , m_needsToSetSizeForAltText(false)
     , m_didIncrementVisuallyNonEmptyPixelCount(false)
     , m_isGeneratedContent(false)
+    , m_imageDevicePixelRatio(imageDevicePixelRatio)
 {
     updateAltText();
     imageResource().initialize(this);
@@ -133,6 +134,7 @@ RenderImage::RenderImage(Document& document, PassRef<RenderStyle> style, StyleIm
     , m_needsToSetSizeForAltText(false)
     , m_didIncrementVisuallyNonEmptyPixelCount(false)
     , m_isGeneratedContent(false)
+    , m_imageDevicePixelRatio(1.0f)
 {
     imageResource().initialize(this);
 }
index cc94408..6cd6097 100644 (file)
@@ -35,7 +35,7 @@ class HTMLMapElement;
 
 class RenderImage : public RenderReplaced {
 public:
-    RenderImage(Element&, PassRef<RenderStyle>, StyleImage* = nullptr);
+    RenderImage(Element&, PassRef<RenderStyle>, StyleImage* = nullptr, const float = 1.0f);
     RenderImage(Document&, PassRef<RenderStyle>, StyleImage* = nullptr);
     virtual ~RenderImage();
 
@@ -62,7 +62,10 @@ public:
 
     const String& altText() const { return m_altText; }
     void setAltText(const String& altText) { m_altText = altText; }
-    
+
+    inline void setImageDevicePixelRatio(float factor) { m_imageDevicePixelRatio = factor; }
+    float imageDevicePixelRatio() const { return m_imageDevicePixelRatio; }
+
 protected:
     virtual bool needsPreferredWidthsRecalculation() const override final;
     virtual RenderBox* embeddedContentBox() const override final;
@@ -113,6 +116,7 @@ private:
     bool m_needsToSetSizeForAltText;
     bool m_didIncrementVisuallyNonEmptyPixelCount;
     bool m_isGeneratedContent;
+    float m_imageDevicePixelRatio;
 
     friend class RenderImageScaleObserver;
 };
index e6a1dc4..28992ec 100644 (file)
@@ -31,6 +31,7 @@
 #include "CachedImage.h"
 #include "Image.h"
 #include "RenderElement.h"
+#include "RenderImage.h"
 #include "RenderImageResourceStyleImage.h"
 
 namespace WebCore {
@@ -118,12 +119,22 @@ bool RenderImageResource::imageHasRelativeHeight() const
 
 LayoutSize RenderImageResource::imageSize(float multiplier) const
 {
-    return m_cachedImage ? m_cachedImage->imageSizeForRenderer(m_renderer, multiplier) : LayoutSize();
+    return getImageSize(multiplier, CachedImage::UsedSize);
 }
 
 LayoutSize RenderImageResource::intrinsicSize(float multiplier) const
 {
-    return m_cachedImage ? m_cachedImage->imageSizeForRenderer(m_renderer, multiplier, CachedImage::IntrinsicSize) : LayoutSize();
+    return getImageSize(multiplier, CachedImage::IntrinsicSize);
+}
+
+LayoutSize RenderImageResource::getImageSize(float multiplier, CachedImage::SizeType type) const
+{
+    if (!m_cachedImage)
+        return LayoutSize();
+    LayoutSize size = m_cachedImage->imageSizeForRenderer(m_renderer, multiplier, type);
+    if (m_renderer && m_renderer->isRenderImage())
+        size.scale(toRenderImage(m_renderer)->imageDevicePixelRatio());
+    return size;
 }
 
 } // namespace WebCore
index 0044f06..519808f 100644 (file)
@@ -26,6 +26,7 @@
 #ifndef RenderImageResource_h
 #define RenderImageResource_h
 
+#include "CachedImage.h"
 #include "CachedResourceHandle.h"
 #include "StyleImage.h"
 #include <wtf/PassOwnPtr.h>
@@ -65,6 +66,9 @@ public:
 protected:
     RenderElement* m_renderer;
     CachedResourceHandle<CachedImage> m_cachedImage;
+
+private:
+    LayoutSize getImageSize(float multiplier, CachedImage::SizeType) const;
 };
 
 } // namespace WebCore
index 8481bd8..39bf0c2 100644 (file)
@@ -31,6 +31,7 @@
 #include "Page.h"
 #include "RenderBlock.h"
 #include "RenderFlowThread.h"
+#include "RenderImage.h"
 #include "RenderLayer.h"
 #include "RenderRegion.h"
 #include "RenderTheme.h"
@@ -270,8 +271,11 @@ void RenderReplaced::computeAspectRatioInformationForRenderBox(RenderBox* conten
             ASSERT(!isPercentageIntrinsicSize);
 
         // Handle zoom & vertical writing modes here, as the embedded document doesn't know about them.
-        if (!isPercentageIntrinsicSize)
+        if (!isPercentageIntrinsicSize) {
             intrinsicSize.scale(style().effectiveZoom());
+            if (isRenderImage())
+                intrinsicSize.scale(toRenderImage(this)->imageDevicePixelRatio());
+        }
 
         if (hasAspectRatio() && isPercentageIntrinsicSize)
             intrinsicRatio = 1;