codex-bot/vela-salah
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 5 Wiki Activity

Compare commits

base: codex-bot/vela-salah:v0.2
Branches Tags
codex-bot/vela-salah:main
codex-bot/vela-salah:v0.6 codex-bot/vela-salah:v0.5 codex-bot/vela-salah:v0.4 codex-bot/vela-salah:v0.3 codex-bot/vela-salah:v0.2
..
compare: codex-bot/vela-salah:v0.4
Branches Tags
codex-bot/vela-salah:main
codex-bot/vela-salah:v0.6 codex-bot/vela-salah:v0.5 codex-bot/vela-salah:v0.4 codex-bot/vela-salah:v0.3 codex-bot/vela-salah:v0.2
4 Commits
v0.2 .. v0.4
Author SHA1 Message Date
codex-bot d92609e046 Salah 0.4: center-magnified prayer times and larger clock 2026-09-12 13:11:24 +01:00
codex-bot 8e660f403b Salah 0.3: larger AMOLED UI with swipe-scrollable prayers 2026-09-12 13:05:15 +01:00
codex-bot bb8be7012a README: app docs 2026-09-09 17:52:24 +01:00
codex-bot 9ec6511448 v0.2 preview + cleanup 2026-09-09 17:15:11 +01:00
10 changed files with 240 additions and 149 deletions
Expand all files Collapse all files
README.md
+75
View File
@@ -0,0 +1,75 @@
# SALAH — prayer times for Casablanca (Xiaomi Watch S4)
Offline prayer-time companion: shows today's six times (FAJR, SHURUK, DHUHR,
ASR, MAGHRIB, ISHA) with the next prayer highlighted and a countdown banner.
**Status: VERIFIED MATH (matches AlAdhan on 3 reference dates); on-watch render
pending user confirmation.**
## Method
Morocco (Ministry of Habous), matching AlAdhan `method=21`:
- Fajr 19°, Isha 17° (twilight angles)
- Standard Asr (shadow factor 1× — Maliki default in Morocco)
- Dhuhr = solar noon + 5 min; Maghrib = sunset + 5 min (AlAdhan's baked offsets)
- Location hardcoded: Casablanca 33.5731, −7.5898 · fixed TZ = UTC+1.
Ramadan clock changes are not handled by this version.
All computation happens **on the watch** — no GPS, no network. Pure solar math
(same Meeus approach as the sundial) lives in `src/common/prayer.js`.
## Screen (v0.4)
- Pure #000000 AMOLED background
- Larger 50px clock; no swipe instruction label
- Prayer names above their times, in fixed 104px native list rows
- Center magnification: prayer times grow continuously from 30px to 60px as
their row approaches the physical screen center; names grow from 20px to 28px
- Scroll viewport 320×264 at x73/y101, centered at y233; 80px end spacers
- Fixed next-prayer countdown below the list; lavender next-prayer highlight
- Glyph sizes change without changing row heights, avoiding scroll-position drift
- 15s clock refresh preserves scroll focus; calculation logic unchanged
- Normal system back exits; crown support not assumed
Automated math/page/focus/layout tests and release build pass. The live scroll
magnification still needs an on-watch check. `preview-0.4.png` is a static layout
mock with illustrative times, not a device screenshot.
## Project layout
```text
src/
├── app.ux, manifest.json # com.ilias.salah, watch, designWidth 466
├── common/
│ ├── prayer.js # times/format/nextPrayer/formatCountdown — pure, unit-tested
│ └── icon.png # 192×192 circular icon (user-supplied mosque art)
└── pages/index/index.ux # layout + update loop
tests/
├── prayer.cjs # 10 tests vs AlAdhan reference times (3 dates)
├── page.cjs # 11 wiring/layout tests (incl. chord-fit assertions)
├── make_icon.py # icon conversion pipeline (disc detect → round mask → 192²)
└── check-rpk.py # verifies icon/manifest inside the built .rpk
```
## Build & test
```bash
npm ci
npm run release
node tests/prayer.cjs
node tests/page.cjs
node tests/amoled.cjs
node tests/focus.cjs
```
## Install
Side-load `dist/com.ilias.salah.release.*.rpk` via AstroBox.
Releases: https://gitea.oimcloud.myaddr.tools/codex-bot/vela-salah
## Accuracy note
Verified against AlAdhan API (method 21) for 2026-09-09, 2026-01-15, 2026-07-01 —
all six times within 2 minutes on every date. Tolerance covers the low-precision
solar vector (±0.01°) plus rounding.
preview-0.1.html
-46
View File
@@ -1,46 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body { margin: 0; padding: 20px; background: #16161e; font-family: sans-serif; display: flex; gap: 30px; align-items: center; }
.watch {
width: 466px; height: 466px; border-radius: 233px;
background: #0a0d18; position: relative; overflow: hidden; flex-shrink: 0;
box-shadow: 0 0 0 8px #222, 0 10px 40px rgba(0,0,0,.6);
}
.city { position: absolute; top: 18px; width: 100%; text-align: center; color: #8f95c7; font-size: 18px; letter-spacing: 2px; }
.clock { position: absolute; top: 44px; width: 100%; text-align: center; color: #fff; font-size: 44px; }
.banner {
position: absolute; top: 116px; left: 68px; width: 330px; height: 64px; border-radius: 32px;
background: #6d4fd4; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.bannerLabel { color: #d9d2ff; font-size: 22px; }
.bannerTime { color: #fff; font-size: 26px; font-weight: bold; }
.row {
position: absolute; left: 53px; width: 360px; height: 44px; border-radius: 22px;
background: #161a2e; display: flex; justify-content: space-between; align-items: center;
padding: 0 22px; box-sizing: border-box;
}
.rowName { color: #a7acce; font-size: 21px; }
.rowTime { color: #fff; font-size: 21px; }
.rowNext { background: #2b2460; border: 1px solid #6d4fd4; }
.nameNext { color: #b9a8ff; font-weight: bold; }
.caption { color: #8888aa; font-size: 14px; max-width: 220px; }
</style>
</head>
<body>
<div class="watch">
<div class="city">CASABLANCA</div>
<div class="clock">17:05</div>
<div class="banner"><span class="bannerLabel">ASR in</span><span class="bannerTime">2h 5m</span></div>
<div class="row" style="top:196px"><span class="rowName">FAJR</span><span class="rowTime">05:40</span></div>
<div class="row" style="top:245px"><span class="rowName">SHURUK</span><span class="rowTime">07:10</span></div>
<div class="row" style="top:294px"><span class="rowName">DHUHR</span><span class="rowTime">13:33</span></div>
<div class="row rowNext" style="top:343px"><span class="rowName nameNext">ASR</span><span class="rowTime">17:01</span></div>
<div class="row" style="top:392px"><span class="rowName">MAGHRIB</span><span class="rowTime">19:51</span></div>
<div class="row" style="top:441px"><span class="rowName">ISHA</span><span class="rowTime">21:05</span></div>
</div>
<div class="caption">SALAH 0.1 — round-screen layout preview (466px). Rows at top 196→441px; chord width at row 441 (y 441-485, dy=208 from center) is ~2·√(233²−208²)≈209px — the 360px row exceeds it. <b>This preview intentionally shows the clipping risk at the bottom row.</b></div>
</body>
</html>
preview-0.2.html
+48
View File
@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body { margin: 0; padding: 20px; background: #16161e; font-family: sans-serif; display: flex; gap: 30px; align-items: center; }
.watch {
width: 466px; height: 466px; border-radius: 233px;
background: #0a0d18; position: relative; overflow: hidden; flex-shrink: 0;
box-shadow: 0 0 0 8px #222, 0 10px 40px rgba(0,0,0,.6);
}
.city { position: absolute; top: 8px; width: 100%; text-align: center; color: #8f95c7; font-size: 15px; letter-spacing: 2px; }
.clock { position: absolute; top: 30px; width: 100%; text-align: center; color: #fff; font-size: 34px; }
.banner {
position: absolute; top: 76px; left: 83px; width: 300px; height: 56px; border-radius: 28px;
background: #6d4fd4; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.bannerLabel { color: #d9d2ff; font-size: 20px; }
.bannerTime { color: #fff; font-size: 24px; font-weight: bold; }
.row {
position: absolute; height: 40px; border-radius: 20px;
background: #161a2e; display: flex; justify-content: space-between; align-items: center;
padding: 0 20px; box-sizing: border-box;
}
.rowName { color: #a7acce; font-size: 20px; }
.rowTime { color: #fff; font-size: 20px; }
.rowNext { background: #2b2460; border: 1px solid #6d4fd4; }
.nameNext { color: #b9a8ff; font-weight: bold; }
.rowPassed { opacity: .45; }
/* chord-tapered: centered on 233 with widths 380/412/424/406/368/304, rows start y=130 */
.caption { color: #8888aa; font-size: 14px; max-width: 230px; }
</style>
</head>
<body>
<div class="watch">
<div class="city">CASABLANCA</div>
<div class="clock">17:15</div>
<div class="banner"><span class="bannerLabel">ASR in</span><span class="bannerTime">1h 55m</span></div>
<div class="row rowPassed" style="top:130px; left:43px; width:380px"><span class="rowName">FAJR</span><span class="rowTime">05:40</span></div>
<div class="row rowPassed" style="top:174px; left:27px; width:412px"><span class="rowName">SHURUK</span><span class="rowTime">07:10</span></div>
<div class="row rowPassed" style="top:218px; left:21px; width:424px"><span class="rowName">DHUHR</span><span class="rowTime">13:33</span></div>
<div class="row rowNext" style="top:262px; left:30px; width:406px"><span class="rowName nameNext">ASR</span><span class="rowTime">17:01</span></div>
<div class="row" style="top:306px; left:49px; width:368px"><span class="rowName">MAGHRIB</span><span class="rowTime">19:51</span></div>
<div class="row" style="top:350px; left:81px; width:304px"><span class="rowName">ISHA</span><span class="rowTime">21:05</span></div>
</div>
<div class="caption">SALAH 0.2 layout — every row width ≤ chord at its position (verified numerically). Next prayer highlighted; passed prayers dimmed.</div>
</body>
</html>
preview-0.3.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

preview-0.4.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

src/manifest.json
+3 -3
View File
@@ -2,8 +2,8 @@
"package": "com.ilias.salah", "package": "com.ilias.salah",
"name": "SALAH", "name": "SALAH",
"icon": "/common/icon.png", "icon": "/common/icon.png",
"versionName": "0.2", "versionName": "0.4",
"versionCode": 2, "versionCode": 4,
"minAPILevel": 1, "minAPILevel": 1,
"deviceTypeList": [ "deviceTypeList": [
"watch" "watch"
@@ -22,7 +22,7 @@
} }
}, },
"display": { "display": {
"backgroundColor": "#0a0d18" "backgroundColor": "#000000"
}, },
"features": [ "features": [
{ {
src/pages/index/index.ux
+43 -88
View File
@@ -1,19 +1,19 @@
<template> <template>
<div class="page"> <div class="page">
<!-- header: city + clock -->
<text class="city">CASABLANCA</text> <text class="city">CASABLANCA</text>
<text class="clock">{{ clock }}</text> <text class="clock">{{ clock }}</text>
<!-- next-prayer banner -->
<div class="banner"> <div class="banner">
<text class="bannerLabel">{{ nextName }} in</text> <text class="bannerLabel">{{ nextName }} in</text>
<text class="bannerTime">{{ countdown }}</text> <text class="bannerTime">{{ countdown }}</text>
</div> </div>
<!-- prayer rows: width tapers with the chord via per-row bound style (sundial markerStyle pattern) --> <list class="prayers" id="prayers" onscroll="onScroll">
<div class="row {{ row.key === nextKey ? 'rowNext' : '' }} {{ row.passed ? 'rowPassed' : '' }}" <list-item type="spacer" class="spacer"><div></div></list-item>
style="{{ row.rowStyle }}" for="{{ row in rows }}" tid="key"> <list-item type="prayer" for="{{ row in rows }}" tid="key" class="row {{ row.key === nextKey ? 'rowNext' : '' }}">
<text class="rowName {{ row.key === nextKey ? 'nameNext' : '' }}">{{ row.label }}</text> <text style="{{ row.nameStyle }}" class="rowName {{ row.key === nextKey ? 'nameNext' : '' }}">{{ row.label }}</text>
<text class="rowTime {{ row.key === nextKey ? 'timeNext' : '' }}">{{ row.time }}</text> <text style="{{ row.timeStyle }}" class="rowTime {{ row.key === nextKey ? 'timeNext' : '' }}">{{ row.time }}</text>
</div> </list-item>
<list-item type="spacer" class="spacer"><div></div></list-item>
</list>
</div> </div>
</template> </template>
<script> <script>
@@ -22,7 +22,7 @@ import prayer from '../../common/prayer.js'
// Casablanca // Casablanca
const LAT = 33.5731 const LAT = 33.5731
const LON = -7.5898 const LON = -7.5898
const TZ = 1 // Africa/Casablanca is UTC+1 year-round (no DST since 2018) const TZ = 1 // Fixed UTC+1; Ramadan clock changes are not handled.
const LABELS = { const LABELS = {
fajr: 'FAJR', fajr: 'FAJR',
@@ -33,8 +33,8 @@ const LABELS = {
isha: 'ISHA' isha: 'ISHA'
} }
// chord-tapered row widths (v0.2 round-screen layout): safe = chord - 2*10px inset // Uniform rows fit the entire scroll viewport.
const ROW_WIDTHS = [380, 412, 424, 406, 368, 304] const ROW_WIDTHS = [320, 320, 320, 320, 320, 320]
export default { export default {
private: { private: {
@@ -42,6 +42,7 @@ export default {
countdown: '', countdown: '',
nextKey: 'fajr', nextKey: 'fajr',
nextName: 'FAJR', nextName: 'FAJR',
scrollY: 0,
rows: [] rows: []
}, },
onInit() {}, onInit() {},
@@ -55,6 +56,22 @@ export default {
onDestroy() { onDestroy() {
clearInterval(this.timer) clearInterval(this.timer)
}, },
onScroll(event) {
if (!event || typeof event.scrollY !== 'number' || !isFinite(event.scrollY)) return
this.scrollY = Math.max(0, Math.min(520, event.scrollY))
this.applyFocus()
},
applyFocus() {
// Row heights never change: only glyph sizes change, avoiding scroll jumps.
const offset = this.scrollY || 0
this.rows = this.rows.map((row, index) => {
const focus = Math.max(0, 1 - Math.abs(index * 104 - offset) / 104)
return Object.assign({}, row, {
timeStyle: { fontSize: Math.round(30 + 30 * focus) + 'px' },
nameStyle: { fontSize: Math.round(20 + 8 * focus) + 'px' }
})
})
},
update() { update() {
const now = new Date() const now = new Date()
const hh = String(now.getHours()).padStart(2, '0') const hh = String(now.getHours()).padStart(2, '0')
@@ -76,85 +93,23 @@ export default {
passed: t[key] < nowMin, passed: t[key] < nowMin,
rowStyle: { width: ROW_WIDTHS[i] + 'px' } rowStyle: { width: ROW_WIDTHS[i] + 'px' }
})) }))
this.applyFocus()
} }
} }
</script> </script>
<style> <style>
.page { .page { width: 466px; height: 466px; background-color: #000000; }
width: 466px; .city { position: absolute; top: 12px; left: 103px; width: 260px; height: 26px; color: #aaa5b5; font-size: 20px; text-align: center; }
height: 466px; .clock { position: absolute; top: 35px; left: 103px; width: 260px; height: 56px; color: #ffffff; font-size: 50px; text-align: center; }
background-color: #0a0d18; .banner { position: absolute; top: 383px; left: 53px; width: 360px; height: 36px; background-color: #000000; flex-direction: row; justify-content: center; align-items: center; }
flex-direction: column; .bannerLabel { color: #c5a3ff; font-size: 24px; margin-right: 8px; }
align-items: center; .bannerTime { color: #ffffff; font-size: 26px; font-weight: bold; }
} .prayers { position: absolute; top: 101px; left: 73px; width: 320px; height: 264px; flex-direction: column; background-color: #000000; }
.city { .spacer { width: 320px; height: 80px; background-color: #000000; }
height: 20px; .row { width: 320px; height: 104px; background-color: #000000; flex-direction: column; justify-content: center; align-items: center; padding-left: 10px; padding-right: 10px; }
color: #8f95c7; .rowNext { border-width: 1px; border-color: #a779ef; border-radius: 18px; }
font-size: 15px; .rowName { width: 298px; height: 30px; text-align: center; color: #d0cbd6; font-size: 28px; }
letter-spacing: 2px; .nameNext { color: #c5a3ff; font-weight: bold; }
text-align: center; .rowTime { width: 298px; height: 70px; text-align: center; color: #ffffff; font-size: 60px; }
margin-top: 8px; .timeNext { color: #c5a3ff; font-weight: bold; }
}
.clock {
height: 40px;
color: #ffffff;
font-size: 34px;
text-align: center;
margin-top: 2px;
}
.banner {
width: 300px;
height: 56px;
border-radius: 28px;
background-color: #6d4fd4;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 6px;
}
.bannerLabel {
color: #d9d2ff;
font-size: 20px;
margin-right: 8px;
}
.bannerTime {
color: #ffffff;
font-size: 24px;
font-weight: bold;
}
.row {
height: 40px;
border-radius: 20px;
background-color: #161a2e;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: 4px;
padding-left: 20px;
padding-right: 20px;
}
.rowNext {
background-color: #2b2460;
border-width: 1px;
border-color: #6d4fd4;
}
.rowPassed {
opacity: 0.45;
}
.rowName {
color: #a7acce;
font-size: 20px;
}
.nameNext {
color: #b9a8ff;
font-weight: bold;
}
.rowTime {
color: #ffffff;
font-size: 20px;
}
.timeNext {
color: #ffffff;
font-weight: bold;
}
</style> </style>
tests/amoled.cjs
+25
View File
@@ -0,0 +1,25 @@
const assert = require('node:assert/strict')
const fs = require('node:fs')
const src = fs.readFileSync('src/pages/index/index.ux', 'utf8')
const manifest = JSON.parse(fs.readFileSync('src/manifest.json'))
function css(name, prop) {
const block = src.match(new RegExp('\\.' + name + '\\s*\\{([^}]+)'))[1]
return block.match(new RegExp(prop + ':\\s*([^;]+)'))[1].trim()
}
assert.equal(css('page', 'background-color'), '#000000', 'page must be AMOLED black')
assert.equal(manifest.display.backgroundColor, '#000000')
assert.match(src, /<list\s[^>]*class="prayers"/, 'native swipe-scrollable list')
assert.match(src, /<list-item[^>]*type="prayer"[^>]*for="\{\{ row in rows \}\}"/)
assert.ok(parseFloat(css('rowName', 'font-size')) >= 28)
assert.ok(parseFloat(css('rowTime', 'font-size')) >= 36)
const top = parseFloat(css('prayers', 'top'))
const height = parseFloat(css('prayers', 'height'))
const width = parseFloat(css('prayers', 'width'))
const dy = Math.max(Math.abs(top - 233), Math.abs(top + height - 233))
assert.ok(width <= 2 * Math.sqrt(233 ** 2 - dy ** 2) - 20, 'whole scroll viewport fits circle')
const rowH = parseFloat(css('row', 'height'))
const pad = parseFloat(css('spacer', 'height'))
assert.equal(pad, (height - rowH) / 2, 'first/last rows can reach viewport center')
assert.ok(6 * rowH + 2 * pad > height, 'content actually scrolls')
assert.ok(!src.includes('onBackPress'), 'system back still exits')
console.log('AMOLED, large text, scroll wiring and circular viewport checks passed')
tests/focus.cjs
+40
View File
@@ -0,0 +1,40 @@
const assert = require('node:assert/strict')
const fs = require('node:fs')
const vm = require('node:vm')
const src = fs.readFileSync('src/pages/index/index.ux', 'utf8')
const body = src.match(/<script>([\s\S]*?)<\/script>/)[1].replace(/import\s+\w+\s+from\s+'[^']*';?/, '').replace('export default', 'globalThis.spec =')
const ctx = {prayer: require('../src/common/prayer.js'), setInterval: () => 1, clearInterval: () => {}}
vm.createContext(ctx); vm.runInContext(body, ctx)
const p = Object.assign({}, ctx.spec, JSON.parse(JSON.stringify(ctx.spec.private)))
p.update()
assert.equal(typeof p.onScroll, 'function', 'scroll handler drives center magnification')
const size = i => parseFloat(p.rows[i].timeStyle.fontSize)
p.onScroll({scrollY: 0})
assert.equal(size(0), 60, 'first centered prayer gets 60px time')
assert.ok(size(1) < size(0))
p.onScroll({scrollY: 104})
assert.equal(size(1), 60)
assert.equal(size(0), size(2), 'symmetric shrink around center')
p.onScroll({scrollY: 52})
assert.equal(size(0), size(1), 'continuous interpolation between rows')
assert.ok(size(0) > 30 && size(0) < 60)
p.onScroll({scrollY: 520})
assert.equal(size(5), 60, 'last prayer can be magnified')
p.update()
assert.equal(size(5), 60, 'clock refresh preserves scroll focus')
for (const offset of [-100, 9999]) {
p.onScroll({scrollY: offset})
p.rows.forEach(row => assert.ok(parseFloat(row.timeStyle.fontSize) >= 30 && parseFloat(row.timeStyle.fontSize) <= 60))
}
const before = JSON.stringify(p.rows)
for (const event of [undefined, {}, {scrollY: NaN}, {scrollY: Infinity}]) p.onScroll(event)
assert.equal(JSON.stringify(p.rows), before, 'invalid events do not corrupt styles')
assert.ok(!src.includes('SWIPE TO SCROLL'))
assert.match(src, /onscroll="onScroll"/)
assert.match(src, /style="\{\{ row.timeStyle \}\}"/)
assert.match(src, /style="\{\{ row.nameStyle \}\}"/)
function css(c,k) { return parseFloat(src.match(new RegExp('\\.'+c+'\\s*\\{([^}]+)'))[1].match(new RegExp(k+':\\s*([^;]+)'))[1]) }
assert.equal(css('prayers','top') + css('prayers','height') / 2, 233, 'magnification center is physical screen center')
assert.equal(css('row','height'), 104, 'fixed row geometry prevents scroll feedback')
assert.ok(css('clock','font-size') > 42, 'header clock enlarged too')
console.log('Center magnification, interpolation, end rows, refresh preservation, invalid events and wiring passed')
tests/page.cjs
+6 -12
View File
@@ -94,6 +94,8 @@ function page() {
p.onHide = spec.onHide p.onHide = spec.onHide
p.onDestroy = spec.onDestroy p.onDestroy = spec.onDestroy
p.update = spec.update p.update = spec.update
p.applyFocus = spec.applyFocus
p.onScroll = spec.onScroll
p.rows = [] p.rows = []
return p return p
} }
@@ -148,18 +150,10 @@ test('update() rows: six entries, key+label+time wired', () => {
} }
}) })
test('row widths taper with the chord and fit the 466 circle at every row position', () => { test('all rows fit the scroll viewport', () => {
// rows: 6 x 40px + 5 x 4px margins, block starts after header+banner (top=130) const widths = sandbox.ROW_WIDTHS
const ROW_WIDTHS = spec.ROW_WIDTHS || sandbox.ROW_WIDTHS assert.equal(widths.length, 6)
assert.equal(ROW_WIDTHS.length, 6) widths.forEach(width => assert.equal(width, 320))
const H = 40, MARGIN = 4, BLOCK_TOP = 130, R = 233, INSET = 10
for (let n = 0; n < 6; n++) {
const top = BLOCK_TOP + n * (H + MARGIN)
const dy = Math.max(Math.abs(233 - top), Math.abs(233 - (top + H)))
const chord = 2 * Math.sqrt(Math.max(0, R * R - dy * dy))
const safe = chord - 2 * INSET
assert.ok(ROW_WIDTHS[n] <= safe, `row ${n} width ${ROW_WIDTHS[n]} exceeds safe chord ${safe.toFixed(0)} at top ${top}`)
}
}) })
test('bound rowStyle width equals ROW_WIDTHS[i]', () => { test('bound rowStyle width equals ROW_WIDTHS[i]', () => {