From c1d5a801b4bc66e3866f815be00e11d1b20d3539 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sat, 24 Jun 2023 14:44:36 +0200 Subject: Adding upstream version 5.3.0+dfsg. Signed-off-by: Daniel Baumann --- scss/tests/mixins/_color-modes.test.scss | 69 ++++ .../mixins/_media-query-color-mode-full.test.scss | 8 + scss/tests/mixins/_utilities.test.scss | 393 +++++++++++++++++++++ 3 files changed, 470 insertions(+) create mode 100644 scss/tests/mixins/_color-modes.test.scss create mode 100644 scss/tests/mixins/_media-query-color-mode-full.test.scss create mode 100644 scss/tests/mixins/_utilities.test.scss (limited to 'scss/tests/mixins') diff --git a/scss/tests/mixins/_color-modes.test.scss b/scss/tests/mixins/_color-modes.test.scss new file mode 100644 index 0000000..9ecc628 --- /dev/null +++ b/scss/tests/mixins/_color-modes.test.scss @@ -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; + } +} diff --git a/scss/tests/mixins/_media-query-color-mode-full.test.scss b/scss/tests/mixins/_media-query-color-mode-full.test.scss new file mode 100644 index 0000000..00ed82d --- /dev/null +++ b/scss/tests/mixins/_media-query-color-mode-full.test.scss @@ -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 + } +} diff --git a/scss/tests/mixins/_utilities.test.scss b/scss/tests/mixins/_utilities.test.scss new file mode 100644 index 0000000..63fcae3 --- /dev/null +++ b/scss/tests/mixins/_utilities.test.scss @@ -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; + } + } + } + } +} -- cgit v1.2.3