Refs #25706 -- Removed inline CSS in the openlayers widget template.

6 files changed, 23 insertions, 14 deletions

diff --git a/django/contrib/gis/static/gis/css/ol3.css b/django/contrib/gis/static/gis/css/ol3.css
index 9c8a9f5e06..ac8f0a8ec2 100644
--- a/django/contrib/gis/static/gis/css/ol3.css
+++ b/django/contrib/gis/static/gis/css/ol3.css
@@ -1,3 +1,11 @@
+.dj_map_wrapper {
+    position: relative;
+    float: left;
+}
+html[dir="rtl"] .dj_map_wrapper {
+    float: right;
+}
+
 .switch-type {
     background-repeat: no-repeat;
     cursor: pointer;
diff --git a/django/contrib/gis/static/gis/js/OLMapWidget.js b/django/contrib/gis/static/gis/js/OLMapWidget.js
index 9dea7d05aa..839c8cd7cc 100644
--- a/django/contrib/gis/static/gis/js/OLMapWidget.js
+++ b/django/contrib/gis/static/gis/js/OLMapWidget.js
@@ -61,6 +61,9 @@ class MapWidget {
             this.options.base_layer = new ol.layer.Tile({source: new ol.source.OSM()});
         }
 
+        const mapContainer = document.getElementById(this.options.map_id);
+        mapContainer.style.width = `${mapContainer.dataset.width}px`;
+        mapContainer.style.height = `${mapContainer.dataset.height}px`;
         this.map = this.createMap();
         this.featureCollection = new ol.Collection();
         this.featureOverlay = new ol.layer.Vector({
diff --git a/django/contrib/gis/templates/gis/openlayers.html b/django/contrib/gis/templates/gis/openlayers.html
index fa336469b8..bde2650ca2 100644
--- a/django/contrib/gis/templates/gis/openlayers.html
+++ b/django/contrib/gis/templates/gis/openlayers.html
@@ -1,17 +1,11 @@
 {% load i18n l10n %}
-<style type="text/css">{% block map_css %}{% get_current_language_bidi as LANGUAGE_BIDI %}
-    #{{ id }}_map { width: {{ map_width }}px; height: {{ map_height }}px; }
-    #{{ id }}_map .aligned label { float: inherit; }
-    #{{ id }}_div_map { position: relative; vertical-align: top; float: {{ LANGUAGE_BIDI|yesno:"right,left" }}; }
-    {% if not display_raw %}#{{ id }} { display: none; }{% endif %}
-    {% endblock %}
-</style>
 
-<div id="{{ id }}_div_map">
-    <div id="{{ id }}_map"></div>
+<div id="{{ id }}_div_map" class="dj_map_wrapper">
+    <div id="{{ id }}_map" class="dj_map" data-width="{{ map_width }}" data-height="{{ map_height }}"></div>
     {% if not disabled %}<span class="clear_features"><a href="">{% translate "Delete all Features" %}</a></span>{% endif %}
     {% if display_raw %}<p>{% translate "Debugging window (serialized value)" %}</p>{% endif %}
-    <textarea id="{{ id }}" class="vSerializedField required" cols="150" rows="10" name="{{ name }}">{{ serialized }}</textarea>
+    <textarea id="{{ id }}" class="vSerializedField required" cols="150" rows="10" name="{{ name }}"
+              {% if not display_raw %} hidden{% endif %}>{{ serialized }}</textarea>
     <script>
         {% block base_layer %}
             var base_layer = new ol.layer.Tile({
diff --git a/docs/releases/4.2.txt b/docs/releases/4.2.txt
index 3a9a99a3c2..452aebdd6b 100644
--- a/docs/releases/4.2.txt
+++ b/docs/releases/4.2.txt
@@ -63,6 +63,10 @@ Minor features
 * The :class:`~django.contrib.gis.geoip2.GeoIP2` class now supports  ``.mmdb``
   files downloaded from DB-IP.
 
+* The OpenLayers template widget no longer includes inline CSS (which also
+  removes the former ``map_css`` block) to better comply with a strict Content
+  Security Policy.
+
 :mod:`django.contrib.messages`
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
diff --git a/tests/gis_tests/geoadmin/tests.py b/tests/gis_tests/geoadmin/tests.py
index 54b7073d69..a7e5700b49 100644
--- a/tests/gis_tests/geoadmin/tests.py
+++ b/tests/gis_tests/geoadmin/tests.py
@@ -16,7 +16,7 @@ class GeoAdminTest(SimpleTestCase):
                 output = str(form["point"])
         self.assertInHTML(
             '<textarea id="id_point" class="vSerializedField required" cols="150"'
-            ' rows="10" name="point"></textarea>',
+            ' rows="10" name="point" hidden></textarea>',
             output,
         )
 
@@ -27,7 +27,7 @@ class GeoAdminTest(SimpleTestCase):
             output = str(form["point"])
         self.assertInHTML(
             '<textarea id="id_point" class="vSerializedField required" cols="150"'
-            ' rows="10" name="point"></textarea>',
+            ' rows="10" name="point" hidden></textarea>',
             output,
         )
         self.assertEqual(len(cm.records), 1)
diff --git a/tests/gis_tests/test_geoforms.py b/tests/gis_tests/test_geoforms.py
index cef88d7115..d1bc43b9da 100644
--- a/tests/gis_tests/test_geoforms.py
+++ b/tests/gis_tests/test_geoforms.py
@@ -166,12 +166,12 @@ class GeometryFieldTest(SimpleTestCase):
 
         self.assertInHTML(
             '<textarea id="id_pt2" class="vSerializedField required" cols="150"'
-            ' rows="10" name="pt2"></textarea>',
+            ' rows="10" name="pt2" hidden></textarea>',
             output,
         )
         self.assertInHTML(
             '<textarea id="id_pt3" class="vSerializedField required" cols="150"'
-            ' rows="10" name="pt3"></textarea>',
+            ' rows="10" name="pt3" hidden></textarea>',
             output,
         )
         # Only the invalid PNT(0) triggers an error log entry.