]> source.dussan.org Git - jquery.git/commitdiff
projects / jquery.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: e242187)
CSS: Make the reliableTrDimensions support test work with Bootstrap CSS
authorMichał Gołębiowski-Owczarek <m.goleb@gmail.com>
Mon, 10 Jul 2023 16:33:05 +0000 (18:33 +0200)
committerGitHub <noreply@github.com>
Mon, 10 Jul 2023 16:33:05 +0000 (18:33 +0200)
Bootstrap 5 includes the following CSS on the page:

```css
*,
*::before,
*::after {
  box-sizing: border-box;
}
```

That threw our `reliableTrDimensions` support test off. This change fixes the
support test and adds a unit test ensuring support test values on a page
including Bootstrap 5 CSS are the same as on a page without it.

Fixes gh-5270
Closes gh-5278
Ref gh-5279

Gruntfile.js patch | blob | history
package.json patch | blob | history
src/css/support.js patch | blob | history
test/data/support/bootstrap.html [new file with mode: 0644] patch | blob
test/unit/support.js patch | blob | history

diff --git a/Gruntfile.js b/Gruntfile.js
index b5cbc1bf3ff0a90b7108edbb4d596bfd382e2468..11260d350fcf2d807b1a46334e0a05b65b480ce5 100644 (file)
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -89,6 +89,10 @@ module.exports = function( grunt ) {
                                        destPrefix: "external"
                                },
                                files: {
+                                       "bootstrap/bootstrap.css": "bootstrap/dist/css/bootstrap.css",
+                                       "bootstrap/bootstrap.min.css": "bootstrap/dist/css/bootstrap.min.css",
+                                       "bootstrap/bootstrap.min.css.map": "bootstrap/dist/css/bootstrap.min.css.map",
+
                                        "core-js-bundle/core-js-bundle.js": "core-js-bundle/minified.js",
                                        "core-js-bundle/LICENSE": "core-js-bundle/LICENSE",
 
diff --git a/package.json b/package.json
index e02aa9b80a33a15a7d0f1ac7b0b44cfc7d8aa053..aef026591feb93e91559c2d88774fa16004bac3d 100644 (file)
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "@babel/core": "7.10.5",
     "@babel/plugin-transform-for-of": "7.10.4",
     "@swc/core": "1.3.66",
+    "bootstrap": "5.3.0",
     "colors": "1.4.0",
     "commitplease": "3.2.0",
     "core-js-bundle": "3.6.5",
diff --git a/src/css/support.js b/src/css/support.js
index 48f95dc3665b72dc5ef3212c7f695bcfab4c6766..cf9f0cfcd56a57b1d0791e6fced342ad6def011e 100644 (file)
--- a/src/css/support.js
+++ b/src/css/support.js
@@ -25,7 +25,7 @@ support.reliableTrDimensions = function() {
                tr = document.createElement( "tr" );
 
                table.style.cssText = "position:absolute;left:-11111px;border-collapse:separate";
-               tr.style.cssText = "border:1px solid";
+               tr.style.cssText = "box-sizing:content-box;border:1px solid";
 
                // Support: Chrome 86+
                // Height set through cssText does not get applied.
@@ -38,7 +38,7 @@ support.reliableTrDimensions = function() {
                // display for all div elements is set to "inline",
                // which causes a problem only in Android Chrome, but
                // not consistently across all devices.
-               // Ensuring the div is display: block
+               // Ensuring the div is `display: block`
                // gets around this issue.
                div.style.display = "block";
 
diff --git a/test/data/support/bootstrap.html b/test/data/support/bootstrap.html
new file mode 100644 (file)
index 0000000..d8e643a
--- /dev/null
+++ b/test/data/support/bootstrap.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+       <meta charset="utf-8" />
+       <link rel="stylesheet" href="../../../external/bootstrap/bootstrap.min.css" class="stylesheet">
+</head>
+<body>
+<div>
+       <script src="../../jquery.js"></script>
+       <script src="../iframeTest.js"></script>
+       <script src="getComputedSupport.js"></script>
+</div>
+<script>
+       startIframeTest(
+               getComputedStyle( document.body ),
+               getComputedSupport( jQuery.support )
+       );
+</script>
+</body>
+</html>
diff --git a/test/unit/support.js b/test/unit/support.js
index 05e669de3db96a150e569523e80756e96cdc9b4e..f9ae2718efc972b3bf0310796b0ed359efde2d8f 100644 (file)
--- a/test/unit/support.js
+++ b/test/unit/support.js
@@ -54,6 +54,18 @@ testIframe(
        }
 );
 
+testIframe(
+       "Verify correctness of support tests with bootstrap CSS on the page",
+       "support/bootstrap.html",
+       function( assert, jQuery, window, document, bodyStyle, support ) {
+               assert.expect( 2 );
+               assert.strictEqual( bodyStyle.boxSizing, "border-box",
+                       "border-box applied on body by Bootstrap" );
+               assert.deepEqual( jQuery.extend( {}, support ), computedSupport,
+                       "Same support properties" );
+       }
+);
+
 ( function() {
        var expected, browserKey,
                userAgent = window.navigator.userAgent,
jQuery JavaScript Library: https://github.com/jquery/jquery