| """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, |
| minimal_docx, |
| static_server, |
| sync_playwright, |
| zip_bytes, |
| ) |
| from tests import test_reader_performance as support |
|
|
|
|
| @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") |
| |
| 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_images_follow_theme_but_original_images_do_not(self): |
| output = io.BytesIO() |
| Image.new('RGB', (600, 800), 'white').save(output, 'WEBP') |
| self.page.route('**/api/reader-content**', lambda route: route.fulfill( |
| json={"version": 2, "kind": "pdf-pages", "page_count": 1})) |
| self.page.route('**/pages/page-*.webp', lambda route: route.fulfill( |
| content_type='image/webp', body=output.getvalue())) |
| source = urllib.parse.quote('https://huggingface.co/datasets/vomebook/Reader-Assets/resolve/main/objects/aa/' + 'a' * 64 + '/page-manifest.json', safe='') |
| self.page.goto(f'{self.origin}/static/reader.html?url={source}&ext=pdf-pages') |
| image = self.page.locator('.reader-page img.ready').first |
| image.wait_for() |
| original = image.get_attribute('src') |
| self.assertEqual(image.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 = image.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(image.get_attribute('src'), original) |
| self.page.evaluate("document.querySelector('#content').dataset.mode = 'image-pages'") |
| 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); |
| 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}; |
| }''') |
| self.assertEqual(metrics['ids'], ['full-search-toggle', 'page-invert-toggle', 'theme-toggle', 'history-close']) |
| 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, extension, data): |
| self.page.route("**/api/reader-content**", lambda route: route.fulfill(body=data)) |
| source = urllib.parse.quote( |
| f"https://huggingface.co/datasets/vomebook/Reader-Assets/resolve/main/objects/aa/{'a' * 64}/docx-native-v2/document.docx" |
| if extension == "docx" else "https://huggingface.co/datasets/VoiceOfML/Test/resolve/main/theme.epub", safe="" |
| ) |
| self.page.goto(f"{self.origin}/static/reader.html?url={source}&ext={extension}&title=Theme") |
| self.page.wait_for_function("() => document.documentElement.dataset.readerPhase === 'ready'") |
|
|
| def check_document_theme_round_trip(self, selector): |
| 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: |
| self.page.locator("#history").click() |
| self.page.locator("#theme-toggle").click() |
| self.page.locator("#history").click() |
| 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_docx_shaded_runs_and_paragraphs_follow_theme(self): |
| with zipfile.ZipFile(io.BytesIO(minimal_docx())) as archive: |
| files = {name: archive.read(name) for name in archive.namelist()} |
| files["word/document.xml"] = files["word/document.xml"].decode().replace( |
| "<w:p><w:r>", '<w:p><w:pPr><w:shd w:fill="FFFFFF"/></w:pPr><w:r>' |
| '<w:rPr><w:color w:val="000000"/><w:shd w:fill="FFFFFF"/></w:rPr>' |
| ) |
| self.open_theme_fixture("docx", zip_bytes(files)) |
| self.check_document_theme_round_trip(".reader-docx p span") |
| self.assertEqual(self.page.locator(".reader-docx p").first.evaluate( |
| "e=>getComputedStyle(e).backgroundColor"), "rgba(0, 0, 0, 0)") |
|
|
| 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("epub", 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_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.24s") |
| 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()} |
| |
| 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'") |
| self.page.locator("#history").click() |
| 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) |
|
|
