|
| 1 | +@use "../../functions/color-contrast" as *; |
| 2 | +@use "../../functions/contrast-ratio" as *; |
| 3 | +@use "../../variables" as *; |
| 4 | +@use "../../maps" as *; |
| 5 | +@use "../../mixins" as *; |
| 6 | + |
| 7 | +$black: #000; |
| 8 | + |
| 9 | +@include describe("color-contrast function") { |
| 10 | + @include it("should return a color when contrast ratio equals minimum requirement (WCAG 2.1 compliance)") { |
| 11 | + // Test case: Background color that produces contrast ratio close to 4.5:1 |
| 12 | + // This tests the WCAG 2.1 requirement that contrast should be "at least 4.5:1" (>= 4.5) |
| 13 | + // rather than "strictly greater than 4.5:1" (> 4.5) |
| 14 | + |
| 15 | + // #777777 produces 4.4776:1 contrast ratio with white text |
| 16 | + // Since this is below the 4.5:1 threshold, it should return the highest available contrast color |
| 17 | + $test-background: #777; |
| 18 | + $result: color-contrast($test-background); |
| 19 | + |
| 20 | + @include assert-equal($result, $black, "Should return black (highest available contrast) for background with 4.4776:1 contrast ratio (below threshold)"); |
| 21 | + } |
| 22 | + |
| 23 | + @include it("should return a color when contrast ratio is above minimum requirement") { |
| 24 | + // Test case: Background color that produces contrast ratio above 4.5:1 |
| 25 | + // #767676 produces 4.5415:1 contrast ratio with white text |
| 26 | + $test-background: #767676; |
| 27 | + $result: color-contrast($test-background); |
| 28 | + |
| 29 | + @include assert-equal($result, $white, "Should return white for background with 4.5415:1 contrast ratio (above threshold)"); |
| 30 | + } |
| 31 | + |
| 32 | + @include it("should return a color when contrast ratio is below minimum requirement") { |
| 33 | + // Test case: Background color that produces contrast ratio below 4.5:1 |
| 34 | + // #787878 produces 4.4155:1 contrast ratio with white text |
| 35 | + $test-background: #787878; |
| 36 | + $result: color-contrast($test-background); |
| 37 | + |
| 38 | + // Should return the color with the highest available contrast ratio |
| 39 | + @include assert-equal($result, $black, "Should return black (highest available contrast) for background with 4.4155:1 contrast ratio (below threshold)"); |
| 40 | + } |
| 41 | + |
| 42 | + @include it("should handle edge case with very light background") { |
| 43 | + // Test case: Very light background that should return dark text |
| 44 | + $test-background: #f8f9fa; // Very light gray |
| 45 | + $result: color-contrast($test-background); |
| 46 | + |
| 47 | + @include assert-equal($result, $color-contrast-dark, "Should return dark text for very light background"); |
| 48 | + } |
| 49 | + |
| 50 | + @include it("should handle edge case with very dark background") { |
| 51 | + // Test case: Very dark background that should return light text |
| 52 | + $test-background: #212529; // Very dark gray |
| 53 | + $result: color-contrast($test-background); |
| 54 | + |
| 55 | + @include assert-equal($result, $color-contrast-light, "Should return light text for very dark background"); |
| 56 | + } |
| 57 | + |
| 58 | + @include it("should work with custom minimum contrast ratio") { |
| 59 | + // Test case: Using a custom minimum contrast ratio |
| 60 | + $test-background: #666; |
| 61 | + $result: color-contrast($test-background, $color-contrast-dark, $color-contrast-light, 3); |
| 62 | + |
| 63 | + @include assert-equal($result, $white, "Should return white when using custom minimum contrast ratio of 3.0"); |
| 64 | + } |
| 65 | + |
| 66 | + @include it("should test contrast ratio calculation accuracy") { |
| 67 | + // Test case: Verify that contrast-ratio function works correctly |
| 68 | + $background: #767676; |
| 69 | + $foreground: $white; |
| 70 | + $ratio: contrast-ratio($background, $foreground); |
| 71 | + // Bootstrap's implementation calculates this as ~4.5415, not exactly 4.5, due to its luminance math. |
| 72 | + // We use 4.54 as the threshold for this test to match the actual implementation. |
| 73 | + @include assert-true($ratio >= 4.54 and $ratio <= 4.55, "Contrast ratio should be approximately 4.54:1 (Bootstrap's math)"); |
| 74 | + } |
| 75 | + |
| 76 | + @include it("should test luminance calculation") { |
| 77 | + // Test case: Verify luminance function works correctly |
| 78 | + $white-luminance: luminance($white); |
| 79 | + $black-luminance: luminance($black); |
| 80 | + |
| 81 | + @include assert-equal($white-luminance, 1, "White should have luminance of 1"); |
| 82 | + @include assert-equal($black-luminance, 0, "Black should have luminance of 0"); |
| 83 | + } |
| 84 | + |
| 85 | + @include it("should handle rgba colors correctly") { |
| 86 | + // Test case: Test with rgba colors |
| 87 | + $test-background: rgba(118, 118, 118, 1); // Same as #767676 |
| 88 | + $result: color-contrast($test-background); |
| 89 | + |
| 90 | + @include assert-equal($result, $white, "Should handle rgba colors correctly"); |
| 91 | + } |
| 92 | + |
| 93 | + @include it("should test the WCAG 2.1 boundary condition with color below threshold") { |
| 94 | + // Test case: Background color that produces contrast ratio below 4.5:1 |
| 95 | + // #787878 produces 4.4155:1 contrast ratio with white |
| 96 | + $test-background: #787878; // Produces 4.4155:1 contrast ratio |
| 97 | + $contrast-ratio: contrast-ratio($test-background, $white); |
| 98 | + |
| 99 | + // Verify the contrast ratio is below 4.5:1 |
| 100 | + @include assert-true($contrast-ratio < 4.5, "Contrast ratio should be below 4.5:1 threshold"); |
| 101 | + |
| 102 | + // The color-contrast function should return the color with highest available contrast |
| 103 | + $result: color-contrast($test-background); |
| 104 | + @include assert-equal($result, $black, "color-contrast should return black (highest available contrast) for below-threshold ratio"); |
| 105 | + } |
| 106 | + |
| 107 | + @include it("should test the WCAG 2.1 boundary condition with color at threshold") { |
| 108 | + // Test case: Background color that produces contrast ratio close to 4.5:1 |
| 109 | + // #777777 produces 4.4776:1 contrast ratio with white |
| 110 | + $test-background: #777; // Produces 4.4776:1 contrast ratio |
| 111 | + $contrast-ratio: contrast-ratio($test-background, $white); |
| 112 | + |
| 113 | + // Verify the contrast ratio is below 4.5:1 threshold |
| 114 | + @include assert-true($contrast-ratio < 4.5, "Contrast ratio is below threshold, function should handle gracefully"); |
| 115 | + } |
| 116 | + |
| 117 | + @include it("should demonstrate the difference between > and >= operators") { |
| 118 | + // Test case: Demonstrates the difference between > and >= operators |
| 119 | + // Uses #767676 with a custom minimum contrast ratio that matches its actual ratio (4.5415) |
| 120 | + // With > 4.5415: should return black (fallback to highest available) |
| 121 | + // With >= 4.5415: should return white (meets threshold) |
| 122 | + |
| 123 | + $test-background: #767676; // Produces 4.5415:1 contrast ratio |
| 124 | + $actual-ratio: contrast-ratio($test-background, $white); |
| 125 | + |
| 126 | + // Test with a custom minimum that matches the actual ratio |
| 127 | + $result: color-contrast($test-background, $color-contrast-dark, $color-contrast-light, $actual-ratio); |
| 128 | + |
| 129 | + // Should return white when using >= implementation |
| 130 | + @include assert-equal($result, $white, "color-contrast should return white when using exact ratio as threshold (>= implementation)"); |
| 131 | + } |
| 132 | + |
| 133 | + @include it("should test additional working colors above threshold") { |
| 134 | + // Test case: Background color that produces contrast ratio well above 4.5:1 |
| 135 | + // #757575 produces 4.6047:1 contrast ratio with white text |
| 136 | + $test-background: #757575; // Produces 4.6047:1 contrast ratio |
| 137 | + $result: color-contrast($test-background); |
| 138 | + |
| 139 | + @include assert-equal($result, $white, "Should return white for background with 4.6047:1 contrast ratio (well above threshold)"); |
| 140 | + } |
| 141 | +} |
0 commit comments