[skottie] GM exercising external font loading

Sets up a fake web font loader which serves a local/resource font to
the sample text animation.

Also rename resources/skotty/skotty_* -> resources/skottie/skottie_*.

Change-Id: I4af5b24fc3cc5c63c78801979f9be56744047134
Reviewed-on: https://skia-review.googlesource.com/155881
Reviewed-by: Ben Wagner <bungeman@google.com>
Commit-Queue: Florin Malita <fmalita@chromium.org>

5 files changed, 635 insertions, 1 deletions

diff --git a/resources/fonts/Roboto-Regular.ttf b/resources/fonts/Roboto-Regular.ttf
new file mode 100644
index 0000000000..b91bf3f7e3
--- /dev/null
+++ b/resources/fonts/Roboto-Regular.ttf
diff --git a/resources/skotty/skotty_sample_1.json b/resources/skottie/skottie_sample_1.json
index 6010eb82b3..6010eb82b3 100644
--- a/resources/skotty/skotty_sample_1.json
+++ b/resources/skottie/skottie_sample_1.json
diff --git a/resources/skotty/skotty_sample_2.json b/resources/skottie/skottie_sample_2.json
index c211ce7f01..c211ce7f01 100644
--- a/resources/skotty/skotty_sample_2.json
+++ b/resources/skottie/skottie_sample_2.json
diff --git a/resources/skotty/skotty_sample_nested.json b/resources/skottie/skottie_sample_nested.json
index 8059b76ba9..625766ff50 100644
--- a/resources/skotty/skotty_sample_nested.json
+++ b/resources/skottie/skottie_sample_nested.json
@@ -15,7 +15,7 @@
          "ind":2,
          "ty": 0,
          "nm":"External Animation Ref",
-         "refId": "$skotty_sample_1.json",
+         "refId": "$skottie_sample_1.json",
          "ao": 0,
          "ip": 0,
          "op": 300,
