svg-render-smoke.html - KaiChat

Size: 3.1 KB Modified: 3/07/2026 8:47 PM
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>SVG render smoke test</title>
</head>
<body>
    <div id="statusBar"><span id="statusText"></span><span id="statusDetail"></span></div>
    <div id="conversationList"></div>
    <script>
        window.__kaiChatVersion = 'test';
        window.fetch = function (url) {
            var value = String(url || '').indexOf('/api/conversations') >= 0
                ? []
                : { testMode: false, version: 'test' };
            return Promise.resolve({
                ok: true,
                json: function () { return Promise.resolve(value); }
            });
        };
    </script>
    <script src="../KaiChat/wwwroot/js/chat.js"></script>
    <script>
        window.addEventListener('load', function () {
            try {
                var markdown = [
                    '```svg',
                    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 80" width="120" height="80">',
                    '  <rect width="120" height="80" fill="#1a1410"/>',
                    '  <circle cx="60" cy="40" r="24" fill="#d4953a"/>',
                    '</svg>',
                    '```'
                ].join('\n');

                var host = document.createElement('div');
                host.id = 'svgSmokeHost';
                host.innerHTML = renderMarkdown(markdown);
                document.body.appendChild(host);

                var block = document.querySelector('.svg-render-block');
                var img = document.querySelector('.svg-preview-img');
                var sourceButton = document.querySelector('[data-svg-source-button-id]');
                var sourcePanel = document.querySelector('.svg-source-panel');
                var id = block ? block.getAttribute('data-svg-id') : '';
                var size = id ? getSvgRasterSize(svgRenderSources[id]) : null;

                if (!block) throw new Error('missing svg block');
                if (!img || img.getAttribute('src').indexOf('data:image/svg+xml') !== 0) throw new Error('missing svg image');
                if (!sourceButton || !sourcePanel) throw new Error('missing source controls');
                if (!sourcePanel.hidden) throw new Error('source should begin hidden');
                sourceButton.click();
                if (sourcePanel.hidden) throw new Error('source did not show');
                openSvgViewer(id);
                if (document.getElementById('svgLightbox').hidden) throw new Error('lightbox did not open');
                closeSvgViewer();
                if (!document.getElementById('svgLightbox').hidden) throw new Error('lightbox did not close');
                if (!size || size.width !== 120 || size.height !== 80) throw new Error('bad raster size');

                document.body.setAttribute('data-svg-smoke', 'pass');
            } catch (error) {
                document.body.setAttribute('data-svg-smoke', 'fail');
                document.body.setAttribute('data-svg-smoke-error', error && error.message ? error.message : String(error));
            }
        });
    </script>
</body>
</html>
Offline