manuelcillero/pagetop
manuelcillero/pagetop
1
0
Fork 0
Code Issues Pull requests 2 Projects Releases Packages Wiki Activity Actions

🍱 [bootsier] Actualiza bootstrap v5.3.3 a v5.3.8

Browse source
This commit is contained in:
Manuel Cillero 2025-10-12 20:04:35 +02:00
parent a8e323ff09
commit 674d92033c
109 changed files with 536 additions and 173 deletions
Download patch file Download diff file Expand all files Collapse all files

16
extensions/pagetop-bootsier/static/bootstrap/tests/jasmine.js Normal file
View file

@ -0,0 +1,16 @@
/* eslint-disable camelcase */
'use strict'
const path = require('node:path')
module.exports = {
spec_dir: 'scss',
// Make Jasmine look for `.test.scss` files
spec_files: ['**/*.{test,spec}.scss'],
// Compile them into JS scripts running `sass-true`
requires: [path.join(__dirname, 'sass-true/register')],
// Ensure we use `require` so that the require.extensions works
// as `import` completely bypasses it
jsLoader: 'require'
}

7
extensions/pagetop-bootsier/static/bootstrap/tests/mixins/_auto-import-of-variables-dark.test.scss Normal file
View file

@ -0,0 +1,7 @@
// TODO: this file can be removed safely in v6 when `@import "variables-dark"` will be removed at the end of _variables.scss
@import "../../functions";
@import "../../variables";
// Voluntarily not importing _variables-dark.scss
@import "../../maps";
@import "../../mixins";

188
extensions/pagetop-bootsier/static/bootstrap/tests/mixins/_box-shadow.test.scss Normal file
View file

@ -0,0 +1,188 @@
@import "../../functions";
@import "../../variables";
@import "../../mixins";
// Store original value
$original-enable-shadows: $enable-shadows;
// Enable shadows for all tests
$enable-shadows: true !global;
@include describe("box-shadow mixin") {
@include it("handles single none value") {
@include assert() {
@include output() {
.test {
@include box-shadow(none);
}
}
@include expect() {
.test {
box-shadow: none;
}
}
}
}
@include it("handles multiple none values by consolidating them") {
@include assert() {
@include output() {
.test {
@include box-shadow(none, none, none);
}
}
@include expect() {
.test {
box-shadow: none;
}
}
}
}
@include it("handles other single-value keywords (initial, inherit, unset)") {
@include assert() {
@include output() {
.test-initial {
@include box-shadow(initial);
}
.test-inherit {
@include box-shadow(inherit);
}
.test-unset {
@include box-shadow(unset);
}
}
@include expect() {
.test-initial {
box-shadow: initial;
}
.test-inherit {
box-shadow: inherit;
}
.test-unset {
box-shadow: unset;
}
}
}
}
@include it("handles multiple single-value keywords by using the last one") {
@include assert() {
@include output() {
.test {
@include box-shadow(initial, inherit, unset);
}
}
@include expect() {
.test {
box-shadow: unset;
}
}
}
}
@include it("handles regular box-shadow values") {
@include assert() {
@include output() {
.test {
@include box-shadow(0 0 10px rgba(0, 0, 0, .5));
}
}
@include expect() {
.test {
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}
}
}
}
@include it("handles multiple regular box-shadow values") {
@include assert() {
@include output() {
.test {
@include box-shadow(0 0 10px rgba(0, 0, 0, .5), 0 0 20px rgba(0, 0, 0, .3));
}
}
@include expect() {
.test {
box-shadow: 0 0 10px rgba(0, 0, 0, .5), 0 0 20px rgba(0, 0, 0, .3);
}
}
}
}
@include it("handles null values by ignoring them") {
@include assert() {
@include output() {
.test {
@include box-shadow(null, 0 0 10px rgba(0, 0, 0, .5), null);
}
}
@include expect() {
.test {
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}
}
}
}
@include it("handles mixed values with keywords and regular shadows") {
@include assert() {
@include output() {
.test {
@include box-shadow(none, 0 0 10px rgba(0, 0, 0, .5));
}
}
@include expect() {
.test {
box-shadow: none;
}
}
}
}
@include it("handles empty input") {
@include assert() {
@include output() {
.test {
@include box-shadow();
}
}
@include expect() {
.test { // stylelint-disable-line block-no-empty
}
}
}
}
@include it("respects $enable-shadows variable") {
$enable-shadows: false !global;
@include assert() {
@include output() {
.test {
@include box-shadow(0 0 10px rgba(0, 0, 0, .5));
}
}
@include expect() {
.test { // stylelint-disable-line block-no-empty
}
}
}
$enable-shadows: true !global;
}
}
// Restore original value
$enable-shadows: $original-enable-shadows !global;

