Preserve content order of fixed RectList

Fixes #11

demo.css

@@ -17,24 +17,38 @@
 
 .highlights {
 	position: absolute;
-	opacity: 0.5;
-	pointer-events: none;
 }
 
 .highlight {
 	position: absolute;
 }
 
+.highlight > span {
+	display: none;
+}
+
+.highlight:hover > span {
+	display: inline;
+	background: #fff;
+	font-weight: bold;
+	font-family: sans-serif;
+	font-size: 12px;
+	position: absolute;
+	top: 1px;
+	left: 1px;
+}
+
 .bounding {
 	position: absolute;
 	border: 1px solid;
 	padding: 2px;
 	margin: -3px 0 0 -3px;
 	border-radius: 3px;
+	pointer-events: none;
 }
 
 .highlights-native .highlight {
-	background: #f00;
+	background: rgba( 255, 0, 0, 0.3 );
 	box-shadow: inset 0 0 0 1px #600;
 }
 
@@ -43,7 +57,7 @@
 }
 
 .highlights-fixed .highlight {
-	background: #0a0;
+	background: rgba( 0, 170, 0, 0.3 );
 	box-shadow: inset 0 0 0 1px #060;
 }
 

demo.js

@@ -52,7 +52,9 @@ $( function () {
 		// Native
 		rects = range.getClientRects();
 		for ( i = 0, l = rects.length; i < l; i++ ) {
-			$highlightsNative.append( $( '<div>' ).addClass( 'highlight' ).css( cssProps( rects[ i ] ) ) );
+			$highlightsNative.append(
+				$( '<div>' ).addClass( 'highlight' ).css( cssProps( rects[ i ] ) ).append( $( '<span>' ).text( i ) )
+			);
 		}
 		$( '.highlights-native' ).empty().append( $highlightsNative );
 
@@ -62,7 +64,9 @@ $( function () {
 		// Fixed
 		rects = RangeFix.getClientRects( range );
 		for ( i = 0, l = rects.length; i < l; i++ ) {
-			$highlightsFixed.append( $( '<div>' ).addClass( 'highlight' ).css( cssProps( rects[ i ] ) ) );
+			$highlightsFixed.append(
+				$( '<div>' ).addClass( 'highlight' ).css( cssProps( rects[ i ] ) ).append( $( '<span>' ).text( i ) )
+			);
 		}
 		$( '.highlights-fixed' ).empty().append( $highlightsFixed );
 

index.html

@@ -17,13 +17,13 @@ <h2>Select text here</h2>
 					<p class="testNode">Lorem <u><img src="example.png"> ipsum </u></p>
 				</div>
 			</div><div class="col col-preview">
-				<div class="highlights highlights-native"></div>
 				<h2>Native</h2>
 				<div class="ce-mirror"></div>
+				<div class="highlights highlights-native"></div>
 			</div><div class="col col-preview">
-				<div class="highlights highlights-fixed"></div>
 				<h2>Fixed</h2>
 				<div class="ce-mirror"></div>
+				<div class="highlights highlights-fixed"></div>
 			</div></div>
 
 		<div class="col">

rangefix.js

@@ -166,7 +166,7 @@
 	 * @return {ClientRectList|ClientRect[]} ClientRectList or list of ClientRect objects describing range
 	 */
 	rangeFix.getClientRects = function ( range ) {
-		var rects, endContainer, endOffset, partialRange,
+		var rects, endContainer, endContainerRects, endOffset, partialRange,
 			broken = this.isBroken();
 
 		if ( broken.ieZoom ) {
@@ -181,6 +181,7 @@
 		// we got up to
 		// https://code.google.com/p/chromium/issues/detail?id=324437
 		rects = [];
+		endContainerRects = [];
 		endContainer = range.endContainer;
 		endOffset = range.endOffset;
 		partialRange = document.createRange();
@@ -189,7 +190,7 @@
 			partialRange.setStart( endContainer, 0 );
 			partialRange.setEnd( endContainer, endOffset );
 
-			batchPush( rects, partialRange.getClientRects() );
+			batchPush( endContainerRects, partialRange.getClientRects() );
 
 			endOffset = Array.prototype.indexOf.call( endContainer.parentNode.childNodes, endContainer );
 			endContainer = endContainer.parentNode;
@@ -200,6 +201,7 @@
 		partialRange = range.cloneRange();
 		partialRange.setEnd( endContainer, endOffset );
 		batchPush( rects, partialRange.getClientRects() );
+		batchPush( rects, endContainerRects );
 		return rects;
 	};