Address animated detector slice review feedback

Author: ShallIBE

file_lists/source_files_no_main

@@ -23,6 +23,7 @@ src/stim/diagram/circuit_timeline_helper.cc
 src/stim/diagram/crumble.cc
 src/stim/diagram/crumble_data.cc
 src/stim/diagram/detector_slice/detector_slice_animation.cc
+src/stim/diagram/detector_slice/detector_slice_animation_html.cc
 src/stim/diagram/detector_slice/detector_slice_set.cc
 src/stim/diagram/diagram_util.cc
 src/stim/diagram/gate_data_3d.cc

file_lists/test_files

@@ -17,6 +17,7 @@ src/stim/dem/detector_error_model.test.cc
 src/stim/diagram/ascii_diagram.test.cc
 src/stim/diagram/base64.test.cc
 src/stim/diagram/coord.test.cc
+src/stim/diagram/detector_slice/detector_slice_animation.test.cc
 src/stim/diagram/detector_slice/detector_slice_set.test.cc
 src/stim/diagram/graph/match_graph_3d_drawer.test.cc
 src/stim/diagram/graph/match_graph_svg_drawer.test.cc

puppeteer_run_tests.js

@@ -16,6 +16,67 @@ const puppeteer = require('puppeteer');
         await page.waitForSelector('#done', {timeout: 5 * 60 * 1000});
         let anyFailures = await page.evaluate('__any_failures');
 
+        const testdataUrl = 'file:///' + __dirname.split('\\').join('/') + '/testdata/';
+        await page.goto(testdataUrl + 'detector_slice_animation.html');
+        await page.evaluate(() => {
+            playing = false;
+            const check = (condition, message) => {
+                if (!condition) {
+                    throw new Error(message);
+                }
+            };
+            const checkExactFrame = k => {
+                show(k);
+                const expected = parser.parseFromString(frames[k], 'image/svg+xml').documentElement;
+                check(stage.firstElementChild.isEqualNode(expected), 'Animation endpoint differs from its Stim SVG.');
+            };
+
+            checkExactFrame(0);
+            checkExactFrame(1);
+            show(0.5);
+            const midpointSvg = stage.firstElementChild;
+            const birth = midpointSvg.getElementById('slice:4:2');
+            const death = midpointSvg.getElementById('slice:1:1');
+            const geometry = midpointSvg.getElementById('shape-0-3-target');
+            const styleSource = midpointSvg.getElementById('slice:0:1').parentElement;
+            const styleTarget = midpointSvg.getElementById('slice:0:2').parentElement;
+            check(birth && Number(birth.style.opacity) > 0 && Number(birth.style.opacity) < 1,
+                'Birth was not rendered with fractional opacity.');
+            check(death && Number(death.style.opacity) > 0 && Number(death.style.opacity) < 1,
+                'Death was not rendered with fractional opacity.');
+            check(geometry, 'Persistent geometry transition was not mounted.');
+            check(Number(styleSource.style.opacity) > 0 && Number(styleTarget.style.opacity) > 0,
+                'Style transition layers were not visible.');
+            const fills = layer => new Set([...layer.querySelectorAll('[fill]')]
+                .map(element => element.getAttribute('fill')).filter(fill => fill && fill !== 'none'));
+            const sourceFills = fills(styleSource);
+            const targetFills = fills(styleTarget);
+            check([...sourceFills].some(fill => !targetFills.has(fill)), 'Endpoint styles were not distinct.');
+
+            show(0.25);
+            const earlyGeometry = stage.firstElementChild.getElementById('shape-0-3-target').getAttribute('d');
+            show(0.75);
+            const lateGeometry = stage.firstElementChild.getElementById('shape-0-3-target').getAttribute('d');
+            check(earlyGeometry !== lateGeometry, 'Detector geometry did not move.');
+
+            show(0.5);
+            const svg = stage.firstElementChild;
+            let gradientReferences = 0;
+            for (const element of svg.querySelectorAll('*')) {
+                for (const attribute of element.attributes) {
+                    const match = /^url\(['"]?#([^'")]+)['"]?\)$/.exec(attribute.value);
+                    if (match) {
+                        const definition = svg.querySelector('[id="' + match[1] + '"]');
+                        check(definition, 'Gradient or clip reference did not resolve.');
+                        gradientReferences += definition.tagName === 'radialGradient';
+                    }
+                }
+            }
+            check(gradientReferences > 0, 'Mixed-Pauli gradients were not exercised.');
+            checkExactFrame(1);
+        });
+        await page.waitForTimeout(50);
+
         await browser.close();
         if (anyFailures || caughtPageError) {
             process.exit(1);

src/stim/cmd/command_diagram.test.cc

@@ -147,6 +147,7 @@ TEST(command_diagram, run_captured_stim_main_works_various_arguments) {
         "detector-slice-svg",
         "time-slice-svg",
         "time+detector-slice-svg",
+        "animated-detslice-with-ops",
     };
     for (const auto &type : diagram_types) {
         auto actual = run_captured_stim_main(