<svg xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 40 30"
  style="border: 1px solid gray; pointer-events: visible; max-width: 100%; height: auto"
  id="iframe-svg"
>
</svg>

import {svg} from './simpatico.js';

const iframeSvg = svg.elt('iframe-svg');
// NB: adjust viewbox of svg to add more rows of content
const urls = [
  'index', 'chat','combine', 'core',
  'crypto', 'friendly', 'reflector', 'lit.md',
  'stree', 'svg', 'websocket'
];

const clickableIframe = (url, {x,y}) => `
  <g transform="translate(${x} ${y})">
    <foreignObject id="embedded-iframe" width="500px" height="500px" transform="scale(.02)">
      <iframe width="500px" height="500px" src="${url}" style="overflow:hidden" scrolling="no"></iframe>
    </foreignObject>
    <rect onclick="window.open('${url}','_blank')" width="10" height="10" fill-opacity="0"/>
  </g>
`;

const pos = (index, cols=4, W=10, H=10) => {
  const x = index % cols * W;
  const y = Math.floor(index / cols) * H;
  return { x, y };
}
const iframeAtIndex = (url, i) => clickableIframe(url, pos(i));
const html = urls.map(iframeAtIndex).reduce((a,b) => a + b, '');
iframeSvg.innerHTML = html;

  const headless = /\bHeadlessChrome\//.test(navigator.userAgent);
  let testCount = document.querySelectorAll("iframe").length;

  const svgIcon = fill => `data:image/svg+xml,
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'>
        <rect width='1' height='1' fill='${fill}' />
    </svg>`;

  // Here we interact with the iframes indirectly, by listening for events the iframes may emit.
// Communicate with the outside world if in headless chrome through the DOM.
  let failed = false;
  window.addEventListener('test-failure', (e) => {
    failed = true;
    favicon.href = svgIcon('red');
    document.body.style.backgroundColor = 'red';
    if (headless){
      document.body.innerText = JSON.stringify(e);
    }
  })
  window.addEventListener('test-success', () => {
    if (!failed) favicon.href = svgIcon('green');
    if (headless && (--testCount === 0)){
      document.body.innerText = '';
    }
  })

/// DO NOT EXECUTE - this is node code
import { exec } from 'child_process';

// Headless chrome is invoked with the dump-dom flag, which we'll use to check results.
const command = (url) => `chromium --headless --dump-dom --disable-gpu --virtual-time-budget=2000 ${url} `;

// The acceptance page knows to check for headless chrome via user agent headers.
// If the tests pass, the body is cleaned out.
// TODO: change this behavior/protocol to add logging output to DOM
const defaultUrl = 'https://simpatico.local:8443/acceptance';

// Get the body content of an HTML string.
// TODO: look for specific test output nodes.
const extractBodyContent = (html) => {
  const bodyRegex = /<body[^>]*>((.|[\n\r])*)<\/body>/im;
  const match = bodyRegex.exec(html);
  return match && match[1] ? match[1].trim() : null;
}

// Run the headless chrome command asynchronously
// Get the --dump-dom in the stdout handler.
// Note that error/stderror refer only to the external chrome process and not the internals of the tab.
// (for that you need to start chrome with debbugging enabled and connect to that port, which is what puppeteer does.)
const runAcceptance = (url=defaultUrl) => {
  exec(command(url), (error, stdout, stderr) => {
    if (error) {
      console.error(`error: ${error},'stderror', ${stderr}`);
    } else {
      const content = extractBodyContent(stdout);
      if (content !== null && content !== '') {
        console.error('body content not empty', content);
      } else {
        console.log('success')
      }
    }
  });
};

// Support running this module directly from the command line, as well as incorporating it into another process.
// This is a bit hacky, but honestly acceptance.js is very tightly coupled to acceptence.md
// So supporting an alternative url on the command line is kind of window dressing
const isRunFromCommandline = () => process.argv[1].endsWith('acceptance.js');

if (isRunFromCommandline()) {
  const [node, acceptance, url=defaultUrl] = process.argv;
  console.debug(`running acceptance test with command line ${command(url)}`);
  runAcceptance(url);
}

export default runAcceptance;

<!---DOCTYPE html>
<html>
<head>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        a {
            display: block;
            width: 100vw;
            height: 100vh;
            background-color: #f0f0f0; /* Set your desired background color */
            text-align: center;
            line-height: 100vh;
            text-decoration: none;
            color: transparent; /* Make the text color transparent */
        }
    </style>
</head>
<body>
    <a href="#">This is a link that takes up the entire viewport</a>
</body>
</html>