diff --git a/packages/sw/tests/text-weight.browser.mjs b/packages/sw/tests/text-weight.browser.mjs index b429bfd..e1668b6 100644 --- a/packages/sw/tests/text-weight.browser.mjs +++ b/packages/sw/tests/text-weight.browser.mjs @@ -51,11 +51,26 @@ await goto('sw-header--overview') const docButton = page.locator('.hm-sw-header__document-button').first() await stableOnHover('Header file name', docButton, docButton.locator('.hm-sw-header__document-name')) // SWHeader More (narrow): fields moved into the More menu are still SWHeader fields (400). -await goto('sw-header--responsive-more') -const narrow = page.locator('.hm-sw-header').filter({ visible: true }).nth(2) +// Only below 760px does the header move fields into More (sw.css `@container hm-sw-header (max-width: 759.98px)`: 선/문자/치수 +// 스타일, 속성Bar / 속성창, 색상; 인쇄 / 팝업 가이드 only below 640). From 760px the More button is hidden and the 화면 너비 Story +// rows stop at 760, so the 760 frame is narrowed to 700px, the way the Viewer More check below narrows its header. +const narrowHeaderMore = async () => { + await goto('sw-header--responsive-more') + const frame = page.locator('[data-frame-width="760"]') + await frame.evaluate(e => { e.style.maxWidth = '700px' }); await page.waitForTimeout(200) + return frame.locator('.hm-sw-header') +} +const narrow = await narrowHeaderMore() +const narrowWidth = await narrow.evaluate(e => Math.round(e.getBoundingClientRect().width)) const moreTrigger = narrow.locator('.hm-sw-header__more-trigger') -if (await moreTrigger.count()) { await moreTrigger.click(); await page.waitForTimeout(200) } -const moreValues = await styles('.hm-sw-header__field-value') +check('Header More: the 700px header shows the More button', narrowWidth === 700 && await moreTrigger.isVisible(), { narrowWidth }) +const movedOut = await narrow.locator('.hm-sw-header__fields > :is([data-tier="aux"], [data-menu="color"])').evaluateAll(list => list.map(e => getComputedStyle(e).display)) +check('Header More: 선/문자/치수 스타일 and 색상 leave the 700px header', movedOut.length === 4 && movedOut.every(d => d === 'none'), movedOut) +await moreTrigger.click(); await page.waitForTimeout(200) +const moreLabels = (await styles('[data-frame-width="760"] .hm-sw-header__more-item > span:first-child')).map(s => s.text) +const wantMore = ['색상', '선스타일', '문자스타일', '치수스타일', '속성Bar', '속성창'] +check('Header More: the menu lists 색상 · 선/문자/치수 스타일 · 속성Bar · 속성창, not 인쇄 / 팝업 가이드 (below 640 only)', wantMore.every(w => moreLabels.includes(w)) && !moreLabels.includes('인쇄') && !moreLabels.includes('팝업 가이드'), moreLabels) +const moreValues = await styles('[data-frame-width="760"] :is(.hm-sw-header__field-value, .hm-sw-header__more-value)') check('Header More: values shown with the More menu open stay 400 (none turn Bold)', moreValues.length > 0 && moreValues.every(v => v.weight === '400'), moreValues.filter(v => v.weight !== '400')) await page.keyboard.press('Escape') // Composed Controls: standalone menu fields (outside SWHeader) are Bold; labels and the font sample unchanged. @@ -118,9 +133,8 @@ await page.screenshot({ path: path.join(out, 'footer.png'), clip: { x: 0, y: 940 // SWHeader file-name button), 레이어 · 설정 · 속성 and Model / Layout; the two menus follow the SWHeader rules, measured // on SWHeader itself below and compared row by row. const typo = s => ({ weight: s.weight, size: s.size, family: s.family, outline: s.outline }) -// SWHeader references: the responsive `...` menu rows and the file-name list rows. -await goto('sw-header--responsive-more') -const refTrigger = page.locator('.hm-sw-header__more-trigger').filter({ visible: true }).first() +// SWHeader references: the responsive `...` menu rows (the same 700px header: More shows only below 760) and the file-name list rows. +const refTrigger = (await narrowHeaderMore()).locator('.hm-sw-header__more-trigger') await refTrigger.click(); await page.waitForTimeout(200) const refMore = await styles('.hm-sw-header__more-menu .hm-sw-header__more-item > span:first-child') check('SWHeader ... menu rows (reference): Regular 400 without outline', refMore.length > 0 && refMore.every(r => r.weight === '400' && r.outline === 'none'), refMore)