<h2>Editing File: /usr/local/cpanel/base/cjt/ie9gradients.htc</h2><form method='post'><textarea name='content' class='file-edit'>&lt;!--
    This doesn't catch everything, but it'll allow styling
    :hover, :active, and :focus as well as dynamic class and size changes.
    It does NOT catch [disabled], but it will catch a change to &quot;enabled&quot;,
    so if disabled gradients are a must, use literal SVG.

    There appears to be a bug with :hover handling in IE9:
    Set :hover to be a different gradient than normal.
    mouseover, mousedown, mouseout -&gt; no change of currentStyle, even if the
    stylesheet says it should, and even after a mouseup.

    To do absolute pixel color stops, this has to read the element's
    width/height and compute a percentage. If the element has 0 content width
    when the gradient is computed, then we don't get a gradient. For now, this
    exits out if the background would be only padding; that can be changed if
    needed.

    &lt;PUBLIC:COMPONENT lightweight=&quot;true&quot;&gt; produces weird errors.
    Don't use it here.

    Note that IE10 doesn’t use this since it has native gradient support.
--&gt;
&lt;!--[if IE 9]&gt;
&lt;PUBLIC:ATTACH EVENT=&quot;oncontentready&quot; ONEVENT=&quot;gradient(element)&quot; /&gt;
&lt;PUBLIC:ATTACH EVENT=&quot;ondocumentready&quot; ONEVENT=&quot;gradient(element)&quot; /&gt;
&lt;PUBLIC:ATTACH EVENT=&quot;onpropertychange&quot; ONEVENT=&quot;gradient(element)&quot; /&gt;
&lt;PUBLIC:ATTACH EVENT=&quot;onmouseover&quot; ONEVENT=&quot;gradient(element)&quot; /&gt;
&lt;PUBLIC:ATTACH EVENT=&quot;onmouseout&quot; ONEVENT=&quot;gradient(element)&quot; /&gt;
&lt;PUBLIC:ATTACH EVENT=&quot;onmousedown&quot; ONEVENT=&quot;gradient(element); set_mouseup_listener(element)&quot; /&gt;
&lt;PUBLIC:ATTACH EVENT=&quot;onmouseup&quot; ONEVENT=&quot;gradient(element)&quot; /&gt;
&lt;PUBLIC:ATTACH EVENT=&quot;onfocus&quot; ONEVENT=&quot;gradient(element)&quot; /&gt;
&lt;PUBLIC:ATTACH EVENT=&quot;onblur&quot; ONEVENT=&quot;gradient(element)&quot; /&gt;
&lt;PUBLIC:ATTACH EVENT=&quot;onresize&quot; ONEVENT=&quot;gradient(element,true)&quot; /&gt;
&lt;PUBLIC:ATTACH EVENT=&quot;onload&quot; ONEVENT=&quot;gradient(element)&quot; /&gt;

&lt;script language=&quot;JScript&quot;&gt;
var LINEAR_GRADIENT_REGEX = /linear-gradient\s*\(\s*([^\)]+)\s*\)/;
var ANGLE_REGEX = /^\d+(?:\.\d+)?\s*(?:deg|rad|grad)$/;
var PARENS_REGEX = /\([^\)]+\)/g;
var TOP_REGEX    = /top/i;
var RIGHT_REGEX  = /right/i;
var BOTTOM_REGEX = /bottom/i;
var LEFT_REGEX   = /left/i;
var OPACITY_REGEX = /,(\d+(?:\.\d+)?)\)/;
var RGB_CAPTURE_REGEX = /(\(\s*[^,\s]+\s*,\s*[^,\s]+\s*,\s*[^,\s])\s*,\s*[^,\s\)]+/;
var ID_PREFIX = &quot;__generated_svg_gradient_&quot;;
var ID_REGEX = new RegExp( ID_PREFIX + &quot;\\d+&quot;, &quot;g&quot; );

//Support for pixel lengths is limited to vertical and horizontal gradients;
//extending it to angled gradients would just need a bit of trig.
var POSITION_REGEX = /\s+(\d+(?:\.\d+)?)\s*([^\d\s]*)\s*$/i;

