Index: third_party/WebKit/LayoutTests/svg/custom/svg-image-intrinsic-size-with-cssstyle-auto.html |
diff --git a/third_party/WebKit/LayoutTests/svg/custom/svg-image-intrinsic-size-with-cssstyle-auto.html b/third_party/WebKit/LayoutTests/svg/custom/svg-image-intrinsic-size-with-cssstyle-auto.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..cee0ee42b5274768e3167c8785b08a18a52c63d4 |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/svg/custom/svg-image-intrinsic-size-with-cssstyle-auto.html |
@@ -0,0 +1,67 @@ |
+<!DOCTYPE html> |
+<title>Test <svg:image>'s sizing </title> |
fs
2016/08/19 08:59:45
Drop "Test" and add 'auto', so maybe:
<svg:image>
Shanmuga Pandi
2016/09/14 09:20:16
Done.
|
+<script src="../../resources/testharness.js"></script> |
+<script src="../../resources/testharnessreport.js"></script> |
+<svg height="0"> |
+ <image width="100" height="100" xlink:href="resources/square-green-checker.png" /> |
+ <image width="100" height="100" xlink:href="resources/square-green-checker.png" style="width:auto"/> |
+ <image width="100" height="100" xlink:href="resources/square-green-checker.png" style="height:auto"/> |
+ <image width="100" height="100" xlink:href="resources/square-green-checker.png" style="width:auto; height:auto"/> |
+ <image width="200" height="200" |
+ xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>"/> |
+ <image width="200" height="200" |
+ xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'></svg>" style='width:auto; height:auto'/> |
+ <image width="200" height="200" |
+ xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'></svg>" style='width:auto;'/> |
+ <image xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'></svg>" style='width:auto;'/> |
+ <image height="200" |
+ xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'></svg>" style='width:auto;'/> |
+ <image width="200" |
+ xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'></svg>" style='height:auto;'/> |
+ <image width="200" height="200" |
+ xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>" style='width:auto; height:auto'/> |
+ <image height="200" |
+ xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>" style='width:auto; height:auto'/> |
+ <image width="200" |
+ xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>" style='width:auto; height:auto'/> |
+ <image xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>"/> |
fs
2016/08/19 08:59:45
Still missing tests with no intrinsic dimensions b
Shanmuga Pandi
2016/08/19 11:56:42
Could you please give one sample for that(no intri
fs
2016/08/19 12:01:31
<svg viewBox="0 0 400 200"></svg>
Shanmuga Pandi
2016/09/14 09:20:16
I have added more variation.
|
+</svg> |
+<script> |
+Dimension = function(w,h,desc) { |
+ this.width = w; |
+ this.height = h; |
+ this.desc = desc; |
+}; |
+Dimension.prototype.toString = function() { |
+ return this.width + "," + this.height; |
+}; |
+// The order of expected sizes should equal the document order of the images. |
+var expectedBoxes = [ |
+ new Dimension(100, 100, "400x400 png image, with intrinsic width='100' height='100'"), |
fs
2016/08/19 08:59:45
You could probably drop the class, and just do:
{
Shanmuga Pandi
2016/09/14 09:20:16
Done.
|
+ new Dimension(400, 100, "400x400 png image, with intrinsic width='100' height='100', and with CSS 'width:auto'"), |
+ new Dimension(100, 400, "400x400 png image, with intrinsic width='100' height='100', and with CSS 'height:auto'"), |
+ new Dimension(400, 400, "400x400 png image, with intrinsic width='100' height='100', and with CSS 'width:auto; height:auto'"), |
+ new Dimension(200, 200, "default sized svg image, with intrinsic width='200' height='200'"), |
+ new Dimension(100, 100, "100x100 svg image, with intrinsic width='200' height='200', and with CSS 'width:auto; height:auto'"), |
+ new Dimension(100, 200, "100x100 svg image, with intrinsic width='200' height='200', and with CSS 'width:auto'"), |
+ new Dimension(100, 100, "100x100 svg image, without intrinsic width and height, and with CSS 'width:auto'"), |
+ new Dimension(100, 200, "100x100 svg image, with intrinsic height='200', and with 'width:auto'"), |
+ new Dimension(200, 100, "100x100 svg image, with intrinsic width='200', and with CSS height:auto"), |
+ new Dimension(300, 150, "default sized svg image, with intrinsic width='200' height='200', and with CSS 'width:auto; height:auto'"), |
+ new Dimension(300, 150, "default sized svg image, with intrinsic height, and with CSS 'width:auto; height:auto'"), |
+ new Dimension(300, 150, "default sized svg image, with intrinsic width, and with CSS 'width:auto; height:auto'"), |
+ new Dimension(300, 150, "default sized svg image, without intrinsic width and height, no css width/height specified"), |
fs
2016/08/19 08:59:45
None these four have any intrinsic dimension. Actu
Shanmuga Pandi
2016/08/19 11:56:42
'specified <something>' could be correct ?
fs
2016/08/19 12:01:31
Maybe explicitly say "attributes width='..."' ..."
Shanmuga Pandi
2016/09/14 09:20:16
Done.
|
+]; |
+var images = document.getElementsByTagName('image'); |
+for (var i = 0, length = images.length; i < length; ++i) { |
+ async_test(function(t) { |
+ var image = images[i]; |
+ image.expectedBox = expectedBoxes[i]; |
+ image.onload = t.step_func_done(function() { |
+ var rectBBox = image.getBBox(); |
+ assert_equals(rectBBox.width, image.expectedBox.width); |
+ assert_equals(rectBBox.height, image.expectedBox.height); |
+ }); |
+ }, document.title + ' with ' + expectedBoxes[i].desc + ' and box size should be ' + expectedBoxes[i]); |
+} |
+</script> |