diff --git a/test/test/assets/screenshots/review.html b/test/test/assets/screenshots/review.html
index f64cc5b861..60c282be71 100644
--- a/test/test/assets/screenshots/review.html
+++ b/test/test/assets/screenshots/review.html
@@ -39,24 +39,26 @@
   'xboxone',
 ];
 
-const screenshots = [
-  'basic-cue',
-  'cue-position',
-  'cue-with-newline',
-  'two-basic-cues',
-  'duplicate-cues',
-  'two-nested-cues',
-  'nested-cues-with-linebreak',
-  'region-position',
-  'cue-with-controls',
-  'bitmap-cue',
-  'nested-cue-bg',
-  'flat-cue-bg',
-  'deeply-nested-cues',
-  'end-time-edge-case',
-  'region-with-display-alignment',
-  'line-alignment',
-];
+const suites = {
+  'text-displayer': [
+    'basic-cue',
+    'cue-position',
+    'cue-with-newline',
+    'two-basic-cues',
+    'duplicate-cues',
+    'two-nested-cues',
+    'nested-cues-with-linebreak',
+    'region-position',
+    'cue-with-controls',
+    'bitmap-cue',
+    'nested-cue-bg',
+    'flat-cue-bg',
+    'deeply-nested-cues',
+    'end-time-edge-case',
+    'region-with-display-alignment',
+    'line-alignment',
+  ],
+};
 
 const prefixes = [
   'native',
@@ -85,10 +87,11 @@
   line-height: 0;
 }
 
-label {
+#reviewElement label {
   display: block;
   padding-left: 1em;
   line-height: 1em;
+  white-space: pre;
 }
 
 .images {
@@ -128,127 +131,265 @@
   opacity: 0.8;
 }
 
+#indexElement .optionList {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+#indexElement .optionContainer {
+  display: inline-block;
+  margin-right: 20px;
+  flex-basis: 20%;
+}
+
+#indexElement label {
+  display: inline-block;
+}
+
     </style>
   </head>
   <body>
+    <div id="indexElement">
+      <h2>Filters</h2>
+
+      <h3>Platforms</h3>
+      <div class="optionList" id="platformsElement"></div>
+
+      <h3>Suites</h3>
+      <div class="optionList" id="suitesElement"></div>
+
+      <h3>Prefixes</h3>
+      <div class="optionList" id="prefixesElement"></div>
+
+      <h3>Tests</h3>
+      <div class="optionList" id="testsElement"></div>
+    </div>
+
+    <div id="reviewElement">
+      <h2 id="instructions">
+        Mouse over a screenshot and use "shift" to see the new version or "ctrl"
+        to see changed areas in red.
+      </h2>
+    </div>
+
     <script>
 
-const h1 = document.createElement('h1');
-document.body.appendChild(h1);
+const allOptions = {};
+const allScreenshots = [];
+const allTestOptionContainers = [];
+
+for (const platform of platforms) {
+  appendOption(platformsElement, 'platform', platform, applyFilters);
+}
 
-const h2 = document.createElement('h2');
-document.body.appendChild(h2);
+for (const prefix of prefixes) {
+  appendOption(prefixesElement, 'prefix', prefix, applyFilters);
+}
 
