tests/test_reader_style.py

"""Focused browser checks for reader CSS, independent of format-engine suites."""

import io
import os
import unittest
import urllib.parse
import zipfile
from PIL import Image

from tests.test_reader_performance import (
    STORE_SCRIPT,
    PlaywrightError,
    epub_with_navigation,
    static_server,
    sync_playwright,
    zip_bytes,
)
from tests import test_reader_performance as support
from tests.reader_native_fixture import install as install_native_djvu


@unittest.skipIf(sync_playwright is None, "install requirements-test.txt for reader style tests")
class ReaderStyleTests(unittest.TestCase):
    @classmethod
    def setUpClass(cls):
        cls.server = static_server()
        cls.origin = cls.server.__enter__()
        cls.addClassCleanup(cls.server.__exit__, None, None, None)
        cls.playwright = sync_playwright().start()
        cls.addClassCleanup(cls.playwright.stop)
        try:
            cls.browser = getattr(cls.playwright, os.environ.get("READER_STYLE_BROWSER", "chromium")).launch(headless=True)
        except PlaywrightError as error:
            raise unittest.SkipTest(str(error))
        cls.addClassCleanup(cls.browser.close)

    def setUp(self):
        context = self.browser.new_context(viewport={"width": 1440, "height": 900})
        self.addCleanup(context.close)
        self.page = context.new_page()
        self.page.add_init_script("localStorage.setItem('theme', 'dark')")
        self.page.route("**/static/reader/core/reader-store.js", lambda route: route.fulfill(
            content_type="text/javascript", body=STORE_SCRIPT
        ))
        self.page.route("**/api/reader-content**", lambda route: route.fulfill(
            content_type="text/plain", body="Reader style fixture\n" * 80
        ))
        source = urllib.parse.quote(
            "https://huggingface.co/datasets/VoiceOfML/Test/resolve/main/style.txt", safe=""
        )
        self.page.goto(
            f"{self.origin}/static/reader.html?url={source}&ext=txt&title=Style&path=Test",
            wait_until="domcontentloaded",
        )
        self.page.wait_for_function("() => document.documentElement.dataset.readerPhase === 'ready'")

    def settle(self):
        self.page.wait_for_function("""() =>
            !document.documentElement.classList.contains('theme-transition') &&
            !document.getAnimations().some(animation => animation.playState === 'running')
        """)

    def test_back_and_download_icons_have_stable_browser_independent_geometry(self):
        self.page.evaluate("""() => {
          document.querySelector('.page-controls').hidden = false;
          document.querySelector('.zoom-controls').hidden = false;
        }""")
        for theme in ("dark", "light"):
            self.page.evaluate("theme => document.documentElement.dataset.theme = theme", theme)
            for width in (1100, 390, 320):
                self.page.set_viewport_size({"width": width, "height": 900})
                for selector in ("#back", "#download"):
                    with self.subTest(theme=theme, width=width, selector=selector):
                        button = self.page.locator(selector)
                        geometry = button.evaluate("""button => {
                          const icon = button.querySelector('svg');
                          if (!icon) return null;
                          const b = button.getBoundingClientRect(), i = icon.getBoundingClientRect();
                          const toolbar = button.closest('header').getBoundingClientRect();
                          const style = getComputedStyle(button);
                          return {width: b.width, height: b.height, iconWidth: i.width, iconHeight: i.height,
                            dx: i.x + i.width / 2 - b.x - b.width / 2,
                            dy: i.y + i.height / 2 - b.y - b.height / 2,
                            fits: b.left >= 0 && b.right <= innerWidth && b.top >= toolbar.top && b.bottom <= toolbar.bottom,
                            padding: style.padding, appearance: style.appearance,
                            stroke: getComputedStyle(icon).stroke, color: style.color,
                            hiddenIcon: icon.getAttribute('aria-hidden'), focusable: icon.getAttribute('focusable')};
                        }""")
                        self.assertIsNotNone(geometry)
                        self.assertEqual((geometry["width"], geometry["height"]), (32, 32) if width > 600 else (26, 30))
                        self.assertEqual((geometry["iconWidth"], geometry["iconHeight"]), (18, 18))
                        self.assertAlmostEqual(geometry["dx"], 0, delta=0.5)
                        self.assertAlmostEqual(geometry["dy"], 0, delta=0.5)
                        self.assertTrue(geometry["fits"], geometry)
                        self.assertEqual((geometry["padding"], geometry["appearance"]), ("0px", "none"))
                        self.assertEqual(geometry["stroke"], geometry["color"])
                        self.assertEqual((geometry["hiddenIcon"], geometry["focusable"]), ("true", "false"))
                        self.assertTrue(button.get_attribute("title"))
                        self.assertTrue(button.get_attribute("aria-label"))
                        before = button.bounding_box()
                        button.hover()
                        button.focus()
                        self.assertEqual(button.bounding_box(), before)
                        self.assertEqual(button.evaluate("e => getComputedStyle(e).outlineStyle"), "solid")

    def assert_contrast(self, selector):
        result = self.page.locator(selector).first.evaluate("""element => {
            const rgb = value => value.match(/[\\d.]+/g).map(Number);
            const luminance = color => rgb(color).slice(0, 3).reduce((sum, value, index) => {
                const channel = value / 255;
                return sum + [0.2126, 0.7152, 0.0722][index] *
                    (channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4);
            }, 0);
            const foreground = getComputedStyle(element).color;
            let background = getComputedStyle(element).backgroundColor;
            for (let parent = element.parentElement; rgb(background)[3] === 0 && parent;
                 parent = parent.parentElement) background = getComputedStyle(parent).backgroundColor;
            const a = luminance(foreground), b = luminance(background);
            return {foreground, background, ratio: (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05)};
        }""")
        self.assertGreaterEqual(result["ratio"], 4.5, (selector, result))

    def test_search_result_uses_full_width_five_line_excerpt(self):
        self.page.locator("#history").click()
        self.page.locator("#full-search-toggle").click()
        self.page.locator("#full-search-input").fill("Reader")
        row = self.page.locator(".full-search-result").first
        row.wait_for()
        page_input = self.page.locator("#full-search-page")
        page_input.wait_for()
        before = page_input.bounding_box()
        self.assertEqual(page_input.evaluate("e => getComputedStyle(e).borderTopColor"), "rgba(0, 0, 0, 0)")
        page_input.click()
        self.assertEqual(page_input.evaluate("e => getComputedStyle(e).outlineStyle"), "solid")
        self.assertEqual(page_input.bounding_box()["width"], before["width"])
        page_input.press("Tab")
        self.assertEqual(page_input.evaluate("e => getComputedStyle(e).outlineStyle"), "none")
        for width in (1440, 390, 320):
            self.page.set_viewport_size({"width": width, "height": 900})
            for rank in ("1.", "123456."):
                with self.subTest(width=width, rank=rank):
                    metrics = row.evaluate("""(row, rank) => {
                      const number = row.querySelector('.full-search-rank');
                      const location = row.querySelector('.full-search-location');
                      const snippet = row.querySelector('.full-search-snippet');
                      number.textContent = rank;
                      location.textContent = 'Chapter location '.repeat(12);
                      snippet.textContent = 'Reader excerpt '.repeat(100);
                      const n = number.getBoundingClientRect(), l = location.getBoundingClientRect();
                      const s = snippet.getBoundingClientRect(), r = row.getBoundingClientRect();
                      return {gap: l.left - n.right, indent: s.left - n.left,
                        right: s.right - l.right, below: s.top >= l.bottom,
                        lines: s.height / parseFloat(getComputedStyle(snippet).lineHeight),
                        overflow: row.scrollWidth > row.clientWidth,
                        fits: r.right <= innerWidth};
                    }""", rank)
                    self.assertAlmostEqual(metrics["gap"], 4, delta=1)
                    self.assertAlmostEqual(metrics["indent"], 0, delta=1)
                    self.assertAlmostEqual(metrics["right"], 0, delta=1)
                    self.assertAlmostEqual(metrics["lines"], 5, delta=0.1)
                    self.assertTrue(metrics["below"] and metrics["fits"], metrics)
                    self.assertFalse(metrics["overflow"], metrics)

    def test_light_contrast_after_theme_transition(self):
        self.page.locator("#history").click()
        self.page.locator("#theme-toggle").click()
        self.settle()
        self.page.locator("#full-search-toggle").click()
        self.page.locator("#full-search-input").fill("Reader")
        self.page.locator(".full-search-result").first.wait_for()
        for selector in ("#full-search-input", ".full-search-status", ".full-search-location",
                         ".full-search-snippet", "#full-search-toggle", "#reader-path"):
            self.assert_contrast(selector)
        self.page.locator("#reader-path").hover()
        self.assert_contrast("#reader-path")
        # Exercise document surfaces without loading external conversion engines.
        self.page.locator("#content").evaluate("""content => content.insertAdjacentHTML('beforeend', `
            <div class="reader-error">Failed to load</div>
            <div class="epub-frame"><article class="reader-markdown">Chapter text</article></div>
            <article class="reader-markdown"><a href="#test">Document link</a></article>`)
        """)
        for selector in (".reader-error", ".epub-frame .reader-markdown", ".reader-markdown a"):
            self.assert_contrast(selector)

    def test_pdf_page_surface_follows_dark_theme_without_touching_text_layer(self):
        self.page.route("**/api/reader-content**", lambda route: route.fulfill(
            content_type="application/pdf", body=support.minimal_pdf()
        ))
        source = urllib.parse.quote(
            "https://huggingface.co/datasets/VoiceOfML/Test/resolve/main/theme.pdf", safe=""
        )
        self.page.goto(
            f"{self.origin}/static/reader.html?url={source}&ext=pdf&title=Theme PDF",
            wait_until="domcontentloaded",
        )
        self.page.wait_for_function("() => document.documentElement.dataset.readerPhase === 'ready'")
        canvas = self.page.locator('.reader-content[data-mode="pdf"] .reader-page canvas').first
        self.page.locator('.reader-page canvas.ready').first.wait_for()
        self.page.wait_for_function("() => document.querySelector('.reader-page')?.dataset.textReady === '1'")
        self.page.locator('.reader-page').first.evaluate("node => window.__themePage = node")
        text_layer = self.page.locator('.reader-pdf-text').first
        self.assertEqual(text_layer.evaluate("e => getComputedStyle(e).filter"), "none")
        self.assertEqual(canvas.evaluate("e => getComputedStyle(e).filter"), "none")
        self.page.locator("#history").click()
        self.page.locator("#page-invert-toggle").click()
        for theme in ('light', 'dark'):
            self.page.locator("#theme-toggle").click()
            self.settle()
            self.assertEqual(canvas.evaluate("e => getComputedStyle(e).filter"), 'invert(0.9) hue-rotate(180deg)')
        self.page.locator("#history").click()
        for width in (1100, 390):
            self.page.set_viewport_size({"width": width, "height": 844})
            self.page.locator('.reader-pdf-text-run').first.evaluate("node => {const range=document.createRange(); range.selectNodeContents(node); getSelection().removeAllRanges(); getSelection().addRange(range);}")
            selected = self.page.evaluate("getSelection().toString()")
            self.assertEqual(selected, 'Reader PDF')
            original_pixels = canvas.evaluate("c => c.toDataURL()")
            for theme in ("dark", "light", "dark"):
                self.page.evaluate("theme => {document.documentElement.dataset.theme = theme; document.documentElement.dataset.pageInverted = String(theme === 'dark');}", theme)
                self.settle()
                bounds = self.page.locator('.reader-page').first.bounding_box()
                png = Image.open(io.BytesIO(self.page.screenshot())).convert("RGB")
                pixel = png.getpixel((round(bounds['x'] + bounds['width'] * .85), round(bounds['y'] + 30)))
                self.assertTrue(max(pixel) < 50 if theme == "dark" else min(pixel) > 240, (theme, pixel))
                self.assertEqual(canvas.evaluate("c => c.toDataURL()"), original_pixels)
                self.assertTrue(self.page.evaluate("document.querySelector('.reader-page') === __themePage"))
                self.assertEqual(self.page.evaluate("getSelection().toString()"), selected)
        self.page.evaluate("getSelection().removeAllRanges()")
        self.page.locator('#history').click()
        self.page.locator('#full-search-toggle').click()
        self.page.locator('#full-search-input').fill('Reader')
        self.page.wait_for_function("() => document.querySelector('#full-search-status').textContent === '1 个结果'")
        mark = self.page.locator('.reader-page mark.full-search-highlight').first
        self.assertEqual(mark.text_content(), 'Reader')
        self.assertEqual(mark.evaluate("e => getComputedStyle(e).filter"), 'none')
        self.assertNotEqual(mark.evaluate("e => getComputedStyle(e).backgroundColor"), 'rgba(0, 0, 0, 0)')
        self.page.locator('#content').evaluate("node => node.dataset.mode = 'image-pages'")
        self.assertEqual(self.page.locator('.reader-page canvas').first.evaluate("e => getComputedStyle(e).filter"), 'none')

    def test_pdf_page_djvu_canvas_inverts_without_affecting_original_images(self):
        state = install_native_djvu(self.page, self.origin)
        self.page.goto(state['url'])
        canvas = self.page.locator('.reader-page canvas.ready').first
        canvas.wait_for()
        original = canvas.evaluate('c => c.toDataURL()')
        self.assertEqual(canvas.evaluate('e => getComputedStyle(e).filter'), 'none')
        self.page.locator('#history').click()
        self.page.locator('#page-invert-toggle').click()
        self.page.locator('#history').click()
        for width in (1100, 390):
            self.page.set_viewport_size({'width': width, 'height': 844})
            for theme in ('dark', 'light', 'dark'):
                self.page.evaluate("theme => {document.documentElement.dataset.theme = theme; document.documentElement.dataset.pageInverted = String(theme === 'dark');}", theme)
                self.settle()
                bounds = canvas.bounding_box()
                png = Image.open(io.BytesIO(self.page.screenshot())).convert('RGB')
                pixel = png.getpixel((round(bounds['x'] + bounds['width'] * .8), round(bounds['y'] + 30)))
                self.assertTrue(max(pixel) < 50 if theme == 'dark' else min(pixel) > 240, (theme, pixel))
                self.assertEqual(canvas.evaluate('c => c.toDataURL()'), original)
        self.assertEqual(self.page.locator('.reader-page img').count(), 0)
        self.page.route('**/api/reader-content?**', lambda route: route.fulfill(
            content_type='image/webp', body=support.IMAGE_FIXTURES['webp'][1]))
        source = urllib.parse.quote('https://huggingface.co/datasets/VoiceOfML/Test/resolve/main/style.webp', safe='')
        self.page.goto(f'{self.origin}/static/reader.html?url={source}&ext=webp')
        image = self.page.locator('img.reader-image')
        image.wait_for()
        self.page.evaluate("document.documentElement.dataset.pageInverted='true'")
        self.assertEqual(image.evaluate('e => getComputedStyle(e).filter'), 'none')

    def test_page_inversion_remembers_explicit_choice_and_fits_sidebar(self):
        self.page.route('**/api/reader-content**', lambda route: route.fulfill(
            content_type='application/pdf', body=support.minimal_pdf()))
        source = urllib.parse.quote('https://huggingface.co/datasets/VoiceOfML/Test/resolve/main/inversion.pdf', safe='')
        self.page.goto(f'{self.origin}/static/reader.html?url={source}&ext=pdf')
        self.page.locator('.reader-page canvas.ready').first.wait_for()
        button = self.page.locator('#page-invert-toggle')
        self.assertEqual(button.get_attribute('aria-pressed'), 'false')
        self.assertEqual(button.text_content(), '页面反色')
        self.page.locator('#history').click()
        button.click()
        self.assertEqual(button.text_content(), '关闭页面反色')
        self.assertEqual(self.page.evaluate("localStorage.getItem('reader-page-inversion')"), 'true')
        for width in (1100, 390, 320):
            self.page.set_viewport_size(dict(width=width, height=844))
            self.page.locator('#full-search-toggle').click()
            self.settle()
            metrics = self.page.locator('#history-panel > header').evaluate('''header => {
              const buttons = [...header.querySelectorAll('button')].filter(node => !node.hidden && getComputedStyle(node).display !== 'none');
              const bounds = header.getBoundingClientRect();
              const boxes = buttons.map(node => node.getBoundingClientRect());
              return {ids: buttons.map(node => node.id), fits: boxes.every(rect => rect.left >= bounds.left && rect.right <= bounds.right),
                gaps: boxes.slice(1).map((rect, index) => rect.left - boxes[index].right), overflow: header.scrollWidth > header.clientWidth};
            }''')
            expected=['full-search-toggle', 'page-invert-toggle', 'theme-toggle', 'history-close']
            if width <= 600: expected.insert(0,'reader-location-toggle')
            self.assertEqual(metrics['ids'], expected)
            self.assertTrue(metrics['fits'], metrics)
            self.assertFalse(metrics['overflow'], metrics)
            self.assertTrue(all(gap >= 0 for gap in metrics['gaps']), metrics)
        self.page.reload()
        self.page.locator('.reader-page canvas.ready').first.wait_for()
        self.assertEqual(button.get_attribute('aria-pressed'), 'true')
        self.assertEqual(button.text_content(), '关闭页面反色')
        self.page.locator('#history').click()
        self.page.locator('#theme-toggle').click()
        self.settle()
        self.assert_contrast('#page-invert-toggle')
        self.assertEqual(self.page.locator('canvas.ready').first.evaluate('e => getComputedStyle(e).filter'), 'invert(0.9) hue-rotate(180deg)')
        button.click()
        self.page.reload()
        self.page.locator('.reader-page canvas.ready').first.wait_for()
        self.assertEqual(button.get_attribute('aria-pressed'), 'false')
        self.assertEqual(self.page.locator('canvas.ready').first.evaluate('e => getComputedStyle(e).filter'), 'none')

    def open_theme_fixture(self, data):
        self.page.route("**/api/reader-content**", lambda route: route.fulfill(body=data))
        source = urllib.parse.quote("https://huggingface.co/datasets/VoiceOfML/Test/resolve/main/theme.epub", safe="")
        self.page.goto(f"{self.origin}/static/reader.html?url={source}&ext=epub&title=Theme")
        self.page.wait_for_function("() => document.documentElement.dataset.readerPhase === 'ready'")

    def dismiss_toc_hint(self):
        # One/two-entry directories deliberately do not auto-open a hint.
        # Normalize either state; hint policy has separate behavior tests.
        self.page.locator("#history").evaluate("e=>{if(e.getAttribute('aria-expanded')==='true')e.click()}")
        self.page.wait_for_function("() => document.querySelector('#history-panel').hidden")

    def check_document_theme_round_trip(self, selector):
        self.dismiss_toc_hint()
        target = self.page.locator(selector).first
        initial = target.bounding_box()
        for theme in ("dark", "light", "dark"):
            if self.page.locator("html").get_attribute("data-theme") != theme:
                support.open_reader_panel(self.page)
                self.page.locator("#theme-toggle").click()
                self.page.locator("#history").click()
                self.page.wait_for_function("() => document.querySelector('#history-panel').hidden")
                self.settle()
            colors = target.evaluate("e=>[getComputedStyle(e).color,getComputedStyle(e).backgroundColor]")
            self.assertEqual(colors, ["rgb(231, 233, 235)", "rgba(0, 0, 0, 0)"] if theme == "dark"
                             else ["rgb(0, 0, 0)", "rgb(255, 255, 255)"])
            self.assertEqual(target.bounding_box(), initial)

    def test_epub_legacy_font_colors_and_shading_follow_shadow_theme(self):
        with zipfile.ZipFile(io.BytesIO(epub_with_navigation())) as archive:
            files = {name: archive.read(name) for name in archive.namelist()}
        files["OEBPS/nav.xhtml"] = files["OEBPS/nav.xhtml"].decode().replace(
            "</body>", '<p style="background-color:white"><font color="black" id="night-text" '
            'style="background-color:white">Night text</font></p>'
            '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">'
            '<rect id="night-art" width="16" height="16" fill="red"/></svg></body>'
        )
        self.open_theme_fixture(zip_bytes(files))
        self.check_document_theme_round_trip("#night-text")
        self.assertEqual(self.page.locator("#night-art").evaluate("e=>getComputedStyle(e).fill"), "rgb(255, 0, 0)")
        self.assertEqual(self.page.locator("#night-art").evaluate("e=>getComputedStyle(e.ownerSVGElement).filter"), "none")

    def test_numeric_controls_have_visible_keyboard_focus_in_both_themes(self):
        self.page.locator(".page-controls").evaluate("element => element.hidden = false")
        for theme in ("dark", "light"):
            self.page.locator("html").evaluate("(element, theme) => element.dataset.theme = theme", theme)
            self.page.keyboard.press("Tab")
            for selector in ("#page-number", "#zoom"):
                control = self.page.locator(selector)
                control.focus()
                style = control.evaluate("""element => ({
                    visible: element.matches(':focus-visible'),
                    width: parseFloat(getComputedStyle(element).outlineWidth),
                    style: getComputedStyle(element).outlineStyle
                })""")
                self.assertTrue(style["visible"])
                self.assertGreaterEqual(style["width"], 2)
                self.assertEqual(style["style"], "solid")

    def test_short_dialog_scrolls_to_actions_and_retains_editor_grid(self):
        self.page.set_viewport_size({"width": 390, "height": 240})
        self.page.locator("#bookmark-ribbon").click()
        dialog = self.page.locator("#bookmark-popover")
        self.page.locator("#bookmark-excerpt-input").evaluate("element => element.style.height = '500px'")
        metrics = dialog.evaluate("""element => ({
            bottom: element.getBoundingClientRect().bottom,
            overflow: getComputedStyle(element).overflowY,
            scrollable: element.scrollHeight > element.clientHeight,
            editor: getComputedStyle(element.querySelector('.bookmark-edit-fields')).display
        })""")
        self.assertLessEqual(metrics["bottom"], 230)
        self.assertEqual(metrics["overflow"], "auto")
        self.assertTrue(metrics["scrollable"])
        self.assertEqual(metrics["editor"], "grid")
        cancel = self.page.locator("#bookmark-cancel")
        cancel.scroll_into_view_if_needed()
        rect = cancel.bounding_box()
        self.assertGreaterEqual(rect["y"], 78)
        self.assertLessEqual(rect["y"] + rect["height"], 230)
        cancel.click()
        self.assertTrue(dialog.is_hidden())

    def test_foliate_and_video_follow_toolbar_across_breakpoint_and_resize(self):
        for width, height in ((390, 844), (390, 360), (600, 500), (601, 500), (1440, 900)):
            with self.subTest(width=width, height=height):
                self.page.set_viewport_size({"width": width, "height": height})
                for mode in ("foliate", "video"):
                    metrics = self.page.locator("#content").evaluate("""(content, mode) => {
                        content.dataset.mode = mode;
                        content.innerHTML = mode === 'video' ? '<video class="reader-video"></video>' : '';
                        const toolbar = document.querySelector('.reader-toolbar').getBoundingClientRect();
                        const style = getComputedStyle(content);
                        return {toolbar: toolbar.height, height: parseFloat(style.height),
                            minHeight: parseFloat(style.minHeight), padding: style.padding,
                            video: content.firstChild?.getBoundingClientRect().height};
                    }""", mode)
                    expected_toolbar = 36 if width <= 600 else 44
                    self.assertEqual(metrics["toolbar"], expected_toolbar)
                    self.assertAlmostEqual(metrics["height"], height - expected_toolbar, delta=1)
                    self.assertEqual(metrics["padding"], "0px")
                    if mode == "foliate":
                        self.assertAlmostEqual(metrics["minHeight"], height - expected_toolbar, delta=1)
                    else:
                        self.assertAlmostEqual(metrics["video"], height - expected_toolbar, delta=1)

    def test_mobile_folder_action_lives_in_options_without_expanding_toolbar(self):
        self.page.emulate_media(reduced_motion='reduce')
        for width, height in ((320, 568), (390, 844), (600, 500), (601, 500)):
            with self.subTest(width=width, height=height):
                self.page.set_viewport_size({'width': width, 'height': height})
                self.assertEqual(self.page.locator('.reader-toolbar').bounding_box()['height'], 36 if width <= 600 else 44)
                self.assertEqual(self.page.locator('#reader-path').is_visible(), width > 600)
                self.page.locator('#history').click()
                self.page.wait_for_function("document.querySelector('#history').getAttribute('aria-expanded') === 'true'")
                toggle=self.page.locator('#reader-location-toggle')
                info=self.page.locator('#reader-panel-location')
                self.assertEqual(toggle.is_visible(), width <= 600)
                self.assertTrue(info.is_hidden())
                self.assertEqual(toggle.get_attribute('aria-expanded'),'false')
                if width <= 600:
                    header=self.page.locator('#history-panel > header')
                    self.page.evaluate("()=>document.querySelector('#page-invert-toggle').hidden=false")
                    for search_open in (False,True):
                        if search_open: self.page.locator('#full-search-toggle').click()
                        buttons=header.locator('button:visible')
                        boxes=[buttons.nth(i).bounding_box() for i in range(buttons.count())]
                        self.assertTrue(all(boxes[i]['x']+boxes[i]['width']<=boxes[i+1]['x']+.5 for i in range(len(boxes)-1)),boxes)
                        self.assertLessEqual(boxes[-1]['x']+boxes[-1]['width'],width)
                    toggle.click()
                    self.assertTrue(info.is_visible())
                    self.assertEqual(toggle.get_attribute('aria-expanded'),'true')
                self.page.locator('#history-close').click()
                self.page.wait_for_function("document.querySelector('#history').getAttribute('aria-expanded') === 'false'")
                self.assertTrue(info.is_hidden())
                self.assertEqual(toggle.get_attribute('aria-expanded'),'false')
                self.page.evaluate("()=>document.querySelector('#page-invert-toggle').hidden=true")

    def test_mobile_folder_action_has_contrast_and_stays_out_of_header(self):
        self.page.set_viewport_size({'width': 320, 'height': 568})
        self.page.emulate_media(reduced_motion='reduce')
        self.page.evaluate("()=>document.querySelector('.reader-panel-folder').textContent='所在目录：Test/一个非常长的目录/子目录/文件所在位置'")
        self.page.locator('#history').click()
        self.page.locator('#reader-location-toggle').click()
        action = self.page.locator('#reader-panel-path')
        action.wait_for(state='visible')
        for theme in ('dark', 'light'):
            with self.subTest(theme=theme):
                self.page.evaluate('theme=>document.documentElement.dataset.theme=theme', theme)
                self.assert_contrast('#reader-panel-path')
                action.hover()
                self.assert_contrast('#reader-panel-path')
                geometry = action.evaluate('''node=>{
                  const a=node.getBoundingClientRect(),h=document.querySelector('#history-panel > header').getBoundingClientRect();
                  const tabs=document.querySelector('.reader-panel-tabs').getBoundingClientRect();
                  const text=node.querySelector('.reader-panel-folder');
                  return {belowHeader:a.top>=h.bottom,aboveTabs:a.bottom<=tabs.top,ellipsized:text.scrollWidth>text.clientWidth};
                }''')
                self.assertTrue(all(geometry.values()), geometry)

    def test_mobile_file_info_works_without_a_folder_target(self):
        self.page.set_viewport_size({'width':320,'height':568})
        self.page.emulate_media(reduced_motion='reduce')
        self.page.locator('#history').click()
        toggle=self.page.get_by_role('button',name='文件信息',exact=True)
        toggle.press('Enter')
        self.assertEqual(toggle.get_attribute('aria-controls'),'reader-panel-location')
        self.assertEqual(toggle.get_attribute('aria-expanded'),'true')
        self.assertTrue(self.page.locator('#reader-panel-path').is_disabled())
        self.assertTrue(self.page.locator('.reader-panel-filename').is_visible())
        self.page.locator('#history-tab').click()
        self.assertTrue(self.page.locator('#reader-panel-location').is_visible())
        toggle.press('Enter')
        self.assertTrue(self.page.locator('#reader-panel-location').is_hidden())
        self.assertEqual(toggle.get_attribute('aria-expanded'),'false')
        self.assertEqual(self.page.locator('#history-tab').get_attribute('aria-selected'),'true')

    def test_mobile_panel_is_compact_and_folder_scrolls_with_directory(self):
        self.page.emulate_media(reduced_motion='reduce')
        self.page.evaluate('''()=>{
          document.querySelector('.reader-panel-filename').textContent='文件：original.pdf';
          document.querySelector('.reader-panel-folder').textContent='所在目录：Test/docs';
          document.querySelector('#toc-list').innerHTML=Array.from({length:40},(_,i)=>
            `<div class="panel-item toc-item"><div class="panel-item-main">目录第${i+1}项</div></div>`).join('');
          document.querySelector('#history-list').innerHTML='<div class="panel-item"><button class="panel-item-main">历史</button></div>';
        }''')
        for width in (320, 390, 600):
            with self.subTest(width=width):
                self.page.set_viewport_size({'width':width,'height':700})
                self.page.locator('#history').click()
                toggle=self.page.locator('#reader-location-toggle')
                info=self.page.locator('#reader-panel-location')
                self.assertTrue(info.is_hidden())
                self.page.evaluate('''()=>{if(!document.querySelector('#history-list .panel-item-main'))
                  document.querySelector('#history-list').innerHTML='<div class="panel-item"><button class="panel-item-main">历史</button></div>'}''')
                metrics=self.page.evaluate('''()=>{const panel=document.querySelector('#history-panel'),
                  toc=document.querySelector('#toc-panel'),path=document.querySelector('#reader-panel-location'),
                  a=document.querySelector('#toc-list .panel-item-main'),b=document.querySelector('#history-list .panel-item-main');
                  return {width:panel.getBoundingClientRect().width, tocFont:getComputedStyle(a).fontSize,
                    historyFont:getComputedStyle(b).fontSize, pathInToc:toc.contains(path),
                    rowHeight:a.parentElement.getBoundingClientRect().height};}''')
                self.assertAlmostEqual(metrics['width'],width*.85,delta=1)
                self.assertEqual(metrics['tocFont'],metrics['historyFont'])
                self.assertEqual(metrics['tocFont'],'13px')
                self.assertFalse(metrics['pathInToc'])
                self.assertLessEqual(metrics['rowHeight'],40)
                for tab in ('bookmarks-tab','history-tab'):
                    self.page.locator('#'+tab).click()
                    toggle.click()
                    self.assertTrue(info.is_visible(),tab)
                    self.assertEqual(toggle.get_attribute('aria-expanded'),'true')
                    self.assertEqual(self.page.locator('#'+tab).get_attribute('aria-selected'),'true')
                    toggle.click()
                    self.assertTrue(info.is_hidden())
                toggle.click()
                self.page.locator('#history-close').click()
                self.assertTrue(info.is_hidden())

    def test_mobile_long_filename_scrolls_without_expanding_or_hiding_folder(self):
        self.page.set_viewport_size({'width':320,'height':700})
        self.page.emulate_media(reduced_motion='reduce')
        self.page.evaluate("()=>document.querySelector('.reader-panel-filename').textContent='文件：'+('很长的文件名称'.repeat(15))+'.pdf'")
        self.page.locator('#history').click()
        self.page.locator('#reader-location-toggle').click()
        name=self.page.locator('.reader-panel-filename')
        self.assertTrue(name.evaluate('n=>n.scrollWidth>n.clientWidth'))
        before=name.bounding_box()['height']
        name.focus()
        name.press('End')
        self.assertGreater(name.evaluate('n=>n.scrollLeft'),0)
        self.assertEqual(name.evaluate('n=>getComputedStyle(n).whiteSpace'),'nowrap')
        self.assertAlmostEqual(name.bounding_box()['height'],before,delta=1)
        self.assertTrue(self.page.locator('#reader-panel-path').is_visible())
        self.assertTrue(self.page.locator('#history-panel').is_visible())

    def test_mobile_filename_accepts_horizontal_touch_swipe(self):
        context=self.browser.new_context(viewport={'width':320,'height':700},is_mobile=True,has_touch=True)
        try:
            page=context.new_page()
            page.route('**/api/reader-content**',lambda route:route.fulfill(content_type='text/plain',body='Readable text'))
            source=urllib.parse.quote('https://huggingface.co/datasets/VoiceOfML/Test/resolve/main/touch.txt',safe='')
            page.goto(f'{self.origin}/static/reader.html?url={source}&ext=txt&title=Touch')
            page.wait_for_function("()=>document.documentElement.dataset.readerPhase==='ready'")
            page.evaluate("()=>document.querySelector('.reader-panel-filename').textContent='文件：'+('非常长的文件名称'.repeat(20))+'.pdf'")
            page.locator('#history').click()
            page.locator('#reader-location-toggle').click()
            name=page.locator('.reader-panel-filename')
            box=name.bounding_box()
            session=context.new_cdp_session(page)
            x,y=box['x']+box['width']-20,box['y']+box['height']/2
            session.send('Input.dispatchTouchEvent',{'type':'touchStart','touchPoints':[{'x':x,'y':y}]})
            for delta in (30,60,90,120):
                session.send('Input.dispatchTouchEvent',{'type':'touchMove','touchPoints':[{'x':x-delta,'y':y}]})
                page.wait_for_timeout(25)
            session.send('Input.dispatchTouchEvent',{'type':'touchEnd','touchPoints':[]})
            page.wait_for_function("()=>document.querySelector('.reader-panel-filename').scrollLeft>0")
            self.assertTrue(page.locator('#reader-panel-path').is_visible())
            self.assertEqual(page.locator('#reader-location-toggle').get_attribute('aria-expanded'),'true')
        finally:
            context.close()

    def test_mobile_short_filename_does_not_scroll_and_long_name_adapts_on_resize(self):
        self.page.set_viewport_size({'width':390,'height':700})
        self.page.emulate_media(reduced_motion='reduce')
        self.page.locator('#history').click()
        self.page.locator('#reader-location-toggle').click()
        name=self.page.locator('.reader-panel-filename')
        self.page.evaluate("()=>document.querySelector('.reader-panel-filename').textContent='文件：短文.txt'")
        self.page.wait_for_function("()=>document.querySelector('.reader-panel-filename').scrollWidth===document.querySelector('.reader-panel-filename').clientWidth")
        self.assertEqual(name.evaluate('n=>getComputedStyle(n).display'),'block')
        self.assertEqual(name.evaluate('n=>n.scrollWidth'),name.evaluate('n=>n.clientWidth'))
        self.assertEqual(self.page.locator('.reader-panel-file summary').count(),0)
        self.page.evaluate("()=>document.querySelector('.reader-panel-filename').textContent='文件：'+('很长的文件名称'.repeat(15))+'.pdf'")
        self.assertGreater(name.evaluate('n=>n.scrollWidth'),name.evaluate('n=>n.clientWidth'))
        self.page.evaluate("()=>document.querySelector('.reader-panel-filename').textContent='文件：'+('宽度测试'.repeat(7))+'.pdf'")
        self.page.wait_for_function("()=>document.querySelector('.reader-panel-filename').scrollWidth>document.querySelector('.reader-panel-filename').clientWidth")
        self.page.set_viewport_size({'width':600,'height':700})
        self.page.wait_for_function("()=>document.querySelector('.reader-panel-filename').scrollWidth===document.querySelector('.reader-panel-filename').clientWidth")
        self.page.set_viewport_size({'width':320,'height':700})
        self.page.wait_for_function("()=>document.querySelector('.reader-panel-filename').scrollWidth>document.querySelector('.reader-panel-filename').clientWidth")

    def test_theme_transition_preserves_drawer_and_filter_motion(self):
        self.page.locator("#history").click()
        self.page.locator("#bookmarks-tab").click()
        self.page.locator("#bookmarks-panel .panel-search-toggle").click()
        self.settle()
        transitions = self.page.evaluate("""() => {
            document.documentElement.classList.add('theme-transition');
            document.documentElement.dataset.theme = 'light';
            return ['#history-panel', '#bookmarks-panel .panel-search'].map(selector => {
                const style = getComputedStyle(document.querySelector(selector));
                return style.transitionProperty.split(',').map(value => value.trim());
            });
        }""")
        for properties in transitions:
            self.assertIn("transform", properties)
            self.assertIn("opacity", properties)
            self.assertIn("background-color", properties)
        self.assertIn("visibility", transitions[0])
        self.assertIn("max-height", transitions[1])
        delay = self.page.locator("#history-panel").evaluate("""element => {
            element.classList.remove('is-open');
            const style = getComputedStyle(element);
            return style.transitionDelay.split(',')[style.transitionProperty.split(',')
                .findIndex(value => value.trim() === 'visibility')].trim();
        }""")
        self.assertEqual(delay, "0.18s")
        self.page.emulate_media(reduced_motion="reduce")
        for selector in ("#history-panel", "#bookmarks-panel .panel-search"):
            values = self.page.locator(selector).evaluate("""element => {
                const style = getComputedStyle(element);
                return [style.transitionDuration, style.transitionDelay];
            }""")
            self.assertTrue(all(float(value.strip().removesuffix('s')) == 0
                                for group in values for value in group.split(',')), values)

    def test_high_contrast_overrides_light_borders_and_internal_link_reset(self):
        self.page.emulate_media(contrast="more")
        self.page.locator("#content").evaluate("""content => content.insertAdjacentHTML('beforeend',
            '<div class="foliate-continuous"><a href="#internal">Internal link</a></div>')""")
        for theme in ("dark", "light"):
            self.page.locator("html").evaluate("(element, theme) => element.dataset.theme = theme", theme)
            for selector, border in ((".reader-toolbar", "borderBottomColor"),
                                     (".reader-panel", "borderLeftColor"),
                                     (".reader-panel-tabs", "borderBottomColor"),
                                     (".reader-panel > header", "borderBottomColor"),
                                     (".reader-progress-tools", "borderTopColor")):
                colors = self.page.locator(selector).evaluate("""(element, border) => {
                    const style = getComputedStyle(element);
                    return [style[border], style.color];
                }""", border)
                self.assertEqual(colors[0], colors[1], (selector, theme, colors))
            self.assertIn("underline", self.page.locator(".foliate-continuous a").evaluate(
                "element => getComputedStyle(element).textDecorationLine"
            ))

    def test_rendered_foliate_shadow_tracks_contrast_without_layout_changes(self):
        with zipfile.ZipFile(io.BytesIO(epub_with_navigation())) as archive:
            files = {name: archive.read(name) for name in archive.namelist()}
        # A book rule makes normal and high-contrast underlining distinguishable.
        files["OEBPS/nav.xhtml"] = files["OEBPS/nav.xhtml"].decode().replace(
            "a{color:#000}", "a{color:#000;text-decoration:none!important}"
        ).replace("</a>", " ContrastTarget</a>", 1)
        book = zip_bytes(files)
        self.page.route("**/api/reader-content**", lambda route: route.fulfill(
            content_type="application/epub+zip", body=book
        ))
        source = urllib.parse.quote(
            "https://huggingface.co/datasets/VoiceOfML/Test/resolve/main/contrast.epub", safe=""
        )
        self.page.emulate_media(contrast="no-preference")
        self.page.goto(
            f"{self.origin}/static/reader.html?url={source}&ext=epub&title=Contrast",
            wait_until="domcontentloaded",
        )
        self.page.wait_for_function("() => document.documentElement.dataset.readerPhase === 'ready'")
        support.open_reader_panel(self.page)
        self.page.locator("#full-search-toggle").click()
        self.page.locator("#full-search-input").fill("ContrastTarget")
        self.page.locator("#full-search-results .full-search-result").first.click()
        highlight = self.page.locator(".foliate-continuous mark.full-search-highlight").first
        highlight.wait_for()
        self.settle()
        measure = """mark => {
            const root = mark.getRootNode(), link = mark.closest('a[href]');
            const style = getComputedStyle(mark);
            const rect = element => {
                const box = element.getBoundingClientRect();
                return [box.x, box.y, box.width, box.height];
            };
            const viewport = document.querySelector('#viewport');
            return {
                shadow: root instanceof ShadowRoot && root.host.matches('article[data-section]'),
                text: mark.textContent,
                decoration: getComputedStyle(link).textDecorationLine,
                outline: style.outlineStyle,
                width: parseFloat(style.outlineWidth),
                outlineColor: style.outlineColor,
                color: style.color,
                layout: [rect(document.querySelector('.reader-toolbar')), rect(viewport),
                    rect(root.host), rect(link), rect(mark),
                    [viewport.scrollWidth, viewport.scrollHeight, viewport.scrollTop]]
            };
        }"""
        for theme in ("dark", "light"):
            with self.subTest(theme=theme):
                self.page.locator("html").evaluate(
                    "(element, theme) => element.dataset.theme = theme", theme
                )
                before = highlight.evaluate(measure)
                self.assertTrue(before["shadow"])
                self.assertEqual(before["text"], "ContrastTarget")
                self.assertEqual(before["decoration"], "none")
                self.assertEqual(before["outline"], "none")
                self.page.emulate_media(contrast="more")
                high = highlight.evaluate(measure)
                self.assertIn("underline", high["decoration"])
                self.assertEqual(high["outline"], "solid")
                self.assertEqual(high["width"], 2)
                self.assertEqual(high["outlineColor"], high["color"])
                self.assertEqual(high["layout"], before["layout"])
                self.page.emulate_media(contrast="no-preference")
                self.assertEqual(highlight.evaluate(measure), before)