Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(690)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/svg/custom/svg-image-intrinsic-size-with-cssstyle-auto.html

Issue 2230963002: SVG Image intrinsic size should be used if css style size is 'auto' (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Align with review comments Created 4 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/svg/custom/svg-image-intrinsic-size-with-cssstyle-auto-dynamic-image-change.html » ('j') | third_party/WebKit/Source/core/layout/svg/LayoutSVGImage.cpp » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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..e291c02d4accadef15a5240a69c6e28e74afc0fc
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/svg/custom/svg-image-intrinsic-size-with-cssstyle-auto.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<title><svg:image> 'auto' sizing </title>
+<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="200" height="100" xlink:href="resources/square-green-checker.png" style="width:auto"/>
+ <image width="100" height="200" 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="50" height="50"
+ xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>"/>
+ <image width="50" height="50"
+ xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100'></svg>" style='width:auto; height:auto'/>
+ <image width="50" height="50"
+ xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100'></svg>" style='width:auto;'/>
+ <image xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100'></svg>" style='width:auto;'/>
+ <image height="50"
+ xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100'></svg>" style='width:auto;'/>
+ <image width="50"
+ xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' 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>"/>
+ <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100'></svg>"/>
+ <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100'></svg>" style='width:auto'/>
+ <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100'></svg>" style='height:auto'/>
+ <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100'></svg>" style='width:auto; height:auto'/>
+ <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' viewBox='0 0 400 100'></svg>"/>
+ <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' viewBox='0 0 400 100'></svg>" style='width:auto'/>
+ <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' viewBox='0 0 400 100'></svg>" style='height:auto'/>
+ <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' viewBox='0 0 400 100'></svg>" style='width:auto; height:auto'/>
+ <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='100' viewBox='0 0 400 100'></svg>"/>
+ <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='100' viewBox='0 0 400 100'></svg>" style='width:auto'/>
+ <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='100' viewBox='0 0 400 100'></svg>" style='height:auto'/>
+ <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='100' viewBox='0 0 400 100'></svg>" style='width:auto; height:auto'/>
+ <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100' viewBox='0 0 400 100'></svg>"/>
+ <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100' viewBox='0 0 400 100'></svg>" style='width:auto'/>
+ <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100' viewBox='0 0 400 100'></svg>" style='height:auto'/>
+ <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100' viewBox='0 0 400 100'></svg>" style='width:auto; height:auto'/>
+</svg>
+<script>
+var expectedBoxes = [
+ { dimensions: [100, 100], description: "400x400 png image, attributes width='100' height='100'"},
+ { dimensions: [100, 100], description: "400x400 png image, attributes width='200' height='100' and CSS 'width:auto'"},
+ { dimensions: [100, 100], description: "400x400 png image, attributes width='100' height='200' and CSS 'height:auto'"},
+ { dimensions: [400, 400], description: "400x400 png image, attributes width='100' height='100' and CSS 'width:auto; height:auto'"},
+ { dimensions: [50, 50], description: "default sized svg image, attributes width='50' height='50'"},
+ { dimensions: [200, 100], description: "200x100 svg image, attributes width='50' height='50' and CSS 'width:auto; height:auto'"},
+ { dimensions: [100, 50], description: "200x100 svg image, attributes width='50' height='50' and CSS 'width:auto'"},
+ { dimensions: [200, 100], description: "200x100 svg image, without attributes width and height and CSS 'width:auto'"},
+ { dimensions: [100, 50], description: "200x100 svg image, attributes height='50' and 'width:auto'"},
+ { dimensions: [50, 25], description: "200x100 svg image, attributes width='50' and CSS height:auto"},
+ { dimensions: [300, 150], description: "default sized svg image, attributes width='200' height='200' and CSS 'width:auto; height:auto'"},
+ { dimensions: [300, 150], description: "default sized svg image, attributes height='200' and CSS 'width:auto; height:auto'"},
+ { dimensions: [300, 150], description: "default sized svg image, attributes width='200' and CSS 'width:auto; height:auto'"},
+ { dimensions: [300, 150], description: "default sized svg image, without attributes width and height, no css width/height specified"},
+ { dimensions: [60, 60], description: "default sized svg image viewBox='0 0 400 100', attributes width='60' height='60' and no css width/height specified"},
+ { dimensions: [240, 60], description: "default sized svg image viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'width:auto'"},
+ { dimensions: [60, 15], description: "default sized svg image viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'height:auto'"},
+ { dimensions: [300, 75], description: "default sized svg image viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'width:auto; height:auto'"},
+ { dimensions: [60, 60], description: "svg image width='200' viewBox='0 0 400 100', attributes width='60' height='60' and no css width/height specified"},
+ { dimensions: [240, 60], description: "svg image width='200' viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'width:auto'"},
+ { dimensions: [60, 15], description: "svg image width='200' viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'height:auto'"},
+ { dimensions: [200, 50], description: "svg image width='200' viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'width:auto; height:auto'"},
+ { dimensions: [60, 60], description: "svg image height='100' viewBox='0 0 400 100', attributes width='60' height='60' and no css width/height specified"},
+ { dimensions: [240, 60], description: "svg image height='100' viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'width:auto'"},
+ { dimensions: [60, 15], description: "svg image height='100' viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'height:auto'"},
+ { dimensions: [400, 100], description: "svg image height='100' viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'width:auto; height:auto'"},
+ { dimensions: [60, 60], description: "200x100 svg image viewBox='0 0 400 100', attributes width='60' height='60' and no css width/height specified"},
+ { dimensions: [120, 60], description: "200x100 svg image viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'width:auto'"},
+ { dimensions: [60, 30], description: "200x100 svg image viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'height:auto'"},
+ { dimensions: [200, 100], description: "200x100 svg image viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'width:auto; height:auto'"},
+];
+
+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.dimensions[0]);
+ assert_equals(rectBBox.height, image.expectedBox.dimensions[1]);
+ });
+ }, document.title + ' with ' + expectedBoxes[i].description);
+}
+</script>
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/svg/custom/svg-image-intrinsic-size-with-cssstyle-auto-dynamic-image-change.html » ('j') | third_party/WebKit/Source/core/layout/svg/LayoutSVGImage.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698