Range.compareBoundaryPoints() generates strange results
<p>I am using a Range object as a limiter on another Range object representing the current selection, such that anything that is inside the selected range but is outside the boundaries of the limiting range is trimmed off. To compare the two Ranges' positions, I'm using the Range.compareBoundaryPoints() function, but the results make no sense.</p>

<p>The element I'm working with looks like this:</p>

<pre><code>&lt;p id="myBlock" contenteditable="true"&gt;
  Hello hello hello, this is a great big block of test text.
&lt;/p&gt;
</code></pre>

<p>The ranges are defined and their positional relationship retrieved as follows:</p>

<pre><code>var limitingRange = document.createRange();
limitingRange.selectNodeContents($('#myBlock')[0]);
var selectedRange = window.getSelection().getRangeAt(0).cloneRange(); //Use whatever method is supported by the browser to get the Range

var endToStart = limitingRange.compareBoundaryPoints(Range.END_TO_START, selectedRange);
var startToEnd = limitingRange.compareBoundaryPoints(Range.START_TO_END, selectedRange);
var startToStart = limitingRange.compareBoundaryPoints(Range.START_TO_START, selectedRange);
var endToEnd = limitingRange.compareBoundaryPoints(Range.END_TO_END, selectedRange);
</code></pre>

<p>I then select the word "this" in the text and run the function. My ranges look like this (I'm inventing the .start and .end notation to try and make my description clearer):</p>

<p>(limitingRange.start)Hello hello hello, (selectedRange.start)this(selectedRange.end) is a great big block of test text.(limitingRange.end)</p>

<p>The resulting values are: 
<br>endToStart = -1
<br>startToEnd = 1
<br>startToStart = -1
<br>endToEnd = 1</p>

<p>I am baffled as to how to interpret the results of the function. Based on the specification it seems like, for example, endToStart should contain -1 if the end of selectedRange comes before the start of limitingRange, but that's obviously not the case. What's going on here?</p>