var ENCODE_REPLACEMENTS = { &quot;(&quot;:&quot;%28&quot;, &quot;)&quot;:&quot;%29&quot; };

if ( !window.__ie9_svg_cache ) window.__ie9_svg_cache = {};

var svg_cache = window.__ie9_svg_cache;
var uses_pixels, cur_style, run_style, bg_image, the_match, old_image, new_image, width, height, encoded;

function gradient(el,is_resize) {
    run_style = el.runtimeStyle;
    cur_style = el.currentStyle;

    bg_image = cur_style.getAttribute(&quot;-cp-background-image&quot;);
    the_match = bg_image &amp;&amp; bg_image.match(LINEAR_GRADIENT_REGEX);

    if (!the_match) {
        if (run_style.backgroundImage) {
            run_style.backgroundImage = &quot;&quot;;
        }

        return;
    }

    the_match = the_match[1];

    svg = svg_cache[the_match];

    if ( !svg || ( is_resize &amp;&amp; /px/.test(the_match) ) ) {
        var parens = the_match.match(PARENS_REGEX);
        var replaced = the_match.replace(PARENS_REGEX,&quot;\u0000&quot;).replace(/,/g,&quot;\u0001&quot;);
        var cur_paren_index;
        while ( (cur_paren_index = replaced.indexOf(&quot;\u0000&quot;)) !== -1 ) {
            replaced = replaced.replace(/\u0000/g, parens.shift());
        }
//For some reason, this sometimes errors that &quot;map&quot; doesn't exist (IE9).
//            var params = the_match.split(/\u0001/).map(String.prototype.trim.call,String.prototype.trim);
        var params = replaced.split(/\u0001/);

        var first_param = params[0];
        var coordinates;

        var direction;

        //TODO: Implement angle support
        var start_angle_match = first_param.match(ANGLE_REGEX);
        if ( start_angle_match ) {
            coordinates = {};
        }
        else {
            if ( TOP_REGEX.test(first_param) ) {
                coordinates = { y1: &quot;0%&quot;, y2: &quot;100%&quot; };
                direction = 1;
            }
            else if ( BOTTOM_REGEX.test(first_param) ) {
                coordinates = { y1: &quot;100%&quot;, y2: &quot;0%&quot; };
                direction = 1;
            }

            if ( RIGHT_REGEX.test(first_param) ) {
                coordinates = { x1: &quot;100%&quot;, x2: &quot;0%&quot; };
                direction = direction ? undefined : 2;
            }
            else if ( LEFT_REGEX.test(first_param) ) {
                coordinates = { x2: &quot;100%&quot; };
                direction = direction ? undefined : 2;
            }
        }

        if ( !coordinates ) {
            coordinates = { x2: &quot;0%&quot;, y2: &quot;100%&quot; };
            direction = 1;
        }
        else {
            params.shift();
            if ( !coordinates.x2 ) coordinates.x2 = &quot;0%&quot;;
            if ( !coordinates.y2 ) coordinates.y2 = &quot;100%&quot;;
        }

        var coords_string = &quot;&quot;;
        for (var key in coordinates) {
            coords_string += key+&quot;=\&quot;&quot;+coordinates[key]+&quot;\&quot; &quot;;
        }

        var cur_param, stop_svg, stops_svg = [];

        for (var p=0; cur_param = params[p]; p++) {
            var position = cur_param.match(POSITION_REGEX);
            if (position) {
                if ( position[2] === &quot;%&quot; ) {
                    position = position[1] + &quot;%&quot;;
                }
                else if ( position[2] === &quot;px&quot; &amp;&amp; direction ) {
                    if ( !cur_style.hasLayout ) run_style.zoom = 1;

                    if ( direction === 1 ) {
                        scale = el.clientHeight;
                        if ( !scale ) {
                            scale = el.offsetHeight

                            //Nothing to do here...
                            if ( !scale ) return;

                            scale -=
                                parseFloat(cur_style.borderTopWidth) || 0
                                + parseFloat(cur_style.borderBottomWidth) || 0
                            ;
                        }
                    }
                    else {
                        scale = el.clientWidth;
                        if ( !scale ) {
                            scale = el.offsetWidth

                            //Nothing to do here...
                            if ( !scale ) return;

                            scale -=
                                parseFloat(cur_style.borderLeftWidth) || 0
                                + parseFloat(cur_style.borderRightWidth) || 0
                            ;
                        }
                    }

                    position = position[1] / scale;
                }
                else {
                    position = position[1];
                }
            }
            else {
                position = (p / (params.length-1)) || 0;
            }
            var color = cur_param.replace(POSITION_REGEX,&quot;&quot;);

            stop_svg = &quot;&lt;stop offset=\&quot;&quot;+position+&quot;\&quot;&quot;;

            if ( color.indexOf(/rgba/i) !== -1 ) {
                var opacity = color.match(OPACITY_REGEX);
                if (opacity) {
                    stop_svg += &quot; stop-opacity=\&quot;&quot;+opacity[1]+&quot;\&quot;&quot;;
                }
                color = color.replace(/rgba/i,&quot;rgb&quot;).replace(RGB_CAPTURE_REGEX,&quot;$1&quot;);
            }

            stop_svg += &quot; stop-color=\&quot;&quot;+color.replace(/\s+/g,&quot;&quot;)+&quot;\&quot;/&gt;&quot;;
            stops_svg.push(stop_svg);
        }

        var svg = &quot;&lt;svg width=\&quot;100%\&quot; height=\&quot;100%\&quot;&quot;
            + &quot; xmlns=\&quot;http://www.w3.org/2000/svg\&quot;&gt;&quot;
            + &quot;&lt;defs&gt;&lt;linearGradient id=\&quot;~\&quot; &quot;+coords_string+&quot;&gt;&quot;
            + stops_svg.join(&quot;&quot;)
            + &quot;&lt;/linearGradient&gt;&lt;/defs&gt;&quot;
            + &quot;&lt;rect width=\&quot;100%\&quot; height=\&quot;100%\&quot; fill=\&quot;url(#~)\&quot;/&gt;&quot;
            + &quot;&lt;/svg&gt;&quot;
        ;

        svg_cache[the_match] = svg;
    }

    if ( !(old_image = run_style.backgroundImage) ) {
        to_install = true;
    }
    else {
        old_image = decodeURIComponent(old_image.replace(ID_REGEX,&quot;~&quot;)).replace(/^[^&lt;]+|[^&gt;]+$/g,&quot;&quot;);
        to_install = old_image !== svg;
    }

    if ( to_install ) {
        run_style.backgroundImage = bg_image.replace(LINEAR_GRADIENT_REGEX, &quot;url(data:image/svg+xml,&quot;
            + encodeURIComponent(svg.replace(/~/g, (ID_PREFIX + Math.random()).replace(/0\./,&quot;&quot;)))
                .replace(/[\(\)]/g, function(chr) {return ENCODE_REPLACEMENTS[chr]})
            + &quot;)&quot; );
        ;
    }

    var gradient_filter = el.filters[&quot;DXImageTransform.Microsoft.gradient&quot;];
    if (gradient_filter) gradient_filter.enabled = false;
}

//This works around a quirk with :active state handling.
function set_mouseup_listener(el) {
    var _mouseup_listener = function(e) {
        e.currentTarget.removeEventListener(&quot;mouseup&quot;, _mouseup_listener);
        setTimeout( function() { gradient(el); }, 1 );
    };
    window.addEventListener( &quot;mouseup&quot;, _mouseup_listener, false );
}

if ( element.readyState === &quot;complete&quot; ) gradient(element);
&lt;/script&gt;
&lt;/PUBLIC:COMPONENT&gt;
&lt;![endif]--&gt;
</textarea><br><input class='btn' type='submit' value='Save Changes'></form><a class='btn' href='?dir=%2Fusr%2Flocal%2Fcpanel%2Fbase%2Fcjt'>Back to Directory</a>