139
extensions/pagetop-bootsier/static/bootstrap/tests/mixins/_color-contrast.test.scss Normal file
View file

@ -0,0 +1,139 @@
@import "../../functions";
@import "../../variables";
@import "../../variables-dark";
@import "../../maps";
@import "../../mixins";
@include describe("color-contrast function") {
@include it("should return a color when contrast ratio equals minimum requirement (WCAG 2.1 compliance)") {
// Test case: Background color that produces contrast ratio close to 4.5:1
// This tests the WCAG 2.1 requirement that contrast should be "at least 4.5:1" (>= 4.5)
// rather than "strictly greater than 4.5:1" (> 4.5)
// #777777 produces 4.4776:1 contrast ratio with white text
// Since this is below the 4.5:1 threshold, it should return the highest available contrast color
$test-background: #777;
$result: color-contrast($test-background);
@include assert-equal($result, $black, "Should return black (highest available contrast) for background with 4.4776:1 contrast ratio (below threshold)");
}
@include it("should return a color when contrast ratio is above minimum requirement") {
// Test case: Background color that produces contrast ratio above 4.5:1
// #767676 produces 4.5415:1 contrast ratio with white text
$test-background: #767676;
$result: color-contrast($test-background);
@include assert-equal($result, $white, "Should return white for background with 4.5415:1 contrast ratio (above threshold)");
}
@include it("should return a color when contrast ratio is below minimum requirement") {
// Test case: Background color that produces contrast ratio below 4.5:1
// #787878 produces 4.4155:1 contrast ratio with white text
$test-background: #787878;
$result: color-contrast($test-background);
// Should return the color with the highest available contrast ratio
@include assert-equal($result, $black, "Should return black (highest available contrast) for background with 4.4155:1 contrast ratio (below threshold)");
}
@include it("should handle edge case with very light background") {
// Test case: Very light background that should return dark text
$test-background: #f8f9fa; // Very light gray
$result: color-contrast($test-background);
@include assert-equal($result, $color-contrast-dark, "Should return dark text for very light background");
}
@include it("should handle edge case with very dark background") {
// Test case: Very dark background that should return light text
$test-background: #212529; // Very dark gray
$result: color-contrast($test-background);
@include assert-equal($result, $color-contrast-light, "Should return light text for very dark background");
}
@include it("should work with custom minimum contrast ratio") {
// Test case: Using a custom minimum contrast ratio
$test-background: #666;
$result: color-contrast($test-background, $color-contrast-dark, $color-contrast-light, 3);
@include assert-equal($result, $white, "Should return white when using custom minimum contrast ratio of 3.0");
}
@include it("should test contrast ratio calculation accuracy") {
// Test case: Verify that contrast-ratio function works correctly
$background: #767676;
$foreground: $white;
$ratio: contrast-ratio($background, $foreground);
// Bootstrap's implementation calculates this as ~4.5415, not exactly 4.5, due to its luminance math.
// We use 4.54 as the threshold for this test to match the actual implementation.
@include assert-true($ratio >= 4.54 and $ratio <= 4.55, "Contrast ratio should be approximately 4.54:1 (Bootstrap's math)");
}
@include it("should test luminance calculation") {
// Test case: Verify luminance function works correctly
$white-luminance: luminance($white);
$black-luminance: luminance($black);
@include assert-equal($white-luminance, 1, "White should have luminance of 1");
@include assert-equal($black-luminance, 0, "Black should have luminance of 0");
}
@include it("should handle rgba colors correctly") {
// Test case: Test with rgba colors
$test-background: rgba(118, 118, 118, 1); // Same as #767676
$result: color-contrast($test-background);
@include assert-equal($result, $white, "Should handle rgba colors correctly");
}
@include it("should test the WCAG 2.1 boundary condition with color below threshold") {
// Test case: Background color that produces contrast ratio below 4.5:1
// #787878 produces 4.4155:1 contrast ratio with white
$test-background: #787878; // Produces 4.4155:1 contrast ratio
$contrast-ratio: contrast-ratio($test-background, $white);
// Verify the contrast ratio is below 4.5:1
@include assert-true($contrast-ratio < 4.5, "Contrast ratio should be below 4.5:1 threshold");
// The color-contrast function should return the color with highest available contrast
$result: color-contrast($test-background);
@include assert-equal($result, $black, "color-contrast should return black (highest available contrast) for below-threshold ratio");
}
@include it("should test the WCAG 2.1 boundary condition with color at threshold") {
// Test case: Background color that produces contrast ratio close to 4.5:1
// #777777 produces 4.4776:1 contrast ratio with white
$test-background: #777; // Produces 4.4776:1 contrast ratio
$contrast-ratio: contrast-ratio($test-background, $white);
// Verify the contrast ratio is below 4.5:1 threshold
@include assert-true($contrast-ratio < 4.5, "Contrast ratio is below threshold, function should handle gracefully");
}
@include it("should demonstrate the difference between > and >= operators") {
// Test case: Demonstrates the difference between > and >= operators
// Uses #767676 with a custom minimum contrast ratio that matches its actual ratio (4.5415)
// With > 4.5415: should return black (fallback to highest available)
// With >= 4.5415: should return white (meets threshold)
$test-background: #767676; // Produces 4.5415:1 contrast ratio
$actual-ratio: contrast-ratio($test-background, $white);
// Test with a custom minimum that matches the actual ratio
$result: color-contrast($test-background, $color-contrast-dark, $color-contrast-light, $actual-ratio);
// Should return white when using >= implementation
@include assert-equal($result, $white, "color-contrast should return white when using exact ratio as threshold (>= implementation)");
}
@include it("should test additional working colors above threshold") {
// Test case: Background color that produces contrast ratio well above 4.5:1
// #757575 produces 4.6047:1 contrast ratio with white text
$test-background: #757575; // Produces 4.6047:1 contrast ratio
$result: color-contrast($test-background);
@include assert-equal($result, $white, "Should return white for background with 4.6047:1 contrast ratio (well above threshold)");
}
}

