Fix list style issues

package.json

@@ -77,7 +77,6 @@
   "homepage": "https://html2canvas.hertzen.com",
   "license": "MIT",
   "dependencies": {
-    "punycode": "2.1.0",
+    "punycode": "2.1.0"
-    "liststyletype-formatter": "latest"
   }
 }

src/ListItem.js

@@ -1,135 +1,101 @@
 /* @flow */
 'use strict';
 
-import type {BackgroundSource} from './parsing/background';
 import type ResourceLoader from './ResourceLoader';
+import type {ListStyleType} from './parsing/listStyle';
 
-import {parseBackgroundImage} from './parsing/background';
+import {copyCSSStyles, contains} from './Util';
-import {copyCSSStyles, getParentOfType} from './Util';
 import NodeContainer from './NodeContainer';
 import TextContainer from './TextContainer';
-import ListStyleTypeFormatter from 'liststyletype-formatter';
+import {LIST_STYLE_POSITION, LIST_STYLE_TYPE} from './parsing/listStyle';
+import {fromCodePoint} from './Unicode';
 
 // Margin between the enumeration and the list item content
 const MARGIN_RIGHT = 7;
 
-export const LIST_STYLE_POSITION = {
+const ancestorTypes = ['OL', 'UL', 'MENU'];
-    INSIDE: 0,
-    OUTSIDE: 1
-};
 
