"""Structural checks of production HTML; not a browser layout/visual test.""" from html.parser import HTMLParser class Document(HTMLParser): def __init__(self, html): super().__init__(convert_charrefs=True) self.root = {'tag': 'root', 'attrs': {}, 'children': [], 'text': ''} self.stack = [self.root] self.ids = {} self.feed(html) assert self.stack == [self.root] def handle_starttag(self, tag, attrs): node = {'tag': tag, 'attrs': dict(attrs), 'children': [], 'text': '', 'parent': self.stack[-1]} self.stack[-1]['children'].append(node) if 'id' in node['attrs']: ident = node['attrs']['id'] assert ident not in self.ids, ident self.ids[ident] = node if tag not in {'meta', 'link', 'img', 'input', 'br', 'hr'}: self.stack.append(node) def handle_endtag(self, tag): assert self.stack[-1]['tag'] == tag, (tag, self.stack[-1]['tag']) self.stack.pop() def handle_data(self, data): for node in self.stack: node['text'] += data def check_layout(html): doc = Document(html) ids = doc.ids def classes(node): return node['attrs'].get('class', '').split() def descendants(node): for child in node['children']: yield child yield from descendants(child) def ancestor(node, cls): while 'parent' in node: node = node['parent'] if cls in classes(node): return node raise AssertionError(cls) for domain in ('serial', 'network', 'broker', 'writer'): trigger = ids['quick-' + domain] assert trigger['tag'] == 'button' and trigger['attrs']['type'] == 'button' assert trigger['attrs']['aria-controls'] == 'serial-settings' assert trigger['attrs']['aria-expanded'] == 'false' assert trigger['attrs']['aria-haspopup'] == 'dialog' assert trigger['attrs']['aria-label'] and 'disabled' in trigger['attrs'] assert ids['quick-full']['tag'] == 'a' and ids['quick-full']['attrs']['href'] == '#serial-settings' assert 'hidden' in ids['quick-header']['attrs'] assert ids['network-password']['parent'] is ids['network-password-label'] assert ids['network-password-mode']['parent'] is ids['network-password-mode-label'] for ident in ('settings-values', 'accounts-list', 'account-keys-list', 'network-summary', 'display-values', 'broker-values', 'ssh-values'): assert ids[ident]['tag'] == 'dl' assert 'settings-values' in classes(ids[ident]) for ident in ('serial-settings-content', 'account-settings', 'network-settings', 'display-settings', 'broker-settings', 'ssh-settings', 'lifecycle-settings'): nodes = list(descendants(ids[ident])) assert not any(n['tag'] == 'pre' for n in nodes) assert all('connection-detail' in classes(n) for n in nodes if n['tag'] == 'p') for n in nodes: if n['tag'] in ('input', 'select', 'textarea'): assert n['parent']['tag'] == 'label' try: ancestor(n, 'settings-edit') except AssertionError: ancestor(n, 'serial-edit') for ident in ('refresh-settings', 'refresh-accounts', 'network-refresh', 'display-refresh', 'broker-refresh', 'ssh-refresh', 'lifecycle-refresh'): assert ids[ident]['text'] == 'Refresh' for ident in ('serial-result', 'account-result', 'network-result', 'display-result', 'broker-result', 'ssh-result', 'lifecycle-result'): assert ids[ident]['text'] == 'Check Operation Result' for ident in ('network-boot', 'network-enabled', 'account-password-saved'): assert 'settings-check' in classes(ids[ident]['parent']) for ident in ('account-public-key', 'account-generated'): assert 'settings-wide' in classes(ids[ident]['parent']) assert 'readonly' in ids['account-generated']['attrs'] assert 'hidden' in ids['account-generated-panel']['attrs'] assert ids['network-apply']['parent'] is ids['network-wifi-save']['parent'] assert ids['network-wifi-save']['parent'] is ids['network-wifi-load']['parent'] assert ids['network-start']['parent'] is not ids['network-wifi-save']['parent'] assert ids['network-start']['parent'] is ids['network-next-profile']['parent'] assert html.index('id="account-delete"') < html.index('id="account-result"') < html.index('id="account-key-add"') < html.index('id="account-submit-password"') css = next(n['text'] for n in descendants(doc.root) if n['tag'] == 'style') for rule in ( '.settings-values dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}', '.settings-values{display:grid;grid-template-columns:minmax(110px,1fr) minmax(0,2fr);gap:8px 16px;max-width:600px}', '.serial-edit,.settings-edit{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;max-width:600px}', '.settings-edit .settings-wide{grid-column:1/-1}', '.settings-edit input[type=checkbox]{width:auto;flex:none}', '.settings-edit textarea{min-height:96px;resize:vertical}', '.settings-edit input[readonly]{font-family:monospace}', '.settings-page h3{font-size:1.17em;margin:1em 0}', '.settings-page .connection-detail{max-width:600px;overflow-wrap:anywhere}', '@media(max-width:360px)', '.settings-edit{grid-template-columns:minmax(0,1fr)}', ): assert rule in css, rule assert '.settings-edit textarea{font:inherit;width:100%;min-width:0;' in css print('PASS HTML layout: parsed structure, shared styles, labels, wrapping, checkbox sizing and action order across all seven settings views') def check_browser_layout(html, tmp, executable): """Optional real CSS layout check; fixture data, no application/network execution.""" import json import re import subprocess # Keep production HTML/CSS, but do not run its authenticated loader or assets. fixture = re.sub(r']*>.*?', '', html, flags=re.S) fixture = re.sub(r']*>|]*>', '', fixture) probe = r''' const cases = []; for (const width of [320, 600, 1200]) for (const view of ['serial-settings-content', 'account-settings', 'network-settings', 'display-settings']) for (const quick of [false, true]) { if (quick && !['serial-settings-content', 'network-settings'].includes(view)) continue; const height = quick ? 360 : 900; const frame = document.createElement('iframe'); frame.style.width = width + 'px'; frame.style.height = height + 'px'; cases.push(new Promise(resolve => { frame.onload = () => { const d = frame.contentDocument, win = frame.contentWindow; d.getElementById('serial-settings').hidden = false; for (const id of ['serial-settings-content', 'account-settings', 'network-settings', 'display-settings']) d.getElementById(id).hidden = id !== view; const section = d.getElementById(view); section.querySelectorAll('[hidden]').forEach(n => n.hidden = false); section.querySelectorAll('dl').forEach(dl => { dl.textContent = ''; for (let i = 0; i < 8; i++) { const dt = d.createElement('dt'), dd = d.createElement('dd'); dt.textContent = 'Password configured'; dd.textContent = 'SHA256:' + 'x'.repeat(96); dl.append(dt, dd); } }); section.querySelectorAll('input:not([type=checkbox]),textarea').forEach(n => n.value = 'x'.repeat(96)); const errors = []; if (quick) { const host = d.getElementById('serial-settings'); host.dataset.quick = 'true'; d.getElementById('quick-header').hidden = false; const rect = host.getBoundingClientRect(); if (rect.left < 0 || rect.top < 0 || rect.right > width || rect.bottom > height) errors.push('popover viewport overflow'); if (host.scrollWidth > host.clientWidth + 1) errors.push('popover horizontal overflow'); if (win.getComputedStyle(host).overflowY !== 'auto') errors.push('popover not scrollable'); for (const id of ['settings-navigation', 'network-password-mode-label', 'network-password-label', 'network-password-status']) { if (d.getElementById(id).getBoundingClientRect().width) errors.push('quick hidden content:' + id); } } for (const node of section.querySelectorAll('dl,input,select,textarea,.settings-edit,.serial-edit,.serial-actions')) { const rect = node.getBoundingClientRect(); if (!rect.width) continue; if (rect.left < 0 || rect.right > width + 1) errors.push('overflow:' + (node.id || node.className)); if (node.matches('dl') && node.scrollWidth > node.clientWidth + 1) errors.push('summary overflow'); if (node.matches('input[type=checkbox]') && rect.width > 30) errors.push('checkbox width'); if (node.matches('dl,.settings-edit,.serial-edit') && rect.width > 601) errors.push('max width'); } // Measure glyph ranges, not the full-width grid cell or textContent. // The normal-whitespace control proves the pair detects collapsing. for (const dd of quick ? [] : section.querySelectorAll('dl dd:first-of-type')) { const original = dd.textContent; const measureSSID = spaces => { dd.textContent = 'SSID: ' + JSON.stringify('office' + ' '.repeat(spaces) + 'wifi'); const range = d.createRange(); range.setStart(dd.firstChild, 7); range.setEnd(dd.firstChild, dd.textContent.length - 1); if (range.getClientRects().length !== 1) errors.push('SSID probe unexpectedly wrapped'); return range.getBoundingClientRect().width; }; const single = measureSSID(1), double = measureSSID(2); if (!(single > 0 && double > single + 1)) errors.push('consecutive SSID spaces collapsed'); dd.style.whiteSpace = 'normal'; if (Math.abs(measureSSID(2) - measureSSID(1)) > 0.1) errors.push('invalid whitespace control'); dd.style.removeProperty('white-space'); dd.textContent = original; } resolve({width, height, view, quick, errors}); }; })); frame.srcdoc = FIXTURE; document.body.append(frame); } Promise.all(cases).then(results => { const out = document.createElement('pre'); out.id = 'layout-results'; out.textContent = JSON.stringify(results); document.body.append(out); }); '''.replace('FIXTURE', json.dumps(fixture)) page = tmp / 'layout-probe.html' page.write_text('') result = subprocess.run([executable, '--headless', '--no-sandbox', '--disable-gpu', '--no-first-run', '--disable-background-networking', '--user-data-dir=' + str(tmp / 'chromium-profile'), '--virtual-time-budget=3000', '--dump-dom', page.as_uri()], capture_output=True, text=True, timeout=30) assert result.returncode == 0, result.stderr parsed = Document(result.stdout) results = json.loads(parsed.ids['layout-results']['text']) assert len(results) == 18 assert all(not case['errors'] for case in results), results print('PASS Chromium layout: four full views plus Serial/Wi-Fi popovers at 320/600/1200px (quick height360); viewport/overflow/secret exclusion and full-page whitespace checks (fixtures, not live app)')