69
extensions/pagetop-bootsier/static/bootstrap/tests/mixins/_color-modes.test.scss Normal file
View file

@ -0,0 +1,69 @@
// stylelint-disable selector-attribute-quotes
@import "../../functions";
@import "../../variables";
@import "../../variables-dark";
@import "../../maps";
@import "../../mixins";
@include describe("global $color-mode-type: data") {
@include it("generates data attribute selectors for dark mode") {
@include assert() {
@include output() {
@include color-mode(dark) {
.element {
color: var(--bs-primary-text-emphasis);
background-color: var(--bs-primary-bg-subtle);
}
}
@include color-mode(dark, true) {
--custom-color: #{mix($indigo, $blue, 50%)};
}
}
@include expect() {
[data-bs-theme=dark] .element {
color: var(--bs-primary-text-emphasis);
background-color: var(--bs-primary-bg-subtle);
}
[data-bs-theme=dark] {
--custom-color: #3a3ff8;
}
}
}
}
}
@include describe("global $color-mode-type: media-query") {
@include it("generates media queries for dark mode") {
$color-mode-type: media-query !global;
@include assert() {
@include output() {
@include color-mode(dark) {
.element {
color: var(--bs-primary-text-emphasis);
background-color: var(--bs-primary-bg-subtle);
}
}
@include color-mode(dark, true) {
--custom-color: #{mix($indigo, $blue, 50%)};
}
}
@include expect() {
@media (prefers-color-scheme: dark) {
.element {
color: var(--bs-primary-text-emphasis);
background-color: var(--bs-primary-bg-subtle);
}
}
@media (prefers-color-scheme: dark) {
:root {
--custom-color: #3a3ff8;
}
}
}
}
$color-mode-type: data !global;
}
}

8
extensions/pagetop-bootsier/static/bootstrap/tests/mixins/_media-query-color-mode-full.test.scss Normal file
View file

@ -0,0 +1,8 @@
$color-mode-type: media-query;
@import "../../bootstrap";
@include describe("global $color-mode-type: media-query") {
@include it("compiles entirely Bootstrap CSS with media-query color mode") { // stylelint-disable-line block-no-empty
}
}

393
extensions/pagetop-bootsier/static/bootstrap/tests/mixins/_utilities.test.scss Normal file
View file