-export type ListStylePosition = $Values<typeof LIST_STYLE_POSITION>;
+export const getListOwner = (container: NodeContainer): ?NodeContainer => {
-
+    let parent = container.parent;
-export type ListStyle = {
+    if (!parent) {
-    listStyleType: string,
+        return null;
-    listStyleImage: BackgroundSource,
-    listStylePosition: ListStylePosition
-};
-
-export const parseListStyle = (style: CSSStyleDeclaration): ListStyle => {
-    const listStyleImage = parseBackgroundImage(style.getPropertyValue('list-style-image'));
-    return {
-        listStyleType: style.getPropertyValue('list-style-type'),
-        listStyleImage: listStyleImage && listStyleImage[0],
-        listStylePosition: parseListStylePosition(style.getPropertyValue('list-style-position'))
-    };
-};
-
-export const parseListStylePosition = (position: string): ListStylePosition => {
-    switch (position) {
-        case 'inside':
-            return LIST_STYLE_POSITION.INSIDE;
-        case 'outside':
-            return LIST_STYLE_POSITION.OUTSIDE;
-    }
-    return LIST_STYLE_POSITION.OUTSIDE;
-};
-
-const getListItemValue = (node: HTMLLIElement): number => {
-    if (node.value) {
-        return node.value;
     }
 
-    const listContainer = getParentOfType(node, ['OL', 'UL']);
+    do {
-    if (!listContainer || listContainer.tagName === 'UL') {
+        let isAncestor = ancestorTypes.indexOf(parent.tagName) !== -1;
-        // The actual value isn't needed for unordered lists, just return an arbitrary value
+        if (isAncestor) {
-        return 1;
+            return parent;
         }
+        parent = parent.parent;
+    } while (parent);
 
-    // $FlowFixMe
+    return container.parent;
-    let value = listContainer.start !== undefined ? listContainer.start - 1 : 0;
-    const listItems = listContainer.querySelectorAll('li');
-    const lenListItems = listItems.length;
-
-    for (let i = 0; i < lenListItems; i++) {
-        // $FlowFixMe
-        const listItem: HTMLLIElement = listItems[i];
-        if (getParentOfType(listItem, ['OL']) === listContainer) {
-            value = listItem.hasAttribute('value') ? listItem.value : value + 1;
-        }
-        if (listItem === node) {
-            break;
-        }
-    }
-
-    return value;
 };
 
 export const inlineListItemElement = (
-    node: HTMLLIElement,
+    node: HTMLElement,
     container: NodeContainer,
     resourceLoader: ResourceLoader
 ): void => {
-    const style = node.ownerDocument.defaultView.getComputedStyle(node, null);
+    const listStyle = container.style.listStyle;
-    const listStyle = parseListStyle(style);
 
-    if (listStyle.listStyleType === 'none') {
+    if (!listStyle) {
         return;
     }
 
+    const style = node.ownerDocument.defaultView.getComputedStyle(node, null);
     const wrapper = node.ownerDocument.createElement('html2canvaswrapper');
     copyCSSStyles(style, wrapper);
 
-    wrapper.style.position = 'fixed';
+    wrapper.style.position = 'absolute';
     wrapper.style.bottom = 'auto';
+    wrapper.style.display = 'block';
+    wrapper.style.letterSpacing = 'normal';
 
     switch (listStyle.listStylePosition) {
         case LIST_STYLE_POSITION.OUTSIDE:
             wrapper.style.left = 'auto';
             wrapper.style.right = `${node.ownerDocument.defaultView.innerWidth -
-                container.bounds.left +
+                container.bounds.left -
+                container.style.margin[1].getAbsoluteValue(container.bounds.width) +
                 MARGIN_RIGHT}px`;
             wrapper.style.textAlign = 'right';
             break;
         case LIST_STYLE_POSITION.INSIDE:
-            wrapper.style.left = `${container.bounds.left}px`;
+            wrapper.style.left = `${container.bounds.left -
+                container.style.margin[3].getAbsoluteValue(container.bounds.width)}px`;
             wrapper.style.right = 'auto';
             wrapper.style.textAlign = 'left';
             break;
     }
 
     let text;
-    if (listStyle.listStyleImage && listStyle.listStyleImage !== 'none') {
+    const MARGIN_TOP = container.style.margin[0].getAbsoluteValue(container.bounds.width);
-        if (listStyle.listStyleImage.method === 'url') {
+    const styleImage = listStyle.listStyleImage;
+    if (styleImage) {
+        if (styleImage.method === 'url') {
             const image = node.ownerDocument.createElement('img');
-            image.src = listStyle.listStyleImage.args[0];
+            image.src = styleImage.args[0];
-            wrapper.style.top = `${container.bounds.top}px`;
+            wrapper.style.top = `${container.bounds.top - MARGIN_TOP}px`;
             wrapper.style.width = 'auto';
             wrapper.style.height = 'auto';
             wrapper.appendChild(image);
         } else {
             const size = parseFloat(container.style.font.fontSize) * 0.5;
-            wrapper.style.top = `${container.bounds.top + container.bounds.height - 1.5 * size}px`;
+            wrapper.style.top = `${container.bounds.top -
+                MARGIN_TOP +
+                container.bounds.height -
+                1.5 * size}px`;
             wrapper.style.width = `${size}px`;
             wrapper.style.height = `${size}px`;
             wrapper.style.backgroundImage = style.listStyleImage;
         }
-    } else {
+    } else if (typeof container.listIndex === 'number') {
         text = node.ownerDocument.createTextNode(
-            ListStyleTypeFormatter.format(getListItemValue(node), style.listStyleType)
+            createCounterText(container.listIndex, listStyle.listStyleType)
         );
         wrapper.appendChild(text);
-        wrapper.style.top = `${container.bounds.top}px`;
+        wrapper.style.top = `${container.bounds.top - MARGIN_TOP}px`;
     }
 
     // $FlowFixMe
@@ -144,3 +110,565 @@ export const inlineListItemElement = (
         container.childNodes.push(new NodeContainer(wrapper, container, resourceLoader, 0));
     }
 };
+
+const ROMAN_UPPER = {
+    integers: [1000, 900, 500, 400, 100, 90, 50, 40, 10, 9, 5, 4, 1],
+    values: ['M', 'CM', 'D', 'CD', 'C', 'XC', 'L', 'XL', 'X', 'IX', 'V', 'IV', 'I']
+};
+
+const ARMENIAN = {
+    integers: [
+        9000,
+        8000,
+        7000,
+        6000,
+        5000,
+        4000,
+        3000,
+        2000,
+        1000,
+        900,
+        800,
+        700,
+        600,
+        500,
+        400,
+        300,
+        200,
+        100,
+        90,
+        80,
+        70,
+        60,
+        50,
+        40,
+        30,
+        20,
+        10,
+        9,
+        8,
+        7,
+        6,
+        5,
+        4,
+        3,
+        2,
+        1
+    ],
+    values: [
+        'Ք',
+        'Փ',
+        'Ւ',
+        'Ց',
+        'Ր',
+        'Տ',
+        'Վ',
+        'Ս',
+        'Ռ',
+        'Ջ',
+        'Պ',
+        'Չ',
+        'Ո',
+        'Շ',
+        'Ն',
+        'Յ',
+        'Մ',
+        'Ճ',
+        'Ղ',
+        'Ձ',
+        'Հ',
+        'Կ',
+        'Ծ',
+        'Խ',
+        'Լ',
+        'Ի',
+        'Ժ',
+        'Թ',
+        'Ը',
+        'Է',
+        'Զ',
+        'Ե',
+        'Դ',
+        'Գ',
+        'Բ',
+        'Ա'
+    ]
+};
+
+const HEBREW = {
+    integers: [
+        10000,
+        9000,
+        8000,
+        7000,
+        6000,
+        5000,
+        4000,
+        3000,
+        2000,
+        1000,
+        400,
+        300,
+        200,
+        100,
+        90,
+        80,
+        70,
+        60,
+        50,
+        40,
+        30,
+        20,
+        19,
+        18,
+        17,
+        16,
+        15,
+        10,
+        9,
+        8,
+        7,
+        6,
+        5,
+        4,
+        3,
+        2,
+        1
+    ],
+    values: [
+        'י׳',
+        'ט׳',
+        'ח׳',
+        'ז׳',
+        'ו׳',
+        'ה׳',
+        'ד׳',
+        'ג׳',
+        'ב׳',
+        'א׳',
+        'ת',
+        'ש',
+        'ר',
+        'ק',
+        'צ',
+        'פ',
+        'ע',
+        'ס',
+        'נ',
+        'מ',
+        'ל',
+        'כ',
+        'יט',
+        'יח',
+        'יז',
+        'טז',
+        'טו',
+        'י',
+        'ט',
+        'ח',
+        'ז',
+        'ו',
+        'ה',
+        'ד',
+        'ג',
+        'ב',
+        'א'
+    ]
+};
+
+const GEORGIAN = {
+    integers: [
+        10000,
+        9000,
+        8000,
+        7000,
+        6000,
+        5000,
+        4000,
+        3000,
+        2000,
+        1000,
+        900,
+        800,
+        700,
+        600,
+        500,
+        400,
+        300,
+        200,
+        100,
+        90,
+        80,
+        70,
+        60,
+        50,
+        40,
+        30,
+        20,
+        10,
+        9,
+        8,
+        7,
+        6,
+        5,
+        4,
+        3,
+        2,
+        1
+    ],
+    values: [
+        'ჵ',
+        'ჰ',
+        'ჯ',
+        'ჴ',
+        'ხ',
+        'ჭ',
+        'წ',
+        'ძ',
+        'ც',
+        'ჩ',
+        'შ',
+        'ყ',
+        'ღ',
+        'ქ',
+        'ფ',
+        'ჳ',
+        'ტ',
+        'ს',
+        'რ',
+        'ჟ',
+        'პ',
+        'ო',
+        'ჲ',
+        'ნ',
+        'მ',
+        'ლ',
+        'კ',
+        'ი',
+        'თ',
+        'ჱ',
+        'ზ',
+        'ვ',
+        'ე',
+        'დ',
+        'გ',
+        'ბ',
+        'ა'
+    ]
+};
+
+const createAdditiveCounter = (
+    value: number,
+    min: number,
+    max: number,
+    symbols,
+    fallback: ListStyleType,
+    suffix: string = '. '
+) => {
+    if (value < min || value > max) {
+        return createCounterText(value, fallback);
+    }
+
+    return (
+        symbols.integers.reduce((string, integer, index) => {
+            while (value >= integer) {
+                value -= integer;
+                string += symbols.values[index];
+            }
+            return string;
+        }, '') + suffix
+    );
+};
+
+const createCounterStyleWithSymbolResolver = (
+    value: number,
+    codePointRangeLength: number,
+    isNumeric: boolean,
+    resolver
+): string => {
+    let string = '';
+
+    do {
+        if (!isNumeric) {
+            value--;
+        }
+        string = resolver(value) + string;
+        value /= codePointRangeLength;
+    } while (value * codePointRangeLength >= codePointRangeLength);
+
+    return string;
+};
+
+const createCounterStyleFromRange = (
+    value: number,
+    codePointRangeStart: number,
+    codePointRangeEnd: number,
+    isNumeric: boolean,
+    suffix: string = '. '
+): string => {
+    const codePointRangeLength = codePointRangeEnd - codePointRangeStart + 1;
+
+    return (
+        (value < 0 ? '-' : '') +
+        (createCounterStyleWithSymbolResolver(
+            Math.abs(value),
+            codePointRangeLength,
+            isNumeric,
+            codePoint =>
+                fromCodePoint(Math.floor(codePoint % codePointRangeLength) + codePointRangeStart)
+        ) +
+            suffix)
+    );
+};
+
+const createCounterStyleFromSymbols = (
+    value: number,
+    symbols: string,
+    suffix: string = '. '
+): string => {
+    const codePointRangeLength = symbols.length;
+    return (
+        createCounterStyleWithSymbolResolver(
+            Math.abs(value),
+            codePointRangeLength,
+            false,
+            codePoint => symbols[Math.floor(codePoint % codePointRangeLength)]
+        ) + suffix
+    );
+};
+
+const CJK_ZEROS = 1 << 0;
+const CJK_TEN_COEFFICIENTS = 1 << 1;
+const CJK_TEN_HIGH_COEFFICIENTS = 1 << 2;
+const CJK_HUNDRED_COEFFICIENTS = 1 << 3;
+
+const createCJKCounter = (
+    value: number,
+    numbers: string,
+    multipliers: string,
+    negativeSign: string,
+    suffix: string,
+    flags: number
+): string => {
+    if (value < -9999 || value > 9999) {
+        return createCounterText(value, LIST_STYLE_TYPE.CJK_DECIMAL);
+    }
+    let tmp = Math.abs(value);
+    let string = suffix;
+
+    if (tmp === 0) {
+        return numbers[0] + string;
+    }
+
+    for (let digit = 0; tmp > 0 && digit <= 4; digit++) {
+        let coefficient = tmp % 10;
+
+        if (coefficient === 0 && contains(flags, CJK_ZEROS) && string !== '') {
+            string = numbers[coefficient] + string;
+        } else if (
+            coefficient > 1 ||
+            (coefficient === 1 && digit === 0) ||
+            (coefficient === 1 && digit === 1 && contains(flags, CJK_TEN_COEFFICIENTS)) ||
+            (coefficient === 1 &&
+                digit === 1 &&
+                contains(flags, CJK_TEN_HIGH_COEFFICIENTS) &&
+                value > 100) ||
+            (coefficient === 1 && digit > 1 && contains(flags, CJK_HUNDRED_COEFFICIENTS))
+        ) {
+            string = numbers[coefficient] + (digit > 0 ? multipliers[digit - 1] : '') + string;
+        } else if (coefficient === 1 && digit > 0) {
+            string = multipliers[digit - 1] + string;
+        }
+        tmp = Math.floor(tmp / 10);
+    }
+
+    return (value < 0 ? negativeSign : '') + string;
+};
+
+const CHINESE_INFORMAL_MULTIPLIERS = '十百千萬';
+const CHINESE_FORMAL_MULTIPLIERS = '拾佰仟萬';
+const JAPANESE_NEGATIVE = 'マイナス';
+const KOREAN_NEGATIVE = '마이너스 ';
+
+const createCounterText = (value: number, type: ListStyleType): string => {
+    switch (type) {
+        case LIST_STYLE_TYPE.DISC:
+            return '•';
+        case LIST_STYLE_TYPE.CIRCLE:
+            return '◦';
+        case LIST_STYLE_TYPE.SQUARE:
+            return '◾';
+        case LIST_STYLE_TYPE.DECIMAL_LEADING_ZERO:
+            const string = createCounterStyleFromRange(value, 48, 57, true);
+            return string.length < 4 ? `0${string}` : string;
+        case LIST_STYLE_TYPE.CJK_DECIMAL:
+            return createCounterStyleFromSymbols(value, '〇一二三四五六七八九', '、');
+        case LIST_STYLE_TYPE.LOWER_ROMAN:
+            return createAdditiveCounter(
+                value,
+                1,
+                3999,
+                ROMAN_UPPER,
+                LIST_STYLE_TYPE.DECIMAL
+            ).toLowerCase();
+        case LIST_STYLE_TYPE.UPPER_ROMAN:
+            return createAdditiveCounter(value, 1, 3999, ROMAN_UPPER, LIST_STYLE_TYPE.DECIMAL);
+        case LIST_STYLE_TYPE.LOWER_GREEK:
+            return createCounterStyleFromRange(value, 945, 969, false);
+        case LIST_STYLE_TYPE.LOWER_ALPHA:
+            return createCounterStyleFromRange(value, 97, 122, false);
+        case LIST_STYLE_TYPE.UPPER_ALPHA:
+            return createCounterStyleFromRange(value, 65, 90, false);
+        case LIST_STYLE_TYPE.ARABIC_INDIC:
+            return createCounterStyleFromRange(value, 1632, 1641, true);
+        case LIST_STYLE_TYPE.ARMENIAN:
+        case LIST_STYLE_TYPE.UPPER_ARMENIAN:
+            return createAdditiveCounter(value, 1, 9999, ARMENIAN, LIST_STYLE_TYPE.DECIMAL);
+        case LIST_STYLE_TYPE.LOWER_ARMENIAN:
+            return createAdditiveCounter(
+                value,
+                1,
+                9999,
+                ARMENIAN,
+                LIST_STYLE_TYPE.DECIMAL
+            ).toLowerCase();
+        case LIST_STYLE_TYPE.BENGALI:
+            return createCounterStyleFromRange(value, 2534, 2543, true);
+        case LIST_STYLE_TYPE.CAMBODIAN:
+        case LIST_STYLE_TYPE.KHMER:
+            return createCounterStyleFromRange(value, 6112, 6121, true);
+        case LIST_STYLE_TYPE.CJK_EARTHLY_BRANCH:
+            return createCounterStyleFromSymbols(value, '子丑寅卯辰巳午未申酉戌亥', '、');
+        case LIST_STYLE_TYPE.CJK_HEAVENLY_STEM:
+            return createCounterStyleFromSymbols(value, '甲乙丙丁戊己庚辛壬癸', '、');
+        case LIST_STYLE_TYPE.CJK_IDEOGRAPHIC:
+        case LIST_STYLE_TYPE.TRAD_CHINESE_INFORMAL:
+            return createCJKCounter(
+                value,
+                '零一二三四五六七八九',
+                CHINESE_INFORMAL_MULTIPLIERS,
+                '負',
+                '、',
+                CJK_TEN_COEFFICIENTS | CJK_TEN_HIGH_COEFFICIENTS | CJK_HUNDRED_COEFFICIENTS
+            );
+        case LIST_STYLE_TYPE.TRAD_CHINESE_FORMAL:
+            return createCJKCounter(
+                value,
+                '零壹貳參肆伍陸柒捌玖',
+                CHINESE_FORMAL_MULTIPLIERS,
+                '負',
+                '、',
+                CJK_ZEROS |
+                    CJK_TEN_COEFFICIENTS |
+                    CJK_TEN_HIGH_COEFFICIENTS |
+                    CJK_HUNDRED_COEFFICIENTS
+            );
+        case LIST_STYLE_TYPE.SIMP_CHINESE_INFORMAL:
+            return createCJKCounter(
+                value,
+                '零一二三四五六七八九',
+                CHINESE_INFORMAL_MULTIPLIERS,
+                '负',
+                '、',
+                CJK_TEN_COEFFICIENTS | CJK_TEN_HIGH_COEFFICIENTS | CJK_HUNDRED_COEFFICIENTS
+            );
+        case LIST_STYLE_TYPE.SIMP_CHINESE_FORMAL:
+            return createCJKCounter(
+                value,
+                '零壹贰叁肆伍陆柒捌玖',
+                CHINESE_FORMAL_MULTIPLIERS,
+                '负',
+                '、',
+                CJK_ZEROS |
+                    CJK_TEN_COEFFICIENTS |
+                    CJK_TEN_HIGH_COEFFICIENTS |
+                    CJK_HUNDRED_COEFFICIENTS
+            );
+        case LIST_STYLE_TYPE.JAPANESE_INFORMAL:
+            return createCJKCounter(value, '〇一二三四五六七八九', '十百千万', JAPANESE_NEGATIVE, '、', 0);
+        case LIST_STYLE_TYPE.JAPANESE_FORMAL:
+            return createCJKCounter(
+                value,
+                '零壱弐参四伍六七八九',
+                '拾百千万',
+                JAPANESE_NEGATIVE,
+                '、',
+                CJK_ZEROS | CJK_TEN_COEFFICIENTS | CJK_TEN_HIGH_COEFFICIENTS
+            );
+        case LIST_STYLE_TYPE.KOREAN_HANGUL_FORMAL:
+            return createCJKCounter(
+                value,
+                '영일이삼사오육칠팔구',
+                '십백천만',
+                KOREAN_NEGATIVE,
+                ', ',
+                CJK_ZEROS | CJK_TEN_COEFFICIENTS | CJK_TEN_HIGH_COEFFICIENTS
+            );
+        case LIST_STYLE_TYPE.KOREAN_HANJA_INFORMAL:
+            return createCJKCounter(value, '零一二三四五六七八九', '十百千萬', KOREAN_NEGATIVE, ', ', 0);
+        case LIST_STYLE_TYPE.KOREAN_HANJA_FORMAL:
+            return createCJKCounter(
+                value,
+                '零壹貳參四五六七八九',
+                '拾百千',
+                KOREAN_NEGATIVE,
+                ', ',
+                CJK_ZEROS | CJK_TEN_COEFFICIENTS | CJK_TEN_HIGH_COEFFICIENTS
+            );
+        case LIST_STYLE_TYPE.DEVANAGARI:
+            return createCounterStyleFromRange(value, 0x966, 0x96f, true);
+        case LIST_STYLE_TYPE.GEORGIAN:
+            return createAdditiveCounter(value, 1, 19999, GEORGIAN, LIST_STYLE_TYPE.DECIMAL);
+        case LIST_STYLE_TYPE.GUJARATI:
+            return createCounterStyleFromRange(value, 0xae6, 0xaef, true);
+        case LIST_STYLE_TYPE.GURMUKHI:
+            return createCounterStyleFromRange(value, 0xa66, 0xa6f, true);
+        case LIST_STYLE_TYPE.HEBREW:
+            return createAdditiveCounter(value, 1, 10999, HEBREW, LIST_STYLE_TYPE.DECIMAL);
+        case LIST_STYLE_TYPE.HIRAGANA:
+            return createCounterStyleFromSymbols(
+                value,
+                'あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわゐゑをん'
+            );
+        case LIST_STYLE_TYPE.HIRAGANA_IROHA:
+            return createCounterStyleFromSymbols(
+                value,
+                'いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす'
+            );
+        case LIST_STYLE_TYPE.KANNADA:
+            return createCounterStyleFromRange(value, 0xce6, 0xcef, true);
+        case LIST_STYLE_TYPE.KATAKANA:
+            return createCounterStyleFromSymbols(
+                value,
+                'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヰヱヲン',
+                '、'
+            );
+        case LIST_STYLE_TYPE.KATAKANA_IROHA:
+            return createCounterStyleFromSymbols(
+                value,
+                'イロハニホヘトチリヌルヲワカヨタレソツネナラムウヰノオクヤマケフコエテアサキユメミシヱヒモセス',
+                '、'
+            );
+        case LIST_STYLE_TYPE.LAO:
+            return createCounterStyleFromRange(value, 0xed0, 0xed9, true);
+        case LIST_STYLE_TYPE.MONGOLIAN:
+            return createCounterStyleFromRange(value, 0x1810, 0x1819, true);
+        case LIST_STYLE_TYPE.MYANMAR:
+            return createCounterStyleFromRange(value, 0x1040, 0x1049, true);
+        case LIST_STYLE_TYPE.ORIYA:
+            return createCounterStyleFromRange(value, 0xb66, 0xb6f, true);
+        case LIST_STYLE_TYPE.PERSIAN:
+            return createCounterStyleFromRange(value, 0x6f0, 0x6f9, true);
+        case LIST_STYLE_TYPE.TAMIL:
+            return createCounterStyleFromRange(value, 0xbe6, 0xbef, true);
+        case LIST_STYLE_TYPE.TELUGU:
+            return createCounterStyleFromRange(value, 0xc66, 0xc6f, true);
+        case LIST_STYLE_TYPE.THAI:
+            return createCounterStyleFromRange(value, 0xe50, 0xe59, true);
+        case LIST_STYLE_TYPE.TIBETAN:
+            return createCounterStyleFromRange(value, 0xf20, 0xf29, true);
+        case LIST_STYLE_TYPE.DECIMAL:
+        default:
+            return createCounterStyleFromRange(value, 48, 57, true);
+    }
+};

src/NodeContainer.js

@@ -7,6 +7,8 @@ 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 {ListStyle} from './parsing/listStyle';
+import type {Margin} from './parsing/margin';
 import type {Overflow} from './parsing/overflow';
 import type {Padding} from './parsing/padding';
 import type {Position} from './parsing/position';
@@ -32,6 +34,8 @@ import {parseDisplay, DISPLAY} from './parsing/display';
 import {parseCSSFloat, FLOAT} from './parsing/float';
 import {parseFont} from './parsing/font';
 import {parseLetterSpacing} from './parsing/letterSpacing';
+import {parseListStyle} from './parsing/listStyle';
+import {parseMargin} from './parsing/margin';
 import {parseOverflow, OVERFLOW} from './parsing/overflow';
 import {parsePadding} from './parsing/padding';
 import {parsePosition, POSITION} from './parsing/position';
@@ -50,6 +54,7 @@ import {
     getInputBorderRadius,
     reformatInputBounds
 } from './Input';
+import {getListOwner} from './ListItem';
 
 type StyleDeclaration = {
     background: Background,
@@ -60,6 +65,8 @@ type StyleDeclaration = {
     float: Float,
     font: Font,
     letterSpacing: number,
+    listStyle: ListStyle | null,
+    margin: Margin,
     opacity: number,
     overflow: Overflow,
     padding: Padding,
@@ -79,10 +86,14 @@ export default class NodeContainer {
     parent: ?NodeContainer;
     style: StyleDeclaration;
     childNodes: Array<TextContainer | Path>;
+    listItems: Array<NodeContainer>;
+    listIndex: ?number;
+    listStart: ?number;
     bounds: Bounds;
     curvedBounds: BoundCurves;
     image: ?string;
     index: number;
+    tagName: string;
 
     constructor(
         node: HTMLElement | SVGSVGElement,
@@ -91,8 +102,13 @@ export default class NodeContainer {
         index: number
     ) {
         this.parent = parent;
+        this.tagName = node.tagName;
         this.index = index;
         this.childNodes = [];
+        this.listItems = [];
+        if (typeof node.start === 'number') {
+            this.listStart = node.start;
+        }
         const defaultView = node.ownerDocument.defaultView;
         const scrollX = defaultView.pageXOffset;
         const scrollY = defaultView.pageYOffset;
@@ -117,6 +133,8 @@ export default class NodeContainer {
             float: parseCSSFloat(style.float),
             font: parseFont(style),
             letterSpacing: parseLetterSpacing(style.letterSpacing),
+            listStyle: display === DISPLAY.LIST_ITEM ? parseListStyle(style) : null,
+            margin: parseMargin(style),
             opacity: parseFloat(style.opacity),
             overflow:
                 INPUT_TAGS.indexOf(node.tagName) === -1
@@ -137,6 +155,20 @@ export default class NodeContainer {
             node.style.transform = 'matrix(1,0,0,1,0,0)';
         }
 
+        if (display === DISPLAY.LIST_ITEM) {
+            const listOwner = getListOwner(this);
+            if (listOwner) {
+                const listIndex = listOwner.listItems.length;
+                listOwner.listItems.push(this);
+                this.listIndex =
+                    node.hasAttribute('value') && typeof node.value === 'number'
+                        ? node.value
+                        : listIndex === 0
+                          ? typeof listOwner.listStart === 'number' ? listOwner.listStart : 1
+                          : listOwner.listItems[listIndex - 1].listIndex + 1;
+            }
+        }
+
         // TODO move bound retrieval for all nodes to a later stage?
         if (node.tagName === 'IMG') {
             node.addEventListener('load', () => {

src/NodeParser.js

@@ -72,8 +72,10 @@ const parseNodeTree = (
                     } else if (childNode.tagName === 'SELECT') {
                         // $FlowFixMe
                         inlineSelectElement(childNode, container);
-                    } else if (childNode.tagName === 'LI') {
+                    } else if (
-                        // $FlowFixMe
+                        container.style.listStyle &&
+                        container.style.listStyle.listStyleType !== 'none'
+                    ) {
                         inlineListItemElement(childNode, container, resourceLoader);
                     }
 

src/Unicode.js

@@ -0,0 +1,32 @@
+/* @flow */
+'use strict';
+
+export const fromCodePoint = (...codePoints: Array<number>): string => {
+    if (String.fromCodePoint) {
+        return String.fromCodePoint(...codePoints);
+    }
+
+    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;
+};

src/Util.js

@@ -17,23 +17,5 @@ export const copyCSSStyles = (style: CSSStyleDeclaration, target: HTMLElement):
     return target;
 };
 
-export const getParentOfType = (node: HTMLElement, parentTypes: Array<string>): ?HTMLElement => {
-    let parent = node.parentNode;
-    if (!parent) {
-        return null;
-    }
-
-    // $FlowFixMe
-    while (parentTypes.indexOf(parent.tagName) < 0) {
-        parent = parent.parentNode;
-        if (!parent) {
-            return null;
-        }
-    }
-
-    // $FlowFixMe
-    return parent;
-};
-
 export const SMALL_IMAGE =
     'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';

src/parsing/listStyle.js

@@ -0,0 +1,209 @@
+/* @flow */
+'use strict';
+
+import type {BackgroundSource} from './background';
+import {parseBackgroundImage} from './background';
+
+export type ListStyle = {
+    listStyleType: ListStyleType,
+    listStyleImage: ?BackgroundSource,
+    listStylePosition: ListStylePosition
+};
+
+export const LIST_STYLE_POSITION = {
+    INSIDE: 0,
+    OUTSIDE: 1
+};
+
+export const LIST_STYLE_TYPE = {
+    NONE: -1,
+    DISC: 0,
+    CIRCLE: 1,
+    SQUARE: 2,
+    DECIMAL: 3,
+    CJK_DECIMAL: 4,
+    DECIMAL_LEADING_ZERO: 5,
+    LOWER_ROMAN: 6,
+    UPPER_ROMAN: 7,
+    LOWER_GREEK: 8,
+    LOWER_ALPHA: 9,
+    UPPER_ALPHA: 10,
+    ARABIC_INDIC: 11,
+    ARMENIAN: 12,
+    BENGALI: 13,
+    CAMBODIAN: 14,
+    CJK_EARTHLY_BRANCH: 15,
+    CJK_HEAVENLY_STEM: 16,
+    CJK_IDEOGRAPHIC: 17,
+    DEVANAGARI: 18,
+    ETHIOPIC_NUMERIC: 19,
+    GEORGIAN: 20,
+    GUJARATI: 21,
+    GURMUKHI: 22,
+    HEBREW: 22,
+    HIRAGANA: 23,
+    HIRAGANA_IROHA: 24,
+    JAPANESE_FORMAL: 25,
+    JAPANESE_INFORMAL: 26,
+    KANNADA: 27,
+    KATAKANA: 28,
+    KATAKANA_IROHA: 29,
+    KHMER: 30,
+    KOREAN_HANGUL_FORMAL: 31,
+    KOREAN_HANJA_FORMAL: 32,
+    KOREAN_HANJA_INFORMAL: 33,
+    LAO: 34,
+    LOWER_ARMENIAN: 35,
+    MALAYALAM: 36,
+    MONGOLIAN: 37,
+    MYANMAR: 38,
+    ORIYA: 39,
+    PERSIAN: 40,
+    SIMP_CHINESE_FORMAL: 41,
+    SIMP_CHINESE_INFORMAL: 42,
+    TAMIL: 43,
+    TELUGU: 44,
+    THAI: 45,
+    TIBETAN: 46,
+    TRAD_CHINESE_FORMAL: 47,
+    TRAD_CHINESE_INFORMAL: 48,
+    UPPER_ARMENIAN: 49,
+    DISCLOSURE_OPEN: 50,
+    DISCLOSURE_CLOSED: 51
+};
+
+export type ListStylePosition = $Values<typeof LIST_STYLE_POSITION>;
+export type ListStyleType = $Values<typeof LIST_STYLE_TYPE>;
+
+const parseListStyleType = (type: string): ListStyleType => {
+    switch (type) {
+        case 'disc':
+            return LIST_STYLE_TYPE.DISC;
+        case 'circle':
+            return LIST_STYLE_TYPE.CIRCLE;
+        case 'square':
+            return LIST_STYLE_TYPE.SQUARE;
+        case 'decimal':
+            return LIST_STYLE_TYPE.DECIMAL;
+        case 'cjk-decimal':
+            return LIST_STYLE_TYPE.CJK_DECIMAL;
+        case 'decimal-leading-zero':
+            return LIST_STYLE_TYPE.DECIMAL_LEADING_ZERO;
+        case 'lower-roman':
+            return LIST_STYLE_TYPE.LOWER_ROMAN;
+        case 'upper-roman':
+            return LIST_STYLE_TYPE.UPPER_ROMAN;
+        case 'lower-greek':
+            return LIST_STYLE_TYPE.LOWER_GREEK;
+        case 'lower-alpha':
+            return LIST_STYLE_TYPE.LOWER_ALPHA;
+        case 'upper-alpha':
+            return LIST_STYLE_TYPE.UPPER_ALPHA;
+        case 'arabic-indic':
+            return LIST_STYLE_TYPE.ARABIC_INDIC;
+        case 'armenian':
+            return LIST_STYLE_TYPE.ARMENIAN;
+        case 'bengali':
+            return LIST_STYLE_TYPE.BENGALI;
+        case 'cambodian':
+            return LIST_STYLE_TYPE.CAMBODIAN;
+        case 'cjk-earthly-branch':
+            return LIST_STYLE_TYPE.CJK_EARTHLY_BRANCH;
+        case 'cjk-heavenly-stem':
+            return LIST_STYLE_TYPE.CJK_HEAVENLY_STEM;
+        case 'cjk-ideographic':
+            return LIST_STYLE_TYPE.CJK_IDEOGRAPHIC;
+        case 'devanagari':
+            return LIST_STYLE_TYPE.DEVANAGARI;
+        case 'ethiopic-numeric':
+            return LIST_STYLE_TYPE.ETHIOPIC_NUMERIC;
+        case 'georgian':
+            return LIST_STYLE_TYPE.GEORGIAN;
+        case 'gujarati':
+            return LIST_STYLE_TYPE.GUJARATI;
+        case 'gurmukhi':
+            return LIST_STYLE_TYPE.GURMUKHI;
+        case 'hebrew':
+            return LIST_STYLE_TYPE.HEBREW;
+        case 'hiragana':
+            return LIST_STYLE_TYPE.HIRAGANA;
+        case 'hiragana-iroha':
+            return LIST_STYLE_TYPE.HIRAGANA_IROHA;
+        case 'japanese-formal':
+            return LIST_STYLE_TYPE.JAPANESE_FORMAL;
+        case 'japanese-informal':
+            return LIST_STYLE_TYPE.JAPANESE_INFORMAL;
+        case 'kannada':
+            return LIST_STYLE_TYPE.KANNADA;
+        case 'katakana':
+            return LIST_STYLE_TYPE.KATAKANA;
+        case 'katakana-iroha':
+            return LIST_STYLE_TYPE.KATAKANA_IROHA;
+        case 'khmer':
+            return LIST_STYLE_TYPE.KHMER;
+        case 'korean-hangul-formal':
+            return LIST_STYLE_TYPE.KOREAN_HANGUL_FORMAL;
+        case 'korean-hanja-formal':
+            return LIST_STYLE_TYPE.KOREAN_HANJA_FORMAL;
+        case 'korean-hanja-informal':
+            return LIST_STYLE_TYPE.KOREAN_HANJA_INFORMAL;
+        case 'lao':
+            return LIST_STYLE_TYPE.LAO;
+        case 'lower-armenian':
+            return LIST_STYLE_TYPE.LOWER_ARMENIAN;
+        case 'malayalam':
+            return LIST_STYLE_TYPE.MALAYALAM;
+        case 'mongolian':
+            return LIST_STYLE_TYPE.MONGOLIAN;
+        case 'myanmar':
+            return LIST_STYLE_TYPE.MYANMAR;
+        case 'oriya':
+            return LIST_STYLE_TYPE.ORIYA;
+        case 'persian':
+            return LIST_STYLE_TYPE.PERSIAN;
+        case 'simp-chinese-formal':
+            return LIST_STYLE_TYPE.SIMP_CHINESE_FORMAL;
+        case 'simp-chinese-informal':
+            return LIST_STYLE_TYPE.SIMP_CHINESE_INFORMAL;
+        case 'tamil':
+            return LIST_STYLE_TYPE.TAMIL;
+        case 'telugu':
+            return LIST_STYLE_TYPE.TELUGU;
+        case 'thai':
+            return LIST_STYLE_TYPE.THAI;
+        case 'tibetan':
+            return LIST_STYLE_TYPE.TIBETAN;
+        case 'trad-chinese-formal':
+            return LIST_STYLE_TYPE.TRAD_CHINESE_FORMAL;
+        case 'trad-chinese-informal':
+            return LIST_STYLE_TYPE.TRAD_CHINESE_INFORMAL;
+        case 'upper-armenian':
+            return LIST_STYLE_TYPE.UPPER_ARMENIAN;
+        case 'disclosure-open':
+            return LIST_STYLE_TYPE.DISCLOSURE_OPEN;
+        case 'disclosure-closed':
+            return LIST_STYLE_TYPE.DISCLOSURE_CLOSED;
+        case 'none':
+        default:
+            return LIST_STYLE_TYPE.NONE;
+    }
+};
+
+export const parseListStyle = (style: CSSStyleDeclaration): ListStyle => {
+    const listStyleImage = parseBackgroundImage(style.getPropertyValue('list-style-image'));
+    return {
+        listStyleType: parseListStyleType(style.getPropertyValue('list-style-type')),
+        listStyleImage: listStyleImage.length ? listStyleImage[0] : null,
+        listStylePosition: parseListStylePosition(style.getPropertyValue('list-style-position'))
+    };
+};
+
+const parseListStylePosition = (position: string): ListStylePosition => {
+    switch (position) {
+        case 'inside':
+            return LIST_STYLE_POSITION.INSIDE;
+        case 'outside':
+        default:
+            return LIST_STYLE_POSITION.OUTSIDE;
+    }
+};

src/parsing/margin.js

@@ -0,0 +1,11 @@
+/* @flow */
+'use strict';
+import Length from '../Length';
+
+const SIDES = ['top', 'right', 'bottom', 'left'];
+
+export type Margin = Array<Length>;
+
+export const parseMargin = (style: CSSStyleDeclaration): Margin => {
+    return SIDES.map(side => new Length(style.getPropertyValue(`margin-${side}`)));
+};

tests/reftests/list/liststyle.html

@@ -6,6 +6,9 @@
 		<script type="text/javascript" src="../../test.js"></script>
 
 		<style>
+            li {
+                margin: 10px 5%;
+            }
 			.list1 {
 				list-style-type: circle;
 			}
@@ -33,6 +36,22 @@
 			.list7 {
 				list-style-type: simp-chinese-informal;
 			}
+
+            .list8 {
+                list-style-type: lower-roman;
+            }
+
+            .list8 li {
+                display: block;
+            }
+
+            .list9 {
+                display: list-item;
+                list-style-type: lower-alpha;
+                margin: 10px;
+                position: relative;
+                left: 200px;
+            }
 		</style>
 	</head>
 	<body>
@@ -71,5 +90,13 @@
 			<li>Beta</li>
 			<li>Gamma</li>
 		</ol>
+        <ol class="list8">
+            <li>Alpha</li>
+            <li>Beta</li>
+            <li>Gamma</li>
+        </ol>
+        <div class="list9">Alpha</div>
+        <div class="list9">Beta</div>
+        <div class="list9">Gamma</div>
 	</body>
 </html>