Bug 1529092 [wpt PR 15464] - Export 2 WPT tests for intrinsic size of SVG images with CSS 'auto' size, a=testonly
authorFrédéric Wang <fwang@igalia.com>
Wed, 06 Mar 2019 12:33:52 +0000
changeset 464644 03144d45d71a
parent 464643 135e1b3fbd10
child 464645 db896ec3c023
push id35717
push useraciure@mozilla.com
push dateSun, 17 Mar 2019 09:45:26 +0000
treeherdermozilla-central@e0861be8d6c0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1529092, 15464, 493681, 1477703, 634189
milestone67.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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
testing/web-platform/tests/svg/geometry/svg-image-intrinsic-size-with-cssstyle-auto-dynamic-image-change.html
testing/web-platform/tests/svg/geometry/svg-image-intrinsic-size-with-cssstyle-auto.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/svg-image-intrinsic-size-with-cssstyle-auto-dynamic-image-change.html
@@ -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>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/svg/geometry/svg-image-intrinsic-size-with-cssstyle-auto.html
@@ -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>
\ No newline at end of file