Attachment 368675 Details for Bug 163921 – Test case used to generate the attached screenshots

Test case used to generate the attached screenshots

shadow-dom-selection.html (text/html), 2.04 KB, created by Javan Makhmali on 2019-05-01 09:05:36 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Javan Makhmali

Created: 2019-05-01 09:05:36 PDT

Size: 2.04 KB

patch

obsolete

><!doctype html>
><html>
><head>
>  <meta charset="utf-8">
>  <script>
>    addEventListener("DOMContentLoaded", () => {
>      const outputElement = document.getElementById("output")
>      const userAgentElement = document.getElementById("user-agent")
>      const { shadowRoot } = document.getElementById("shadow-element")
>
>      userAgentElement.textContent = navigator.userAgent
>      document.addEventListener("selectionchange", render)
>      render()
>
>      function render() {
>        outputElement.textContent = [
>          `  document selection: ${formatRange(getSelectedRange(document))}`,
>          `shadowRoot selection: ${formatRange(getSelectedRange(shadowRoot))}`
>        ].join("\n")
>      }
>
>      function getSelectedRange(root) {
>        if (typeof root.getSelection == "function") {
>          const selection = root.getSelection()
>          if (selection && selection.rangeCount) {
>            return selection.getRangeAt(0)
>          }
>        }
>      }
>
>      function formatRange(range) {
>        if (!range) return ""
>        const string = `${range}`
>        return string ? `â${string}â` : string
>      }
>    })
>
>    customElements.define("shadow-content", class extends HTMLElement {
>      constructor() {
>        super()
>        const content = document.getElementById("sample-text").cloneNode(true)
>        this.attachShadow({ mode: "open" }).append(content)
>      }
>    })
>  </script>
>  <style>
>    * { margin: 0; padding: 0; }
>    body { font-family: sans-serif; font-size: 14px;padding: 10px; }
>    fieldset { margin: 2em 0; padding: 1em; border: 2px dotted black; }
>    #output { background-color: black; color: white; padding: 0.5em; }
>    #user-agent { font-size: 11px; text-align: center; white-space: pre-wrap; }
>  </style>
></head>
><body>
>  <pre id="output"></pre>
>
>  <fieldset>
>    <legend>DOM</legend>
>    <span id="sample-text">The quick brown fox jumps over the lazy dog</span>
>  </fieldset>
>
>  <fieldset>
>    <legend>Shadow DOM</legend>
>    <shadow-content id="shadow-element"></shadow-content>
>  </fieldset>
>
>  <pre id="user-agent"></pre>
></body>
></html>

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <script>
    addEventListener("DOMContentLoaded", () => {
      const outputElement = document.getElementById("output")
      const userAgentElement = document.getElementById("user-agent")
      const { shadowRoot } = document.getElementById("shadow-element")

      userAgentElement.textContent = navigator.userAgent
      document.addEventListener("selectionchange", render)
      render()

      function render() {
        outputElement.textContent = [
          `  document selection: ${formatRange(getSelectedRange(document))}`,
          `shadowRoot selection: ${formatRange(getSelectedRange(shadowRoot))}`
        ].join("\n")
      }

      function getSelectedRange(root) {
        if (typeof root.getSelection == "function") {
          const selection = root.getSelection()
          if (selection && selection.rangeCount) {
            return selection.getRangeAt(0)
          }
        }
      }

      function formatRange(range) {
        if (!range) return ""
        const string = `${range}`
        return string ? `â${string}â` : string
      }
    })

    customElements.define("shadow-content", class extends HTMLElement {
      constructor() {
        super()
        const content = document.getElementById("sample-text").cloneNode(true)
        this.attachShadow({ mode: "open" }).append(content)
      }
    })
  </script>
  <style>
    * { margin: 0; padding: 0; }
    body { font-family: sans-serif; font-size: 14px;padding: 10px; }
    fieldset { margin: 2em 0; padding: 1em; border: 2px dotted black; }
    #output { background-color: black; color: white; padding: 0.5em; }
    #user-agent { font-size: 11px; text-align: center; white-space: pre-wrap; }
  </style>
</head>
<body>
  <pre id="output"></pre>

  <fieldset>
    <legend>DOM</legend>
    <span id="sample-text">The quick brown fox jumps over the lazy dog</span>
  </fieldset>

  <fieldset>
    <legend>Shadow DOM</legend>
    <shadow-content id="shadow-element"></shadow-content>
  </fieldset>

  <pre id="user-agent"></pre>
</body>
</html>

Actions: View

Attachments on bug 163921: 292676 | 368674 | 368675