v1.0.0-alpha.8

Implement unicode line-breaking

CHANGELOG.md

@@ -1,29 +1,41 @@
 ### Changelog ###
 
-#### v1.0.0-alpha5 - 21.12.2017 ####
+#### v1.0.0-alpha.8 - 2.1.2018 ####
+ * Use correct doctype in cloned Document (Fix #1298)
+ * Fix individual border rendering (Fix #1349)
+
+#### v1.0.0-alpha.7 - 31.12.2017 ####
+ * Fix form input rendering (#1338)
+ * Improve word line breaking algorithm
+
+#### v1.0.0-alpha.6 - 28.12.2017 ####
+ * Fix list-style: none (#1340)
+ * Extend supported values for pseudo element content
+
+#### v1.0.0-alpha.5 - 21.12.2017 ####
  * Fix underline positioning
  * Fix canvas rendering on Chrome
  * Fix overflow: auto
  * Added support for rendering list-style
 
-#### v1.0.0-alpha4 - 12.12.2017 ####
+#### v1.0.0-alpha.4 - 12.12.2017 ####
  * Fix rendering with multiple fonts defined (Fix #796)
  * Add support for radial-gradients
  * Fix logging option (#1302)
  * Add support for rendering webgl canvas content (#646)
  * Fix external SVG loading with proxies (#802)
 
-#### v1.0.0-alpha3 - 9.12.2017 ####
+#### v1.0.0-alpha.3 - 9.12.2017 ####
  * Disable `foreignObjectRendering` by default (#1295)
  * Fix background-size when using background-origin and background-size: cover/contain (#1299)
  * Added support for background-origin: content-box (#1299)
 
-#### v1.0.0-alpha2 - 7.12.2017 ####
+#### v1.0.0-alpha.2 - 7.12.2017 ####
  * Fix scroll positions for CanvasRenderer (#1259)
  * Fix `data-html2canvas-ignore` attribute (#1253)
  * Fix decimal `letter-spacing` values (#1293)
 
-#### v1.0.0-alpha1 - 5.12.2017 ####
+#### v1.0.0-alpha.1 - 5.12.2017 ####
  * Complete rewrite of library
  ##### Breaking Changes #####
  * Remove deprecated onrendered callback, calling `html2canvas` returns a `Promise<HTMLCanvasElement>`

docs/features.md

@@ -22,7 +22,7 @@ Below is a list of all the supported CSS properties and values.
    - border-width
  - bottom
  - box-sizing
- - content (**Does not support `attr()`**)
+ - content
  - color
  - display
  - flex
@@ -36,6 +36,11 @@ Below is a list of all the supported CSS properties and values.
  - height
  - left
  - letter-spacing
+ - line-break
+ - list-style
+    - list-style-image
+    - list-style-position
+    - list-style-type
  - margin
  - max-height
  - max-width
@@ -43,6 +48,7 @@ Below is a list of all the supported CSS properties and values.
  - min-width
  - opacity
  - overflow
+ - overflow-wrap
  - padding
  - position
  - right
@@ -58,7 +64,9 @@ Below is a list of all the supported CSS properties and values.
  - visibility
  - white-space
  - width
+ - word-break
  - word-spacing
+ - word-wrap
  - z-index
     
 ## Unsupported CSS properties
@@ -71,10 +79,7 @@ These CSS properties are **NOT** currently supported
  - [font-variant-ligatures](https://github.com/niklasvh/html2canvas/pull/1085)
  - [mix-blend-mode](https://github.com/niklasvh/html2canvas/issues/580)
  - [object-fit](https://github.com/niklasvh/html2canvas/issues/1064)
- - [list-style](https://github.com/niklasvh/html2canvas/issues/177)
  - [repeating-linear-gradient()](https://github.com/niklasvh/html2canvas/issues/1162)
- - word-break
- - [word-wrap](https://github.com/niklasvh/html2canvas/issues/664)
  - [writing-mode](https://github.com/niklasvh/html2canvas/issues/1258)
  - [zoom](https://github.com/niklasvh/html2canvas/issues/732)
 

package.json

@@ -3,7 +3,7 @@
   "name": "html2canvas",
   "description": "Screenshots with JavaScript",
   "main": "dist/npm/index.js",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.8",
   "author": {
     "name": "Niklas von Hertzen",
     "email": "niklasvh@gmail.com",
@@ -77,6 +77,6 @@
   "homepage": "https://html2canvas.hertzen.com",
   "license": "MIT",
   "dependencies": {
-    "punycode": "2.1.0"
+    "css-line-break": "1.0.1"
   }
 }

src/Clone.js

@@ -2,6 +2,7 @@
 'use strict';
 import type {Bounds} from './Bounds';
 import type {Options} from './index';
+import type {PseudoContentData, PseudoContentItem} from './PseudoNodeContent';
 import type Logger from './Logger';
 
 import {parseBounds} from './Bounds';
@@ -10,6 +11,12 @@ import ResourceLoader from './ResourceLoader';
 import {copyCSSStyles} from './Util';
 import {parseBackgroundImage} from './parsing/background';
 import CanvasRenderer from './renderer/CanvasRenderer';
+import {
+    parseCounterReset,
+    popCounters,
+    resolvePseudoContent,
+    PSEUDO_CONTENT_ITEM_TYPE
+} from './PseudoNodeContent';
 
 const IGNORE_ATTRIBUTE = 'data-html2canvas-ignore';
 
@@ -24,6 +31,7 @@ export class DocumentCloner {
     inlineImages: boolean;
     copyStyles: boolean;
     renderer: (element: HTMLElement, options: Options, logger: Logger) => Promise<*>;
+    pseudoContentData: PseudoContentData;
 
     constructor(
         element: HTMLElement,
@@ -40,6 +48,10 @@ export class DocumentCloner {
         this.options = options;
         this.renderer = renderer;
         this.resourceLoader = new ResourceLoader(options, logger, window);
+        this.pseudoContentData = {
+            counters: {},
+            quoteDepth: 0
+        };
         // $FlowFixMe
         this.documentElement = this.cloneNode(element.ownerDocument.documentElement);
     }
@@ -227,6 +239,11 @@ export class DocumentCloner {
                 : this.createElementClone(node);
 
         const window = node.ownerDocument.defaultView;
+        const style = node instanceof window.HTMLElement ? window.getComputedStyle(node) : null;
+        const styleBefore =
+            node instanceof window.HTMLElement ? window.getComputedStyle(node, ':before') : null;
+        const styleAfter =
+            node instanceof window.HTMLElement ? window.getComputedStyle(node, ':after') : null;
 
         if (this.referenceElement === node && clone instanceof window.HTMLElement) {
             this.clonedReferenceElement = clone;
@@ -236,6 +253,9 @@ export class DocumentCloner {
             createPseudoHideStyles(clone);
         }
 
+        const counters = parseCounterReset(style, this.pseudoContentData);
+        const contentBefore = resolvePseudoContent(node, styleBefore, this.pseudoContentData);
+
         for (let child = node.firstChild; child; child = child.nextSibling) {
             if (
                 child.nodeType !== Node.ELEMENT_NODE ||
@@ -247,11 +267,23 @@ export class DocumentCloner {
                 }
             }
         }
+
+        const contentAfter = resolvePseudoContent(node, styleAfter, this.pseudoContentData);
+        popCounters(counters, this.pseudoContentData);
+
         if (node instanceof window.HTMLElement && clone instanceof window.HTMLElement) {
-            this.inlineAllImages(inlinePseudoElement(node, clone, PSEUDO_BEFORE));
-            this.inlineAllImages(inlinePseudoElement(node, clone, PSEUDO_AFTER));
-            if (this.copyStyles && !(node instanceof HTMLIFrameElement)) {
-                copyCSSStyles(node.ownerDocument.defaultView.getComputedStyle(node), clone);
+            if (styleBefore) {
+                this.inlineAllImages(
+                    inlinePseudoElement(node, clone, styleBefore, contentBefore, PSEUDO_BEFORE)
+                );
+            }
+            if (styleAfter) {
+                this.inlineAllImages(
+                    inlinePseudoElement(node, clone, styleAfter, contentAfter, PSEUDO_AFTER)
+                );
+            }
+            if (style && this.copyStyles && !(node instanceof HTMLIFrameElement)) {
+                copyCSSStyles(style, clone);
             }
             this.inlineAllImages(clone);
             if (node.scrollTop !== 0 || node.scrollLeft !== 0) {
@@ -362,9 +394,10 @@ const cloneCanvasContents = (canvas: HTMLCanvasElement, clonedCanvas: HTMLCanvas
 const inlinePseudoElement = (
     node: HTMLElement,
     clone: HTMLElement,
+    style: CSSStyleDeclaration,
+    contentItems: ?Array<PseudoContentItem>,
     pseudoElt: ':before' | ':after'
 ): ?HTMLElement => {
-    const style = node.ownerDocument.defaultView.getComputedStyle(node, pseudoElt);
     if (
         !style ||
         !style.content ||
@@ -375,20 +408,29 @@ const inlinePseudoElement = (
         return;
     }
 
-    const content = stripQuotes(style.content);
-    const image = content.match(URL_REGEXP);
-    const anonymousReplacedElement = clone.ownerDocument.createElement(
-        image ? 'img' : 'html2canvaspseudoelement'
-    );
-    if (image) {
-        // $FlowFixMe
-        anonymousReplacedElement.src = stripQuotes(image[1]);
-    } else {
-        anonymousReplacedElement.textContent = content;
-    }
-
+    const anonymousReplacedElement = clone.ownerDocument.createElement('html2canvaspseudoelement');
     copyCSSStyles(style, anonymousReplacedElement);
 
+    if (contentItems) {
+        const len = contentItems.length;
+        for (var i = 0; i < len; i++) {
+            const item = contentItems[i];
+            switch (item.type) {
+                case PSEUDO_CONTENT_ITEM_TYPE.IMAGE:
+                    const img = clone.ownerDocument.createElement('img');
+                    img.src = parseBackgroundImage(`url(${item.value})`)[0].args[0];
+                    img.style.opacity = '1';
+                    anonymousReplacedElement.appendChild(img);
+                    break;
+                case PSEUDO_CONTENT_ITEM_TYPE.TEXT:
+                    anonymousReplacedElement.appendChild(
+                        clone.ownerDocument.createTextNode(item.value)
+                    );
+                    break;
+            }
+        }
+    }
+
     anonymousReplacedElement.className = `${PSEUDO_HIDE_ELEMENT_CLASS_BEFORE} ${PSEUDO_HIDE_ELEMENT_CLASS_AFTER}`;
     clone.className +=
         pseudoElt === PSEUDO_BEFORE
@@ -403,13 +445,6 @@ const inlinePseudoElement = (
     return anonymousReplacedElement;
 };
 
-const stripQuotes = (content: string): string => {
-    const first = content.substr(0, 1);
-    return first === content.substr(content.length - 1) && first.match(/['"]/)
-        ? content.substr(1, content.length - 2)
-        : content;
-};
-
 const URL_REGEXP = /^url\((.+)\)$/i;
 const PSEUDO_BEFORE = ':before';
 const PSEUDO_AFTER = ':after';
@@ -579,7 +614,7 @@ export const cloneWindow = (
         });
 
         documentClone.open();
-        documentClone.write('<!DOCTYPE html><html></html>');
+        documentClone.write(`${serializeDoctype(document.doctype)}<html></html>`);
         // Chrome scrolls the parent document for some reason after the write to the cloned window???
         restoreOwnerScroll(referenceElement.ownerDocument, scrollX, scrollY);
         documentClone.replaceChild(
@@ -591,3 +626,29 @@ export const cloneWindow = (
         return iframeLoad;
     });
 };
+
+const serializeDoctype = (doctype: ?DocumentType): string => {
+    let str = '';
+    if (doctype) {
+        str += '<!DOCTYPE ';
+        if (doctype.name) {
+            str += doctype.name;
+        }
+
+        if (doctype.internalSubset) {
+            str += doctype.internalSubset;
+        }
+
+        if (doctype.publicId) {
+            str += `"${doctype.publicId}"`;
+        }
+
+        if (doctype.systemId) {
+            str += `"${doctype.systemId}"`;
+        }
+
+        str += '>';
+    }
+
+    return str;
+};

src/Input.js

@@ -133,7 +133,7 @@ const inlineFormElement = (
     if (value.length > 0 && body) {
         const wrapper = node.ownerDocument.createElement('html2canvaswrapper');
         copyCSSStyles(node.ownerDocument.defaultView.getComputedStyle(node, null), wrapper);
-        wrapper.style.position = 'fixed';
+        wrapper.style.position = 'absolute';
         wrapper.style.left = `${container.bounds.left}px`;
         wrapper.style.top = `${container.bounds.top}px`;
         if (!allowLinebreak) {

src/ListItem.js

@@ -92,7 +92,7 @@ export const inlineListItemElement = (
         }
     } else if (typeof container.listIndex === 'number') {
         text = node.ownerDocument.createTextNode(
-            createCounterText(container.listIndex, listStyle.listStyleType)
+            createCounterText(container.listIndex, listStyle.listStyleType, true)
         );
         wrapper.appendChild(text);
         wrapper.style.top = `${container.bounds.top - MARGIN_TOP}px`;
@@ -363,10 +363,10 @@ const createAdditiveCounter = (
     max: number,
     symbols,
     fallback: ListStyleType,
-    suffix: string = '. '
+    suffix: string
 ) => {
     if (value < min || value > max) {
-        return createCounterText(value, fallback);
+        return createCounterText(value, fallback, suffix.length > 0);
     }
 
     return (
@@ -404,7 +404,7 @@ const createCounterStyleFromRange = (
     codePointRangeStart: number,
     codePointRangeEnd: number,
     isNumeric: boolean,
-    suffix: string = '. '
+    suffix: string
 ): string => {
     const codePointRangeLength = codePointRangeEnd - codePointRangeStart + 1;
 
@@ -451,7 +451,7 @@ const createCJKCounter = (
     flags: number
 ): string => {
     if (value < -9999 || value > 9999) {
-        return createCounterText(value, LIST_STYLE_TYPE.CJK_DECIMAL);
+        return createCounterText(value, LIST_STYLE_TYPE.CJK_DECIMAL, suffix.length > 0);
     }
     let tmp = Math.abs(value);
     let string = suffix;
@@ -490,7 +490,14 @@ const CHINESE_FORMAL_MULTIPLIERS = '拾佰仟萬';
 const JAPANESE_NEGATIVE = 'マイナス';
 const KOREAN_NEGATIVE = '마이너스 ';
 
-const createCounterText = (value: number, type: ListStyleType): string => {
+export const createCounterText = (
+    value: number,
+    type: ListStyleType,
+    appendSuffix: boolean
+): string => {
+    const defaultSuffix = appendSuffix ? '. ' : '';
+    const cjkSuffix = appendSuffix ? '、' : '';
+    const koreanSuffix = appendSuffix ? ', ' : '';
     switch (type) {
         case LIST_STYLE_TYPE.DISC:
             return '•';
@@ -499,48 +506,64 @@ const createCounterText = (value: number, type: ListStyleType): string => {
         case LIST_STYLE_TYPE.SQUARE:
             return '◾';
         case LIST_STYLE_TYPE.DECIMAL_LEADING_ZERO:
-            const string = createCounterStyleFromRange(value, 48, 57, true);
+            const string = createCounterStyleFromRange(value, 48, 57, true, defaultSuffix);
             return string.length < 4 ? `0${string}` : string;
         case LIST_STYLE_TYPE.CJK_DECIMAL:
-            return createCounterStyleFromSymbols(value, '〇一二三四五六七八九', '、');
+            return createCounterStyleFromSymbols(value, '〇一二三四五六七八九', cjkSuffix);
         case LIST_STYLE_TYPE.LOWER_ROMAN:
             return createAdditiveCounter(
                 value,
                 1,
                 3999,
                 ROMAN_UPPER,
-                LIST_STYLE_TYPE.DECIMAL
+                LIST_STYLE_TYPE.DECIMAL,
+                defaultSuffix
             ).toLowerCase();
         case LIST_STYLE_TYPE.UPPER_ROMAN:
-            return createAdditiveCounter(value, 1, 3999, ROMAN_UPPER, LIST_STYLE_TYPE.DECIMAL);
+            return createAdditiveCounter(
+                value,
+                1,
+                3999,
+                ROMAN_UPPER,
+                LIST_STYLE_TYPE.DECIMAL,
+                defaultSuffix
+            );
         case LIST_STYLE_TYPE.LOWER_GREEK:
-            return createCounterStyleFromRange(value, 945, 969, false);
+            return createCounterStyleFromRange(value, 945, 969, false, defaultSuffix);
         case LIST_STYLE_TYPE.LOWER_ALPHA:
-            return createCounterStyleFromRange(value, 97, 122, false);
+            return createCounterStyleFromRange(value, 97, 122, false, defaultSuffix);
         case LIST_STYLE_TYPE.UPPER_ALPHA:
-            return createCounterStyleFromRange(value, 65, 90, false);
+            return createCounterStyleFromRange(value, 65, 90, false, defaultSuffix);
         case LIST_STYLE_TYPE.ARABIC_INDIC:
-            return createCounterStyleFromRange(value, 1632, 1641, true);
+            return createCounterStyleFromRange(value, 1632, 1641, true, defaultSuffix);
         case LIST_STYLE_TYPE.ARMENIAN:
         case LIST_STYLE_TYPE.UPPER_ARMENIAN:
-            return createAdditiveCounter(value, 1, 9999, ARMENIAN, LIST_STYLE_TYPE.DECIMAL);
+            return createAdditiveCounter(
+                value,
+                1,
+                9999,
+                ARMENIAN,
+                LIST_STYLE_TYPE.DECIMAL,
+                defaultSuffix
+            );
         case LIST_STYLE_TYPE.LOWER_ARMENIAN:
             return createAdditiveCounter(
                 value,
                 1,
                 9999,
                 ARMENIAN,
-                LIST_STYLE_TYPE.DECIMAL
+                LIST_STYLE_TYPE.DECIMAL,
+                defaultSuffix
             ).toLowerCase();
         case LIST_STYLE_TYPE.BENGALI:
-            return createCounterStyleFromRange(value, 2534, 2543, true);
+            return createCounterStyleFromRange(value, 2534, 2543, true, defaultSuffix);
         case LIST_STYLE_TYPE.CAMBODIAN:
         case LIST_STYLE_TYPE.KHMER:
-            return createCounterStyleFromRange(value, 6112, 6121, true);
+            return createCounterStyleFromRange(value, 6112, 6121, true, defaultSuffix);
         case LIST_STYLE_TYPE.CJK_EARTHLY_BRANCH:
-            return createCounterStyleFromSymbols(value, '子丑寅卯辰巳午未申酉戌亥', '、');
+            return createCounterStyleFromSymbols(value, '子丑寅卯辰巳午未申酉戌亥', cjkSuffix);
         case LIST_STYLE_TYPE.CJK_HEAVENLY_STEM:
-            return createCounterStyleFromSymbols(value, '甲乙丙丁戊己庚辛壬癸', '、');
+            return createCounterStyleFromSymbols(value, '甲乙丙丁戊己庚辛壬癸', cjkSuffix);
         case LIST_STYLE_TYPE.CJK_IDEOGRAPHIC:
         case LIST_STYLE_TYPE.TRAD_CHINESE_INFORMAL:
             return createCJKCounter(
@@ -548,7 +571,7 @@ const createCounterText = (value: number, type: ListStyleType): string => {
                 '零一二三四五六七八九',
                 CHINESE_INFORMAL_MULTIPLIERS,
                 '負',
-                '、',
+                cjkSuffix,
                 CJK_TEN_COEFFICIENTS | CJK_TEN_HIGH_COEFFICIENTS | CJK_HUNDRED_COEFFICIENTS
             );
         case LIST_STYLE_TYPE.TRAD_CHINESE_FORMAL:
@@ -557,7 +580,7 @@ const createCounterText = (value: number, type: ListStyleType): string => {
                 '零壹貳參肆伍陸柒捌玖',
                 CHINESE_FORMAL_MULTIPLIERS,
                 '負',
-                '、',
+                cjkSuffix,
                 CJK_ZEROS |
                     CJK_TEN_COEFFICIENTS |
                     CJK_TEN_HIGH_COEFFICIENTS |
@@ -569,7 +592,7 @@ const createCounterText = (value: number, type: ListStyleType): string => {
                 '零一二三四五六七八九',
                 CHINESE_INFORMAL_MULTIPLIERS,
                 '负',
-                '、',
+                cjkSuffix,
                 CJK_TEN_COEFFICIENTS | CJK_TEN_HIGH_COEFFICIENTS | CJK_HUNDRED_COEFFICIENTS
             );
         case LIST_STYLE_TYPE.SIMP_CHINESE_FORMAL:
@@ -578,21 +601,21 @@ const createCounterText = (value: number, type: ListStyleType): string => {
                 '零壹贰叁肆伍陆柒捌玖',
                 CHINESE_FORMAL_MULTIPLIERS,
                 '负',
-                '、',
+                cjkSuffix,
                 CJK_ZEROS |
                     CJK_TEN_COEFFICIENTS |
                     CJK_TEN_HIGH_COEFFICIENTS |
                     CJK_HUNDRED_COEFFICIENTS
             );
         case LIST_STYLE_TYPE.JAPANESE_INFORMAL:
-            return createCJKCounter(value, '〇一二三四五六七八九', '十百千万', JAPANESE_NEGATIVE, '、', 0);
+            return createCJKCounter(value, '〇一二三四五六七八九', '十百千万', JAPANESE_NEGATIVE, cjkSuffix, 0);
         case LIST_STYLE_TYPE.JAPANESE_FORMAL:
             return createCJKCounter(
                 value,
                 '零壱弐参四伍六七八九',
                 '拾百千万',
                 JAPANESE_NEGATIVE,
-                '、',
+                cjkSuffix,
                 CJK_ZEROS | CJK_TEN_COEFFICIENTS | CJK_TEN_HIGH_COEFFICIENTS
             );
         case LIST_STYLE_TYPE.KOREAN_HANGUL_FORMAL:
@@ -601,30 +624,44 @@ const createCounterText = (value: number, type: ListStyleType): string => {
                 '영일이삼사오육칠팔구',
                 '십백천만',
                 KOREAN_NEGATIVE,
-                ', ',
+                koreanSuffix,
                 CJK_ZEROS | CJK_TEN_COEFFICIENTS | CJK_TEN_HIGH_COEFFICIENTS
             );
         case LIST_STYLE_TYPE.KOREAN_HANJA_INFORMAL:
-            return createCJKCounter(value, '零一二三四五六七八九', '十百千萬', KOREAN_NEGATIVE, ', ', 0);
+            return createCJKCounter(value, '零一二三四五六七八九', '十百千萬', KOREAN_NEGATIVE, koreanSuffix, 0);
         case LIST_STYLE_TYPE.KOREAN_HANJA_FORMAL:
             return createCJKCounter(
                 value,
                 '零壹貳參四五六七八九',
                 '拾百千',
                 KOREAN_NEGATIVE,
-                ', ',
+                koreanSuffix,
                 CJK_ZEROS | CJK_TEN_COEFFICIENTS | CJK_TEN_HIGH_COEFFICIENTS
             );
         case LIST_STYLE_TYPE.DEVANAGARI:
-            return createCounterStyleFromRange(value, 0x966, 0x96f, true);
+            return createCounterStyleFromRange(value, 0x966, 0x96f, true, defaultSuffix);
         case LIST_STYLE_TYPE.GEORGIAN:
-            return createAdditiveCounter(value, 1, 19999, GEORGIAN, LIST_STYLE_TYPE.DECIMAL);
+            return createAdditiveCounter(
+                value,
+                1,
+                19999,
+                GEORGIAN,
+                LIST_STYLE_TYPE.DECIMAL,
+                defaultSuffix
+            );
         case LIST_STYLE_TYPE.GUJARATI:
-            return createCounterStyleFromRange(value, 0xae6, 0xaef, true);
+            return createCounterStyleFromRange(value, 0xae6, 0xaef, true, defaultSuffix);
         case LIST_STYLE_TYPE.GURMUKHI:
-            return createCounterStyleFromRange(value, 0xa66, 0xa6f, true);
+            return createCounterStyleFromRange(value, 0xa66, 0xa6f, true, defaultSuffix);
         case LIST_STYLE_TYPE.HEBREW:
-            return createAdditiveCounter(value, 1, 10999, HEBREW, LIST_STYLE_TYPE.DECIMAL);
+            return createAdditiveCounter(
+                value,
+                1,
+                10999,
+                HEBREW,
+                LIST_STYLE_TYPE.DECIMAL,
+                defaultSuffix
+            );
         case LIST_STYLE_TYPE.HIRAGANA:
             return createCounterStyleFromSymbols(
                 value,
@@ -636,39 +673,39 @@ const createCounterText = (value: number, type: ListStyleType): string => {
                 'いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす'
             );
         case LIST_STYLE_TYPE.KANNADA:
-            return createCounterStyleFromRange(value, 0xce6, 0xcef, true);
+            return createCounterStyleFromRange(value, 0xce6, 0xcef, true, defaultSuffix);
         case LIST_STYLE_TYPE.KATAKANA:
             return createCounterStyleFromSymbols(
                 value,
                 'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヰヱヲン',
-                '、'
+                cjkSuffix
             );
         case LIST_STYLE_TYPE.KATAKANA_IROHA:
             return createCounterStyleFromSymbols(
                 value,
                 'イロハニホヘトチリヌルヲワカヨタレソツネナラムウヰノオクヤマケフコエテアサキユメミシヱヒモセス',
-                '、'
+                cjkSuffix
             );
         case LIST_STYLE_TYPE.LAO:
-            return createCounterStyleFromRange(value, 0xed0, 0xed9, true);
+            return createCounterStyleFromRange(value, 0xed0, 0xed9, true, defaultSuffix);
         case LIST_STYLE_TYPE.MONGOLIAN:
-            return createCounterStyleFromRange(value, 0x1810, 0x1819, true);
+            return createCounterStyleFromRange(value, 0x1810, 0x1819, true, defaultSuffix);
         case LIST_STYLE_TYPE.MYANMAR:
-            return createCounterStyleFromRange(value, 0x1040, 0x1049, true);
+            return createCounterStyleFromRange(value, 0x1040, 0x1049, true, defaultSuffix);
         case LIST_STYLE_TYPE.ORIYA:
-            return createCounterStyleFromRange(value, 0xb66, 0xb6f, true);
+            return createCounterStyleFromRange(value, 0xb66, 0xb6f, true, defaultSuffix);
         case LIST_STYLE_TYPE.PERSIAN:
-            return createCounterStyleFromRange(value, 0x6f0, 0x6f9, true);
+            return createCounterStyleFromRange(value, 0x6f0, 0x6f9, true, defaultSuffix);
         case LIST_STYLE_TYPE.TAMIL:
-            return createCounterStyleFromRange(value, 0xbe6, 0xbef, true);
+            return createCounterStyleFromRange(value, 0xbe6, 0xbef, true, defaultSuffix);
         case LIST_STYLE_TYPE.TELUGU:
-            return createCounterStyleFromRange(value, 0xc66, 0xc6f, true);
+            return createCounterStyleFromRange(value, 0xc66, 0xc6f, true, defaultSuffix);
         case LIST_STYLE_TYPE.THAI:
-            return createCounterStyleFromRange(value, 0xe50, 0xe59, true);
+            return createCounterStyleFromRange(value, 0xe50, 0xe59, true, defaultSuffix);
         case LIST_STYLE_TYPE.TIBETAN:
-            return createCounterStyleFromRange(value, 0xf20, 0xf29, true);
+            return createCounterStyleFromRange(value, 0xf20, 0xf29, true, defaultSuffix);
         case LIST_STYLE_TYPE.DECIMAL:
         default:
-            return createCounterStyleFromRange(value, 48, 57, true);
+            return createCounterStyleFromRange(value, 48, 57, true, defaultSuffix);
     }
 };

src/NodeContainer.js

@@ -7,9 +7,11 @@ import type {BorderRadius} from './parsing/borderRadius';
 import type {DisplayBit} from './parsing/display';
 import type {Float} from './parsing/float';
 import type {Font} from './parsing/font';
+import type {LineBreak} from './parsing/lineBreak';
 import type {ListStyle} from './parsing/listStyle';
 import type {Margin} from './parsing/margin';
 import type {Overflow} from './parsing/overflow';
+import type {OverflowWrap} from './parsing/overflowWrap';
 import type {Padding} from './parsing/padding';
 import type {Position} from './parsing/position';
 import type {TextShadow} from './parsing/textShadow';
@@ -17,6 +19,7 @@ import type {TextTransform} from './parsing/textTransform';
 import type {TextDecoration} from './parsing/textDecoration';
 import type {Transform} from './parsing/transform';
 import type {Visibility} from './parsing/visibility';
+import type {WordBreak} from './parsing/word-break';
 import type {zIndex} from './parsing/zIndex';
 
 import type {Bounds, BoundCurves} from './Bounds';
@@ -34,9 +37,11 @@ import {parseDisplay, DISPLAY} from './parsing/display';
 import {parseCSSFloat, FLOAT} from './parsing/float';
 import {parseFont} from './parsing/font';
 import {parseLetterSpacing} from './parsing/letterSpacing';
+import {parseLineBreak} from './parsing/lineBreak';
 import {parseListStyle} from './parsing/listStyle';
 import {parseMargin} from './parsing/margin';
 import {parseOverflow, OVERFLOW} from './parsing/overflow';
+import {parseOverflowWrap} from './parsing/overflowWrap';
 import {parsePadding} from './parsing/padding';
 import {parsePosition, POSITION} from './parsing/position';
 import {parseTextDecoration} from './parsing/textDecoration';
@@ -44,6 +49,7 @@ import {parseTextShadow} from './parsing/textShadow';
 import {parseTextTransform} from './parsing/textTransform';
 import {parseTransform} from './parsing/transform';
 import {parseVisibility, VISIBILITY} from './parsing/visibility';
+import {parseWordBreak} from './parsing/word-break';
 import {parseZIndex} from './parsing/zIndex';
 
 import {parseBounds, parseBoundCurves, calculatePaddingBoxPath} from './Bounds';
@@ -65,10 +71,12 @@ type StyleDeclaration = {
     float: Float,
     font: Font,
     letterSpacing: number,
+    lineBreak: LineBreak,
     listStyle: ListStyle | null,
     margin: Margin,
     opacity: number,
     overflow: Overflow,
+    overflowWrap: OverflowWrap,
     padding: Padding,
     position: Position,
     textDecoration: TextDecoration | null,
@@ -76,6 +84,7 @@ type StyleDeclaration = {
     textTransform: TextTransform,
     transform: Transform,
     visibility: Visibility,
+    wordBreak: WordBreak,
     zIndex: zIndex
 };
 
@@ -134,12 +143,16 @@ export default class NodeContainer {
             font: parseFont(style),
             letterSpacing: parseLetterSpacing(style.letterSpacing),
             listStyle: display === DISPLAY.LIST_ITEM ? parseListStyle(style) : null,
+            lineBreak: parseLineBreak(style.lineBreak),
             margin: parseMargin(style),
             opacity: parseFloat(style.opacity),
             overflow:
                 INPUT_TAGS.indexOf(node.tagName) === -1
                     ? parseOverflow(style.overflow)
                     : OVERFLOW.HIDDEN,
+            overflowWrap: parseOverflowWrap(
+                style.overflowWrap ? style.overflowWrap : style.wordWrap
+            ),
             padding: parsePadding(style),
             position: position,
             textDecoration: parseTextDecoration(style),
@@ -147,6 +160,7 @@ export default class NodeContainer {
             textTransform: parseTextTransform(style.textTransform),
             transform: parseTransform(style),
             visibility: parseVisibility(style.visibility),
+            wordBreak: parseWordBreak(style.wordBreak),
             zIndex: parseZIndex(position !== POSITION.STATIC ? style.zIndex : 'auto')
         };
 

src/NodeParser.js

@@ -7,6 +7,7 @@ import NodeContainer from './NodeContainer';
 import TextContainer from './TextContainer';
 import {inlineInputElement, inlineTextAreaElement, inlineSelectElement} from './Input';
 import {inlineListItemElement} from './ListItem';
+import {LIST_STYLE_TYPE} from './parsing/listStyle';
 
 export const NodeParser = (
     node: HTMLElement,
@@ -74,7 +75,7 @@ const parseNodeTree = (
                         inlineSelectElement(childNode, container);
                     } else if (
                         container.style.listStyle &&
-                        container.style.listStyle.listStyleType !== 'none'
+                        container.style.listStyle.listStyleType !== LIST_STYLE_TYPE.NONE
                     ) {
                         inlineListItemElement(childNode, container, resourceLoader);
                     }

src/PseudoNodeContent.js

@@ -0,0 +1,341 @@
+/* @flow */
+'use strict';
+
+import {createCounterText} from './ListItem';
+import {parseListStyleType} from './parsing/listStyle';
+
+export const PSEUDO_CONTENT_ITEM_TYPE = {
+    TEXT: 0,
+    IMAGE: 1
+};
+
+export const TOKEN_TYPE = {
+    STRING: 0,
+    ATTRIBUTE: 1,
+    URL: 2,
+    COUNTER: 3,
+    COUNTERS: 4,
+    OPENQUOTE: 5,
+    CLOSEQUOTE: 6
+};
+
+export type PseudoContentData = {
+    counters: {[string]: Array<number>},
+    quoteDepth: number
+};
+
+export type PseudoContentItem = {
+    type: $Values<typeof PSEUDO_CONTENT_ITEM_TYPE>,
+    value: string
+};
+
+export type Token = {
+    type: $Values<typeof TOKEN_TYPE>,
+    value?: string,
+    name?: string,
+    format?: string,
+    glue?: string
+};
+
+export const parseCounterReset = (
+    style: ?CSSStyleDeclaration,
+    data: PseudoContentData
+): Array<string> => {
+    if (!style || !style.counterReset || style.counterReset === 'none') {
+        return [];
+    }
+
+    const counterNames: Array<string> = [];
+    const counterResets = style.counterReset.split(/\s*,\s*/);
+    const lenCounterResets = counterResets.length;
+
+    for (let i = 0; i < lenCounterResets; i++) {
+        const [counterName, initialValue] = counterResets[i].split(/\s+/);
+        counterNames.push(counterName);
+        let counter = data.counters[counterName];
+        if (!counter) {
+            counter = data.counters[counterName] = [];
+        }
+        counter.push(parseInt(initialValue || 0, 10));
+    }
+
+    return counterNames;
+};
+
+export const popCounters = (counterNames: Array<string>, data: PseudoContentData): void => {
+    const lenCounters = counterNames.length;
+    for (let i = 0; i < lenCounters; i++) {
+        data.counters[counterNames[i]].pop();
+    }
+};
+
+export const resolvePseudoContent = (
+    node: Node,
+    style: ?CSSStyleDeclaration,
+    data: PseudoContentData
+): ?Array<PseudoContentItem> => {
+    if (
+        !style ||
+        !style.content ||
+        style.content === 'none' ||
+        style.content === '-moz-alt-content' ||
+        style.display === 'none'
+    ) {
+        return null;
+    }
+
+    const tokens = parseContent(style.content);
+
+    const len = tokens.length;
+    const contentItems: Array<PseudoContentItem> = [];
+    let s = '';
+
+    // increment the counter (if there is a "counter-increment" declaration)
+    const counterIncrement = style.counterIncrement;
+    if (counterIncrement && counterIncrement !== 'none') {
+        const [counterName, incrementValue] = counterIncrement.split(/\s+/);
+        const counter = data.counters[counterName];
+        if (counter) {
+            counter[counter.length - 1] +=
+                incrementValue === undefined ? 1 : parseInt(incrementValue, 10);
+        }
+    }
+
+    // build the content string
+    for (let i = 0; i < len; i++) {
+        const token = tokens[i];
+        switch (token.type) {
+            case TOKEN_TYPE.STRING:
+                s += token.value || '';
+                break;
+
+            case TOKEN_TYPE.ATTRIBUTE:
+                if (node instanceof HTMLElement && token.value) {
+                    s += node.getAttribute(token.value) || '';
+                }
+                break;
+
+            case TOKEN_TYPE.COUNTER:
+                const counter = data.counters[token.name || ''];
+                if (counter) {
+                    s += formatCounterValue([counter[counter.length - 1]], '', token.format);
+                }
+                break;
+
+            case TOKEN_TYPE.COUNTERS:
+                const counters = data.counters[token.name || ''];
+                if (counters) {
+                    s += formatCounterValue(counters, token.glue, token.format);
+                }
+                break;
+
+            case TOKEN_TYPE.OPENQUOTE:
+                s += getQuote(style, true, data.quoteDepth);
+                data.quoteDepth++;
+                break;
+
+            case TOKEN_TYPE.CLOSEQUOTE:
+                data.quoteDepth--;
+                s += getQuote(style, false, data.quoteDepth);
+                break;
+
+            case TOKEN_TYPE.URL:
+                if (s) {
+                    contentItems.push({type: PSEUDO_CONTENT_ITEM_TYPE.TEXT, value: s});
+                    s = '';
+                }
+                contentItems.push({type: PSEUDO_CONTENT_ITEM_TYPE.IMAGE, value: token.value || ''});
+                break;
+        }
+    }
+
+    if (s) {
+        contentItems.push({type: PSEUDO_CONTENT_ITEM_TYPE.TEXT, value: s});
+    }
+
+    return contentItems;
+};
+
+export const parseContent = (content: string, cache?: {[string]: Array<Token>}): Array<Token> => {
+    if (cache && cache[content]) {
+        return cache[content];
+    }
+
+    const tokens: Array<Token> = [];
+    const len = content.length;
+
+    let isString = false;
+    let isEscaped = false;
+    let isFunction = false;
+    let str = '';
+    let functionName = '';
+    let args = [];
+
+    for (let i = 0; i < len; i++) {
+        const c = content.charAt(i);
+
+        switch (c) {
+            case "'":
+            case '"':
+                if (isEscaped) {
+                    str += c;
+                } else {
+                    isString = !isString;
+                    if (!isFunction && !isString) {
+                        tokens.push({type: TOKEN_TYPE.STRING, value: str});
+                        str = '';
+                    }
+                }
+                break;
+
+            case '\\':
+                if (isEscaped) {
+                    str += c;
+                    isEscaped = false;
+                } else {
+                    isEscaped = true;
+                }
+                break;
+
+            case '(':
+                if (isString) {
+                    str += c;
+                } else {
+                    isFunction = true;
+                    functionName = str;
+                    str = '';
+                    args = [];
+                }
+                break;
+
+            case ')':
+                if (isString) {
+                    str += c;
+                } else if (isFunction) {
+                    if (str) {
+                        args.push(str);
+                    }
+
+                    switch (functionName) {
+                        case 'attr':
+                            if (args.length > 0) {
+                                tokens.push({type: TOKEN_TYPE.ATTRIBUTE, value: args[0]});
+                            }
+                            break;
+
+                        case 'counter':
+                            if (args.length > 0) {
+                                const counter: Token = {
+                                    type: TOKEN_TYPE.COUNTER,
+                                    name: args[0]
+                                };
+                                if (args.length > 1) {
+                                    counter.format = args[1];
+                                }
+                                tokens.push(counter);
+                            }
+                            break;
+
+                        case 'counters':
+                            if (args.length > 0) {
+                                const counters: Token = {
+                                    type: TOKEN_TYPE.COUNTERS,
+                                    name: args[0]
+                                };
+                                if (args.length > 1) {
+                                    counters.glue = args[1];
+                                }
+                                if (args.length > 2) {
+                                    counters.format = args[2];
+                                }
+                                tokens.push(counters);
+                            }
+                            break;
+
+                        case 'url':
+                            if (args.length > 0) {
+                                tokens.push({type: TOKEN_TYPE.URL, value: args[0]});
+                            }
+                            break;
+                    }
+
+                    isFunction = false;
+                    str = '';
+                }
+                break;
+
+            case ',':
+                if (isString) {
+                    str += c;
+                } else if (isFunction) {
+                    args.push(str);
+                    str = '';
+                }
+                break;
+
+            case ' ':
+            case '\t':
+                if (isString) {
+                    str += c;
+                } else if (str) {
+                    addOtherToken(tokens, str);
+                    str = '';
+                }
+                break;
+
+            default:
+                str += c;
+        }
+
+        if (c !== '\\') {
+            isEscaped = false;
+        }
+    }
+
+    if (str) {
+        addOtherToken(tokens, str);
+    }
+
+    if (cache) {
+        cache[content] = tokens;
+    }
+
+    return tokens;
+};
+
+const addOtherToken = (tokens: Array<Token>, identifier: string): void => {
+    switch (identifier) {
+        case 'open-quote':
+            tokens.push({type: TOKEN_TYPE.OPENQUOTE});
+            break;
+        case 'close-quote':
+            tokens.push({type: TOKEN_TYPE.CLOSEQUOTE});
+            break;
+    }
+};
+
+const getQuote = (style: CSSStyleDeclaration, isOpening: boolean, quoteDepth: number): string => {
+    const quotes = style.quotes ? style.quotes.split(/\s+/) : ["'\"'", "'\"'"];
+    let idx = quoteDepth * 2;
+    if (idx >= quotes.length) {
+        idx = quotes.length - 2;
+    }
+    if (!isOpening) {
+        ++idx;
+    }
+    return quotes[idx].replace(/^["']|["']$/g, '');
+};
+
+const formatCounterValue = (counter, glue: ?string, format: ?string): string => {
+    const len = counter.length;
+    let result = '';
+
+    for (let i = 0; i < len; i++) {
+        if (i > 0) {
+            result += glue || '';
+        }
+        result += createCounterText(counter[i], parseListStyleType(format || 'decimal'), false);
+    }
+
+    return result;
+};

src/Renderer.js

@@ -165,7 +165,7 @@ export default class Renderer {
             !container.style.background.backgroundColor.isTransparent() ||
             container.style.background.backgroundImage.length;
 
-        const renderableBorders = container.style.border.filter(
+        const hasRenderableBorders = container.style.border.some(
             border =>
                 border.borderStyle !== BORDER_STYLE.NONE && !border.borderColor.isTransparent()
         );
@@ -186,12 +186,17 @@ export default class Renderer {
                 });
             }
 
-            renderableBorders.forEach((border, side) => {
+            container.style.border.forEach((border, side) => {
+                if (
+                    border.borderStyle !== BORDER_STYLE.NONE &&
+                    !border.borderColor.isTransparent()
+                ) {
                     this.renderBorder(border, side, container.curvedBounds);
+                }
             });
         };
 
-        if (HAS_BACKGROUND || renderableBorders.length) {
+        if (HAS_BACKGROUND || hasRenderableBorders) {
             const paths = container.parent ? container.parent.getClipPaths() : [];
             if (paths.length) {
                 this.target.clip(paths, callback);

src/TextBounds.js

@@ -1,18 +1,12 @@
 /* @flow */
 'use strict';
 
-import {ucs2} from 'punycode';
 import type NodeContainer from './NodeContainer';
 import {Bounds, parseBounds} from './Bounds';
 import {TEXT_DECORATION} from './parsing/textDecoration';
 
 import FEATURES from './Feature';
-
-const UNICODE = /[^\u0000-\u00ff]/;
-
-const hasUnicodeCharacters = (text: string): boolean => UNICODE.test(text);
-
-const encodeCodePoint = (codePoint: number): string => ucs2.encode([codePoint]);
+import {breakWords, toCodePoints, fromCodePoint} from './Unicode';
 
 export class TextBounds {
     text: string;
@@ -29,9 +23,10 @@ export const parseTextBounds = (
     parent: NodeContainer,
     node: Text
 ): Array<TextBounds> => {
-    const codePoints = ucs2.decode(value);
-    const letterRendering = parent.style.letterSpacing !== 0 || hasUnicodeCharacters(value);
-    const textList = letterRendering ? codePoints.map(encodeCodePoint) : splitWords(codePoints);
+    const letterRendering = parent.style.letterSpacing !== 0;
+    const textList = letterRendering
+        ? toCodePoints(value).map(i => fromCodePoint(i))
+        : breakWords(value, parent);
     const length = textList.length;
     const defaultView = node.parentNode ? node.parentNode.ownerDocument.defaultView : null;
     const scrollX = defaultView ? defaultView.pageXOffset : 0;
@@ -88,42 +83,3 @@ const getRangeBounds = (
     range.setEnd(node, offset + length);
     return Bounds.fromClientRect(range.getBoundingClientRect(), scrollX, scrollY);
 };
-
-const splitWords = (codePoints: Array<number>): Array<string> => {
-    const words = [];
-    let i = 0;
-    let onWordBoundary = false;
-    let word;
-    while (codePoints.length) {
-        if (isWordBoundary(codePoints[i]) === onWordBoundary) {
-            word = codePoints.splice(0, i);
-            if (word.length) {
-                words.push(ucs2.encode(word));
-            }
-            onWordBoundary = !onWordBoundary;
-            i = 0;
-        } else {
-            i++;
-        }
-
-        if (i >= codePoints.length) {
-            word = codePoints.splice(0, i);
-            if (word.length) {
-                words.push(ucs2.encode(word));
-            }
-        }
-    }
-    return words;
-};
-
-const isWordBoundary = (characterCode: number): boolean => {
-    return (
-        [
-            32, // <space>
-            13, // \r
-            10, // \n
-            9, // \t
-            45 // -
-        ].indexOf(characterCode) !== -1
-    );
-};

src/Unicode.js

@@ -1,32 +1,27 @@
 /* @flow */
 'use strict';
 
-export const fromCodePoint = (...codePoints: Array<number>): string => {
-    if (String.fromCodePoint) {
-        return String.fromCodePoint(...codePoints);
+import NodeContainer from './NodeContainer';
+import {LineBreaker, fromCodePoint, toCodePoints} from 'css-line-break';
+import {OVERFLOW_WRAP} from './parsing/overflowWrap';
+
+export {toCodePoints, fromCodePoint} from 'css-line-break';
+
+export const breakWords = (str: string, parent: NodeContainer): Array<string> => {
+    const breaker = LineBreaker(str, {
+        lineBreak: parent.style.lineBreak,
+        wordBreak:
+            parent.style.overflowWrap === OVERFLOW_WRAP.BREAK_WORD
+                ? 'break-word'
+                : parent.style.wordBreak
+    });
+
+    const words = [];
+    let bk;
+
+    while (!(bk = breaker.next()).done) {
+        words.push(bk.value.slice());
     }
 
-    const length = codePoints.length;
-    if (!length) {
-        return '';
-    }
-
-    const codeUnits = [];
-
-    let index = -1;
-    let result = '';
-    while (++index < length) {
-        let codePoint = codePoints[index];
-        if (codePoint <= 0xffff) {
-            codeUnits.push(codePoint);
-        } else {
-            codePoint -= 0x10000;
-            codeUnits.push((codePoint >> 10) + 0xd800, codePoint % 0x400 + 0xdc00);
-        }
-        if (index + 1 === length || codeUnits.length > 0x4000) {
-            result += String.fromCharCode(...codeUnits);
-            codeUnits.length = 0;
-        }
-    }
-    return result;
+    return words;
 };

src/parsing/lineBreak.js

@@ -0,0 +1,19 @@
+/* @flow */
+'use strict';
+
+export const LINE_BREAK = {
+    NORMAL: 'normal',
+    STRICT: 'strict'
+};
+
+export type LineBreak = $Values<typeof LINE_BREAK>;
+
+export const parseLineBreak = (wordBreak: string): LineBreak => {
+    switch (wordBreak) {
+        case 'strict':
+            return LINE_BREAK.STRICT;
+        case 'normal':
+        default:
+            return LINE_BREAK.NORMAL;
+    }
+};

src/parsing/listStyle.js

@@ -75,7 +75,7 @@ export const LIST_STYLE_TYPE = {
 export type ListStylePosition = $Values<typeof LIST_STYLE_POSITION>;
 export type ListStyleType = $Values<typeof LIST_STYLE_TYPE>;
 
-const parseListStyleType = (type: string): ListStyleType => {
+export const parseListStyleType = (type: string): ListStyleType => {
     switch (type) {
         case 'disc':
             return LIST_STYLE_TYPE.DISC;

src/parsing/overflowWrap.js

@@ -0,0 +1,19 @@
+/* @flow */
+'use strict';
+
+export const OVERFLOW_WRAP = {
+    NORMAL: 0,
+    BREAK_WORD: 1
+};
+
+export type OverflowWrap = $Values<typeof OVERFLOW_WRAP>;
+
+export const parseOverflowWrap = (overflow: string): OverflowWrap => {
+    switch (overflow) {
+        case 'break-word':
+            return OVERFLOW_WRAP.BREAK_WORD;
+        case 'normal':
+        default:
+            return OVERFLOW_WRAP.NORMAL;
+    }
+};

src/parsing/word-break.js

@@ -0,0 +1,22 @@
+/* @flow */
+'use strict';
+
+export const WORD_BREAK = {
+    NORMAL: 'normal',
+    BREAK_ALL: 'break-all',
+    KEEP_ALL: 'keep-all'
+};
+
+export type WordBreak = $Values<typeof WORD_BREAK>;
+
+export const parseWordBreak = (wordBreak: string): WordBreak => {
+    switch (wordBreak) {
+        case 'break-all':
+            return WORD_BREAK.BREAK_ALL;
+        case 'keep-all':
+            return WORD_BREAK.KEEP_ALL;
+        case 'normal':
+        default:
+            return WORD_BREAK.NORMAL;
+    }
+};

tests/node/pseudonodecontent.js

@@ -0,0 +1,111 @@
+const PseudoNodeContent = require('../../dist/npm/PseudoNodeContent');
+const assert = require('assert');
+
+describe('PseudoNodeContent', function() {
+    it('should parse string', function() {
+        assert.deepEqual(PseudoNodeContent.parseContent('"hello"'), [
+            {type: PseudoNodeContent.TOKEN_TYPE.STRING, value: 'hello'}
+        ]);
+    });
+
+    it('should parse string with (,)', function() {
+        assert.deepEqual(PseudoNodeContent.parseContent('"a,b (c) d"'), [
+            {type: PseudoNodeContent.TOKEN_TYPE.STRING, value: 'a,b (c) d'}
+        ]);
+    });
+
+    it('should parse string with escaped quotes', function() {
+        assert.deepEqual(PseudoNodeContent.parseContent('"3.14\\""'), [
+            {type: PseudoNodeContent.TOKEN_TYPE.STRING, value: '3.14"'}
+        ]);
+    });
+
+    it('should parse string with escape', function() {
+        assert.deepEqual(PseudoNodeContent.parseContent('"a\\) \\\\ b"'), [
+            {type: PseudoNodeContent.TOKEN_TYPE.STRING, value: 'a) \\ b'}
+        ]);
+    });
+
+    it('should parse two strings', function() {
+        assert.deepEqual(PseudoNodeContent.parseContent('"hello" \'world\''), [
+            {type: PseudoNodeContent.TOKEN_TYPE.STRING, value: 'hello'},
+            {type: PseudoNodeContent.TOKEN_TYPE.STRING, value: 'world'}
+        ]);
+    });
+
+    it('should parse counter', function() {
+        assert.deepEqual(PseudoNodeContent.parseContent('counter(x)'), [
+            {type: PseudoNodeContent.TOKEN_TYPE.COUNTER, name: 'x'}
+        ]);
+    });
+
+    it('should parse counters', function() {
+        assert.deepEqual(PseudoNodeContent.parseContent('counters(x, "-")'), [
+            {type: PseudoNodeContent.TOKEN_TYPE.COUNTERS, name: 'x', glue: '-'}
+        ]);
+    });
+
+    it('should parse strings and counters', function() {
+        assert.deepEqual(PseudoNodeContent.parseContent('"["counters(c2, " < ") \']\''), [
+            {type: PseudoNodeContent.TOKEN_TYPE.STRING, value: '['},
+            {type: PseudoNodeContent.TOKEN_TYPE.COUNTERS, name: 'c2', glue: ' < '},
+            {type: PseudoNodeContent.TOKEN_TYPE.STRING, value: ']'}
+        ]);
+    });
+
+    it('should parse counter with format', function() {
+        assert.deepEqual(PseudoNodeContent.parseContent('counter(x, lower-greek)'), [
+            {type: PseudoNodeContent.TOKEN_TYPE.COUNTER, name: 'x', format: 'lower-greek'}
+        ]);
+    });
+
+    it('should parse counters with format', function() {
+        assert.deepEqual(PseudoNodeContent.parseContent('counters(x, "-", upper-roman)'), [
+            {
+                type: PseudoNodeContent.TOKEN_TYPE.COUNTERS,
+                name: 'x',
+                glue: '-',
+                format: 'upper-roman'
+            }
+        ]);
+    });
+
+    it('should parse strings and counters with format', function() {
+        assert.deepEqual(PseudoNodeContent.parseContent("\"[\"counters(c2, ' < ', disc) ']'"), [
+            {type: PseudoNodeContent.TOKEN_TYPE.STRING, value: '['},
+            {type: PseudoNodeContent.TOKEN_TYPE.COUNTERS, name: 'c2', glue: ' < ', format: 'disc'},
+            {type: PseudoNodeContent.TOKEN_TYPE.STRING, value: ']'}
+        ]);
+    });
+
+    it('should parse attr', function() {
+        assert.deepEqual(PseudoNodeContent.parseContent('attr(id)'), [
+            {type: PseudoNodeContent.TOKEN_TYPE.ATTRIBUTE, value: 'id'}
+        ]);
+    });
+
+    it('should parse url', function() {
+        assert.deepEqual(PseudoNodeContent.parseContent('url(http://www.abc.de/f/g.png)'), [
+            {type: PseudoNodeContent.TOKEN_TYPE.URL, value: 'http://www.abc.de/f/g.png'}
+        ]);
+    });
+
+    it('should parse open-quote', function() {
+        assert.deepEqual(PseudoNodeContent.parseContent('open-quote'), [
+            {type: PseudoNodeContent.TOKEN_TYPE.OPENQUOTE}
+        ]);
+    });
+
+    it('should parse close-quote', function() {
+        assert.deepEqual(PseudoNodeContent.parseContent('close-quote'), [
+            {type: PseudoNodeContent.TOKEN_TYPE.CLOSEQUOTE}
+        ]);
+    });
+
+    it('should parse open-quote and string', function() {
+        assert.deepEqual(PseudoNodeContent.parseContent('open-quote "!"'), [
+            {type: PseudoNodeContent.TOKEN_TYPE.OPENQUOTE},
+            {type: PseudoNodeContent.TOKEN_TYPE.STRING, value: '!'}
+        ]);
+    });
+});

tests/reftests/border/solid.html

@@ -12,6 +12,7 @@
         margin: 10px;
         background:#6F428C;
         border-style: solid;
+        border-width: 0;
       }
 
       .box1 {
@@ -33,6 +34,12 @@
         border-color: green;
       }
 
+      .box5 {
+          border-style: none;
+          border-bottom: 50px solid #807d32;
+          border-bottom-width: 50px;
+      }
+
       html {
         background: #3a84c3;
       }
@@ -43,5 +50,6 @@
     <div class="box2">&nbsp;</div>
     <div class="box3">&nbsp;</div>
     <div class="box4">&nbsp;</div>
+    <div class="box5">&nbsp;</div>
   </body>
 </html>

tests/reftests/images/doctype.html

@@ -0,0 +1,11 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+    <script type="text/javascript" src="../../test.js"></script>
+</head>
+<body>
+    <img src="../../assets/image.jpg" />
+    <img src="../../assets/image2.jpg" style="display:block;" />
+	<br>
+</body>
+</html>

tests/reftests/pseudo-content.html

@@ -0,0 +1,104 @@
+<!doctype html>
+<html>
+	<head>
+        <script type="text/javascript" src="../test.js"></script>
+
+		<style>
+			body {
+				quotes: "<{" "}>" "->" "<-" "(" ")" "-:" ":-";
+			}
+
+			.counter1,
+			.counter2,
+			.quotes1,
+			.attr-url {
+				border: 1px solid deepskyblue;
+				padding: 5px;
+				margin-bottom: 10px;			
+			}
+
+			.counter1 {
+				counter-reset: c1 3;
+			}
+
+			.counter1 > div::before {
+				content: "«\"" counter(c1) "\»";
+				counter-increment: c1 -1;
+			}
+
+			.counter2 {
+				counter-reset: c2;
+			}
+
+			.counter2 > div::before {
+				content: "["counters(c2, " < ", upper-roman) ']';
+				counter-increment: c2 2;
+			}
+
+			.quotes1::before {
+				content: open-quote "!" open-quote close-quote open-quote;
+			}
+
+			.quotes1::after {
+				content: "!" close-quote close-quote;
+			}
+
+			.quotes2 {
+				quotes: "«" "»" "“" "”";
+			}
+
+			.quotes2::before {
+				content: open-quote;
+			}
+
+			.quotes2::after {
+				content: close-quote;
+			}
+
+			.attr-url > div::after {
+				content: url(../assets/image.jpg) "///" attr(data-text);
+			}
+		</style>
+	</head>
+	<body>
+		<div class="counter1">
+			<div>A</div>
+			<div>B</div>
+			<div>C</div>
+			<div>D</div>
+		</div>
+
+		<div class="counter2">
+			<div>A</div>
+			<div>B</div>
+			<div>
+				C
+				<div class="counter2">
+					<div>a</div>
+					<div>b</div>
+					<div>
+						c
+						<div class="counter2">
+							<div>Aa</div>
+							<div>Bb</div>
+							<div>Cc</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div>D</div>
+		</div>
+
+		<div class="quotes1">
+			Hello
+			<div class="quotes2">
+				Quoted
+				<div class="quotes2">World</div>
+			</div>
+		</div>
+
+		<div class="attr-url">
+			<div data-text="Hello World"></div>
+		</div>
+	</body>
+</html>

tests/reftests/text/line-break.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>word-break</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript" src="../../test.js"></script>
+    <style>
+        body {
+            font-family: Arial;
+        }
+        .test span {
+            line-break: normal;
+        }
+
+        .strict span {
+            line-break: strict;
+        }
+        p.test{
+            border: 1px solid gray;
+            color: blue;
+            width: 6em;
+        }
+    </style>
+
+</head>
+<body>
+<!-- iteration marks -->
+<p class="test" lang="ja">
+    <span>サンプルぁルぁルぁルぁルぁルぁルぁぁぁぁ文ンプル–文々サンプル文</span>
+</p>
+
+<p class="test strict" lang="ja">
+    <span>サンプルぁルぁルぁルぁルぁルぁルぁぁぁぁ文文文文文‐–〜゠サンプル文々サンプル文</span>
+</p>
+
+
+<hr />
+
+</body>
+</html>

tests/reftests/text/overflow-wrap.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>word-break</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript" src="../../test.js"></script>
+    <style>
+        body {
+            font-family: Arial;
+        }
+        .normal {
+            width: 13em;
+            background: gold;
+            overflow-wrap: normal;
+        }
+
+        .break-word {
+            width: 13em;
+            background: lime;
+            overflow-wrap: break-word;
+        }
+
+        .word-normal {
+            width: 13em;
+            background: gold;
+            word-wrap: normal;
+        }
+
+        .word-break-word {
+            width: 13em;
+            background: lime;
+            word-wrap: break-word;
+        }
+    </style>
+
+</head>
+<body>
+<div>
+    <p>1. <code>overflow-wrap: normal</code></p>
+    <p class="normal">FStrPrivFinÄndG (Gesetz zur Änderung des
+        Fernstraßenbauprivatfinanzierungsgesetzes
+        und straßenverkehrsrechtlicher Vorschriften)</p>
+    <p>2. <code>overflow-wrap: break-word</code></p>
+    <p class="break-word">FStrPrivFinÄndG (Gesetz zur Änderung des
+        Fernstraßenbauprivatfinanzierungsgesetzes
+        und straßenverkehrsrechtlicher Vorschriften)</p>
+    <p>3. <code>word-wrap: normal</code></p>
+    <p class="word-normal">FStrPrivFinÄndG (Gesetz zur Änderung des
+        Fernstraßenbauprivatfinanzierungsgesetzes
+        und straßenverkehrsrechtlicher Vorschriften)</p>
+    <p>4. <code>word-wrap: break-word</code></p>
+    <p class="word-break-word">FStrPrivFinÄndG (Gesetz zur Änderung des
+        Fernstraßenbauprivatfinanzierungsgesetzes
+        und straßenverkehrsrechtlicher Vorschriften)</p>
+</div>
+
+</body>
+</html>

tests/reftests/text/thai.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Thai text</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript" src="../../test.js"></script>
+    <style>
+        .text-block {
+            width: 500px;
+            font-family: serif;
+            float:left;
+            text-align:justify;
+        }
+
+    </style>
+</head>
+<body>
+
+<div id="text" class="text-block">
+    <p>.....</p>
+    <p>ทดสอบ แบบกำหนดรูปแบบ ทำ ที นี่ นู่น นั่น นี้ มี หรือ ไม่ </p>
+    <p>ภาษาไทย เป็นภาษาราชการของประเทศไทย และภาษาแม่ของชาวไทย และชนเชื้อสายอื่นในประเทศไทย ภาษาไทยเป็นภาษาในกลุ่มภาษาไท ซึ่งเป็นกลุ่มย่อยของตระกูลภาษาไท-กะได สันนิษฐานว่า ภาษาในตระกูลนี้มีถิ่นกำเนิดจากทางตอนใต้ของประเทศจีน และนักภาษาศาสตร์บางส่วนเสนอว่า ภาษาไทยน่าจะมีความเชื่อมโยงกับตระกูลภาษาออสโตร-เอเชียติก ตระกูลภาษาออสโตรนีเซียน และตระกูลภาษาจีน-ทิเบต</p>
+    <p>ภาษาไทยเป็นภาษาที่มีระดับเสียงของคำแน่นอนหรือวรรณยุกต์เช่นเดียวกับภาษาจีน และออกเสียงแยกคำต่อคำ ทำให้เป็นที่ลำบากของชาวต่างชาติเนื่องจากการออกเสียงวรรณยุกต์ที่เป็นเอกลักษณ์ของแต่ละคำ และการสะกดคำที่ซับซ้อน</p>
+    <p>คำว่า ไทย หมายความว่า อิสรภาพ เสรีภาพ หรืออีกความหมายหนึ่งคือ ใหญ่ ยิ่งใหญ่ เพราะการจะเป็นอิสระได้จะต้องมีกำลังที่มากกว่า แข็งแกร่งกว่า เพื่อป้องกันการรุกรานจากข้าศึก คำนี้เป็นคำไทยแท้ที่เกิดจากการสร้างคำที่เรียก "การลากคำเข้าวัด" ซึ่งเป็นการลากความวิธีหนึ่ง ตามหลักคติชนวิทยา คนไทยเป็นชนชาติที่นับถือกันว่า ภาษาบาลี ซึ่งเป็นภาษาที่บันทึกพระธรรมคำสอนของพระพุทธเจ้าเป็นภาษาอันศักดิ์สิทธิ์และเป็นมงคล เมื่อคนไทยต้องการตั้งชื่อประเทศว่า ไท ซึ่งเป็นคำไทยแท้ จึงเติมตัว ย เข้าไปข้างท้าย เพื่อให้มีลักษณะคล้ายคำในภาษาบาลี - สันสกฤตเพื่อความเป็นมงคลตามความเชื่อของตน ภาษาไทยจึงหมายถึงภาษาของชนชาติไทยผู้เป็นไทนั่นเอง</p>
+</div>
+
+</body>
+</html>

tests/reftests/text/word-break.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>word-break</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript" src="../../test.js"></script>
+    <style>
+        body {
+            font-family: Arial;
+        }
+        .narrow {
+            padding: 5px;
+            border: 1px solid;
+            width: 8em;
+        }
+
+        .normal {
+            word-break: normal;
+        }
+
+        .breakAll {
+            word-break: break-all;
+        }
+
+        .keep {
+            word-break: keep-all;
+        }
+    </style>
+
+</head>
+<body>
+<div>
+    <p>1. <code>word-break: normal</code></p>
+    <p class="normal narrow">This is a long and
+        Supercalifragilisticexpialidocious sentence.
+        次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>
+
+    <p>2. <code>word-break: break-all</code></p>
+    <p class="breakAll narrow">This is a long and
+        Supercalifragilisticexpialidocious sentence.
+        次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>
+
+    <p>3. <code>word-break: keep-all</code></p>
+    <p class="keep narrow">This is a long and
+        Supercalifragilisticexpialidocious sentence.
+        次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>
+</div>
+
+</body>
+</html>