-function allScreenshots() {
-  const list = [];
+for (const suite in suites) {
+  appendOption(suitesElement, 'suite', suite, applySuiteFilters);
 
-  for (const prefix of prefixes) {
-    for (const screenshot of screenshots) {
-      const fullName = 'text-displayer-' + prefix + '-' + screenshot;
+  for (const test of suites[suite]) {
+    const container = appendOption(testsElement, 'test', test, applyFilters);
+    container.dataset.suite = suite;
+    allTestOptionContainers.push(container);
+  }
+}
 
-      if (!excludes.includes(fullName)) {
-        list.push(fullName);
+for (const platform of platforms) {
+  for (const suite in suites) {
+    for (const prefix of prefixes) {
+      for (const test of suites[suite]) {
+        if (excludes.includes(`${suite}-${prefix}-${test}`)) {
+          continue;
+        }
+        appendScreenshot(platform, suite, prefix, test);
       }
     }
   }
-
-  return list;
 }
 
-// Remove the '?' at the front of the search string.
-const query = location.search.substr(1);
-if (!query) {
-  // Present a simple menu of screenshots to review.
-  h1.textContent = 'Select a screenshot or platform to review:';
+document.body.addEventListener('keydown', keyHandler);
+document.body.addEventListener('keyup', keyHandler);
+window.addEventListener('blur', focusHandler);
+window.addEventListener('focus', focusHandler);
+
+
+applyFilters();
+
+
+function appendOption(parentElement, key, value, onChange) {
+  const container = document.createElement('div');
+  container.className = 'optionContainer';
+  parentElement.appendChild(container);
+
+  const input = document.createElement('input');
+  input.type = 'checkbox';
+  container.appendChild(input);
 
-  const appendToList = (text) => {
-    const li = document.createElement('li');
-    document.body.appendChild(li);
+  const label = document.createElement('label');
+  label.textContent = value;
+  container.appendChild(label);
 
-    const a = document.createElement('a');
-    a.textContent = text;
-    a.href = '?' + text;
-    li.appendChild(a);
+  input.onchange = onChange;
+  allOptions[key] = allOptions[key] || {};
+  allOptions[key][value] = input;
+
+  // Make the label clickable as well.
+  label.onclick = () => {
+    input.checked = !input.checked;
+
+    // The onchange handler of the input not triggered by changing "checked" via
+    // the API.  So call the onChange handler explicitly.
+    onChange();
   };
 
-  for (const screenshot of allScreenshots()) {
-    appendToList(screenshot);
-  }
-  for (const platform of platforms) {
-    appendToList(platform);
-  }
-} else {
-  h1.textContent = 'Screenshots: ' + query;
-  h2.textContent = 'Mouse over a screenshot and use "shift" to see the new ' +
-      'version or "ctrl" to see changed areas in red.';
-
-  const keyHandler = (event) => {
-    if (event.shiftKey) {
-      document.body.classList.add('shift');
-    } else {
-      document.body.classList.remove('shift');
-      if (event.ctrlKey) {
-        document.body.classList.add('ctrl');
-      } else {
-        document.body.classList.remove('ctrl');
-      }
-    }
+  return container;
+}
+
+function appendScreenshot(platform, suite, prefix, test) {
+  const container = document.createElement('div');
+  container.classList.add('container');
+
+  const label = document.createElement('label');
+  label.textContent = `platform: ${platform}\n` +
+                      `suite: ${suite}\n` +
+                      `prefix: ${prefix}\n` +
+                      `test: ${test}\n`;
+  container.appendChild(label);
+
+  const images = document.createElement('div');
+  images.classList.add('images');
+  container.appendChild(images);
+
+  const image = document.createElement('img');
+  image.src = `${platform}/${suite}-${prefix}-${test}.png`;
+  images.appendChild(image);
+  image.onerror = () => {
+    container.style.display = 'none';
+    container.dataset.nodata = true;
   };
 
-  const focusHandler = () => {
-    // When we gain or lose focus, the keys that were pressed before are not
-    // necessarily pressed now.  Clear those states.
+  const newImage = document.createElement('img');
+  newImage.src = `${platform}/${suite}-${prefix}-${test}.png-new`;
+  newImage.classList.add('new');
+  images.appendChild(newImage);
+
+  const diffImage = document.createElement('img');
+  diffImage.src = `${platform}/${suite}-${prefix}-${test}.png-diff`;
+  diffImage.classList.add('diff');
+  images.appendChild(diffImage);
+
+  container.dataset.platform = platform;
+  container.dataset.suite = suite;
+  container.dataset.prefix = prefix;
+  container.dataset.test = test;
+  reviewElement.appendChild(container);
+
+  allScreenshots.push(container);
+}
+
+function keyHandler(event) {
+  if (event.shiftKey) {
+    document.body.classList.add('shift');
+  } else {
     document.body.classList.remove('shift');
-    document.body.classList.remove('ctrl');
-  };
+    if (event.ctrlKey) {
+      document.body.classList.add('ctrl');
+    } else {
+      document.body.classList.remove('ctrl');
+    }
+  }
+}
 
-  document.body.addEventListener('keydown', keyHandler);
-  document.body.addEventListener('keyup', keyHandler);
-  window.addEventListener('blur', focusHandler);
-  window.addEventListener('focus', focusHandler);
+function focusHandler() {
+  // When we gain or lose focus, the keys that were pressed before are not
+  // necessarily pressed now.  Clear those states.
+  document.body.classList.remove('shift');
+  document.body.classList.remove('ctrl');
+}
 
-  const appendScreenshot = (labelText, platform, screenshot) => {
-    const container = document.createElement('div');
-    container.classList.add('container');
+function applyFilters() {
+  // If no platform is selected, show all platforms.
+  let allPlatforms = true;
+  for (const platformInput of Object.values(allOptions['platform'])) {
+    if (platformInput.checked) allPlatforms = false;
+  }
 
-    const label = document.createElement('label');
-    label.textContent = labelText;
-    container.appendChild(label);
+  // If no suite is selected, show all suites.
+  let allSuites = true;
+  for (const suiteInput of Object.values(allOptions['suite'])) {
+    if (suiteInput.checked) allSuites = false;
+  }
 
-    const images = document.createElement('div');
-    images.classList.add('images');
-    container.appendChild(images);
+  // If no test is selected, show all tests.
+  let allPrefixes = true;
+  for (const prefixInput of Object.values(allOptions['prefix'])) {
+    if (prefixInput.checked) allPrefixes = false;
+  }
 
-    const img = document.createElement('img');
-    img.src = platform + '/' + screenshot + '.png';
-    images.appendChild(img);
+  // If no test is selected, show all tests.
+  let allTests = true;
+  for (const testInput of Object.values(allOptions['test'])) {
+    if (testInput.checked) allTests = false;
+  }
 
-    const newImage = document.createElement('img');
-    newImage.src = platform + '/' + screenshot + '.png-new';
-    newImage.classList.add('new');
-    images.appendChild(newImage);
+  for (const container of allScreenshots) {
+    const platform = container.dataset.platform;
+    const suite = container.dataset.suite;
+    const prefix = container.dataset.prefix;
+    const test = container.dataset.test;
 
-    const diffImage = document.createElement('img');
-    diffImage.src = platform + '/' + screenshot + '.png-diff';
-    diffImage.classList.add('diff');
-    images.appendChild(diffImage);
+    let show = true;
+    if (!allPlatforms && !allOptions['platform'][platform].checked) {
+      show = false;
+    }
 
-    document.body.appendChild(container);
-  };
+    if (!allSuites && !allOptions['suite'][suite].checked) {
+      show = false;
+    }
 
-  if (platforms.includes(query)) {
-    const platform = query;
-    for (const screenshot of allScreenshots()) {
-      appendScreenshot(/* label= */ screenshot, platform, screenshot);
+    if (!allPrefixes && !allOptions['prefix'][prefix].checked) {
+      show = false;
     }
-  } else {
-    const screenshot = query;
-    for (const platform of platforms) {
-      appendScreenshot(/* label= */ platform, platform, screenshot);
+
+    if (!allTests && !allOptions['test'][test].checked) {
+      show = false;
+    }
+
+    // For newly-added screenshots, we may not have data for all platforms.
+    // Don't show these.
+    if (container.dataset.nodata) {
+      show = false;
     }
+
+    container.style.display = show ? '' : 'none';
   }
 }
 
+function applySuiteFilters() {
+  // If no suite is selected, show the test options for all suites.
+  let allSuites = true;
+  for (const suiteInput of Object.values(allOptions['suite'])) {
+    if (suiteInput.checked) allSuites = false;
+  }
+
+  // Reset all test options.
+  for (const testInput of Object.values(allOptions['test'])) {
+    testInput.checked = false;
+  }
+
+  // Show test options matching the suites.
+  for (const container of allTestOptionContainers) {
+    const suite = container.dataset.suite;
+    const show = allSuites || allOptions['suite'][suite].checked;
+    container.style.display = show ? '' : 'none';
+  }
+
+  // Apply general filtering on screenshots.
+  applyFilters();
+}
+
     </script>
   </body>
 </html>
