Add tests for mapping of width/height to aspect-ratio

This covers video, img and canvas.

This is for whatwg/html#6032. See also
#26010.

R=masonfreed@chromium.org, yoavweiss@chromium.org

Bug: 1137004
Change-Id: I38d690412af67836e4fdede11c5b4938e47f138f

html/rendering/replaced-elements/attributes-for-embedded-content-and-images/canvas-aspect-ratio.html

@@ -2,6 +2,7 @@
 <title>Canvas width and height attributes are used as the surface size</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
+<script src="resources/aspect-ratio.js"></script>
 <style>
   canvas {
     width: 100%;
@@ -17,6 +18,10 @@
   assert_approx_equals(parseInt(getComputedStyle(img).width, 10) / parseInt(getComputedStyle(img).height, 10), expected, epsilon);
 }
 
+function test_computed_style(width, height, expected) {
+  test_computed_style_aspect_ratio("canvas", {width: width, height: height}, expected);
+}
+
 test(function() {
   canvas = document.getElementById("contained");
   assert_ratio(canvas, 2.5);
@@ -31,4 +36,21 @@
   // Canvases always use the aspect ratio from their surface size.
   assert_ratio(canvas, 2.5);
 }, "Canvas width and height attributes are used as the surface size");
+
+test(function() {
+  test_computed_style("10", "20", "auto 10 / 20");
+  test_computed_style("0", "1", "auto 0 / 1");
+  test_computed_style("1", "0", "auto 1 / 0");
+  test_computed_style("0", "0", "auto 0 / 0");
+  test_computed_style("0.5", "1.5", "auto 0.5 / 1.5");
+}, "Computed style");
+
+test(function() {
+  test_computed_style(null, null, "auto");
+  test_computed_style("10", null, "auto");
+  test_computed_style(null, "20", "auto");
+  test_computed_style("xx", "20", "auto");
+  test_computed_style("10%", "20", "auto");
+}, "Computed style for invalid ratios");
+
 </script>

html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio.html

@@ -2,6 +2,7 @@
 <title>Image width and height attributes are used to infer aspect-ratio</title>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
+<script src="resources/aspect-ratio.js"></script>
 <style>
   img {
     width: 100%;
@@ -22,6 +23,11 @@
   assert_approx_equals(parseFloat(getComputedStyle(img).width, 10) / parseFloat(getComputedStyle(img).height, 10),
                        expected, epsilon, description);
 }
+
+function test_computed_style(width, height, expected) {
+  test_computed_style_aspect_ratio("img", {width: width, height: height}, expected);
+}
+
 // Create and append a new image and immediately check the ratio.
 // This is not racy because the spec requires the user agent to queue a task:
 // https://html.spec.whatwg.org/multipage/images.html#updating-the-image-data
@@ -58,4 +64,21 @@
   assert_not_equals(images[5].offsetHeight, 500, "Images with alt text should be inline and ignore the aspect ratio");
   assert_ratio(images[6], 133/106, "The original aspect ratio of blue.png");
 });
+
+test(function() {
+  test_computed_style("10", "20", "auto 10 / 20");
+  test_computed_style("0", "1", "auto 0 / 1");
+  test_computed_style("1", "0", "auto 1 / 0");
+  test_computed_style("0", "0", "auto 0 / 0");
+  test_computed_style("0.5", "1.5", "auto 0.5 / 1.5");
+}, "Computed style");
+
+test(function() {
+  test_computed_style(null, null, "auto");
+  test_computed_style("10", null, "auto");
+  test_computed_style(null, "20", "auto");
+  test_computed_style("xx", "20", "auto");
+  test_computed_style("10%", "20", "auto");
+}, "Computed style for invalid ratios");
+
 </script>

html/rendering/replaced-elements/attributes-for-embedded-content-and-images/resources/aspect-ratio.js

@@ -0,0 +1,10 @@
+function test_computed_style_aspect_ratio(tag, attributes, expected) {
+  var elem = document.createElement(tag);
+  for (name in attributes) {
+    let val = attributes[name];
+    if (val !== null)
+      elem.setAttribute(name, val);
+  }
+  document.body.appendChild(elem);
+  assert_equals(getComputedStyle(elem).aspectRatio, expected);
+}

html/rendering/replaced-elements/attributes-for-embedded-content-and-images/video-aspect-ratio.html

@@ -3,6 +3,7 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/common/media.js"></script>
+<script src="resources/aspect-ratio.js"></script>
 <style>
   video {
     width: 100%;
@@ -19,6 +20,10 @@
   assert_approx_equals(parseInt(getComputedStyle(img).width, 10) / parseInt(getComputedStyle(img).height, 10), expected, epsilon);
 }
 
+function test_computed_style(width, height, expected) {
+  test_computed_style_aspect_ratio("video", {width: width, height: height}, expected);
+}
+
 t.step(function() {
   var video = document.getElementById("contained");
   video.src = getVideoURI('/media/2x2-green');
@@ -44,4 +49,21 @@
     assert_ratio(video, 1);
   });
 }, "aspect ratio for regular video");
+
+test(function() {
+  test_computed_style("10", "20", "auto 10 / 20");
+  test_computed_style("0", "1", "auto 0 / 1");
+  test_computed_style("1", "0", "auto 1 / 0");
+  test_computed_style("0", "0", "auto 0 / 0");
+  test_computed_style("0.5", "1.5", "auto 0.5 / 1.5");
+}, "Computed style");
+
+test(function() {
+  test_computed_style(null, null, "auto");
+  test_computed_style("10", null, "auto");
+  test_computed_style(null, "20", "auto");
+  test_computed_style("xx", "20", "auto");
+  test_computed_style("10%", "20", "auto");
+}, "Computed style for invalid ratios");
+
 </script>