Variable transition durations (#25662)

js/tests/unit/util.js

@@ -42,6 +42,50 @@ $(function () {
     assert.strictEqual(typeof Util.isElement({}) === 'undefined', true)
   })
 
+  QUnit.test('Util.getTransitionDurationFromElement should accept transition durations in milliseconds', function (assert) {
+    assert.expect(1)
+    var $div = $('<div style="transition: all 300ms ease-out;"></div>').appendTo($('#qunit-fixture'))
+
+    assert.strictEqual(Util.getTransitionDurationFromElement($div), 300)
+  })
+
+  QUnit.test('Util.getTransitionDurationFromElement should accept transition durations in seconds', function (assert) {
+    assert.expect(1)
+    var $div = $('<div style="transition: all .4s ease-out;"></div>').appendTo($('#qunit-fixture'))
+
+    assert.strictEqual(Util.getTransitionDurationFromElement($div), 400)
+  })
+
+  QUnit.test('Util.getTransitionDurationFromElement should get the first transition duration if multiple transition durations are defined', function (assert) {
+    assert.expect(1)
+    var $div = $('<div style="transition: transform .3s ease-out, opacity .2s;"></div>').appendTo($('#qunit-fixture'))
+
+    assert.strictEqual(Util.getTransitionDurationFromElement($div), 300)
+  })
+
+  QUnit.test('Util.getTransitionDurationFromElement should return 0 if transition duration is not defined', function (assert) {
+    assert.expect(1)
+    var $div = $('<div></div>').appendTo($('#qunit-fixture'))
+
+    assert.strictEqual(Util.getTransitionDurationFromElement($div), 0)
+  })
+
+  QUnit.test('Util.getTransitionDurationFromElement should return 0 if element is not found in DOM', function (assert) {
+    assert.expect(1)
+    var $div = $('#fake-id')
+
+    assert.strictEqual(Util.getTransitionDurationFromElement($div), 0)
+  })
+
+  QUnit.test('Util.getTransitionDurationFromElement should properly handle inherited transition durations', function (assert) {
+    assert.expect(1)
+    var $parent = $('<div style="transition-duration: 5s;"></div>')
+    var $child = $('<div style="transition-duration: inherit;"></div>')
+    $('#qunit-fixture').append($parent.append($child))
+
+    assert.strictEqual(Util.getTransitionDurationFromElement($child), 5000)
+  })
+
   QUnit.test('Util.getUID should generate a new id uniq', function (assert) {
     assert.expect(2)
     var id = Util.getUID('test')

js/tests/visual/alert.html

@@ -42,6 +42,13 @@
           <button type="button" class="btn btn-primary">Or do this</button>
         </p>
       </div>
+
+      <div class="alert alert-warning alert-dismissible fade show" role="alert" style="transition-duration: 5s;">
+        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+        This alert will take 5 seconds to fade out.
+      </div>
     </div>
 
     <script src="../../../assets/js/vendor/jquery-slim.min.js"></script>

js/tests/visual/modal.html

@@ -147,6 +147,26 @@
         </div>
       </div>
 
+      <div class="modal fade" id="slowModal" tabindex="-1" role="dialog" aria-labelledby="slowModalLabel" aria-hidden="true" style="transition-duration: 5s;">
+        <div class="modal-dialog" role="document" style="transition-duration: inherit;">
+          <div class="modal-content">
+            <div class="modal-header">
+              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                <span aria-hidden="true">&times;</span>
+              </button>
+              <h4 class="modal-title" id="slowModalLabel">Lorem slowly</h4>
+            </div>
+            <div class="modal-body">
+              <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue.</p>
+            </div>
+            <div class="modal-footer">
+              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+              <button type="button" class="btn btn-primary">Save changes</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
         Launch demo modal
       </button>
@@ -164,6 +184,12 @@
 
       <br><br>
 
+      <button type="button" class="btn btn-secondary btn-lg" data-toggle="modal" data-target="#slowModal">
+        Launch modal with slow transition
+      </button>
+
+      <br><br>
+
       <div class="bg-dark text-white p-2" id="tall" style="display: none;">
         Tall body content to force the page to have a scrollbar.
       </div>
@@ -225,6 +251,17 @@
           })
           .modal('show')
         })
+
+        // Test transition duration
+        var t0, t1;
+
+        $('#slowModal').on('shown.bs.modal', function(){
+          t1 = performance.now()
+          console.log('transition-duration took ' + (t1 - t0) + 'ms.')
+        }).on('show.bs.modal', function(){
+          t0 = performance.now()
+        })
+
       })
     </script>
   </body>