diff --git a/resources/skottie/skottie_sample_webfont.json b/resources/skottie/skottie_sample_webfont.json
new file mode 100644
index 0000000000..c38aab41ac
--- /dev/null
+++ b/resources/skottie/skottie_sample_webfont.json
@@ -0,0 +1,634 @@
+{
+    "assets": [],
+    "ddd": 0,
+    "fonts": {
+        "list": [
+            {
+                "ascent": 75,
+                "fClass": "",
+                "fFamily": "Roboto",
+                "fName": "Roboto-Regular",
+                "fPath": "https://fonts.googleapis.com/css?family=Roboto",
+                "fStyle": "Regular",
+                "fWeight": "",
+                "origin": 1
+            }
+        ]
+    },
+    "fr": 25,
+    "h": 600,
+    "ip": 0,
+    "layers": [
+        {
+            "ao": 0,
+            "bm": 0,
+            "ddd": 0,
+            "ind": 1,
+            "ip": 0,
+            "ks": {
+                "a": {
+                    "a": 0,
+                    "ix": 1,
+                    "k": [
+                        15,
+                        50,
+                        0
+                    ]
+                },
+                "o": {
+                    "a": 0,
+                    "ix": 11,
+                    "k": 100
+                },
+                "p": {
+                    "a": 0,
+                    "ix": 2,
+                    "k": [
+                        205,
+                        164,
+                        0
+                    ]
+                },
+                "r": {
+                    "a": 0,
+                    "ix": 10,
+                    "k": 0
+                },
+                "s": {
+                    "a": 0,
+                    "ix": 6,
+                    "k": [
+                        100,
+                        100,
+                        100
+                    ]
+                }
+            },
+            "nm": "Deep Cyan Solid 1",
+            "op": 261,
+            "sc": "#00b794",
+            "sh": 50,
+            "sr": 1,
+            "st": 0,
+            "sw": 30,
+            "ty": 1
+        },
+        {
+            "ao": 0,
+            "bm": 0,
+            "ddd": 0,
+            "ind": 2,
+            "ip": 0,
+            "ks": {
+                "a": {
+                    "a": 0,
+                    "ix": 1,
+                    "k": [
+                        0,
+                        0,
+                        0
+                    ]
+                },
+                "o": {
+                    "a": 0,
+                    "ix": 11,
+                    "k": 100
+                },
+                "p": {
+                    "a": 0,
+                    "ix": 2,
+                    "k": [
+                        400,
+                        164,
+                        0
+                    ]
+                },
+                "r": {
+                    "a": 0,
+                    "ix": 10,
+                    "k": 0
+                },
+                "s": {
+                    "a": 0,
+                    "ix": 6,
+                    "k": [
+                        100,
+                        100,
+                        100
+                    ]
+                }
+            },
+            "nm": "text_center",
+            "op": 261,
+            "sr": 1,
+            "st": 0,
+            "t": {
+                "a": [],
+                "d": {
+                    "k": [
+                        {
+                            "s": {
+                                "f": "Roboto-Regular",
+                                "fc": [
+                                    0.42,
+                                    0.15,
+                                    0.15
+                                ],
+                                "j": 2,
+                                "lh": 60,
+                                "ls": 0,
+                                "s": 50,
+                                "t": "text align center",
+                                "tr": 0
+                            },
+                            "t": 0
+                        }
+                    ]
+                },
+                "m": {
+                    "a": {
+                        "a": 0,
+                        "ix": 2,
+                        "k": [
+                            0,
+                            0
+                        ]
+                    },
+                    "g": 3
+                },
+                "p": {}
+            },
+            "ty": 5
+        },
+        {
+            "ao": 0,
+            "bm": 0,
+            "ddd": 0,
+            "ind": 3,
+            "ip": 0,
+            "ks": {
+                "a": {
+                    "a": 0,
+                    "ix": 1,
+                    "k": [
+                        15,
+                        50,
+                        0
+                    ]
+                },
+                "o": {
+                    "a": 0,
+                    "ix": 11,
+                    "k": 100
+                },
+                "p": {
+                    "a": 0,
+                    "ix": 2,
+                    "k": [
+                        597,
+                        164,
+                        0
+                    ]
+                },
+                "r": {
+                    "a": 0,
+                    "ix": 10,
+                    "k": 0
+                },
+                "s": {
+                    "a": 0,
+                    "ix": 6,
+                    "k": [
+                        100,
+                        100,
+                        100
+                    ]
+                }
+            },
+            "nm": "Deep Cyan Solid 1",
+            "op": 261,
+            "sc": "#00b794",
+            "sh": 50,
+            "sr": 1,
+            "st": 0,
+            "sw": 30,
+            "ty": 1
+        },
+        {
+            "ao": 0,
+            "bm": 0,
+            "ddd": 0,
+            "ind": 4,
+            "ip": 0,
+            "ks": {
+                "a": {
+                    "a": 0,
+                    "ix": 1,
+                    "k": [
+                        15,
+                        50,
+                        0
+                    ]
+                },
+                "o": {
+                    "a": 0,
+                    "ix": 11,
+                    "k": 100
+                },
+                "p": {
+                    "a": 0,
+                    "ix": 2,
+                    "k": [
+                        382,
+                        334,
+                        0
+                    ]
+                },
+                "r": {
+                    "a": 0,
+                    "ix": 10,
+                    "k": 0
+                },
+                "s": {
+                    "a": 0,
+                    "ix": 6,
+                    "k": [
+                        100,
+                        100,
+                        100
+                    ]
+                }
+            },
+            "nm": "Deep Cyan Solid 1",
+            "op": 261,
+            "sc": "#00b794",
+            "sh": 50,
+            "sr": 1,
+            "st": 0,
+            "sw": 30,
+            "ty": 1
+        },
+        {
+            "ao": 0,
+            "bm": 0,
+            "ddd": 0,
+            "ind": 5,
+            "ip": 0,
+            "ks": {
+                "a": {
+                    "a": 0,
+                    "ix": 1,
+                    "k": [
+                        0,
+                        0,
+                        0
+                    ]
+                },
+                "o": {
+                    "a": 0,
+                    "ix": 11,
+                    "k": 100
+                },
+                "p": {
+                    "a": 0,
+                    "ix": 2,
+                    "k": [
+                        400,
+                        334,
+                        0
+                    ]
+                },
+                "r": {
+                    "a": 0,
+                    "ix": 10,
+                    "k": 0
+                },
+                "s": {
+                    "a": 0,
+                    "ix": 6,
+                    "k": [
+                        100,
+                        100,
+                        100
+                    ]
+                }
+            },
+            "nm": "text_left",
+            "op": 261,
+            "sr": 1,
+            "st": 0,
+            "t": {
+                "a": [],
+                "d": {
+                    "k": [
+                        {
+                            "s": {
+                                "f": "Roboto-Regular",
+                                "fc": [
+                                    0.42,
+                                    0.15,
+                                    0.15
+                                ],
+                                "j": 0,
+                                "lh": 60,
+                                "ls": 0,
+                                "s": 50,
+                                "t": "text align left",
+                                "tr": 0
+                            },
+                            "t": 0
+                        }
+                    ]
+                },
+                "m": {
+                    "a": {
+                        "a": 0,
+                        "ix": 2,
+                        "k": [
+                            0,
+                            0
+                        ]
+                    },
+                    "g": 3
+                },
+                "p": {}
+            },
+            "ty": 5
+        },
+        {
+            "ao": 0,
+            "bm": 0,
+            "ddd": 0,
+            "ind": 6,
+            "ip": 0,
+            "ks": {
+                "a": {
+                    "a": 0,
+                    "ix": 1,
+                    "k": [
+                        15,
+                        50,
+                        0
+                    ]
+                },
+                "o": {
+                    "a": 0,
+                    "ix": 11,
+                    "k": 100
+                },
+                "p": {
+                    "a": 0,
+                    "ix": 2,
+                    "k": [
+                        709,
+                        334,
+                        0
+                    ]
+                },
+                "r": {
+                    "a": 0,
+                    "ix": 10,
+                    "k": 0
+                },
+                "s": {
+                    "a": 0,
+                    "ix": 6,
+                    "k": [
+                        100,
+                        100,
+                        100
+                    ]
+                }
+            },
+            "nm": "Deep Cyan Solid 1",
+            "op": 261,
+            "sc": "#00b794",
+            "sh": 50,
+            "sr": 1,
+            "st": 0,
+            "sw": 30,
+            "ty": 1
+        },
+        {
+            "ao": 0,
+            "bm": 0,
+            "ddd": 0,
+            "ind": 7,
+            "ip": 0,
+            "ks": {
+                "a": {
+                    "a": 0,
+                    "ix": 1,
+                    "k": [
+                        15,
+                        50,
+                        0
+                    ]
+                },
+                "o": {
+                    "a": 0,
+                    "ix": 11,
+                    "k": 100
+                },
+                "p": {
+                    "a": 0,
+                    "ix": 2,
+                    "k": [
+                        65,
+                        494,
+                        0
+                    ]
+                },
+                "r": {
+                    "a": 0,
+                    "ix": 10,
+                    "k": 0
+                },
+                "s": {
+                    "a": 0,
+                    "ix": 6,
+                    "k": [
+                        100,
+                        100,
+                        100
+                    ]
+                }
+            },
+            "nm": "Deep Cyan Solid 1",
+            "op": 261,
+            "sc": "#00b794",
+            "sh": 50,
+            "sr": 1,
+            "st": 0,
+            "sw": 30,
+            "ty": 1
+        },
+        {
+            "ao": 0,
+            "bm": 0,
+            "ddd": 0,
+            "ind": 8,
+            "ip": 0,
+            "ks": {
+                "a": {
+                    "a": 0,
+                    "ix": 1,
+                    "k": [
+                        0,
+                        0,
+                        0
+                    ]
+                },
+                "o": {
+                    "a": 0,
+                    "ix": 11,
+                    "k": 100
+                },
+                "p": {
+                    "a": 0,
+                    "ix": 2,
+                    "k": [
+                        400,
+                        494,
+                        0
+                    ]
+                },
+                "r": {
+                    "a": 0,
+                    "ix": 10,
+                    "k": 0
+                },
+                "s": {
+                    "a": 0,
+                    "ix": 6,
+                    "k": [
+                        100,
+                        100,
+                        100
+                    ]
+                }
+            },
+            "nm": "text_right",
+            "op": 261,
+            "sr": 1,
+            "st": 0,
+            "t": {
+                "a": [],
+                "d": {
+                    "k": [
+                        {
+                            "s": {
+                                "f": "Roboto-Regular",
+                                "fc": [
+                                    0.42,
+                                    0.15,
+                                    0.15
+                                ],
+                                "j": 1,
+                                "lh": 60,
+                                "ls": 0,
+                                "s": 50,
+                                "t": "text align right",
+                                "tr": 0
+                            },
+                            "t": 0
+                        }
+                    ]
+                },
+                "m": {
+                    "a": {
+                        "a": 0,
+                        "ix": 2,
+                        "k": [
+                            0,
+                            0
+                        ]
+                    },
+                    "g": 3
+                },
+                "p": {}
+            },
+            "ty": 5
+        },
+        {
+            "ao": 0,
+            "bm": 0,
+            "ddd": 0,
+            "ind": 9,
+            "ip": 0,
+            "ks": {
+                "a": {
+                    "a": 0,
+                    "ix": 1,
+                    "k": [
+                        15,
+                        50,
+                        0
+                    ]
+                },
+                "o": {
+                    "a": 0,
+                    "ix": 11,
+                    "k": 100
+                },
+                "p": {
+                    "a": 0,
+                    "ix": 2,
+                    "k": [
+                        420,
+                        494,
+                        0
+                    ]
+                },
+                "r": {
+                    "a": 0,
+                    "ix": 10,
+                    "k": 0
+                },
+                "s": {
+                    "a": 0,
+                    "ix": 6,
+                    "k": [
+                        100,
+                        100,
+                        100
+                    ]
+                }
+            },
+            "nm": "Deep Cyan Solid 1",
+            "op": 261,
+            "sc": "#00b794",
+            "sh": 50,
+            "sr": 1,
+            "st": 0,
+            "sw": 30,
+            "ty": 1
+        }
+    ],
+    "markers": [
+        {
+            "cm": "Marker\r\nWith new line\r\nWith special characters &^\u00ed\u00f1",
+            "dr": 0,
+            "tm": 8
+        },
+        {
+            "cm": "This is a comp marker!",
+            "dr": 0,
+            "tm": 27
+        },
+        {
+            "cm": "marker with duration",
+            "dr": 25,
+            "tm": 60
+        },
+        {
+            "cm": "23",
+            "dr": 0,
+            "tm": 77
+        }
+    ],
+    "nm": "text_skia_demo_font",
+    "op": 75,
+    "v": "5.2.1",
+    "w": 800
+}