From 61de058d08ecfae6e3aafd63f225896f9e0a08be Mon Sep 17 00:00:00 2001
From: Christian Williams <orbit@framezero.com>
Date: Fri, 7 Dec 2012 15:51:15 -0800
Subject: [PATCH] Alien support for IE

We got lucky - the fact that our alien styling choice required phantom overlays had the nice side-effect of preventing the ability to focus the aliens. Therefore, as soon as we started ignoring IE to deliver nice alien handling for standards-compliant browsers, we inadvertently solved(?) the IE alien problem. I've touched up the styling to look nice in IE 9 (solid green phantoms) and IE 10 (stripes). Shield GIF switched to PNG because IE 10 renders the transparent GIF as solid red. Yeah, red.

Change-Id: I3bc69acba9ed883a823cdf722117b90966bc332b
---
 modules/ve/ce/styles/ve.ce.Surface.css | 3 +++
 modules/ve/ce/ve.ce.Node.js            | 9 +++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/modules/ve/ce/styles/ve.ce.Surface.css b/modules/ve/ce/styles/ve.ce.Surface.css
index 7af4034c7a..a8a3c32957 100644
--- a/modules/ve/ce/styles/ve.ce.Surface.css
+++ b/modules/ve/ce/styles/ve.ce.Surface.css
@@ -43,8 +43,11 @@
 }
 
 .ve-ce-phantom {
+	background-color: #C3E59A;
+	background-image: -ms-repeating-linear-gradient(-45deg, white 0px, white 5px, #C3E59A 5px, #C3E59A 10px );
 	background-image: -webkit-repeating-linear-gradient(-45deg, white 0px, white 5px, #C3E59A 5px, #C3E59A 10px );
 	background-image: -moz-repeating-linear-gradient(-45deg, white 0px, white 5px, #C3E59A 5px, #C3E59A 10px);
+	background-image: repeating-linear-gradient(-45deg, white 0px, white 5px, #C3E59A 5px, #C3E59A 10px );
 	background-size: 14px 14px;
 	position: absolute;
 }
diff --git a/modules/ve/ce/ve.ce.Node.js b/modules/ve/ce/ve.ce.Node.js
index 86664d8270..52fe5901b9 100644
--- a/modules/ve/ce/ve.ce.Node.js
+++ b/modules/ve/ce/ve.ce.Node.js
@@ -66,13 +66,14 @@ ve.ce.Node.static.domAttributeWhitelist = [
 /**
  * Template for shield elements.
  *
- * Uses data URI to inject a 1x1 transparent GIF image into the DOM.
+ * Uses data URI to inject a 1x1 transparent PNG image into the DOM.
  *
  * @static
  * @member
  */
+// Using transparent png instead of gif because IE 10 renders gif as solid red when used as img src.
 ve.ce.Node.static.$shieldTemplate = $(
-	'<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" ' +
+	'<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAFElEQVR4XgXAAQ0AAABAMP1L30IDCPwC/o5WcS4AAAAASUVORK5CYII=" ' +
 		'class="ve-ce-node-shield">'
 );
 
@@ -236,7 +237,7 @@ ve.ce.Node.prototype.getModel = function () {
 
 ve.ce.Node.getSplitableNode = function ( node ) {
 	var splitableNode = null;
-	
+
 	ve.Node.traverseUpstream( node, function ( node ) {
 		if ( node.canBeSplit() ) {
 			splitableNode = node;
@@ -245,7 +246,7 @@ ve.ce.Node.getSplitableNode = function ( node ) {
 			return false;
 		}
 	} );
-	
+
 	return splitableNode;
 };