style: clarify task row states

frontend/e2e/task-row-rhythm.spec.ts

@@ -96,9 +96,55 @@ test('task rows keep approved rhythm without clipping across desktop and mobile'
     await expect(row).toHaveCount(1)
     await expectTaskRowGeometry(row)
   }
+  const ordinaryRow = page.locator('.task-row').filter({ hasText: ordinaryTitle })
   const completedRow = page.locator('.task-row').filter({ hasText: completedTitle })
+  const rowState = async (row: Locator) => row.evaluate((element: HTMLElement) => {
+    const style = getComputedStyle(element)
+    const marker = getComputedStyle(element, '::before')
+    const title = getComputedStyle(element.querySelector('.task-main strong') as HTMLElement)
+    return {
+      background: style.backgroundColor,
+      markerWidth: marker.width,
+      markerBackground: marker.backgroundColor,
+      titleColor: title.color,
+      titleDecoration: title.textDecorationLine,
+    }
+  })
+
+  expect((await rowState(ordinaryRow)).background).toBe('rgba(0, 0, 0, 0)')
+  const hasFinePointer = await page.evaluate(() => matchMedia('(hover:hover) and (pointer:fine)').matches)
+  if (hasFinePointer) {
+    await ordinaryRow.hover()
+    await expect(ordinaryRow).toHaveCSS('background-color', 'rgb(255, 248, 238)')
+  }
+  await ordinaryRow.locator('.task-main').click()
+  await expect(ordinaryRow).toHaveCSS('background-color', 'rgb(255, 244, 229)')
+  const selectedState = await rowState(ordinaryRow)
+  expect(selectedState.markerWidth).toBe('2px')
+  expect(selectedState.markerBackground).toBe('rgb(241, 90, 41)')
+  const ordinaryBox = await ordinaryRow.boundingBox()
+  expect(ordinaryBox).toBeTruthy()
+  await page.mouse.move(ordinaryBox!.x + ordinaryBox!.width / 2, ordinaryBox!.y + ordinaryBox!.height / 2)
+  await page.mouse.down()
+  expect((await rowState(ordinaryRow)).background).toBe('rgb(255, 244, 229)')
+  await page.mouse.up()
+  await ordinaryRow.evaluate(element => element.classList.add('done', 'overdue-task'))
+  expect((await rowState(ordinaryRow)).background).toBe('rgb(255, 244, 229)')
+  await ordinaryRow.evaluate(element => {
+    element.classList.remove('selected', 'done', 'overdue-task')
+    element.classList.add('task-row--trash')
+  })
+  await ordinaryRow.hover()
+  const trashState = await rowState(ordinaryRow)
+  expect(trashState.background).toBe('rgba(0, 0, 0, 0)')
+  expect(trashState.markerBackground).toBe('rgba(0, 0, 0, 0)')
+
   await completedRow.getByRole('button', { name: `完成${completedTitle}` }).click()
   await expect(completedRow).toHaveClass(/done/)
+  await expect(completedRow).toHaveCSS('background-color', 'rgb(251, 247, 240)')
+  await expect(completedRow.locator('.task-main strong')).toHaveCSS('color', 'rgb(112, 104, 95)')
+  const completedState = await rowState(completedRow)
+  expect(completedState.titleDecoration).toContain('line-through')
   await expectTaskRowGeometry(completedRow)
   await expect(page.locator('.task-row').filter({ hasText: dueTitle }).locator('.task-tail')).toBeVisible()
   await expect(page.locator('.task-row').filter({ hasText: parentTitle })).toContainText('0/1')