CSS: Make the reliableTrDimensions support test work with Bootstrap CSS

mgol · web-flow · commit 65b85031fb56 · 2023-07-10T18:33:05.000+02:00
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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,