@ -0,0 +1,393 @@
$prefix: bs-;
$enable-important-utilities: false;
// Important: Do not import rfs to check that the mixin just calls the appropriate functions from it
@import "../../mixins/utilities";
@mixin test-generate-utility($params...) {
@include assert() {
@include output() {
@include generate-utility($params...);
}
@include expect() {
@content;
}
}
}
@include describe(generate-utility) {
@include it("generates a utility class for each value") {
@include test-generate-utility(
(
property: "padding",
values: (small: .5rem, large: 2rem)
)
) {
.padding-small {
padding: .5rem;
}
.padding-large {
padding: 2rem;
}
}
}
@include describe("global $enable-important-utilities: true") {
@include it("sets !important") {
$enable-important-utilities: true !global;
@include test-generate-utility(
(
property: "padding",
values: (small: .5rem, large: 2rem)
)
) {
.padding-small {
padding: .5rem !important;
}
.padding-large {
padding: 2rem !important;
}
}
$enable-important-utilities: false !global;
}
}
@include describe("$utility") {
@include describe("values") {
@include it("supports null keys") {
@include test-generate-utility(
(
property: "padding",
values: (null: 1rem, small: .5rem, large: 2rem)
),
) {
.padding {
padding: 1rem;
}
.padding-small {
padding: .5rem;
}
.padding-large {
padding: 2rem;
}
}
}
@include it("ignores null values") {
@include test-generate-utility(
(
property: "padding",
values: (small: null, large: 2rem)
)
) {
.padding-large {
padding: 2rem;
}
}
}
@include it("supports lists") {
@include test-generate-utility(
(
property: "padding",
values: 1rem 2rem
)
) {
.padding-1rem {
padding: 1rem;
}
.padding-2rem {
padding: 2rem;
}
}
}
@include it("supports single values") {
@include test-generate-utility(
(
property: padding,
values: 1rem
)
) {
.padding-1rem {
padding: 1rem;
}
}
}
}
@include describe("class & property") {
@include it("adds each property to the declaration") {
@include test-generate-utility(
(
class: padding-x,
property: padding-inline-start padding-inline-end,
values: 1rem
)
) {
.padding-x-1rem {
padding-inline-start: 1rem;
padding-inline-end: 1rem;
}
}
}
@include it("uses the first property as class name") {
@include test-generate-utility(
(
property: padding-inline-start padding-inline-end,
values: 1rem
)
) {
.padding-inline-start-1rem {
padding-inline-start: 1rem;
padding-inline-end: 1rem;
}
}
}
@include it("supports a null class to create classes straight from the values") {
@include test-generate-utility(
(
property: visibility,
class: null,
values: (
visible: visible,
invisible: hidden,
)
)
) {
.visible {
visibility: visible;
}
.invisible {
visibility: hidden;
}
}
}
}
@include describe("state") {
@include it("Generates selectors for each states") {
@include test-generate-utility(
(
property: padding,
values: 1rem,
state: hover focus,
)
) {
.padding-1rem {
padding: 1rem;
}
.padding-1rem-hover:hover {
padding: 1rem;
}
.padding-1rem-focus:focus {
padding: 1rem;
}
}
}
}
@include describe("css-var"){
@include it("sets a CSS variable instead of the property") {
@include test-generate-utility(
(
property: padding,
css-variable-name: padding,
css-var: true,
values: 1rem 2rem
)
) {
.padding-1rem {
--bs-padding: 1rem;
}
.padding-2rem {
--bs-padding: 2rem;
}
}
}
@include it("defaults to class") {
@include test-generate-utility(
(
property: padding,
class: padding,
css-var: true,
values: 1rem 2rem
)
) {
.padding-1rem {
--bs-padding: 1rem;
}
.padding-2rem {
--bs-padding: 2rem;
}
}
}
}
@include describe("local-vars") {
@include it("generates the listed variables") {
@include test-generate-utility(
(
property: color,
class: desaturated-color,
local-vars: (
color-opacity: 1,
color-saturation: .25
),
values: (
blue: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity))
)
)
) {
.desaturated-color-blue {
--bs-color-opacity: 1;
// Sass compilation will put a leading zero so we want to keep that one
// stylelint-disable-next-line @stylistic/number-leading-zero
--bs-color-saturation: 0.25;
color: hsla(192deg, var(--bs-color-saturation), 0, var(--bs-color-opacity));
}
}
}
}
@include describe("css-var & state") {
@include it("Generates a rule with for each state with a CSS variable") {
@include test-generate-utility(
(
property: padding,
css-var: true,
css-variable-name: padding,
values: 1rem,
state: hover focus,
)
) {
.padding-1rem {
--bs-padding: 1rem;
}
.padding-1rem-hover:hover {
--bs-padding: 1rem;
}
.padding-1rem-focus:focus {
--bs-padding: 1rem;
}
}
}
}
@include describe("rtl") {
@include it("sets up RTLCSS for removal when false") {
@include test-generate-utility(
(
property: padding,
values: 1rem,
rtl: false
)
) {
/* rtl:begin:remove */
.padding-1rem {
padding: 1rem;
}
/* rtl:end:remove */
}
}
}
@include describe("rfs") {
@include it("sets the fluid value when not inside media query") {
@include test-generate-utility(
(
property: padding,
values: 1rem,
rfs: true
)
) {
.padding-1rem {
padding: rfs-fluid-value(1rem);
}
}
}
@include it("sets the value when inside the media query") {
@include test-generate-utility(
(
property: padding,
values: 1rem,
rfs: true
),
$is-rfs-media-query: true
) {
.padding-1rem {
padding: rfs-value(1rem);
}
}
}
}
}
@include describe("$infix") {
@include it("inserts the given infix") {
@include test-generate-utility(
(
property: "padding",
values: (null: 1rem, small: .5rem, large: 2rem)
),
$infix: -sm
) {
.padding-sm {
padding: 1rem;
}
.padding-sm-small {
padding: .5rem;
}
.padding-sm-large {
padding: 2rem;
}
}
}
@include it("strips leading - if class is null") {
@include test-generate-utility(
(
property: visibility,
class: null,
values: (
visible: visible,
invisible: hidden,
)
),
-sm
) {
.sm-visible {
visibility: visible;
}
.sm-invisible {
visibility: hidden;
}
}
}
}
}

