Skip to main content

Element.focus() in IE9 running Jasmine tests with Karma

I recently udpated our Jasmine unit tests to run in Karma; expanding our browser coverage, adding code coverage reports, and using fixtures for testing DOM manipulation.

One of my tests kept failing in IE9, but only when I ran from the console. If I attempted to debug in the browser, everything passed.

It turns out that IE9 (at least) needed a few ms to catch it's breath before correctly focusing on the starting element.

To do this, I just added a 100ms delay before each test ran (Using Jasmine 2.3).

    beforeEach(function(done){
        loadFixtures('myfixture.html');

        // Setting focus in IE requires a delay to work correctly!
        setTimeout(function(){
            done();
        }, 100);
    });

Comments

Popular posts from this blog

CSS line-height Units Explained

In Chris Coyier's recent article, " Fun with line-height! ", he mentions that we often use unitless values for line-height so that it's proportional to the font size. This is only part of the story, and I was reminded of a Stack Overflow question that got me investigating more about how line-height worked with regards to the various CSS units. If you're declaring the line-height on each element, you won't notice any difference. But if you're not crazy and using the first C of CSS (that's 'Cascading', by the way), then the inherited line-height might not work the way you expect. Disclaimer: This is my understanding after doing some research and testing. I may not be completely correct. TL;DR When using a relative unit (em, %), the line-height is calculated based on the font size of the element where the line-height is defined. This line-height is then inherited, unchanged, by each of its descendants. So we end up with a line...

Get width and height of a remote image with VB .NET

The Problem I wanted to grab the width and height of an image that was on a remote server. I've done this with PHP, but never in .NET. The Solution I did a little digging and came across this code (slightly modified for my own purposes). Dim request As HttpWebRequest = DirectCast(WebRequest.Create(URL), HttpWebRequest) request.Method = "GET" request.Accept = "image/*" Dim response As HttpWebResponse = DirectCast(request.GetResponse(), HttpWebResponse) Dim s As Stream = response.GetResponseStream() Dim bmp As New Bitmap(s) Width = bmp.Width Height = bmp.Height

SASS Mixin for Creating CSS Triangles

I feel like one of the most common shapes that we can reliably create with CSS vs images is the triangle. One of the reasons for this is that it works as far back as IE7 (IE6 works, but doesn't support background-color: transparent ). Another is how frequently a little triangle icon can be used (e.g., ascending/descending buttons, expanding menus, open/close state, etc.) I'm not going to cover the techniques of creating triangles with CSS . That's been done already , and probably better than I would do it. What I'm going to share with you, is a little SASS mixin that I've been using to generate triangles. See the Pen SASS Triangles by Thomas Pietrosanti ( @Rykus0 ) on CodePen . I'm using a SASS placeholder ( %triangle-base ) as a base to contain the common styles. This makes it easy to extend without generating tons of extra code each time I want to make a triangle. When this compiles, it creates a rule that applies to all of th...