More work on the integration test

demo/client/html/integration-test.html.hbs

@@ -28,7 +28,7 @@
                         </div>
                     </form>
                 </div>
-                <canvas id="pf-reference-pane" class="pf-draggable pf-pane col" width="300"
+                <canvas id="pf-reference-canvas" class="pf-draggable pf-pane col" width="300"
                  height="400">
                 </canvas>
                 <canvas id="pf-canvas" class="pf-draggable pf-pane col" width="300"

demo/client/src/integration-test.ts

@@ -36,6 +36,8 @@ const ANTIALIASING_STRATEGIES: AntialiasingStrategyTable = {
 
 const STRING: string = "A";
 
+const RENDER_REFERENCE_URI: string = "/render-reference";
+
 interface AntialiasingStrategyTable {
     none: typeof NoAAStrategy;
     ssaa: typeof SSAAStrategy;
@@ -53,9 +55,14 @@ class IntegrationTestAppController extends DemoAppController<IntegrationTestView
     private baseMeshes: PathfinderMeshData;
     private expandedMeshes: ExpandedMeshData;
 
+    private referenceCanvas: HTMLCanvasElement;
+
     start(): void {
         super.start();
 
+        this.referenceCanvas = unwrapNull(document.getElementById('pf-reference-canvas')) as
+            HTMLCanvasElement;
+
         this.loadInitialFile(this.builtinFileURI);
     }
 
@@ -89,6 +96,32 @@ class IntegrationTestAppController extends DemoAppController<IntegrationTestView
                 view.attachMeshes([expandedMeshes.meshes]);
             });
         });
+
+        this.loadInitialReference();
+    }
+
+    private loadInitialReference(): void {
+        const request = {
+            face: {
+                Builtin: unwrapNull(this.font).builtinFontName,
+            },
+            fontIndex: 0,
+            glyph: this.glyphStore.glyphIDs[0],
+            pointSize: 32.0,
+        };
+
+        window.fetch(RENDER_REFERENCE_URI, {
+            body: JSON.stringify(request),
+            headers: {'Content-Type': 'application/json'} as any,
+            method: 'POST',
+        }).then(response => response.blob()).then(blob => {
+            const imgElement = document.createElement('img');
+            imgElement.src = URL.createObjectURL(blob);
+            imgElement.addEventListener('load', () => {
+                const context = unwrapNull(this.referenceCanvas.getContext('2d'));
+                context.drawImage(imgElement, 0, 0);
+            }, false);
+        });
     }
 }
 
@@ -226,7 +259,9 @@ class IntegrationTestRenderer extends Renderer {
                                aaLevel: number,
                                subpixelAA: SubpixelAAType):
                                AntialiasingStrategy {
-        return new (ANTIALIASING_STRATEGIES[aaType])(aaLevel, subpixelAA);
+        // FIXME(pcwalton)
+        // return new (ANTIALIASING_STRATEGIES[aaType])(aaLevel, subpixelAA);
+        return new ANTIALIASING_STRATEGIES.xcaa(aaLevel, 'medium');
     }
 
     protected compositeIfNecessary(): void {}

demo/client/src/text.ts

@@ -256,7 +256,7 @@ export class GlyphStore {
         let time = 0;
         return window.fetch(PARTITION_FONT_ENDPOINT_URI, {
             body: JSON.stringify(request),
-            headers: {'Content-Type': 'application/json'},
+            headers: {'Content-Type': 'application/json'} as any,
             method: 'POST',
         }).then(response => {
             time = parseServerTiming(response.headers);