kate522
6dc9265260
sidebar.css paints .widget a with --color-ink-2 (specificity 0,1,1), which out-specifies the .jb-* color group (0,1,0) the badge relies on for its white ink. The user-card widget carries the .widget class, so the check-in bookmark rendered dark-gray text on the orange gradient on widget pages. zibll sets no link color on zib-widget anchors at all. sidebar.css already restores .but colors for exactly this reason; extend that restoration to .img-badge so the badge keeps its own --this-color. Rebuild the homepage bundle and extend the badge contract test.
101 lines
4.6 KiB
JavaScript
101 lines
4.6 KiB
JavaScript
'use strict'
|
|
|
|
const assert = require('node:assert/strict')
|
|
const fs = require('node:fs')
|
|
const path = require('node:path')
|
|
const test = require('node:test')
|
|
|
|
const root = path.resolve(__dirname, '..', '..')
|
|
const read = (file) => fs.readFileSync(path.join(root, file), 'utf8')
|
|
|
|
// Reference theme (zibll css/main.css): .jb-yellow sets --this-bg-b: #f59f54 and
|
|
// --this-bg: linear-gradient(135deg, #f59f54 10%, #ff6922 100%). build/public.min.css
|
|
// is enqueued after main.min.css, so the legacy .jb-* compat layer in core/buttons.css
|
|
// overrides main.css there; the two must agree or every .jb-yellow surface (the
|
|
// user-card check-in badge first of all) paints the wrong gradient.
|
|
const referenceGradient = /--this-bg:\s*linear-gradient\(135deg,\s*#f59f54 10%,\s*#ff6922 100%\)/
|
|
const staleHexes = /#f99d4d|#f7631d/
|
|
|
|
test('buttons.css legacy .jb-yellow gradient matches the reference theme', () => {
|
|
const buttons = read('assets/css/core/buttons.css')
|
|
const start = buttons.indexOf('.jb-yellow {')
|
|
assert.notEqual(start, -1, 'missing the legacy .jb-yellow rule')
|
|
const block = buttons.slice(start, buttons.indexOf('}', start))
|
|
assert.match(block, referenceGradient)
|
|
assert.doesNotMatch(block, staleHexes)
|
|
})
|
|
|
|
test('the built public bundle carries the reference .jb-yellow gradient', () => {
|
|
const bundle = read('assets/css/build/public.min.css')
|
|
assert.match(
|
|
bundle,
|
|
/\.jb-yellow\{--this-bg: linear-gradient\(135deg, #f59f54 10%, #ff6922 100%\)\}/
|
|
)
|
|
assert.doesNotMatch(
|
|
bundle,
|
|
/\.jb-yellow\{--this-bg: linear-gradient\(135deg, #f99d4d 10%, #f7631d 100%\)\}/
|
|
)
|
|
})
|
|
|
|
test('main.css still owns the reference .jb-yellow gradient', () => {
|
|
const main = read('assets/css/main.css')
|
|
assert.match(main, referenceGradient)
|
|
assert.doesNotMatch(main, staleHexes)
|
|
})
|
|
|
|
test('the badge typography is pinned to the reference bootstrap body values', () => {
|
|
const main = read('assets/css/main.css')
|
|
const start = main.indexOf('.user-card .card-content .img-badge')
|
|
assert.notEqual(start, -1, 'missing the user-card img-badge adaptation rule')
|
|
const block = main.slice(start, main.indexOf('}', start))
|
|
assert.match(block, /line-height:\s*1\.42857143/)
|
|
// Reference body font stack (zibll bootstrap.min.css; zibll main.css does not
|
|
// override it), while AKSRT's reset imposes the modern --font-body stack.
|
|
assert.match(block, /font-family:\s*"Helvetica Neue", Helvetica, Arial, sans-serif/)
|
|
// The AKSRT html reset forces antialiased + optimizeLegibility; the badge
|
|
// restores the browser defaults the reference renders with.
|
|
assert.match(block, /-webkit-font-smoothing:\s*auto/)
|
|
assert.match(block, /text-rendering:\s*auto/)
|
|
|
|
const min = read('assets/css/main.min.css')
|
|
assert.match(
|
|
min,
|
|
/\.user-card \.card-content \.img-badge\{line-height:1\.42857143;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;-webkit-font-smoothing:auto;text-rendering:auto\}/
|
|
)
|
|
})
|
|
|
|
test('the sidebar widget link color does not recolor the check-in badge', () => {
|
|
// .widget a (sidebar.css, shipped in the homepage bundle) out-specifies the
|
|
// .jb-* color group, so the badge would paint --color-ink-2 instead of the
|
|
// white --this-color; the established .but restoration must cover img-badge.
|
|
const sidebar = read('assets/css/frontend/sidebar.css')
|
|
const start = sidebar.indexOf('.widget a.but')
|
|
assert.notEqual(start, -1, 'missing the .widget a color restoration')
|
|
const block = sidebar.slice(start, sidebar.indexOf('}', start))
|
|
assert.match(block, /\.widget a\.but,/)
|
|
assert.match(block, /\.widget a\.img-badge/)
|
|
assert.match(block, /color:\s*var\(--this-color/)
|
|
|
|
const bundle = read('assets/css/build/homepage.min.css')
|
|
assert.match(bundle, /\.widget a\.but,\.widget a\.img-badge\{color:var\(--this-color, #fff\)\}/)
|
|
})
|
|
|
|
test('the user-card check-in badge renders without the dead is-done class and bare span', () => {
|
|
const userbox = read('inc/helpers/aksrt-header-userbox.php')
|
|
const fnStart = userbox.indexOf('function aksrt_header_user_checkin_btn')
|
|
assert.notEqual(fnStart, -1, 'missing aksrt_header_user_checkin_btn')
|
|
const fnEnd = userbox.indexOf('if (!function_exists', fnStart)
|
|
assert.notEqual(fnEnd, -1)
|
|
const fn = userbox.slice(fnStart, fnEnd)
|
|
|
|
// Signed card badge: the badge class passes through untouched and the done
|
|
// label is bare text after the icon, matching the reference markup.
|
|
assert.match(fn, /aksrt_get_user_checkin_details_link\(\s*\$class,/)
|
|
assert.doesNotMatch(fn, /\$class \. ' is-done'/)
|
|
assert.doesNotMatch(fn, /'<span>'/)
|
|
|
|
// The idle badge keeps the data-signin-label hook the sign-in controller
|
|
// uses to swap labels in place.
|
|
assert.match(fn, /<span data-signin-label>/)
|
|
})
|