Skip to content

Instantly share code, notes, and snippets.

@gterzian
Last active August 7, 2025 20:46
Show Gist options
  • Save gterzian/2012dc0c6666913e603ff2633e9b33cc to your computer and use it in GitHub Desktop.
Save gterzian/2012dc0c6666913e603ff2633e9b33cc to your computer and use it in GitHub Desktop.
<!DOCTYPE html><html lang=\"en\"><head>\n  <meta charset=\"utf-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  \n  <title>Servo aims to empower developers with a lightweight, high-performance alternative for embedding web technologies in applications.</title>\n  <meta property=\"og:title\" content=\"Servo aims to empower developers with a lightweight, high-performance alternative for embedding web technologies in applications.\">\n  \n\n  \n  <meta name=\"description\" content=\"Servo is a web rendering engine written in Rust, with WebGL and WebGPU support, and adaptable to desktop, mobile, and embedded applications.\">\n  <meta property=\"og:description\" content=\"Servo is a web rendering engine written in Rust, with WebGL and WebGPU support, and adaptable to desktop, mobile, and embedded applications.\">\n  \n  <meta name=\"keywords\" content=\"servo, servo engine, servo rendering engine, web engine, web rendering engine, web browser, web browser engine, rust\">\n  <meta name=\"author\" content=\"The Servo Project Developers\">\n\n  <meta property=\"og:site_name\" content=\"Servo\">\n  <meta property=\"og:type\" content=\"website\">\n  <meta property=\"og:image\" content=\"/img/servo-color-positive.png\">\n  <meta property=\"og:image:alt\" content=\"Servo logo\">\n  <meta property=\"og:logo\" content=\"/img/servo-symbol-color-no-container.png\">\n  <meta property=\"og:url\" content=\"/\">\n\n  <link rel=\"stylesheet\" href=\"/css/style.css\">\n  <link rel=\"shortcut icon\" href=\"/img/servo-symbol-color-no-container.png\">\n  <link href=\"https://unpkg.com/[email protected]/themes/prism-okaidia.css\" rel=\"stylesheet\">\n  <link rel=\"alternate\" href=\"/blog/feed.xml\" title=\"Servo Blog\" type=\"application/atom+xml\">\n</head>\n\n  <body class=\"is-page\">\n    <nav class=\"navbar\" role=\"navigation\" aria-label=\"main navigation\">\n  <div class=\"container\">\n    <div class=\"inner-container\">\n      <div class=\"navbar-brand\">\n        <a href=\"/\">\n          <img src=\"/img/servo-color.png\" alt=\"Home\">\n        </a>\n\n        <button id=\"hamburgerMenu\" class=\"navbar-burger\" data-target=\"navbar-menu\" aria-label=\"menu\" aria-expanded=\"false\" type=\"button\">\n          <span aria-hidden=\"true\"></span>\n          <span aria-hidden=\"true\"></span>\n          <span aria-hidden=\"true\"></span>\n        </button>\n      </div>\n\n      <div class=\"navbar-menu\" id=\"navbar-menu\">\n        \n          \n          \n            \n            <div class=\"navbar-item has-dropdown is-hoverable\">\n              <a class=\"navbar-link\n              \n                \n              \n                \n              \n                \n              \n                \n              \n            \" href=\"#\">\n                Get Involved\n              </a>\n              <div class=\"navbar-dropdown\">\n                \n                  <a class=\"navbar-item\" href=\"/contributing/\">\n                    Contributing\n                  </a>\n                \n                  <a class=\"navbar-item\" href=\"https://book.servo.org\" target=\"_blank\">\n                    Servo Book<span style=\"font-size: 0.8em;display:inline-block;margin-left: 4px\"><i class=\"fa-solid fa-up-right-from-square\"></i></span>\n                  </a>\n                \n                  <a class=\"navbar-item\" href=\"/wpt/\">\n                    WPT pass rates\n                  </a>\n                \n                  <a class=\"navbar-item\" href=\"/coc/\">\n                    Code of Conduct\n                  </a>\n                \n              </div>\n            </div>\n          \n        \n          \n          \n            <a class=\"navbar-item\" href=\"/download/\">\n              Download\n            </a>\n          \n        \n          \n          \n            <a class=\"navbar-item\" href=\"/blog/\">\n              Blog\n            </a>\n          \n        \n          \n          \n            <a class=\"navbar-item\" href=\"https://demo.servo.org/\" target=\"_blank\">\n              Demos<span style=\"font-size: 0.8em;display:inline-block;margin-left: 4px\"><i class=\"fa-solid fa-up-right-from-square\"></i></span>\n            </a>\n          \n        \n          \n          \n            \n            <div class=\"navbar-item has-dropdown is-hoverable\">\n              <a class=\"navbar-link\n              \n                \n              \n                \n              \n                \n              \n                \n              \n                \n              \n            \" href=\"#\">\n                About\n              </a>\n              <div class=\"navbar-dropdown\">\n                \n                  <a class=\"navbar-item\" href=\"/about/\">\n                    About Servo\n                  </a>\n                \n                  <a class=\"navbar-item\" href=\"/made-with/\">\n                    Made with Servo\n                  </a>\n                \n                  <a class=\"navbar-item\" href=\"https://github.com/servo/project/blob/main/governance/README.md\" target=\"_blank\">\n                    Governance<span style=\"font-size: 0.8em;display:inline-block;margin-left: 4px\"><i class=\"fa-solid fa-up-right-from-square\"></i></span>\n                  </a>\n                \n                  <a class=\"navbar-item\" href=\"/sponsorship/\">\n                    Sponsorship\n                  </a>\n                \n                  <a class=\"navbar-item\" href=\"/acknowledgements/\">\n                    Acknowledgements\n                  </a>\n                \n              </div>\n            </div>\n          \n        \n        <div class=\"navbar-end\">\n    \n      <a class=\"social-link is-github-color\" title=\"GitHub\" href=\"https://github.com/servo/servo\">\n        <span class=\"icon\"><i class=\"fab fa-github\"></i></span>\n      </a>\n    \n      <a class=\"social-link is-mastodon-color\" title=\"Mastodon\" href=\"https://floss.social/@servo\" rel=\"me\">\n        <span class=\"icon\"><i class=\"fab fa-mastodon\"></i></span>\n      </a>\n    \n      <a class=\"social-link is-bluesky-color\" title=\"Bluesky\" href=\"https://bsky.app/profile/servo.org\">\n        <span class=\"icon\"><i class=\"fab fa-bluesky\"></i></span>\n      </a>\n    \n      <a class=\"social-link is-linkedin-color\" title=\"LinkedIn\" href=\"https://www.linkedin.com/company/servo-project/\">\n        <span class=\"icon\"><i class=\"fab fa-linkedin\"></i></span>\n      </a>\n    \n</div>\n\n      </div>\n    </div>\n  </div>\n</nav>\n\n<script>\n  const hamburger = document.getElementById('hamburgerMenu');\n  const menu = document.getElementById('navbar-menu');\n\n  const toggleMenu = () => {\n    const isExpanded = hamburger.getAttribute('aria-expanded') === 'true';\n    hamburger.setAttribute('aria-expanded', !isExpanded);\n    menu.classList.toggle('is-active', isExpanded);\n  };\n\n  // Toggle on click\n  hamburger.addEventListener('click', toggleMenu);\n\n\n</script>\n    <main>\n      <section class=\"section\" id=\"homeHero\" aria-label=\"What is Servo\">\n  <div class=\"hero-body\">\n    <div class=\"container\">\n      <img class=\"hero-img\" src=\"/img/servo-color-positive-no-container.png\" alt=\"Home\">\n      <h1 class=\"title center-text\">\n        Servo aims to empower developers with a lightweight, high-performance alternative for embedding web technologies in applications.\n      </h1>\n      <div class=\"center-text cta-container\">\n        <a class=\"button button--hero\" href=\"/contributing/\">Get Involved</a>\n        <a class=\"button button--hero\" target=\"_blank\" href=\"https://opencollective.com/servo\">Donate</a>\n      </div>\n    </div>\n    <div class=\"gradient-back\">\n      <img src=\"/img/home-servo-hero.png\" alt=\"\">\n    </div>\n  </div>\n  <div class=\"container\">\n    <p class=\"subtitle center-text cta-text\">\n      Servo is a web browser rendering engine written in Rust, with WebGL and WebGPU support, and adaptable to desktop, mobile, and embedded applications.\n    </p>\n    <div class=\"features\">\n      <div class=\"section-feature center-text\">\n        <img src=\"/img/home-embeddable.png\" alt=\"\">\n        <p class=\"subtitle green\">Embeddable</p>\n        <p>Servo provides a <strong>WebView API</strong> so other applications can use it to embed web content.</p>\n      </div>\n      <div class=\"section-feature center-text\">\n        <img src=\"/img/home-memory-safe.png\" alt=\"\">\n        <p class=\"subtitle pink\">Memory-safe</p>\n        <p>Servo takes advantage of the memory safety features of the <strong>Rust programming language</strong>, resulting in fewer vulnerabilities related to memory and concurrency.</p>\n      </div>\n      <div class=\"section-feature center-text\">\n        <img src=\"/img/home-modular.png\" alt=\"\">\n        <p class=\"subtitle orange\">Modular</p>\n        <p>Built with a modular architecture and powered by widely-used Rust crates, Servo makes it <strong>easier to customize and adapt</strong> a high-performance browser engine to your needs.</p>\n      </div>\n    </div>\n    <div class=\"features\">\n      <div class=\"section-feature center-text\">\n        <img src=\"/img/home-parallel.png\" alt=\"\">\n        <p class=\"subtitle yellow\">Parallel</p>\n        <p>Servo uses concurrency and parallelism for <strong>faster and more energy-efficient rendering of web content</strong> on multi-core devices.</p>\n      </div>\n      <div class=\"section-feature center-text\">\n        <img src=\"/img/home-multi-platform.png\" alt=\"\">\n        <p class=\"subtitle purple\">Cross platform</p>\n        <p>Servo has <strong>multi-platform support</strong>, including Windows, macOS, Linux, Android, and OpenHarmony. In addition, Servo can be ported and adapted to <strong>embedded devices</strong>.</p>\n      </div>\n      <div class=\"section-feature center-text\">\n        <img src=\"/img/home-independent.png\" alt=\"\">\n        <p class=\"subtitle mid-turquoise\">Independent</p>\n        <p>Servo is a project managed with <strong>open governance under Linux Foundation Europe</strong> through our Technical Steering Committee.</p>\n      </div>\n    </div>\n  </div>\n</section>\n<section class=\"section container\" aria-label=\"Latest posts from the Servo blog\">\n  <div class=\"blog\">\n    <div class=\"inner-container\">\n    <h2>Latest on the blog</h2>\n    <div class=\"blog-grid\">\n            <div class=\"card\">\n              <div class=\"card-content\">\n                <span class=\"tag\">2025-07-17</span>\n                <p class=\"post-title\"><a href=\"/blog/2025/07/17/this-month-in-servo/\">This month in Servo: network inspector, a11y first steps, WebDriver, and more!</a></p>\n                <p class=\"post-summary\">Plus some big perf gains, thanks to our incremental layout work.</p>\n              </div>\n            </div>\n            <div class=\"card\">\n              <div class=\"card-content\">\n                <span class=\"tag\">2025-06-18</span>\n                <p class=\"post-title\"><a href=\"/blog/2025/06/18/this-month-in-servo/\">This month in Servo: color inputs, SVG, embedder JS, and more!</a></p>\n                <p class=\"post-summary\">Plus animated GIF support, incremental layout, and two new Outreachy internships.</p>\n              </div>\n            </div>\n            <div class=\"card\">\n              <div class=\"card-content\">\n                <span class=\"tag\">2025-05-09</span>\n                <p class=\"post-title\"><a href=\"/blog/2025/05/09/this-month-in-servo/\">Two months in Servo: CSS nesting, Shadow DOM, Clipboard API, and more!</a></p>\n                <p class=\"post-summary\">Try our new about:memory page and --enable-experimental-web-platform-features.</p>\n              </div>\n            </div>\n            <div class=\"card\">\n              <div class=\"card-content\">\n                <span class=\"tag\">2025-03-10</span>\n                <p class=\"post-title\"><a href=\"/blog/2025/03/10/this-month-in-servo/\">This month in Servo: new elements, IME support, delegate API, and more!</a></p>\n                <p class=\"post-summary\">A huge month for both Servo the browser and Servo the engine.</p>\n              </div>\n            </div>\n        <a class=\"archive-nav\" href=\"/blog/\">View older posts</a>\n      </div>\n    </div>\n  </div>\n</section>\n<section class=\"section\" aria-label=\"How to Sponsor Servo\">\n  <div class=\"sponsorship container\">\n    <div class=\"inner-container\">\n        <h2>Sponsorship</h2>\n        <p>You can now help fund the Servo project by <a href=\"https://github.com/sponsors/servo\">sponsoring us on GitHub</a> or <a href=\"https://opencollective.com/servo\">Open Collective</a>.</p>\n        <p>For more information about how to sponsor the project, visit <a href=\"/sponsorship/\">the sponsorship page</a>.</p>\n    </div>\n</div>\n</section>\n    </main>\n    <div class=\"contact\" aria-label=\"Contact information\">\n    <div class=\"container\">\n        <div class=\"inner-container two-column\">\n            <div class=\"column\">\n                <h2>Contact</h2>\n            </div>\n            <div class=\"column\">\n                <ul>\n                    <li><a class=\"footer-link\" href=\"https://servo.zulipchat.com/\">Zulip chat</a></li>\n                    <li><a class=\"footer-link\" href=\"https://github.com/servo/servo/discussions\">GitHub discussions</a></li>\n                    <li><a class=\"footer-link\" href=\"mailto:[email protected]\">Email: [email protected]</a></li>\n                    <li><a class=\"footer-link\" href=\"https://floss.social/@servo\">Mastodon</a></li>\n                    <li><a class=\"footer-link\" href=\"https://bsky.app/profile/servo.org\">Bluesky</a></li>\n                </ul>\n            </div>\n        </div>\n    </div>\n</div>\n    <footer>\n     <div class=\"footer\">\n  <div class=\"container\">\n    <div class=\"two-column inner-container\">\n      <div class=\"column\">\n        <div class=\"logo\"><a href=\"https://linuxfoundation.eu\"><img src=\"/img/lf-europe-logo.png\" alt=\"Linux Foundation Europe logo\" width=\"250\"></a></div>\n        <p>© 2025 The Servo Project Developers</p>\n        <p>Copyright © Servo is a project of <a class=\"footer-link\" href=\"https://linuxfoundation.eu/\">Linux Foundation Europe</a>.</p>\n        <p>For website terms of use, trademark policy and other project policies please see <a class=\"footer-link\" href=\"https://lfprojects.org\">https://lfprojects.org</a>.</p>\n        <p>The source code for this website can be found at <a class=\"footer-link\" href=\"https://github.com/servo/servo.org\">https://github.com/servo/servo.org</a>.</p>\n      </div>\n      <div class=\"column code-of-conduct\">\n        <a class=\"footer-link\" href=\"/coc/\">Code of Conduct</a>\n      </div>\n  </div>\n</div>\n\n<script>\n  (() => {\n    const burger = document.querySelector(\".navbar-burger\");\n    const menu = document.querySelector(\".navbar-menu\");\n    burger.onclick = () => {\n      burger.classList.toggle('is-active');\n      menu.classList.toggle('is-active');\n    };\n  })();\n</script>\n\n    </div></footer>\n  \n\n\n</body></html>", PhantomData<*const ()>

Read the above HTML page, and respond with a list of potential UI actions to take, in the following format:

[
{
  action: String
  element: String
}
]

The action should be the name that you assign to a particular action, and the element should be the information needed for you to find the element later in the context of a JS script.

Make the list short; not more than 10 items, so focus on the most salient features of the page.

@gterzian
Copy link
Author

gterzian commented Aug 7, 2025

Shorter versions that still works:

Read the above HTML page, and write a JS script, in the form of a closure, that will be injected to the page to fulfill the user request. The script should perform the actual action(only one) required on the page, not just console log information. Important: only respond with the code.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment