Fix corner case: image smaller than author-specified draggable width

drag_and_drop_v2/public/css/drag_and_drop.css

@@ -80,6 +80,10 @@
     z-index: 10 !important;
 }
 
+.xblock--drag-and-drop .drag-container .option.specified-width img {
+    width: 100%;  /* If the image is smaller than the specified width, make it larger */
+}
+
 .xblock--drag-and-drop .drag-container .option .spinner-wrapper {
     margin-right: 3px;
     float: left;

drag_and_drop_v2/public/js/view.js

@@ -58,6 +58,9 @@
         if (item.has_image) {
             className += " " + "option-with-image";
         }
+        if (item.widthPercent) {
+            className += " specified-width";  // The author has specified a width for this item.
+        }
         var attributes = {
             'draggable': !item.drag_disabled,
             'aria-grabbed': item.grabbed,

tests/integration/test_sizing.py

@@ -40,6 +40,9 @@ class SizingTests(InteractionTestBase, BaseIntegrationTest):
 
     Tip: To see how these tests work, throw in an 'import time; time.sleep(200)' at the start of
     one of the tests, so you can check it out in the selenium browser window that opens.
+
+    These tests intentionally do not use ddt in order to run faster. Instead, each test iterates
+    through data and uses verbose assertion messages to clearly indicate where failures occur.
     """
     PAGE_TITLE = 'Drag and Drop v2 Sizing'
     PAGE_ID = 'drag_and_drop_v2_sizing'
@@ -121,6 +124,17 @@ class SizingTests(InteractionTestBase, BaseIntegrationTest):
                 )
             )
 
+        if item.find_elements_by_css_selector("img"):
+            # This item contains an image. The image should always fill the width of the draggable.
+            image = item.find_element_by_css_selector("img")
+            image_width_expected = item.size["width"] - 22
+            self.assertAlmostEqual(
+                image.size["width"], image_width_expected, delta=1,
+                msg="{} image does not take up the full width of the draggable (width is {}px; expected {}px)".format(
+                    item_description, image.size["width"], image_width_expected,
+                )
+            )
+
     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