Fix #208 -- Avoid illegal i10n integer width values in the srcset-attribute (#209)

Django's template internationalization (i10n) with the `USE_THOUSAND_SEPARATOR` set true will inject illegal characters into width values `srcset` attribute, causing client/browser errors.

Author: rfricz

pictures/templates/pictures/picture.html

@@ -1,6 +1,6 @@
 <picture{% include 'pictures/attrs.html' with attrs=picture_attrs %}>{% for type, srcset in sources.items %}
   <source type="image/{{ type|lower }}"
-          srcset="{% for width, pic in srcset.items %}{% if use_placeholders %}{% url 'pictures:placeholder' alt|urlencode:'' ratio width type %}{% else %}{{ pic.url }}{% endif %} {{ width }}w{% if not forloop.last %}, {% endif %}{% endfor %}"
+          srcset="{% for width, pic in srcset.items %}{% if use_placeholders %}{% url 'pictures:placeholder' alt|urlencode:'' ratio width type %}{% else %}{{ pic.url }}{% endif %} {{ width|stringformat:'i' }}w{% if not forloop.last %}, {% endif %}{% endfor %}"
           sizes="{{ media }}">{% endfor %}
   <img{% include 'pictures/attrs.html' with attrs=img_attrs %}>
 </picture>

tests/conftest.py

@@ -26,6 +26,15 @@ def tiny_image_upload_file():
         return SimpleUploadedFile("image.png", output.getvalue())
 
 
+@pytest.fixture
+def large_image_upload_file():
+    img = Image.new("RGBA", (1000, 1000), (255, 55, 255, 1))
+
+    with io.BytesIO() as output:
+        img.save(output, format="PNG")
+        return SimpleUploadedFile("image.png", output.getvalue())
+
+
 @pytest.fixture(autouse=True, scope="function")
 def media_root(settings, tmpdir_factory):
     settings.MEDIA_ROOT = tmpdir_factory.mktemp("media", numbered=True)

tests/test_templatetags.py

@@ -12,6 +12,15 @@
 </picture>
 """
 
+picture_html_large = b"""
+<picture>
+  <source type="image/webp"
+          srcset="/media/testapp/profile/image/800w.webp 800w, /media/testapp/profile/image/100w.webp 100w, /media/testapp/profile/image/900w.webp 900w, /media/testapp/profile/image/200w.webp 200w, /media/testapp/profile/image/1000w.webp 1000w, /media/testapp/profile/image/300w.webp 300w, /media/testapp/profile/image/400w.webp 400w, /media/testapp/profile/image/500w.webp 500w, /media/testapp/profile/image/600w.webp 600w, /media/testapp/profile/image/700w.webp 700w"
+          sizes="(min-width: 0px) and (max-width: 991px) 100vw, (min-width: 992px) and (max-width: 1199px) 33vw, 600px">
+  <img src="/media/testapp/profile/image.png" alt="Spiderman" width="1000" height="1000">
+</picture>
+"""
+
 picture_with_placeholders_html = b"""
 <picture>
   <source type="image/webp"
@@ -31,6 +40,17 @@ def test_picture(client, image_upload_file, settings):
     assert picture_html in response.content
 
 
+@pytest.mark.django_db
+def test_picture__large(client, large_image_upload_file, settings):
+    settings.PICTURES["USE_PLACEHOLDERS"] = False
+    # ensure that USE_THOUSAND_SEPARATOR doesn't break srcset with widths greater than 1000px
+    settings.USE_THOUSAND_SEPARATOR = True
+    profile = Profile.objects.create(name="Spiderman", picture=large_image_upload_file)
+    response = client.get(profile.get_absolute_url())
+    assert response.status_code == 200
+    assert picture_html_large in response.content
+
+
 @pytest.mark.django_db
 def test_picture__placeholder(client, image_upload_file, settings):
     settings.PICTURES["USE_PLACEHOLDERS"] = True