CSS: Make the reliableTrDimensions support test work with Bootstrap CSS (3.x version)

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-5279
Ref gh-5278
This commit is contained in:
Michał Gołębiowski-Owczarek 2023-07-10 18:26:45 +02:00 committed by GitHub
parent 87467a6f62
commit a288838c6f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 12117 additions and 2 deletions

View File

@ -89,6 +89,10 @@ module.exports = function( grunt ) {
destPrefix: "external" destPrefix: "external"
}, },
files: { 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/core-js.js": "core-js/client/core.min.js", "core-js/core-js.js": "core-js/client/core.min.js",
"core-js/LICENSE.txt": "core-js/LICENSE", "core-js/LICENSE.txt": "core-js/LICENSE",

12071
external/bootstrap/bootstrap.css vendored Normal file

File diff suppressed because it is too large Load Diff

6
external/bootstrap/bootstrap.min.css vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -26,6 +26,7 @@
"devDependencies": { "devDependencies": {
"@babel/core": "7.3.3", "@babel/core": "7.3.3",
"@babel/plugin-transform-for-of": "7.2.0", "@babel/plugin-transform-for-of": "7.2.0",
"bootstrap": "5.3.0",
"colors": "1.4.0", "colors": "1.4.0",
"commitplease": "3.2.0", "commitplease": "3.2.0",
"core-js": "2.6.5", "core-js": "2.6.5",

View File

@ -114,7 +114,7 @@ define( [
trChild = document.createElement( "div" ); trChild = document.createElement( "div" );
table.style.cssText = "position:absolute;left:-11111px;border-collapse:separate"; 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+ // Support: Chrome 86+
// Height set through cssText does not get applied. // Height set through cssText does not get applied.
@ -126,7 +126,7 @@ define( [
// In our bodyBackground.html iframe, // In our bodyBackground.html iframe,
// display for all div elements is set to "inline", // display for all div elements is set to "inline",
// which causes a problem only in Android 8 Chrome 86. // which causes a problem only in Android 8 Chrome 86.
// Ensuring the div is display: block // Ensuring the div is `display: block`
// gets around this issue. // gets around this issue.
trChild.style.display = "block"; trChild.style.display = "block";

View File

@ -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>

View File

@ -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() { ( function() {
var browserKey, expected, var browserKey, expected,
userAgent = window.navigator.userAgent, userAgent = window.navigator.userAgent,