64 lines
2.5 KiB
HTML
64 lines
2.5 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" href="/static/js/vendor/xterm.css">
|
|
<style>body{background:#111;color:#eee;font-family:monospace;white-space:pre-wrap;}</style>
|
|
</head>
|
|
<body>
|
|
<div id="out">running...</div>
|
|
<div id="term" style="width:600px;height:300px;"></div>
|
|
<script src="/static/js/vendor/xterm.js"></script>
|
|
<script>
|
|
(async () => {
|
|
const results = {};
|
|
try {
|
|
const term = new Terminal({
|
|
cursorBlink: false,
|
|
fontFamily: "monospace",
|
|
fontSize: 14,
|
|
theme: { background: "#000000", foreground: "#e6e8eb", cursor: "#e6e8eb" },
|
|
copyOnSelect: true,
|
|
});
|
|
term.open(document.getElementById('term'));
|
|
term.write("Hello World Selection Test\r\n");
|
|
await new Promise(r => setTimeout(r, 100));
|
|
|
|
// Try to programmatically select a range: xterm.js exposes term.select(col, row, length)
|
|
term.select(0, 0, 11); // select "Hello World"
|
|
|
|
await new Promise(r => setTimeout(r, 100));
|
|
|
|
// Inspect style elements injected by xterm
|
|
const styleEls = [...document.querySelectorAll('style')];
|
|
results.styleElementCount = styleEls.length;
|
|
results.styleElementInfo = styleEls.map(s => ({
|
|
len: s.textContent.length,
|
|
sheetRulesAccessible: (() => { try { return s.sheet ? s.sheet.cssRules.length : null; } catch(e) { return 'ERR:'+e.message; } })(),
|
|
containsSelectionRule: s.textContent.includes('selectionBackgroundOpaque') || s.textContent.includes('xterm-selection')
|
|
}));
|
|
|
|
// Find the selection layer div(s)
|
|
const selLayer = document.querySelector('.xterm-selection-layer, [class*=selection]');
|
|
results.selLayerFound = !!selLayer;
|
|
results.selLayerClass = selLayer ? selLayer.className : null;
|
|
const selDivs = document.querySelectorAll('.xterm-selection-layer div, [class*=selection] div');
|
|
results.selDivCount = selDivs.length;
|
|
results.selDivComputedBg = [...selDivs].slice(0,5).map(d => getComputedStyle(d).backgroundColor);
|
|
results.selDivInlineStyle = [...selDivs].slice(0,5).map(d => d.getAttribute('style'));
|
|
|
|
results.hasCssomSelectionRule = styleEls.some(s => {
|
|
try {
|
|
return s.sheet && [...s.sheet.cssRules].some(r => r.cssText && r.cssText.includes('selection'));
|
|
} catch(e) { return 'ERR:'+e.message; }
|
|
});
|
|
|
|
document.getElementById('out').textContent = 'DONE:' + JSON.stringify(results, null, 2);
|
|
} catch (e) {
|
|
document.getElementById('out').textContent = 'EXCEPTION: ' + e.message + '\n' + e.stack;
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|