1
0
mirror of https://github.com/badges/shields.git synced 2025-04-18 19:44:04 +03:00

fix incorrect colorsForBackground detection (#6939)

* pass an actual color to colorsForBackground (closes #6936)

* improve test coverage for non-default font color
This commit is contained in:
chris48s 2021-08-22 16:59:25 +01:00 committed by GitHub
parent e8c78d55b3
commit 779c1ffaad
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 475 additions and 124 deletions

View File

@ -402,6 +402,126 @@ exports['The badge generator "flat" template badge generation should match snaps
`
exports['The badge generator "flat" template badge generation should match snapshots: black text when the label color is light 1'] = `
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="90"
height="20"
role="img"
aria-label="cactus: grown"
>
<title>cactus: grown</title>
<linearGradient id="s" x2="0" y2="100%">
<stop offset="0" stop-color="#bbb" stop-opacity=".1" />
<stop offset="1" stop-opacity=".1" />
</linearGradient>
<clipPath id="r"><rect width="90" height="20" rx="3" fill="#fff" /></clipPath>
<g clip-path="url(#r)">
<rect width="45" height="20" fill="#f3f3f3" />
<rect x="45" width="45" height="20" fill="#000" />
<rect width="90" height="20" fill="url(#s)" />
</g>
<g
fill="#fff"
text-anchor="middle"
font-family="Verdana,Geneva,DejaVu Sans,sans-serif"
text-rendering="geometricPrecision"
font-size="110"
>
<text
aria-hidden="true"
x="235"
y="150"
fill="#ccc"
fill-opacity=".3"
transform="scale(.1)"
textLength="350"
>
cactus
</text>
<text x="235" y="140" transform="scale(.1)" fill="#333" textLength="350">
cactus
</text>
<text
aria-hidden="true"
x="665"
y="150"
fill="#010101"
fill-opacity=".3"
transform="scale(.1)"
textLength="350"
>
grown
</text>
<text x="665" y="140" transform="scale(.1)" fill="#fff" textLength="350">
grown
</text>
</g>
</svg>
`
exports['The badge generator "flat" template badge generation should match snapshots: black text when the message color is light 1'] = `
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="90"
height="20"
role="img"
aria-label="cactus: grown"
>
<title>cactus: grown</title>
<linearGradient id="s" x2="0" y2="100%">
<stop offset="0" stop-color="#bbb" stop-opacity=".1" />
<stop offset="1" stop-opacity=".1" />
</linearGradient>
<clipPath id="r"><rect width="90" height="20" rx="3" fill="#fff" /></clipPath>
<g clip-path="url(#r)">
<rect width="45" height="20" fill="#000" />
<rect x="45" width="45" height="20" fill="#e2ffe1" />
<rect width="90" height="20" fill="url(#s)" />
</g>
<g
fill="#fff"
text-anchor="middle"
font-family="Verdana,Geneva,DejaVu Sans,sans-serif"
text-rendering="geometricPrecision"
font-size="110"
>
<text
aria-hidden="true"
x="235"
y="150"
fill="#010101"
fill-opacity=".3"
transform="scale(.1)"
textLength="350"
>
cactus
</text>
<text x="235" y="140" transform="scale(.1)" fill="#fff" textLength="350">
cactus
</text>
<text
aria-hidden="true"
x="665"
y="150"
fill="#ccc"
fill-opacity=".3"
transform="scale(.1)"
textLength="350"
>
grown
</text>
<text x="665" y="140" transform="scale(.1)" fill="#333" textLength="350">
grown
</text>
</g>
</svg>
`
exports['The badge generator "flat-square" template badge generation should match snapshots: message/label, no logo 1'] = `
<svg
xmlns="http://www.w3.org/2000/svg"
@ -609,6 +729,70 @@ exports['The badge generator "flat-square" template badge generation should matc
`
exports['The badge generator "flat-square" template badge generation should match snapshots: black text when the label color is light 1'] = `
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="90"
height="20"
role="img"
aria-label="cactus: grown"
>
<title>cactus: grown</title>
<g shape-rendering="crispEdges">
<rect width="45" height="20" fill="#f3f3f3" />
<rect x="45" width="45" height="20" fill="#000" />
</g>
<g
fill="#fff"
text-anchor="middle"
font-family="Verdana,Geneva,DejaVu Sans,sans-serif"
text-rendering="geometricPrecision"
font-size="110"
>
<text x="235" y="140" transform="scale(.1)" fill="#333" textLength="350">
cactus
</text>
<text x="665" y="140" transform="scale(.1)" fill="#fff" textLength="350">
grown
</text>
</g>
</svg>
`
exports['The badge generator "flat-square" template badge generation should match snapshots: black text when the message color is light 1'] = `
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="90"
height="20"
role="img"
aria-label="cactus: grown"
>
<title>cactus: grown</title>
<g shape-rendering="crispEdges">
<rect width="45" height="20" fill="#000" />
<rect x="45" width="45" height="20" fill="#e2ffe1" />
</g>
<g
fill="#fff"
text-anchor="middle"
font-family="Verdana,Geneva,DejaVu Sans,sans-serif"
text-rendering="geometricPrecision"
font-size="110"
>
<text x="235" y="140" transform="scale(.1)" fill="#fff" textLength="350">
cactus
</text>
<text x="665" y="140" transform="scale(.1)" fill="#333" textLength="350">
grown
</text>
</g>
</svg>
`
exports['The badge generator "plastic" template badge generation should match snapshots: message/label, no logo 1'] = `
<svg
xmlns="http://www.w3.org/2000/svg"
@ -965,6 +1149,130 @@ exports['The badge generator "plastic" template badge generation should match sn
`
exports['The badge generator "plastic" template badge generation should match snapshots: black text when the label color is light 1'] = `
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="90"
height="18"
role="img"
aria-label="cactus: grown"
>
<title>cactus: grown</title>
<linearGradient id="s" x2="0" y2="100%">
<stop offset="0" stop-color="#fff" stop-opacity=".7" />
<stop offset=".1" stop-color="#aaa" stop-opacity=".1" />
<stop offset=".9" stop-color="#000" stop-opacity=".3" />
<stop offset="1" stop-color="#000" stop-opacity=".5" />
</linearGradient>
<clipPath id="r"><rect width="90" height="18" rx="4" fill="#fff" /></clipPath>
<g clip-path="url(#r)">
<rect width="45" height="18" fill="#f3f3f3" />
<rect x="45" width="45" height="18" fill="#000" />
<rect width="90" height="18" fill="url(#s)" />
</g>
<g
fill="#fff"
text-anchor="middle"
font-family="Verdana,Geneva,DejaVu Sans,sans-serif"
text-rendering="geometricPrecision"
font-size="110"
>
<text
aria-hidden="true"
x="235"
y="140"
fill="#ccc"
fill-opacity=".3"
transform="scale(.1)"
textLength="350"
>
cactus
</text>
<text x="235" y="130" transform="scale(.1)" fill="#333" textLength="350">
cactus
</text>
<text
aria-hidden="true"
x="665"
y="140"
fill="#010101"
fill-opacity=".3"
transform="scale(.1)"
textLength="350"
>
grown
</text>
<text x="665" y="130" transform="scale(.1)" fill="#fff" textLength="350">
grown
</text>
</g>
</svg>
`
exports['The badge generator "plastic" template badge generation should match snapshots: black text when the message color is light 1'] = `
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="90"
height="18"
role="img"
aria-label="cactus: grown"
>
<title>cactus: grown</title>
<linearGradient id="s" x2="0" y2="100%">
<stop offset="0" stop-color="#fff" stop-opacity=".7" />
<stop offset=".1" stop-color="#aaa" stop-opacity=".1" />
<stop offset=".9" stop-color="#000" stop-opacity=".3" />
<stop offset="1" stop-color="#000" stop-opacity=".5" />
</linearGradient>
<clipPath id="r"><rect width="90" height="18" rx="4" fill="#fff" /></clipPath>
<g clip-path="url(#r)">
<rect width="45" height="18" fill="#000" />
<rect x="45" width="45" height="18" fill="#e2ffe1" />
<rect width="90" height="18" fill="url(#s)" />
</g>
<g
fill="#fff"
text-anchor="middle"
font-family="Verdana,Geneva,DejaVu Sans,sans-serif"
text-rendering="geometricPrecision"
font-size="110"
>
<text
aria-hidden="true"
x="235"
y="140"
fill="#010101"
fill-opacity=".3"
transform="scale(.1)"
textLength="350"
>
cactus
</text>
<text x="235" y="130" transform="scale(.1)" fill="#fff" textLength="350">
cactus
</text>
<text
aria-hidden="true"
x="665"
y="140"
fill="#ccc"
fill-opacity=".3"
transform="scale(.1)"
textLength="350"
>
grown
</text>
<text x="665" y="130" transform="scale(.1)" fill="#333" textLength="350">
grown
</text>
</g>
</svg>
`
exports['The badge generator "for-the-badge" template badge generation should match snapshots: message/label, no logo 1'] = `
<svg
xmlns="http://www.w3.org/2000/svg"
@ -1218,6 +1526,84 @@ exports['The badge generator "for-the-badge" template badge generation should ma
`
exports['The badge generator "for-the-badge" template badge generation should match snapshots: black text when the label color is light 1'] = `
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="146.75"
height="28"
role="img"
aria-label="CACTUS: GROWN"
>
<title>CACTUS: GROWN</title>
<g shape-rendering="crispEdges">
<rect width="72.5" height="28" fill="#f3f3f3" />
<rect x="72.5" width="74.25" height="28" fill="#000" />
</g>
<g
fill="#fff"
text-anchor="middle"
font-family="Verdana,Geneva,DejaVu Sans,sans-serif"
text-rendering="geometricPrecision"
font-size="100"
>
<text transform="scale(.1)" x="362.5" y="175" textLength="485" fill="#333">
CACTUS
</text>
<text
transform="scale(.1)"
x="1096.25"
y="175"
textLength="502.5"
fill="#fff"
font-weight="bold"
>
GROWN
</text>
</g>
</svg>
`
exports['The badge generator "for-the-badge" template badge generation should match snapshots: black text when the message color is light 1'] = `
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="146.75"
height="28"
role="img"
aria-label="CACTUS: GROWN"
>
<title>CACTUS: GROWN</title>
<g shape-rendering="crispEdges">
<rect width="72.5" height="28" fill="#000" />
<rect x="72.5" width="74.25" height="28" fill="#e2ffe1" />
</g>
<g
fill="#fff"
text-anchor="middle"
font-family="Verdana,Geneva,DejaVu Sans,sans-serif"
text-rendering="geometricPrecision"
font-size="100"
>
<text transform="scale(.1)" x="362.5" y="175" textLength="485" fill="#fff">
CACTUS
</text>
<text
transform="scale(.1)"
x="1096.25"
y="175"
textLength="502.5"
fill="#333"
font-weight="bold"
>
GROWN
</text>
</g>
</svg>
`
exports['The badge generator "social" template badge generation should match snapshots: message/label, no logo 1'] = `
<svg
xmlns="http://www.w3.org/2000/svg"
@ -1843,102 +2229,3 @@ exports['The badge generator badges with logos should always produce the same ba
</svg>
`
exports['The badge generator text colors should use black text when the label color is light 1'] = `
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="90"
height="20"
role="img"
aria-label="cactus: grown"
>
<title>cactus: grown</title>
<linearGradient id="s" x2="0" y2="100%">
<stop offset="0" stop-color="#bbb" stop-opacity=".1" />
<stop offset="1" stop-opacity=".1" />
</linearGradient>
<clipPath id="r"><rect width="90" height="20" rx="3" fill="#fff" /></clipPath>
<g clip-path="url(#r)">
<rect width="45" height="20" fill="#f3f3f3" />
<rect x="45" width="45" height="20" fill="#000" />
<rect width="90" height="20" fill="url(#s)" />
</g>
<g
fill="#fff"
text-anchor="middle"
font-family="Verdana,Geneva,DejaVu Sans,sans-serif"
text-rendering="geometricPrecision"
font-size="110"
>
<text
aria-hidden="true"
x="235"
y="150"
fill="#ccc"
fill-opacity=".3"
transform="scale(.1)"
textLength="350"
>
cactus
</text>
<text x="235" y="140" transform="scale(.1)" fill="#333" textLength="350">
cactus
</text>
<text
aria-hidden="true"
x="665"
y="150"
fill="#010101"
fill-opacity=".3"
transform="scale(.1)"
textLength="350"
>
grown
</text>
<text x="665" y="140" transform="scale(.1)" fill="#fff" textLength="350">
grown
</text>
</g>
</svg>
`
exports['The badge generator text colors should use black text when the message color is light 1'] = `
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="146.75"
height="28"
role="img"
aria-label="CACTUS: GROWN"
>
<title>CACTUS: GROWN</title>
<g shape-rendering="crispEdges">
<rect width="72.5" height="28" fill="#000" />
<rect x="72.5" width="74.25" height="28" fill="#e2ffe1" />
</g>
<g
fill="#fff"
text-anchor="middle"
font-family="Verdana,Geneva,DejaVu Sans,sans-serif"
text-rendering="geometricPrecision"
font-size="100"
>
<text transform="scale(.1)" x="362.5" y="175" textLength="485" fill="#fff">
CACTUS
</text>
<text
transform="scale(.1)"
x="1096.25"
y="175"
textLength="502.5"
fill="#333"
font-weight="bold"
>
GROWN
</text>
</g>
</svg>
`

View File

@ -266,7 +266,7 @@ class Badge {
leftMargin: this.messageMargin,
content: this.message,
link: rightLink,
color: this.messageColor,
color: this.color,
textWidth: this.messageWidth,
linkWidth: this.rightWidth,
})

View File

@ -210,6 +210,28 @@ describe('The badge generator', function () {
links: ['https://shields.io/', 'https://www.google.co.uk/'],
})
})
it('should match snapshots: black text when the label color is light', function () {
expectBadgeToMatchSnapshot({
label: 'cactus',
message: 'grown',
format: 'svg',
style: 'flat',
color: '#000',
labelColor: '#f3f3f3',
})
})
it('should match snapshots: black text when the message color is light', function () {
expectBadgeToMatchSnapshot({
label: 'cactus',
message: 'grown',
format: 'svg',
style: 'flat',
color: '#e2ffe1',
labelColor: '#000',
})
})
})
describe('"flat-square" template badge generation', function () {
@ -280,6 +302,28 @@ describe('The badge generator', function () {
links: ['https://shields.io/', 'https://www.google.co.uk/'],
})
})
it('should match snapshots: black text when the label color is light', function () {
expectBadgeToMatchSnapshot({
label: 'cactus',
message: 'grown',
format: 'svg',
style: 'flat-square',
color: '#000',
labelColor: '#f3f3f3',
})
})
it('should match snapshots: black text when the message color is light', function () {
expectBadgeToMatchSnapshot({
label: 'cactus',
message: 'grown',
format: 'svg',
style: 'flat-square',
color: '#e2ffe1',
labelColor: '#000',
})
})
})
describe('"plastic" template badge generation', function () {
@ -350,6 +394,28 @@ describe('The badge generator', function () {
links: ['https://shields.io/', 'https://www.google.co.uk/'],
})
})
it('should match snapshots: black text when the label color is light', function () {
expectBadgeToMatchSnapshot({
label: 'cactus',
message: 'grown',
format: 'svg',
style: 'plastic',
color: '#000',
labelColor: '#f3f3f3',
})
})
it('should match snapshots: black text when the message color is light', function () {
expectBadgeToMatchSnapshot({
label: 'cactus',
message: 'grown',
format: 'svg',
style: 'plastic',
color: '#e2ffe1',
labelColor: '#000',
})
})
})
describe('"for-the-badge" template badge generation', function () {
@ -447,6 +513,28 @@ describe('The badge generator', function () {
links: ['https://shields.io/', 'https://www.google.co.uk/'],
})
})
it('should match snapshots: black text when the label color is light', function () {
expectBadgeToMatchSnapshot({
label: 'cactus',
message: 'grown',
format: 'svg',
style: 'for-the-badge',
color: '#000',
labelColor: '#f3f3f3',
})
})
it('should match snapshots: black text when the message color is light', function () {
expectBadgeToMatchSnapshot({
label: 'cactus',
message: 'grown',
format: 'svg',
style: 'for-the-badge',
color: '#e2ffe1',
labelColor: '#000',
})
})
})
describe('"social" template badge generation', function () {
@ -556,28 +644,4 @@ describe('The badge generator', function () {
})
})
})
describe('text colors', function () {
it('should use black text when the label color is light', function () {
expectBadgeToMatchSnapshot({
label: 'cactus',
message: 'grown',
format: 'svg',
style: 'flat',
color: '#000',
labelColor: '#f3f3f3',
})
})
it('should use black text when the message color is light', function () {
expectBadgeToMatchSnapshot({
label: 'cactus',
message: 'grown',
format: 'svg',
style: 'for-the-badge',
color: '#e2ffe1',
labelColor: '#000',
})
})
})
})