tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

copy-elements-with-css-vars.tentative.html (3532B)

      1 <!doctype html>
      2 
      3 <head>
      4  <title>Test for resolving css variables on copy</title>
      5  <script src="/resources/testharness.js"></script>
      6  <script src="/resources/testharnessreport.js"></script>
      7  <script src="/resources/testdriver.js"></script>
      8  <script src="/resources/testdriver-vendor.js"></script>
      9  <script src="/resources/testdriver-actions.js"></script>
     10  <script src="../include/editor-test-utils.js"></script>
     11  <style>
     12    /* Define custom properties */
     13    :root {
     14      --span-text-color: blue;
     15      --row-text-color: red;
     16      --font-size-span: 18px;
     17      --cell-padding: 12px;
     18      --font-family-span: Calibri, sans-serif;
     19      --range: 100%;
     20    }
     21 
     22    span {
     23      font-size: var(--font-size-span);
     24      font-family: var(--font-family-span);
     25      color: var(--span-text-color);
     26      animation-range: 0 100%, 0 var(--range)
     27    }
     28 
     29    td {
     30      padding: var(--cell-padding);
     31      color: var(--row-text-color);
     32    }
     33  </style>
     34 </head>
     35 
     36 <body>
     37  <div id="test">
     38    <span>Span text</span>
     39    <table>
     40      <tr>
     41        <td>Row 1, Cell 1</td>
     42        <td>Row 1, Cell 2</td>
     43      </tr>
     44    </table>
     45  </div>
     46  <div id="pasteTarget" contenteditable="true"></div>
     47  <div id="results"></div>
     48 
     49  <script>
     50    // Function selects contents of the test div and executes copy command
     51    async function copyContent() {
     52      const divToCopy = document.getElementById("test");
     53      const range = document.createRange();
     54      range.selectNodeContents(divToCopy);
     55      const selection = window.getSelection();
     56      selection.removeAllRanges();
     57      selection.addRange(range);
     58 
     59      const utils = new EditorTestUtils(divToCopy);
     60      await utils.sendCopyShortcutKey();
     61    }
     62 
     63    // Function to paste the copied content into the pasteTarget div
     64    // Pasting in content editable div ensures
     65    // text/html type data from clipboard is used.
     66    async function pasteContent() {
     67      const selection = window.getSelection();
     68      const pasteTarget = document.getElementById("pasteTarget");
     69      selection.collapse(pasteTarget, 0);
     70      const utils = new EditorTestUtils(pasteTarget);
     71      await utils.sendPasteShortcutKey();
     72    }
     73 
     74    // Function to get the pasted HTML and add it in the results div
     75    function getPastedHTML() {
     76      const pasteTarget = document.getElementById("pasteTarget");
     77      const results = document.getElementById("results");
     78 
     79      results.appendChild(document.createTextNode(pasteTarget.innerHTML));
     80    }
     81 
     82    promise_test(async t => {
     83      await copyContent();
     84      await pasteContent();
     85      test(() => {
     86        const pastedDiv = document.getElementById("pasteTarget");
     87 
     88        const expectedSpanStyles = {
     89          "font-size": "18px",
     90          "font-family": "Calibri, sans-serif",
     91          "color": "rgb(0, 0, 255)"
     92        };
     93 
     94        const expectedTdStyles = {
     95          "padding": "12px",
     96          "color": "rgb(255, 0, 0)"
     97        };
     98        const span = pastedDiv.querySelector("span");
     99        const td = pastedDiv.querySelector("td");
    100 
    101        for (const [property, value] of Object.entries(expectedSpanStyles)) {
    102          assert_equals(span.style.getPropertyValue(property), value,
    103            `Span ${property} should be ${value}`);
    104        }
    105 
    106        for (const [property, value] of Object.entries(expectedTdStyles)) {
    107          assert_equals(td.style.getPropertyValue(property), value,
    108            `TD ${property} should be ${value}`);
    109        }
    110      });
    111    }, "Test serialized html on copy has resolved css values");
    112 
    113  </script>
    114 </body>
    115 
    116 </html>