title: How does a browser determine what text to select
body: <p>I was debugging a selection problem earlier today in a complex HTML/CSS layout that really screws up usability. All text in the interactive app was meant to be unselectable except for some informational text the user might want to copy. Interacting with the application could inadvertently select the info text even when the interaction was happening on the other side of the applications root element.</p>
  
  <p>I want to be able to debug these problems more efficiently. How exactly does the browser determine what text will be selected? Is it standardized or based on the browser?</p>
  
  <hr>
  
  <p>To provide an example, see the following snippet. If you click and drag somewhere in the top left of the large box (meant to represent the full application), it will select the bottom left box's text. Removing element <code>.c</code> or setting <code>.issue</code> to have 100% width and height will fix the issue both of which are undesirable fixes.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.a{
    position:relative;
    background-color:#AAAAAA;
    height:200px;
    width:600px;
    user-select:none;
    pointer-events:auto;
  }
  .b{
    background-color:#CCCCCC;
    padding:5px;
    position:absolute;
    left:0;
    bottom:0;
    user-select:auto;
  }
  .c{
    position:absolute;
    top:50px;
    left:200px;
    border:1px dashed black;
    background-color:rgba(255,255,255,0.5);
    height:50px;
    width:50px;
    user-select:none;
    pointer-events:none;
  }
  .issue {
    pointer-events:none;
    user-select:none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="a"&gt;
    &lt;div style="issue"&gt;
      &lt;div class="b"&gt;
      Text text text&lt;br&gt;
      Text text
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="c"&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>