Skip to content
Permalink
Browse files

Bug 1529092 [wpt PR 15464] - Export 2 WPT tests for intrinsic size of…

… SVG images with CSS 'auto' size, a=testonly

Automatic update from web-platform-tests
Export 2 WPT tests for intrinsic size of SVG images with CSS 'auto' size

The following changes are made:
- Add spec documentation
- Update link to harness JS files.
- Remove trailing whitespace to pass WPT check.
- Use green-256x256.png as a test image and update metrics accordingly.

Bug: 493681
Change-Id: I5e7ebac00d4d4401bfec7780ee40f853ee4fdbb4
Reviewed-on: https://chromium-review.googlesource.com/c/1477703
Reviewed-by: Philip Jägenstedt <foolip@chromium.org>
Commit-Queue: Frédéric Wang <fwang@igalia.com>
Cr-Commit-Position: refs/heads/master@{#634189}

--

wpt-commits: d4e3d9e54559cbc102866f8c15ffe2f3e1ddf0c8
wpt-pr: 15464
  • Loading branch information...
fred-wang authored and jgraham committed Mar 6, 2019
1 parent c3ea462 commit 12489303ad4e20967c1d25d11780541b0dda4cc5
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<title>Test <svg:image>'s sizing with css size as auto, with dynamic image change</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#geometry-Sizing"/>
<link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#embedded-Placement"/>
<svg height="0">
<image width="128" height="128" xlink:href="/images/green-256x256.png" style="width:auto; height:auto"/>
</svg>
<script>
async_test(function(t) {
var image = document.querySelector('image');
window.onload = t.step_func(function() {
var rectBBox = image.getBBox();
assert_equals(rectBBox.width, 256);
assert_equals(rectBBox.height, 256);
image.setAttributeNS("http://www.w3.org/1999/xlink","href","data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'></svg>");
image.onload = t.step_func_done(function() {
var rectBBox = image.getBBox();
assert_equals(rectBBox.width, 64);
assert_equals(rectBBox.height, 64);
});
});
});
</script>
@@ -0,0 +1,93 @@
<!DOCTYPE html>
<title><svg:image> 'auto' sizing </title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#geometry-Sizing"/>
<link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#embedded-Placement"/>
<svg height="0">
<image width="64" height="64" xlink:href="/images/green-256x256.png" />
<image width="128" height="64" xlink:href="/images/green-256x256.png" style="width:auto"/>
<image width="64" height="128" xlink:href="/images/green-256x256.png" style="height:auto"/>
<image width="128" height="64" xlink:href="/images/green-256x256.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: [64, 64], description: "256x256 png image, attributes width='64' height='64'"},
{ dimensions: [64, 64], description: "256x256 png image, attributes width='128' height='64' and CSS 'width:auto'"},
{ dimensions: [64, 64], description: "256x256 png image, attributes width='64' height='128' and CSS 'height:auto'"},
{ dimensions: [256, 256], description: "256x256 png image, attributes width='64' height='64' 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>

0 comments on commit 1248930

Please sign in to comment.
You can’t perform that action at this time.