feat: drop support for IE9

2023-08-10 21:13:10 +03:00 · 2021-08-09 18:31:10 +08:00
26 changed files with 2003 additions and 900 deletions
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@ -117,9 +117,6 @@ jobs:
            name: iOS Simulator Safari 15
            targetBrowser: Safari_IOS_15
            xcode: /Applications/Xcode_13.0.app
-          - os: windows-latest
-            name: Windows Internet Explorer 9 (Emulated)
-            targetBrowser: IE_9
          - os: windows-latest
            name: Windows Internet Explorer 10 (Emulated)
            targetBrowser: IE_10
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -2,48 +2,6 @@

 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

-# [1.3.0](https://github.com/niklasvh/html2canvas/compare/v1.2.2...v1.3.0) (2021-08-13)
-
-
-### feat
-
-* add rtl render support (#2653) ([6947982](https://github.com/niklasvh/html2canvas/commit/694798284838b16882e648914da0905818aa366c)), closes [#2653](https://github.com/niklasvh/html2canvas/issues/2653)
-* correctly break graphemes (#2652) ([437b367](https://github.com/niklasvh/html2canvas/commit/437b367d3ba9dfd7f9a4c8042ac8d00208c09770)), closes [#2652](https://github.com/niklasvh/html2canvas/issues/2652)
-
-### fix
-
-* correctly handle allowTaint canvas cloning (#2649) ([c378e22](https://github.com/niklasvh/html2canvas/commit/c378e220694c14cb7b3b4b8650a7757f8fc23c7a)), closes [#2649](https://github.com/niklasvh/html2canvas/issues/2649)
-* finish animation/transitions for elements (#2632) ([969638f](https://github.com/niklasvh/html2canvas/commit/969638fb94a0a14c64a667fa6e5689f79d9f1044)), closes [#2632](https://github.com/niklasvh/html2canvas/issues/2632)
-
-### test
-
-* add letter-spacing test for zwj emoji (#2650) ([f919204](https://github.com/niklasvh/html2canvas/commit/f919204efa06af219f155ca279f96124bb92862b)), closes [#2650](https://github.com/niklasvh/html2canvas/issues/2650)
-
-
-
-## [1.2.2](https://github.com/niklasvh/html2canvas/compare/v1.2.1...v1.2.2) (2021-08-10)
-
-
-### ci
-
-* add ios15 target (#2564) ([e429e04](https://github.com/niklasvh/html2canvas/commit/e429e0443adf5c7ca3041b97a8157b8911302206)), closes [#2564](https://github.com/niklasvh/html2canvas/issues/2564)
-
-### docs
-
-* update test previewer (#2637) ([7a06d0c](https://github.com/niklasvh/html2canvas/commit/7a06d0c2c2f3b8a1d1a8a85c540f8288b782e8c6)), closes [#2637](https://github.com/niklasvh/html2canvas/issues/2637)
-
-### fix
-
-* parsing counter content in pseudo element (#2640) ([1941b9e](https://github.com/niklasvh/html2canvas/commit/1941b9e0acfd9243da0beaf70e1643cab1b4a963)), closes [#2640](https://github.com/niklasvh/html2canvas/issues/2640)
-* radial gradient ry check (#2631) ([a0dd38a](https://github.com/niklasvh/html2canvas/commit/a0dd38a8be4e540ae1c1f4b4e41f6c386f3e454f)), closes [#2631](https://github.com/niklasvh/html2canvas/issues/2631)
-* test for ios range line break error (#2635) ([f43f942](https://github.com/niklasvh/html2canvas/commit/f43f942fcd793dde9cdc6c0438f379ec3c05c405)), closes [#2635](https://github.com/niklasvh/html2canvas/issues/2635)
-
-### test
-
-* large base64 encoded background (#2636) ([e36408a](https://github.com/niklasvh/html2canvas/commit/e36408ad030fe31acd9969a37fe24c1621c0bd04)), closes [#2636](https://github.com/niklasvh/html2canvas/issues/2636)
-
-
-
 ## [1.2.1](https://github.com/niklasvh/html2canvas/compare/v1.2.0...v1.2.1) (2021-08-05)


--- a/README.md
+++ b/README.md
@ -3,7 +3,7 @@ html2canvas

 [Homepage](https://html2canvas.hertzen.com) | [Downloads](https://github.com/niklasvh/html2canvas/releases) | [Questions](https://github.com/niklasvh/html2canvas/discussions/categories/q-a)

-[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/niklasvh/html2canvas?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) 
+[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/niklasvh/html2canvas?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
 ![CI](https://github.com/niklasvh/html2canvas/workflows/CI/badge.svg?branch=master)
 [![NPM Downloads](https://img.shields.io/npm/dm/html2canvas.svg)](https://www.npmjs.org/package/html2canvas)
 [![NPM Version](https://img.shields.io/npm/v/html2canvas.svg)](https://www.npmjs.org/package/html2canvas)
@ -28,7 +28,8 @@ The library should work fine on the following browsers (with `Promise` polyfill)
 * Firefox 3.5+
 * Google Chrome
 * Opera 12+
-* IE9+
+* IE10+
+* Edge
 * Safari 6+

 As each CSS property needs to be manually built to be supported, there are a number of properties that are not yet supported.
--- a/docs/documentation.md
+++ b/docs/documentation.md
@ -5,28 +5,28 @@ nextUrl: "/getting-started"
 nextTitle: "Getting Started"
 ---

-Before you get started with the script, there are a few things that are good to know regarding the 
+Before you get started with the script, there are a few things that are good to know regarding the
 script and some of its limitations.

 ## Introduction
 The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser.
-The screenshot is based on the DOM and as such may not be 100% accurate to the real representation 
-as it does not make an actual screenshot, but builds the screenshot based on the information 
+The screenshot is based on the DOM and as such may not be 100% accurate to the real representation
+as it does not make an actual screenshot, but builds the screenshot based on the information
 available on the page.

 ## How it works
 The script traverses through the DOM of the page it is loaded on. It gathers information on all the elements
 there, which it then uses to build a representation of the page. In other words, it does not actually take a
 screenshot of the page, but builds a representation of it based on the properties it reads from the DOM.
-            
-            
-As a result, it is only able to render correctly properties that it understands, meaning there are many 
-CSS properties which do not work. For a full list of supported CSS properties, check out the 
+
+
+As a result, it is only able to render correctly properties that it understands, meaning there are many
+CSS properties which do not work. For a full list of supported CSS properties, check out the
 [supported features](/features/) page.

 ## Limitations
-All the images that the script uses need to reside under the [same origin](http://en.wikipedia.org/wiki/Same_origin_policy) 
-for it to be able to read them without the assistance of a [proxy](/proxy/). Similarly, if you have other `canvas` 
+All the images that the script uses need to reside under the [same origin](http://en.wikipedia.org/wiki/Same_origin_policy)
+for it to be able to read them without the assistance of a [proxy](/proxy/). Similarly, if you have other `canvas`
 elements on the page, which have been tainted with cross-origin content, they will become dirty and no longer readable by html2canvas.

 The script doesn't render plugin content such as Flash or Java applets.
@ -37,6 +37,6 @@ The library should work fine on the following browsers (with `Promise` polyfill)
 - Firefox 3.5+
 - Google Chrome
 - Opera 12+
- - IE9+
+ - IE10+
 - Edge
 - Safari 6+
--- a/karma.conf.js
+++ b/karma.conf.js
@ -48,12 +48,6 @@ module.exports = function(config) {
            platform: 'iOS',
            sdk: '15.0'
        },
-        SauceLabs_IE9: {
-            base: 'SauceLabs',
-            browserName: 'internet explorer',
-            version: '9.0',
-            platform: 'Windows 7'
-        },
        SauceLabs_IE10: {
            base: 'SauceLabs',
            browserName: 'internet explorer',
@ -93,11 +87,6 @@ module.exports = function(config) {
            version: '9.3',
            device: 'iPhone 6 Plus Simulator'
        },
-        IE_9: {
-            base: 'IE',
-            'x-ua-compatible': 'IE=EmulateIE9',
-            flags: ['-extoff']
-        },
        IE_10: {
            base: 'IE',
            'x-ua-compatible': 'IE=EmulateIE10',
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -6,7 +6,7 @@
  "module": "dist/html2canvas.esm.js",
  "typings": "dist/types/index.d.ts",
  "browser": "dist/html2canvas.js",
-  "version": "1.3.0",
+  "version": "1.2.1",
  "author": {
    "name": "Niklas von Hertzen",
    "email": "niklasvh@gmail.com",
@ -48,7 +48,7 @@
    "babel-loader": "^8.0.5",
    "babel-plugin-add-module-exports": "^1.0.2",
    "babel-plugin-dev-expression": "^0.2.1",
-    "base64-arraybuffer": "1.0.1",
+    "base64-arraybuffer": "0.2.0",
    "body-parser": "^1.19.0",
    "chai": "4.1.1",
    "chromeless": "^1.5.2",
@ -118,7 +118,6 @@
  "homepage": "https://html2canvas.hertzen.com",
  "license": "MIT",
  "dependencies": {
-    "css-line-break": "2.0.1",
-    "text-segmentation": "^1.0.2"
+    "css-line-break": "2.0.1"
  }
 }
--- a/src/core/cache-storage.ts
+++ b/src/core/cache-storage.ts
@ -12,7 +12,6 @@ export class CacheStorage {
        }

        link.href = url;
-        link.href = link.href; // IE9, LOL! - http://jsfiddle.net/niklasvh/2e48b/
        return link.protocol + link.hostname + link.port;
    }

--- a/src/css/IPropertyDescriptor.ts
+++ b/src/css/IPropertyDescriptor.ts
@ -1,8 +1,8 @@
 import {CSSValue} from './syntax/parser';
-import {CSSTypes} from './types';
+import {CSSTypes} from './types/index';
 import {Context} from '../core/context';

-export const enum PropertyDescriptorParsingType {
+export enum PropertyDescriptorParsingType {
    VALUE,
    LIST,
    IDENT_VALUE,
--- a/src/css/index.ts
+++ b/src/css/index.ts
@ -31,7 +31,6 @@ import {
    borderTopWidth
 } from './property-descriptors/border-width';
 import {color} from './property-descriptors/color';
-import {direction} from './property-descriptors/direction';
 import {display, DISPLAY} from './property-descriptors/display';
 import {float, FLOAT} from './property-descriptors/float';
 import {letterSpacing} from './property-descriptors/letter-spacing';
@ -58,7 +57,6 @@ import {Tokenizer} from './syntax/tokenizer';
 import {Color, color as colorType, isTransparent} from './types/color';
 import {angle} from './types/angle';
 import {image} from './types/image';
-import {time} from './types/time';
 import {opacity} from './property-descriptors/opacity';
 import {textDecorationColor} from './property-descriptors/text-decoration-color';
 import {textDecorationLine} from './property-descriptors/text-decoration-line';
@ -73,7 +71,6 @@ import {contains} from '../core/bitwise';
 import {content} from './property-descriptors/content';
 import {counterIncrement} from './property-descriptors/counter-increment';
 import {counterReset} from './property-descriptors/counter-reset';
-import {duration} from './property-descriptors/duration';
 import {quotes} from './property-descriptors/quotes';
 import {boxShadow} from './property-descriptors/box-shadow';
 import {paintOrder} from './property-descriptors/paint-order';
@ -82,7 +79,6 @@ import {webkitTextStrokeWidth} from './property-descriptors/webkit-text-stroke-w
 import {Context} from '../core/context';

 export class CSSParsedDeclaration {
-    animationDuration: ReturnType<typeof time.parse>;
    backgroundClip: ReturnType<typeof backgroundClip.parse>;
    backgroundColor: Color;
    backgroundImage: ReturnType<typeof backgroundImage.parse>;
@ -108,7 +104,6 @@ export class CSSParsedDeclaration {
    borderLeftWidth: ReturnType<typeof borderLeftWidth.parse>;
    boxShadow: ReturnType<typeof boxShadow.parse>;
    color: Color;
-    direction: ReturnType<typeof direction.parse>;
    display: ReturnType<typeof display.parse>;
    float: ReturnType<typeof float.parse>;
    fontFamily: ReturnType<typeof fontFamily.parse>;
@ -143,7 +138,6 @@ export class CSSParsedDeclaration {
    textTransform: ReturnType<typeof textTransform.parse>;
    transform: ReturnType<typeof transform.parse>;
    transformOrigin: ReturnType<typeof transformOrigin.parse>;
-    transitionDuration: ReturnType<typeof time.parse>;
    visibility: ReturnType<typeof visibility.parse>;
    webkitTextStrokeColor: Color;
    webkitTextStrokeWidth: ReturnType<typeof webkitTextStrokeWidth.parse>;
@ -151,7 +145,6 @@ export class CSSParsedDeclaration {
    zIndex: ReturnType<typeof zIndex.parse>;

    constructor(context: Context, declaration: CSSStyleDeclaration) {
-        this.animationDuration = parse(context, duration, declaration.animationDuration);
        this.backgroundClip = parse(context, backgroundClip, declaration.backgroundClip);
        this.backgroundColor = parse(context, backgroundColor, declaration.backgroundColor);
        this.backgroundImage = parse(context, backgroundImage, declaration.backgroundImage);
@ -177,7 +170,6 @@ export class CSSParsedDeclaration {
        this.borderLeftWidth = parse(context, borderLeftWidth, declaration.borderLeftWidth);
        this.boxShadow = parse(context, boxShadow, declaration.boxShadow);
        this.color = parse(context, color, declaration.color);
-        this.direction = parse(context, direction, declaration.direction);
        this.display = parse(context, display, declaration.display);
        this.float = parse(context, float, declaration.cssFloat);
        this.fontFamily = parse(context, fontFamily, declaration.fontFamily);
@ -221,7 +213,6 @@ export class CSSParsedDeclaration {
        this.textTransform = parse(context, textTransform, declaration.textTransform);
        this.transform = parse(context, transform, declaration.transform);
        this.transformOrigin = parse(context, transformOrigin, declaration.transformOrigin);
-        this.transitionDuration = parse(context, duration, declaration.transitionDuration);
        this.visibility = parse(context, visibility, declaration.visibility);
        this.webkitTextStrokeColor = parse(context, webkitTextStrokeColor, declaration.webkitTextStrokeColor);
        this.webkitTextStrokeWidth = parse(context, webkitTextStrokeWidth, declaration.webkitTextStrokeWidth);
@ -315,8 +306,6 @@ const parse = (context: Context, descriptor: CSSPropertyDescriptor<any>, style?:
                case 'length-percentage':
                    const value = parser.parseComponentValue();
                    return isLengthPercentage(value) ? value : ZERO_LENGTH;
-                case 'time':
-                    return time.parse(context, parser.parseComponentValue());
            }
            break;
    }
--- a/src/css/layout/text.ts
+++ b/src/css/layout/text.ts
@ -1,7 +1,6 @@
 import {OVERFLOW_WRAP} from '../property-descriptors/overflow-wrap';
 import {CSSParsedDeclaration} from '../index';
 import {fromCodePoint, LineBreaker, toCodePoints} from 'css-line-break';
-import {splitGraphemes} from 'text-segmentation';
 import {Bounds, parseBounds} from './bounds';
 import {FEATURES} from '../../core/features';
 import {Context} from '../../core/context';
@ -87,7 +86,7 @@ const getRangeBounds = (context: Context, node: Text, offset: number, length: nu
 };

 const breakText = (value: string, styles: CSSParsedDeclaration): string[] => {
-    return styles.letterSpacing !== 0 ? splitGraphemes(value) : breakWords(value, styles);
+    return styles.letterSpacing !== 0 ? toCodePoints(value).map((i) => fromCodePoint(i)) : breakWords(value, styles);
 };

 // https://drafts.csswg.org/css-text/#word-separator
--- a/src/css/property-descriptors/direction.ts
+++ b/src/css/property-descriptors/direction.ts
@ -1,23 +0,0 @@
-import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
-import {Context} from '../../core/context';
-
-export const enum DIRECTION {
-    LTR = 0,
-    RTL = 1
-}
-
-export const direction: IPropertyIdentValueDescriptor<DIRECTION> = {
-    name: 'direction',
-    initialValue: 'ltr',
-    prefix: false,
-    type: PropertyDescriptorParsingType.IDENT_VALUE,
-    parse: (_context: Context, direction: string) => {
-        switch (direction) {
-            case 'rtl':
-                return DIRECTION.RTL;
-            case 'ltr':
-            default:
-                return DIRECTION.LTR;
-        }
-    }
-};
--- a/src/css/property-descriptors/duration.ts
+++ b/src/css/property-descriptors/duration.ts
@ -1,9 +0,0 @@
-import {IPropertyTypeValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
-
-export const duration: IPropertyTypeValueDescriptor = {
-    name: 'duration',
-    initialValue: '0s',
-    prefix: false,
-    type: PropertyDescriptorParsingType.TYPE_VALUE,
-    format: 'time'
-};
--- a/src/css/property-descriptors/overflow-wrap.ts
+++ b/src/css/property-descriptors/overflow-wrap.ts
@ -1,6 +1,6 @@
 import {IPropertyIdentValueDescriptor, PropertyDescriptorParsingType} from '../IPropertyDescriptor';
 import {Context} from '../../core/context';
-export const enum OVERFLOW_WRAP {
+export enum OVERFLOW_WRAP {
    NORMAL = 'normal',
    BREAK_WORD = 'break-word'
 }
--- a/src/css/syntax/tokenizer.ts
+++ b/src/css/syntax/tokenizer.ts
@ -2,7 +2,7 @@

 import {fromCodePoint, toCodePoints} from 'css-line-break';

-export const enum TokenType {
+export enum TokenType {
    STRING_TOKEN,
    BAD_STRING_TOKEN,
    LEFT_PARENTHESIS_TOKEN,
--- a/src/css/types/functions/counter.ts
+++ b/src/css/types/functions/counter.ts
@ -4,7 +4,10 @@ import {contains} from '../../../core/bitwise';
 import {CSSParsedCounterDeclaration} from '../../index';

 export class CounterState {
-    private readonly counters: {[key: string]: number[]} = {};
+    readonly counters: {[key: string]: number[]};
+    constructor() {
+        this.counters = {};
+    }

    getCounterValue(name: string): number {
        const counter = this.counters[name];
@ -15,7 +18,7 @@ export class CounterState {
        return 1;
    }

-    getCounterValues(name: string): readonly number[] {
+    getCounterValues(name: string): number[] {
        const counter = this.counters[name];
        return counter ? counter : [];
    }
@ -34,9 +37,6 @@ export class CounterState {
                const counter = this.counters[entry.counter];
                if (counter && entry.increment !== 0) {
                    canReset = false;
-                    if (!counter.length) {
-                        counter.push(1);
-                    }
                    counter[Math.max(0, counter.length - 1)] += entry.increment;
                }
            });
--- a/src/css/types/index.ts
+++ b/src/css/types/index.ts
@ -1 +1 @@
-export type CSSTypes = 'angle' | 'color' | 'image' | 'length' | 'length-percentage' | 'time';
+export type CSSTypes = 'angle' | 'color' | 'image' | 'length' | 'length-percentage';
--- a/src/css/types/time.ts
+++ b/src/css/types/time.ts
@ -1,20 +0,0 @@
-import {CSSValue} from '../syntax/parser';
-import {TokenType} from '../syntax/tokenizer';
-import {ITypeDescriptor} from '../ITypeDescriptor';
-import {Context} from '../../core/context';
-
-export const time: ITypeDescriptor<number> = {
-    name: 'time',
-    parse: (_context: Context, value: CSSValue): number => {
-        if (value.type === TokenType.DIMENSION_TOKEN) {
-            switch (value.unit.toLowerCase()) {
-                case 's':
-                    return 1000 * value.number;
-                case 'ms':
-                    return value.number;
-            }
-        }
-
-        throw new Error(`Unsupported time type`);
-    }
-};
--- a/src/dom/document-cloner.ts
+++ b/src/dom/document-cloner.ts
@ -24,7 +24,6 @@ import {Context} from '../core/context';
 export interface CloneOptions {
    ignoreElements?: (element: Element) => boolean;
    onclone?: (document: Document, element: HTMLElement) => void;
-    allowTaint?: boolean;
 }

 export interface WindowOptions {
@ -202,16 +201,14 @@ export class DocumentCloner {
            const ctx = canvas.getContext('2d');
            const clonedCtx = clonedCanvas.getContext('2d');
            if (clonedCtx) {
-                if (!this.options.allowTaint && ctx) {
+                if (ctx) {
                    clonedCtx.putImageData(ctx.getImageData(0, 0, canvas.width, canvas.height), 0, 0);
                } else {
                    clonedCtx.drawImage(canvas, 0, 0);
                }
            }
            return clonedCanvas;
-        } catch (e) {
-            this.context.logger.info(`Unable to clone canvas as it is tainted`);
-        }
+        } catch (e) {}

        return clonedCanvas;
    }
--- a/src/dom/element-container.ts
+++ b/src/dom/element-container.ts
@ -21,21 +21,10 @@ export class ElementContainer {
        this.styles = new CSSParsedDeclaration(context, window.getComputedStyle(element, null));
        this.textNodes = [];
        this.elements = [];
-
-        if (isHTMLElementNode(element)) {
-            if (this.styles.animationDuration > 0) {
-                element.style.animationDuration = '0s';
-            }
-            if (this.styles.transitionDuration > 0) {
-                element.style.transitionDuration = '0s';
-            }
-
-            if (this.styles.transform !== null) {
-                // getBoundingClientRect takes transforms into account
-                element.style.transform = 'none';
-            }
+        if (this.styles.transform !== null && isHTMLElementNode(element)) {
+            // getBoundingClientRect takes transforms into account
+            element.style.transform = 'none';
        }
-
        this.bounds = parseBounds(this.context, element);
        this.flags = 0;
    }
--- a/src/index.ts
+++ b/src/index.ts
@ -74,7 +74,6 @@ const renderElement = async (element: HTMLElement, opts: Partial<Options>): Prom
    const foreignObjectRendering = opts.foreignObjectRendering ?? false;

    const cloneOptions: CloneConfigurations = {
-        allowTaint: opts.allowTaint ?? false,
        onclone: opts.onclone,
        ignoreElements: opts.ignoreElements,
        inlineImages: foreignObjectRendering,
--- a/src/render/canvas/canvas-renderer.ts
+++ b/src/render/canvas/canvas-renderer.ts
@ -19,6 +19,7 @@ import {
 import {calculateBackgroundRendering, getBackgroundValueForIndex} from '../background';
 import {isDimensionToken} from '../../css/syntax/parser';
 import {TextBounds} from '../../css/layout/text';
+import {fromCodePoint, toCodePoints} from 'css-line-break';
 import {ImageElementContainer} from '../../dom/replaced-elements/image-element-container';
 import {contentBox} from '../box-sizing';
 import {CanvasElementContainer} from '../../dom/replaced-elements/canvas-element-container';
@ -43,8 +44,6 @@ import {TextShadow} from '../../css/property-descriptors/text-shadow';
 import {PAINT_ORDER_LAYER} from '../../css/property-descriptors/paint-order';
 import {Renderer} from '../renderer';
 import {Context} from '../../core/context';
-import {DIRECTION} from '../../css/property-descriptors/direction';
-import {splitGraphemes} from 'text-segmentation';

 export type RenderConfigurations = RenderOptions & {
    backgroundColor: Color | null;
@ -145,7 +144,7 @@ export class CanvasRenderer extends Renderer {
        if (letterSpacing === 0) {
            this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + baseline);
        } else {
-            const letters = splitGraphemes(text.text);
+            const letters = toCodePoints(text.text).map((i) => fromCodePoint(i));
            letters.reduce((left, letter) => {
                this.ctx.fillText(letter, left, text.bounds.top + baseline);

@ -175,8 +174,6 @@ export class CanvasRenderer extends Renderer {

        this.ctx.font = font;

-        this.ctx.direction = styles.direction === DIRECTION.RTL ? 'rtl' : 'ltr';
-        this.ctx.textAlign = 'left';
        this.ctx.textBaseline = 'alphabetic';
        const {baseline, middle} = this.fontMetrics.getMetrics(fontFamily, fontSize);
        const paintOrder = styles.paintOrder;
--- a/tests/reftests/animation.html
+++ b/tests/reftests/animation.html
@ -5,84 +5,46 @@
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../test.js"></script>
    <style>
+        span {
+            color:blue;
+        }
+        p {
+            background-color: green;
+        }
+        div {
+            background: red;
+            border: 5px solid blue;
+            animation: spin 3s linear 1s infinite;
+        }
        body {
            font-family: Arial;
        }

-        @keyframes rotate0 {
+        @-webkit-keyframes spin {
            0% {
+                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
-            }
-        }
+                /* Firefox 16+, IE 10+, Opera */ }
+            100% {
+                -webkit-transform: rotate(360deg);
+                transform: rotate(360deg);
+                /* Firefox 16+, IE 10+, Opera */ } }

-        @keyframes rotate45 {
+        @keyframes spin {
            0% {
-                transform: rotate(45deg);
-            }
-        }
-
-        p {
-            font: 22px/1 Arial, sans-serif;
-            position: absolute;
-            top: 25%;
-            left: 25%;
-            width: 50%;
-            height: 50%;
-            color: #fff;
-            background-color: #666;
-            line-height: 90px;
-            text-align: center;
-        }
-
-        .transformed.working p {
-            transform: rotate(45deg);
-        }
-
-        .animated.working p {
-            animation-name: rotate0;
-            animation-duration: 1ms;
-            animation-play-state: paused;
-        }
-
-        .animated.broken p {
-            animation-name: rotate45;
-            animation-duration: 1ms;
-            animation-play-state: paused;
-        }
-
-        .transitioned p {
-            transition: 1ms;
-            transform: rotate(45deg)
-        }
-
-
-        div {
-            float: left;
-            clear: left;
-            margin-right: 10px;
-            background-color: #ccc;
-            width: 180px;
-            height: 180px;
-            position: relative;
-        }
+                -webkit-transform: rotate(0deg);
+                transform: rotate(0deg);
+                /* Firefox 16+, IE 10+, Opera */ }
+            100% {
+                -webkit-transform: rotate(360deg);
+                transform: rotate(360deg);
+                /* Firefox 16+, IE 10+, Opera */ } }
    </style>

 </head>
 <body>
-<div class="transformed working">
-    <p>Hello</p>
-</div>
-
-<div class="animated working">
-    <p>Hello</p>
-</div>
-
-<div class="animated broken">
-    <p>Hello</p>
-</div>
-
-<div class="transitioned broken">
-    <p>Hello</p>
-</div>
+<div style="clip: rect(0px, 400px, 50px, 200px); ">Some inline text <span> followed by text in span </span> followed by more inline text.
+    <p>Then a block level element.</p>
+    Then more inline text.</div>
 </body>
 </html>
--- a/tests/reftests/pseudo-content.html
+++ b/tests/reftests/pseudo-content.html
@ -86,20 +86,6 @@
                                            of the section counter, separated
                                            by a period */
        }
-
-        .issue-2639 {
-            display: flex;
-        }
-
-        .issue-2639::before {
-            content: counter(ol0) '. ';
-            counter-increment: ol0;
-        }
-
-        .issue-2639:first-child {
-            counter-reset: ol0;
-        }
-
    </style>
 </head>
 <body>
@ -177,10 +163,5 @@
    <li>item</li>          <!-- 2     -->
 </ol>

-<ol>
-    <li class="issue-2639">one</li>
-    <li class="issue-2639">two</li>
-</ol>
-
 </body>
 </html>
--- a/tests/reftests/text/text.html
+++ b/tests/reftests/text/text.html
@ -149,6 +149,5 @@
    <span>[AB / CD]</span>
 </div>
 <div>Emojis 🤷🏾‍♂️👨‍👩‍👧‍👦 :)</div>
-<div style="letter-spacing: 2px">Emojis with letter-spacing 🤷🏾‍♂️👨‍👩‍👧‍👦 :)</div>
 </body>
 </html>
--- a/tests/testrunner.ts
+++ b/tests/testrunner.ts
@ -8,15 +8,14 @@ import {ScreenshotRequest} from './types';
 // @ts-ignore
 window.Promise = Promise;
 const testRunnerUrl = location.href;
-const hasHistoryApi = typeof window.history !== 'undefined' && typeof window.history.replaceState !== 'undefined';

 const uploadResults = (canvas: HTMLCanvasElement, url: string) => {
-    return new Promise((resolve: () => void, reject: (error: string) => void) => {
-        // @ts-ignore
-        const xhr = 'withCredentials' in new XMLHttpRequest() ? new XMLHttpRequest() : new XDomainRequest();
+    // @ts-ignore
+    return new Promise((resolve: () => void, reject: (error: any) => void) => {
+        const xhr = new XMLHttpRequest();

        xhr.onload = () => {
-            if (typeof xhr.status !== 'number' || xhr.status === 200) {
+            if (xhr.status === 200) {
                resolve();
            } else {
                reject(`Failed to send screenshot with status ${xhr.status}`);
@ -62,21 +61,17 @@ testList
                testContainer.onload = () => done();

                testContainer.src = url + '?selenium&run=false&reftest&' + Math.random();
-                if (hasHistoryApi) {
-                    // Chrome does not resolve relative background urls correctly inside of a nested iframe
-                    try {
-                        history.replaceState(null, '', url);
-                    } catch (e) {}
-                }
+                // Chrome does not resolve relative background urls correctly inside of a nested iframe
+                try {
+                    history.replaceState(null, '', url);
+                } catch (e) {}

                document.body.appendChild(testContainer);
            });
            after(() => {
-                if (hasHistoryApi) {
-                    try {
-                        history.replaceState(null, '', testRunnerUrl);
-                    } catch (e) {}
-                }
+                try {
+                    history.replaceState(null, '', testRunnerUrl);
+                } catch (e) {}
                document.body.removeChild(testContainer);
            });