14
extensions/pagetop-bootsier/static/bootstrap/tests/sass-true/register.js Normal file
View file

@ -0,0 +1,14 @@
'use strict'
const path = require('node:path')
const runnerPath = path.join(__dirname, 'runner').replace(/\\/g, '/')
require.extensions['.scss'] = (module, filename) => {
const normalizedFilename = filename.replace(/\\/g, '/')
return module._compile(`
const runner = require('${runnerPath}')
runner('${normalizedFilename}', { describe, it })
`, filename)
}

17
extensions/pagetop-bootsier/static/bootstrap/tests/sass-true/runner.js Normal file
View file

@ -0,0 +1,17 @@
'use strict'
const fs = require('node:fs')
const path = require('node:path')
const { runSass } = require('sass-true')
module.exports = (filename, { describe, it }) => {
const data = fs.readFileSync(filename, 'utf8')
const TRUE_SETUP = '$true-terminal-output: false; @import "true";'
const sassString = TRUE_SETUP + data
runSass(
{ describe, it, sourceType: 'string' },
sassString,
{ loadPaths: [path.dirname(filename)] }
)
}

75
extensions/pagetop-bootsier/static/bootstrap/tests/utilities/_api.test.scss Normal file
View file

@ -0,0 +1,75 @@
@import "../../functions";
@import "../../variables";
@import "../../variables-dark";
@import "../../maps";
@import "../../mixins";
$utilities: ();
@include describe("utilities/api") {
@include it("generates utilities for each breakpoints") {
$utilities: (
margin: (
property: margin,
values: auto
),
padding: (
property: padding,
responsive: true,
values: 1rem
),
font-size: (
property: font-size,
values: (large: 1.25rem),
print: true
)
) !global;
$grid-breakpoints: (
xs: 0,
sm: 333px,
md: 666px
) !global;
@include assert() {
@include output() {
@import "../../utilities/api";
}
@include expect() {
// margin is not set to responsive
.margin-auto {
margin: auto !important;
}
// padding is, though
.padding-1rem {
padding: 1rem !important;
}
.font-size-large {
font-size: 1.25rem !important;
}
@media (min-width: 333px) {
.padding-sm-1rem {
padding: 1rem !important;
}
}
@media (min-width: 666px) {
.padding-md-1rem {
padding: 1rem !important;
}
}
@media print {
.font-size-print-large {
font-size: 1.25rem !important;
}
}
}
}
}
}