tor-browser

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

empty-elements-insertion.html (4843B)

      1 <!DOCTYPE HTML>
      2 <meta charset=utf-8>
      3 <title>Placing selection and typing inside empty elements</title>
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 <script src="/resources/testdriver.js"></script>
      7 <script src="/resources/testdriver-vendor.js"></script>
      8 <script src="/resources/testdriver-actions.js"></script>
      9 <script src="../include/editor-test-utils.js"></script>
     10 <style>
     11  #border {
     12    display: inline-block;
     13    border: 2px red solid;
     14  }
     15 
     16  #padding {
     17    display: inline-block;
     18    padding: 1em;
     19  }
     20 
     21  #unstyled-before::before,
     22  #unstyled-after::after,
     23  #unstyled-both::before,
     24  #unstyled-both::after {
     25    content: '';
     26    display: inline-block;
     27    border: 2px red solid;
     28  }
     29 </style>
     30 <div contenteditable></div>
     31 
     32 <script>
     33  const utils = new EditorTestUtils( document.querySelector( 'div[contenteditable]' ) );
     34 
     35  promise_test( async () => {
     36    utils.setupEditingHost( `<p><strong id="border"></strong></p>` );
     37 
     38    const target = document.querySelector( '#border' );
     39    const actions = new test_driver.Actions();
     40    await actions
     41      .pointerMove( 0, 0, { origin: target } )
     42      .pointerDown( { button: actions.ButtonType.LEFT } )
     43      .pointerUp( { button: actions.ButtonType.LEFT } )
     44      .send();
     45    document.execCommand( 'insertText', false, 'a' );
     46    assert_greater_than( target.innerHTML.length, 0, 'The text should be inserted into the styled <strong> element' );
     47  }, 'Insert text into the inline element styled with border' );
     48 
     49  promise_test( async () => {
     50    utils.setupEditingHost( `<p><strong id="padding"></strong></p>` );
     51 
     52    const target = document.querySelector( '#padding' );
     53    const actions = new test_driver.Actions();
     54    await actions
     55      .pointerMove( 0, 0, { origin: target } )
     56      .pointerDown( { button: actions.ButtonType.LEFT } )
     57      .pointerUp( { button: actions.ButtonType.LEFT } )
     58      .send();
     59    document.execCommand( 'insertText', false, 'a' );
     60    assert_greater_than( target.innerHTML.length, 0, 'The text should be inserted into the styled <strong> element' );
     61  }, 'Insert text into the inline element styled with padding' );
     62 
     63  promise_test( async () => {
     64    utils.setupEditingHost( `<p><strong id="unstyled"></strong></p>` );
     65 
     66    const target = document.querySelector( '#unstyled' );
     67    const actions = new test_driver.Actions();
     68    await actions
     69      .pointerMove( 0, 0, { origin: target } )
     70      .pointerDown( { button: actions.ButtonType.LEFT } )
     71      .pointerUp( { button: actions.ButtonType.LEFT } )
     72      .send();
     73    document.execCommand( 'insertText', false, 'a' );
     74    assert_greater_than( target.innerHTML.length, 0, 'The text should be inserted into the unstyled <strong> element' );
     75  }, 'Insert text into the unstyled inline element' );
     76 
     77  promise_test( async () => {
     78    utils.setupEditingHost( `<p><strong id="unstyled-before"></strong></p>` );
     79 
     80    const target = document.querySelector( '#unstyled-before' );
     81    const actions = new test_driver.Actions();
     82    await actions
     83      .pointerMove( 0, 0, { origin: target } )
     84      .pointerDown( { button: actions.ButtonType.LEFT } )
     85      .pointerUp( { button: actions.ButtonType.LEFT } )
     86      .send();
     87    document.execCommand( 'insertText', false, 'a' );
     88    assert_greater_than( target.innerHTML.length, 0, 'The text should be inserted into the <strong> element' );
     89  }, 'Insert text into the unstyled inline element with the styled ::before pseudoelement' );
     90 
     91  promise_test( async () => {
     92    utils.setupEditingHost( `<p><strong id="unstyled-after"></strong></p>` );
     93 
     94    const target = document.querySelector( '#unstyled-after' );
     95    const actions = new test_driver.Actions();
     96    await actions
     97      .pointerMove( 0, 0, { origin: target } )
     98      .pointerDown( { button: actions.ButtonType.LEFT } )
     99      .pointerUp( { button: actions.ButtonType.LEFT } )
    100      .send();
    101    document.execCommand( 'insertText', false, 'a' );
    102    assert_greater_than( target.innerHTML.length, 0, 'The text should be inserted into the <strong> element' );
    103  }, 'Insert text into the unstyled inline element with the styled ::after pseudoelement' );
    104 
    105  promise_test( async () => {
    106    utils.setupEditingHost( `<p><strong id="unstyled-both"></strong></p>` );
    107 
    108    const target = document.querySelector( '#unstyled-both' );
    109    const actions = new test_driver.Actions();
    110    await actions
    111      .pointerMove( 0, 0, { origin: target } )
    112      .pointerDown( { button: actions.ButtonType.LEFT } )
    113      .pointerUp( { button: actions.ButtonType.LEFT } )
    114      .send();
    115    document.execCommand( 'insertText', false, 'a' );
    116    assert_greater_than( target.innerHTML.length, 0, 'The text should be inserted into the <strong> element' );
    117  }, 'Insert text into the unstyled inline element with the styled ::before and ::after pseudoelements' );
    118 </script>