Fix one more corner case

drag_and_drop_v2/public/js/view.js

@@ -84,7 +84,7 @@
                 style.width = item.widthPercent + "%";
                 style.maxWidth = item.widthPercent + "%"; // default maxWidth is ~33%
             } else if (item.imgNaturalWidth) {
-                style.width = item.imgNaturalWidth + "px";
+                style.width = (item.imgNaturalWidth + 22) + "px"; // 22px is for 10px padding + 1px border each side
                 // ^ Hack to detect image width at runtime and make webkit consistent with Firefox
             }
         } else {

tests/integration/data/60x60.svg

+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 60 60" width="60px" height="60px" xml:space="preserve">
+<style type="text/css">
+    .st0{fill:#BBF03B;}
+    .st1{font-family:'Helvetica';}
+    .st2{font-size:12px;}
+</style>
+<rect class="st0" width="60" height="60"/>
+<text transform="matrix(1 0 0 1 3 35)" class="st1 st2">60 x 60px</text>
+</svg>

tests/integration/data/test_sizing_template.json

@@ -83,6 +83,13 @@
       "imageURL": "{{img_200x200_url}}",
       "id": 8,
       "widthPercent": 50
+    },
+    {
+      "displayName": "IMG 60x60",
+      "feedback": {"incorrect": "", "correct": ""},
+      "zone": "Zone 1/3",
+      "imageURL": "{{img_60x60_url}}",
+      "id": 9
     }
   ],
   "feedback": {"start": "Some Intro Feedback", "finish": "Some Final Feedback"}

tests/integration/test_sizing.py

@@ -25,6 +25,7 @@ Expectation = namedtuple('Expectation', [
     'zone_id',
     'width_percent',  # we expect this item to have this width relative to its container (item bank or image target)
     'fixed_width_percent',  # we expect this item to have this width (always relative to the target image)
+    'img_pixel_size_exact',  # we expect the image inside the draggable to have the exact size [w, h] in pixels
 ])
 Expectation.__new__.__defaults__ = (None,) * len(Expectation._fields)  # pylint: disable=protected-access
 ZONE_33 = "Zone 1/3"  # Title of top zone in each image used in these tests (33% width)
@@ -64,6 +65,7 @@ class SizingTests(InteractionTestBase, BaseIntegrationTest):
             "img_square_url": _svg_to_data_uri('dnd-bg-square.svg'),
             "img_400x300_url": _svg_to_data_uri('400x300.svg'),
             "img_200x200_url": _svg_to_data_uri('200x200.svg'),
+            "img_60x60_url": _svg_to_data_uri('60x60.svg'),
         }
         upper_block = "<drag-and-drop-v2 data='{data}'/>".format(
             data=loader.render_django_template("data/test_sizing_template.json", params)
@@ -92,6 +94,9 @@ class SizingTests(InteractionTestBase, BaseIntegrationTest):
         Expectation(item_id=7, zone_id=ZONE_50, fixed_width_percent=50),
         # A 200x200 image with a specified width of 50%
         Expectation(item_id=8, zone_id=ZONE_50, fixed_width_percent=50),
+        # A 60x60 auto-sized image should appear with pixel dimensions of 60x60 since it's
+        # too small to be shrunk be the default max-size.
+        Expectation(item_id=9, zone_id=ZONE_33, img_pixel_size_exact=[60, 60]),
     ]
 
     def test_wide_image_desktop(self):
@@ -148,6 +153,15 @@ class SizingTests(InteractionTestBase, BaseIntegrationTest):
                 )
             )
 
+    def _check_img_pixel_dimensions(self, item_description, item, expect_w, expect_h):
+        img_element = item.find_element_by_css_selector("img")
+        self.assertEqual(
+            img_element.size, {"width": expect_w, "height": expect_h},
+            msg="Expected {}'s image to have exact dimensions {}x{}px; found {}x{}px instead.".format(
+                item_description, expect_w, expect_h, img_element.size["width"], img_element.size["height"]
+            )
+        )
+
     def _check_sizes(self, block_index, expectations, expected_img_width=755, is_desktop=True):
         """ Test the actual dimensions that each draggable has, in the bank and when placed """
         # Check assumptions - the container wrapping this XBlock should be 770px wide
@@ -179,6 +193,12 @@ class SizingTests(InteractionTestBase, BaseIntegrationTest):
                     container_width=target_img_width,
                     expected_percent=expect.fixed_width_percent,
                 )
+            if expect.img_pixel_size_exact is not None:
+                self._check_img_pixel_dimensions(
+                    "Unplaced item {}".format(expect.item_id),
+                    self._get_unplaced_item_by_value(expect.item_id),
+                    *expect.img_pixel_size_exact
+                )
 
         # Test each element, after it it placed.
         for expect in expectations:
@@ -191,6 +211,12 @@ class SizingTests(InteractionTestBase, BaseIntegrationTest):
                     container_width=target_img_width,
                     expected_percent=expected_width_percent,
                 )
+            if expect.img_pixel_size_exact is not None:
+                self._check_img_pixel_dimensions(
+                    "Placed item {}".format(expect.item_id),
+                    self._get_placed_item_by_value(expect.item_id),
+                    *expect.img_pixel_size_exact
+                )
 
 
 class SizingBackwardsCompatibilityTests(InteractionTestBase, BaseIntegrationTest):