/**
 * @license
 * Copyright 2015 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */
import '../../../test/common-test-setup';
import {
  createConfig,
  createDiff,
  createEmptyDiff,
} from '../../../test/test-data-generators';
import './gr-diff';
import {getComputedStyleValue, querySelectorAll} from '../../../utils/dom-util';
import '@polymer/paper-button/paper-button';
import {
  DiffContent,
  DiffInfo,
  DiffLayer,
  DiffPreferencesInfo,
  DiffViewMode,
  GrDiffLineType,
  IgnoreWhitespaceType,
  Side,
} from '../../../api/diff';
import {
  mockPromise,
  mouseDown,
  query,
  queryAll,
  queryAndAssert,
  stubBaseUrl,
  stubRestApi,
  waitEventLoop,
  waitQueryAndAssert,
  waitUntil,
} from '../../../test/test-utils';
import {AbortStop} from '../../../api/core';
import {waitForEventOnce} from '../../../utils/event-util';
import {GrDiff} from './gr-diff';
import {ImageInfo} from '../../../types/common';
import {GrRangedCommentHint} from '../gr-ranged-comment-hint/gr-ranged-comment-hint';
import {assertIsDefined} from '../../../utils/common-util';
import {fixture, html, assert} from '@open-wc/testing';
import {createDefaultDiffPrefs} from '../../../constants/constants';
import {GrDiffBuilder} from '../gr-diff-builder/gr-diff-builder';
import {GrDiffRow} from '../gr-diff-builder/gr-diff-row';
import {GrAnnotation} from '../gr-diff-highlight/gr-annotation';
import {GrDiffLine} from './gr-diff-line';

const DEFAULT_PREFS = createDefaultDiffPrefs();

suite('gr-diff a11y test', () => {
  test('audit', async () => {
    assert.isAccessible(await fixture(html`<gr-diff></gr-diff>`));
  });
});

suite('gr-diff tests', () => {
  let element: GrDiff;

  const MINIMAL_PREFS: DiffPreferencesInfo = {
    tab_size: 2,
    line_length: 80,
    font_size: 12,
    context: 3,
    ignore_whitespace: 'IGNORE_NONE',
  };

  setup(async () => {
    element = await fixture<GrDiff>(html`<gr-diff></gr-diff>`);
  });

  suite('rendering', () => {
    test('empty diff', async () => {
      await element.updateComplete;
      assert.shadowDom.equal(
        element,
        /* HTML */ `
          <div class="diffContainer sideBySide">
            <table id="diffTable"></table>
          </div>
        `
      );
    });

    test('a unified diff lit', async () => {
      element.viewMode = DiffViewMode.UNIFIED;
      element.prefs = {...MINIMAL_PREFS};
      element.diff = createDiff();
      await element.updateComplete;
      await waitForEventOnce(element, 'render');
      assert.shadowDom.equal(
        element,
        /* HTML */ `
          <div class="diffContainer unified">
            <table class="selected-right" id="diffTable">
              <colgroup>
                <col class="blame gr-diff" />
                <col class="gr-diff" width="48" />
                <col class="gr-diff" width="48" />
                <col class="gr-diff" />
              </colgroup>
              <tbody class="both gr-diff section">
                <tr
                  aria-labelledby="left-button-LOST right-button-LOST right-content-LOST"
                  class="both diff-row gr-diff unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="LOST"></td>
                  <td class="gr-diff left lineNum" data-value="LOST"></td>
                  <td class="gr-diff lineNum right" data-value="LOST"></td>
                  <td class="both content gr-diff lost no-intraline-info right">
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
              </tbody>
              <tbody class="both gr-diff section">
                <tr
                  aria-labelledby="left-button-FILE right-button-FILE right-content-FILE"
                  class="both diff-row gr-diff unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="FILE"></td>
                  <td class="gr-diff left lineNum" data-value="FILE">
                    <button
                      aria-label="Add file comment"
                      class="gr-diff left lineNumButton"
                      data-value="FILE"
                      id="left-button-FILE"
                      tabindex="-1"
                    >
                      File
                    </button>
                  </td>
                  <td class="gr-diff lineNum right" data-value="FILE">
                    <button
                      aria-label="Add file comment"
                      class="gr-diff lineNumButton right"
                      data-value="FILE"
                      id="right-button-FILE"
                      tabindex="-1"
                    >
                      File
                    </button>
                  </td>
                  <td class="both content file gr-diff no-intraline-info right">
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
              </tbody>
              <tbody class="both gr-diff section">
                <tr
                  aria-labelledby="left-button-1 right-button-1 right-content-1"
                  class="both diff-row gr-diff unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="1"></td>
                  <td class="gr-diff left lineNum" data-value="1">
                    <button
                      aria-label="1 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="1"
                      id="left-button-1"
                      tabindex="-1"
                    >
                      1
                    </button>
                  </td>
                  <td class="gr-diff lineNum right" data-value="1">
                    <button
                      aria-label="1 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="1"
                      id="right-button-1"
                      tabindex="-1"
                    >
                      1
                    </button>
                  </td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-1"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-2 right-button-2 right-content-2"
                  class="both diff-row gr-diff unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="2"></td>
                  <td class="gr-diff left lineNum" data-value="2">
                    <button
                      aria-label="2 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="2"
                      id="left-button-2"
                      tabindex="-1"
                    >
                      2
                    </button>
                  </td>
                  <td class="gr-diff lineNum right" data-value="2">
                    <button
                      aria-label="2 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="2"
                      id="right-button-2"
                      tabindex="-1"
                    >
                      2
                    </button>
                  </td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-2"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-3 right-button-3 right-content-3"
                  class="both diff-row gr-diff unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="3"></td>
                  <td class="gr-diff left lineNum" data-value="3">
                    <button
                      aria-label="3 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="3"
                      id="left-button-3"
                      tabindex="-1"
                    >
                      3
                    </button>
                  </td>
                  <td class="gr-diff lineNum right" data-value="3">
                    <button
                      aria-label="3 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="3"
                      id="right-button-3"
                      tabindex="-1"
                    >
                      3
                    </button>
                  </td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-3"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-4 right-button-4 right-content-4"
                  class="both diff-row gr-diff unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="4"></td>
                  <td class="gr-diff left lineNum" data-value="4">
                    <button
                      aria-label="4 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="4"
                      id="left-button-4"
                      tabindex="-1"
                    >
                      4
                    </button>
                  </td>
                  <td class="gr-diff lineNum right" data-value="4">
                    <button
                      aria-label="4 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="4"
                      id="right-button-4"
                      tabindex="-1"
                    >
                      4
                    </button>
                  </td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-4"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
              </tbody>
              <tbody class="delta gr-diff section total">
                <tr
                  aria-labelledby="right-button-5 right-content-5"
                  class="add diff-row gr-diff unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="0"></td>
                  <td class="gr-diff left"></td>
                  <td class="gr-diff lineNum right" data-value="5">
                    <button
                      aria-label="5 added"
                      class="gr-diff lineNumButton right"
                      data-value="5"
                      id="right-button-5"
                      tabindex="-1"
                    >
                      5
                    </button>
                  </td>
                  <td class="add content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-5"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="right-button-6 right-content-6"
                  class="add diff-row gr-diff unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="0"></td>
                  <td class="gr-diff left"></td>
                  <td class="gr-diff lineNum right" data-value="6">
                    <button
                      aria-label="6 added"
                      class="gr-diff lineNumButton right"
                      data-value="6"
                      id="right-button-6"
                      tabindex="-1"
                    >
                      6
                    </button>
                  </td>
                  <td class="add content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-6"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="right-button-7 right-content-7"
                  class="add diff-row gr-diff unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="0"></td>
                  <td class="gr-diff left"></td>
                  <td class="gr-diff lineNum right" data-value="7">
                    <button
                      aria-label="7 added"
                      class="gr-diff lineNumButton right"
                      data-value="7"
                      id="right-button-7"
                      tabindex="-1"
                    >
                      7
                    </button>
                  </td>
                  <td class="add content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-7"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
              </tbody>
              <tbody class="both gr-diff section">
                <tr
                  aria-labelledby="left-button-5 right-button-8 right-content-8"
                  class="both diff-row gr-diff unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="5"></td>
                  <td class="gr-diff left lineNum" data-value="5">
                    <button
                      aria-label="5 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="5"
                      id="left-button-5"
                      tabindex="-1"
                    >
                      5
                    </button>
                  </td>
                  <td class="gr-diff lineNum right" data-value="8">
                    <button
                      aria-label="8 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="8"
                      id="right-button-8"
                      tabindex="-1"
                    >
                      8
                    </button>
                  </td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-8"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-6 right-button-9 right-content-9"
                  class="both diff-row gr-diff unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="6"></td>
                  <td class="gr-diff left lineNum" data-value="6">
                    <button
                      aria-label="6 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="6"
                      id="left-button-6"
                      tabindex="-1"
                    >
                      6
                    </button>
                  </td>
                  <td class="gr-diff lineNum right" data-value="9">
                    <button
                      aria-label="9 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="9"
                      id="right-button-9"
                      tabindex="-1"
                    >
                      9
                    </button>
                  </td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-9"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-7 right-button-10 right-content-10"
                  class="both diff-row gr-diff unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="7"></td>
                  <td class="gr-diff left lineNum" data-value="7">
                    <button
                      aria-label="7 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="7"
                      id="left-button-7"
                      tabindex="-1"
                    >
                      7
                    </button>
                  </td>
                  <td class="gr-diff lineNum right" data-value="10">
                    <button
                      aria-label="10 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="10"
                      id="right-button-10"
                      tabindex="-1"
                    >
                      10
                    </button>
                  </td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-10"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-8 right-button-11 right-content-11"
                  class="both diff-row gr-diff unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="8"></td>
                  <td class="gr-diff left lineNum" data-value="8">
                    <button
                      aria-label="8 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="8"
                      id="left-button-8"
                      tabindex="-1"
                    >
                      8
                    </button>
                  </td>
                  <td class="gr-diff lineNum right" data-value="11">
                    <button
                      aria-label="11 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="11"
                      id="right-button-11"
                      tabindex="-1"
                    >
                      11
                    </button>
                  </td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-11"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-9 right-button-12 right-content-12"
                  class="both diff-row gr-diff unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="9"></td>
                  <td class="gr-diff left lineNum" data-value="9">
                    <button
                      aria-label="9 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="9"
                      id="left-button-9"
                      tabindex="-1"
                    >
                      9
                    </button>
                  </td>
                  <td class="gr-diff lineNum right" data-value="12">
                    <button
                      aria-label="12 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="12"
                      id="right-button-12"
                      tabindex="-1"
                    >
                      12
                    </button>
                  </td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-12"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
              </tbody>
              <tbody class="delta gr-diff section total">
                <tr
                  aria-labelledby="left-button-10 left-content-10"
                  class="diff-row gr-diff remove unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="10"></td>
                  <td class="gr-diff left lineNum" data-value="10">
                    <button
                      aria-label="10 removed"
                      class="gr-diff left lineNumButton"
                      data-value="10"
                      id="left-button-10"
                      tabindex="-1"
                    >
                      10
                    </button>
                  </td>
                  <td class="gr-diff right"></td>
                  <td class="content gr-diff left no-intraline-info remove">
                    <div
                      class="contentText gr-diff"
                      data-side="left"
                      id="left-content-10"
                    ></div>
                    <div class="thread-group" data-side="left"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-11 left-content-11"
                  class="diff-row gr-diff remove unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="11"></td>
                  <td class="gr-diff left lineNum" data-value="11">
                    <button
                      aria-label="11 removed"
                      class="gr-diff left lineNumButton"
                      data-value="11"
                      id="left-button-11"
                      tabindex="-1"
                    >
                      11
                    </button>
                  </td>
                  <td class="gr-diff right"></td>
                  <td class="content gr-diff left no-intraline-info remove">
                    <div
                      class="contentText gr-diff"
                      data-side="left"
                      id="left-content-11"
                    ></div>
                    <div class="thread-group" data-side="left"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-12 left-content-12"
                  class="diff-row gr-diff remove unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="12"></td>
                  <td class="gr-diff left lineNum" data-value="12">
                    <button
                      aria-label="12 removed"
                      class="gr-diff left lineNumButton"
                      data-value="12"
                      id="left-button-12"
                      tabindex="-1"
                    >
                      12
                    </button>
                  </td>
                  <td class="gr-diff right"></td>
                  <td class="content gr-diff left no-intraline-info remove">
                    <div
                      class="contentText gr-diff"
                      data-side="left"
                      id="left-content-12"
                    ></div>
                    <div class="thread-group" data-side="left"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-13 left-content-13"
                  class="diff-row gr-diff remove unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="13"></td>
                  <td class="gr-diff left lineNum" data-value="13">
                    <button
                      aria-label="13 removed"
                      class="gr-diff left lineNumButton"
                      data-value="13"
                      id="left-button-13"
                      tabindex="-1"
                    >
                      13
                    </button>
                  </td>
                  <td class="gr-diff right"></td>
                  <td class="content gr-diff left no-intraline-info remove">
                    <div
                      class="contentText gr-diff"
                      data-side="left"
                      id="left-content-13"
                    ></div>
                    <div class="thread-group" data-side="left"></div>
                  </td>
                </tr>
              </tbody>
              <tbody class="delta gr-diff ignoredWhitespaceOnly section">
                <tr
                  aria-labelledby="right-button-13 right-content-13"
                  class="add diff-row gr-diff unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="0"></td>
                  <td class="gr-diff left"></td>
                  <td class="gr-diff lineNum right" data-value="13">
                    <button
                      aria-label="13 added"
                      class="gr-diff lineNumButton right"
                      data-value="13"
                      id="right-button-13"
                      tabindex="-1"
                    >
                      13
                    </button>
                  </td>
                  <td class="add content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-13"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="right-button-14 right-content-14"
                  class="add diff-row gr-diff unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="0"></td>
                  <td class="gr-diff left"></td>
                  <td class="gr-diff lineNum right" data-value="14">
                    <button
                      aria-label="14 added"
                      class="gr-diff lineNumButton right"
                      data-value="14"
                      id="right-button-14"
                      tabindex="-1"
                    >
                      14
                    </button>
                  </td>
                  <td class="add content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-14"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
              </tbody>
              <tbody class="delta gr-diff section">
                <tr
                  aria-labelledby="left-button-16 left-content-16"
                  class="diff-row gr-diff remove unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="16"></td>
                  <td class="gr-diff left lineNum" data-value="16">
                    <button
                      aria-label="16 removed"
                      class="gr-diff left lineNumButton"
                      data-value="16"
                      id="left-button-16"
                      tabindex="-1"
                    >
                      16
                    </button>
                  </td>
                  <td class="gr-diff right"></td>
                  <td class="content gr-diff left remove">
                    <div
                      class="contentText gr-diff"
                      data-side="left"
                      id="left-content-16"
                    ></div>
                    <div class="thread-group" data-side="left"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="right-button-15 right-content-15"
                  class="add diff-row gr-diff unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="0"></td>
                  <td class="gr-diff left"></td>
                  <td class="gr-diff lineNum right" data-value="15">
                    <button
                      aria-label="15 added"
                      class="gr-diff lineNumButton right"
                      data-value="15"
                      id="right-button-15"
                      tabindex="-1"
                    >
                      15
                    </button>
                  </td>
                  <td class="add content gr-diff right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-15"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
              </tbody>
              <tbody class="both gr-diff section">
                <tr
                  aria-labelledby="left-button-17 right-button-16 right-content-16"
                  class="both diff-row gr-diff unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="17"></td>
                  <td class="gr-diff left lineNum" data-value="17">
                    <button
                      aria-label="17 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="17"
                      id="left-button-17"
                      tabindex="-1"
                    >
                      17
                    </button>
                  </td>
                  <td class="gr-diff lineNum right" data-value="16">
                    <button
                      aria-label="16 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="16"
                      id="right-button-16"
                      tabindex="-1"
                    >
                      16
                    </button>
                  </td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-16"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-18 right-button-17 right-content-17"
                  class="both diff-row gr-diff unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="18"></td>
                  <td class="gr-diff left lineNum" data-value="18">
                    <button
                      aria-label="18 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="18"
                      id="left-button-18"
                      tabindex="-1"
                    >
                      18
                    </button>
                  </td>
                  <td class="gr-diff lineNum right" data-value="17">
                    <button
                      aria-label="17 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="17"
                      id="right-button-17"
                      tabindex="-1"
                    >
                      17
                    </button>
                  </td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-17"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-19 right-button-18 right-content-18"
                  class="both diff-row gr-diff unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="19"></td>
                  <td class="gr-diff left lineNum" data-value="19">
                    <button
                      aria-label="19 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="19"
                      id="left-button-19"
                      tabindex="-1"
                    >
                      19
                    </button>
                  </td>
                  <td class="gr-diff lineNum right" data-value="18">
                    <button
                      aria-label="18 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="18"
                      id="right-button-18"
                      tabindex="-1"
                    >
                      18
                    </button>
                  </td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-18"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
              </tbody>
              <tbody class="contextControl gr-diff section">
                <tr class="above contextBackground gr-diff unified">
                  <td class="blame gr-diff" data-line-number="0"></td>
                  <td class="contextLineNum gr-diff"></td>
                  <td class="contextLineNum gr-diff"></td>
                  <td class="gr-diff"></td>
                </tr>
                <tr class="dividerRow gr-diff show-both">
                  <td class="blame gr-diff" data-line-number="0"></td>
                  <td class="dividerCell gr-diff" colspan="3">
                    <gr-context-controls class="gr-diff" showconfig="both">
                    </gr-context-controls>
                  </td>
                </tr>
                <tr class="below contextBackground gr-diff unified">
                  <td class="blame gr-diff" data-line-number="0"></td>
                  <td class="contextLineNum gr-diff"></td>
                  <td class="contextLineNum gr-diff"></td>
                  <td class="gr-diff"></td>
                </tr>
              </tbody>
              <tbody class="both gr-diff section">
                <tr
                  aria-labelledby="left-button-38 right-button-37 right-content-37"
                  class="both diff-row gr-diff unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="38"></td>
                  <td class="gr-diff left lineNum" data-value="38">
                    <button
                      aria-label="38 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="38"
                      id="left-button-38"
                      tabindex="-1"
                    >
                      38
                    </button>
                  </td>
                  <td class="gr-diff lineNum right" data-value="37">
                    <button
                      aria-label="37 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="37"
                      id="right-button-37"
                      tabindex="-1"
                    >
                      37
                    </button>
                  </td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-37"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-39 right-button-38 right-content-38"
                  class="both diff-row gr-diff unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="39"></td>
                  <td class="gr-diff left lineNum" data-value="39">
                    <button
                      aria-label="39 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="39"
                      id="left-button-39"
                      tabindex="-1"
                    >
                      39
                    </button>
                  </td>
                  <td class="gr-diff lineNum right" data-value="38">
                    <button
                      aria-label="38 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="38"
                      id="right-button-38"
                      tabindex="-1"
                    >
                      38
                    </button>
                  </td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-38"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-40 right-button-39 right-content-39"
                  class="both diff-row gr-diff unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="40"></td>
                  <td class="gr-diff left lineNum" data-value="40">
                    <button
                      aria-label="40 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="40"
                      id="left-button-40"
                      tabindex="-1"
                    >
                      40
                    </button>
                  </td>
                  <td class="gr-diff lineNum right" data-value="39">
                    <button
                      aria-label="39 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="39"
                      id="right-button-39"
                      tabindex="-1"
                    >
                      39
                    </button>
                  </td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-39"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
              </tbody>
              <tbody class="delta gr-diff section total">
                <tr
                  aria-labelledby="right-button-40 right-content-40"
                  class="add diff-row gr-diff unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="0"></td>
                  <td class="gr-diff left"></td>
                  <td class="gr-diff lineNum right" data-value="40">
                    <button
                      aria-label="40 added"
                      class="gr-diff lineNumButton right"
                      data-value="40"
                      id="right-button-40"
                      tabindex="-1"
                    >
                      40
                    </button>
                  </td>
                  <td class="add content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-40"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="right-button-41 right-content-41"
                  class="add diff-row gr-diff unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="0"></td>
                  <td class="gr-diff left"></td>
                  <td class="gr-diff lineNum right" data-value="41">
                    <button
                      aria-label="41 added"
                      class="gr-diff lineNumButton right"
                      data-value="41"
                      id="right-button-41"
                      tabindex="-1"
                    >
                      41
                    </button>
                  </td>
                  <td class="add content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-41"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="right-button-42 right-content-42"
                  class="add diff-row gr-diff unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="0"></td>
                  <td class="gr-diff left"></td>
                  <td class="gr-diff lineNum right" data-value="42">
                    <button
                      aria-label="42 added"
                      class="gr-diff lineNumButton right"
                      data-value="42"
                      id="right-button-42"
                      tabindex="-1"
                    >
                      42
                    </button>
                  </td>
                  <td class="add content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-42"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="right-button-43 right-content-43"
                  class="add diff-row gr-diff unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="0"></td>
                  <td class="gr-diff left"></td>
                  <td class="gr-diff lineNum right" data-value="43">
                    <button
                      aria-label="43 added"
                      class="gr-diff lineNumButton right"
                      data-value="43"
                      id="right-button-43"
                      tabindex="-1"
                    >
                      43
                    </button>
                  </td>
                  <td class="add content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-43"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
              </tbody>
              <tbody class="both gr-diff section">
                <tr
                  aria-labelledby="left-button-41 right-button-44 right-content-44"
                  class="both diff-row gr-diff unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="41"></td>
                  <td class="gr-diff left lineNum" data-value="41">
                    <button
                      aria-label="41 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="41"
                      id="left-button-41"
                      tabindex="-1"
                    >
                      41
                    </button>
                  </td>
                  <td class="gr-diff lineNum right" data-value="44">
                    <button
                      aria-label="44 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="44"
                      id="right-button-44"
                      tabindex="-1"
                    >
                      44
                    </button>
                  </td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-44"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-42 right-button-45 right-content-45"
                  class="both diff-row gr-diff unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="42"></td>
                  <td class="gr-diff left lineNum" data-value="42">
                    <button
                      aria-label="42 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="42"
                      id="left-button-42"
                      tabindex="-1"
                    >
                      42
                    </button>
                  </td>
                  <td class="gr-diff lineNum right" data-value="45">
                    <button
                      aria-label="45 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="45"
                      id="right-button-45"
                      tabindex="-1"
                    >
                      45
                    </button>
                  </td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-45"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-43 right-button-46 right-content-46"
                  class="both diff-row gr-diff unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="43"></td>
                  <td class="gr-diff left lineNum" data-value="43">
                    <button
                      aria-label="43 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="43"
                      id="left-button-43"
                      tabindex="-1"
                    >
                      43
                    </button>
                  </td>
                  <td class="gr-diff lineNum right" data-value="46">
                    <button
                      aria-label="46 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="46"
                      id="right-button-46"
                      tabindex="-1"
                    >
                      46
                    </button>
                  </td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-46"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-44 right-button-47 right-content-47"
                  class="both diff-row gr-diff unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="44"></td>
                  <td class="gr-diff left lineNum" data-value="44">
                    <button
                      aria-label="44 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="44"
                      id="left-button-44"
                      tabindex="-1"
                    >
                      44
                    </button>
                  </td>
                  <td class="gr-diff lineNum right" data-value="47">
                    <button
                      aria-label="47 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="47"
                      id="right-button-47"
                      tabindex="-1"
                    >
                      47
                    </button>
                  </td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-47"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-45 right-button-48 right-content-48"
                  class="both diff-row gr-diff unified"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="45"></td>
                  <td class="gr-diff left lineNum" data-value="45">
                    <button
                      aria-label="45 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="45"
                      id="left-button-45"
                      tabindex="-1"
                    >
                      45
                    </button>
                  </td>
                  <td class="gr-diff lineNum right" data-value="48">
                    <button
                      aria-label="48 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="48"
                      id="right-button-48"
                      tabindex="-1"
                    >
                      48
                    </button>
                  </td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-48"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        `,
        {
          ignoreTags: [
            'gr-context-controls-section',
            'gr-diff-section',
            'gr-diff-row',
            'gr-diff-text',
            'gr-legacy-text',
            'slot',
          ],
        }
      );
    });

    test('a normal diff lit', async () => {
      element.prefs = {...MINIMAL_PREFS};
      element.diff = createDiff();
      await element.updateComplete;
      await waitForEventOnce(element, 'render');
      assert.shadowDom.equal(
        element,
        /* HTML */ `
          <div class="diffContainer sideBySide">
            <table class="selected-right" id="diffTable">
              <colgroup>
                <col class="blame gr-diff" />
                <col class="gr-diff left" width="48" />
                <col class="gr-diff left sign" />
                <col class="gr-diff left" />
                <col class="gr-diff right" width="48" />
                <col class="gr-diff right sign" />
                <col class="gr-diff right" />
              </colgroup>
              <tbody class="both gr-diff section">
                <tr
                  aria-labelledby="left-button-LOST left-content-LOST right-button-LOST right-content-LOST"
                  class="diff-row gr-diff side-by-side"
                  left-type="both"
                  right-type="both"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="LOST"></td>
                  <td class="gr-diff left lineNum" data-value="LOST"></td>
                  <td class="gr-diff left no-intraline-info sign"></td>
                  <td class="both content gr-diff left lost no-intraline-info">
                    <div class="thread-group" data-side="left"></div>
                  </td>
                  <td class="gr-diff lineNum right" data-value="LOST"></td>
                  <td class="gr-diff no-intraline-info right sign"></td>
                  <td class="both content gr-diff lost no-intraline-info right">
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
              </tbody>
              <tbody class="both gr-diff section">
                <tr
                  aria-labelledby="left-button-FILE left-content-FILE right-button-FILE right-content-FILE"
                  class="diff-row gr-diff side-by-side"
                  left-type="both"
                  right-type="both"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="FILE"></td>
                  <td class="gr-diff left lineNum" data-value="FILE">
                    <button
                      aria-label="Add file comment"
                      class="gr-diff left lineNumButton"
                      data-value="FILE"
                      id="left-button-FILE"
                      tabindex="-1"
                    >
                      File
                    </button>
                  </td>
                  <td class="gr-diff left no-intraline-info sign"></td>
                  <td class="both content file gr-diff left no-intraline-info">
                    <div class="thread-group" data-side="left"></div>
                  </td>
                  <td class="gr-diff lineNum right" data-value="FILE">
                    <button
                      aria-label="Add file comment"
                      class="gr-diff lineNumButton right"
                      data-value="FILE"
                      id="right-button-FILE"
                      tabindex="-1"
                    >
                      File
                    </button>
                  </td>
                  <td class="gr-diff no-intraline-info right sign"></td>
                  <td class="both content file gr-diff no-intraline-info right">
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
              </tbody>
              <tbody class="both gr-diff section">
                <tr
                  aria-labelledby="left-button-1 left-content-1 right-button-1 right-content-1"
                  class="diff-row gr-diff side-by-side"
                  left-type="both"
                  right-type="both"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="1"></td>
                  <td class="gr-diff left lineNum" data-value="1">
                    <button
                      aria-label="1 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="1"
                      id="left-button-1"
                      tabindex="-1"
                    >
                      1
                    </button>
                  </td>
                  <td class="gr-diff left no-intraline-info sign"></td>
                  <td class="both content gr-diff left no-intraline-info">
                    <div
                      class="contentText gr-diff"
                      data-side="left"
                      id="left-content-1"
                    ></div>
                    <div class="thread-group" data-side="left"></div>
                  </td>
                  <td class="gr-diff lineNum right" data-value="1">
                    <button
                      aria-label="1 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="1"
                      id="right-button-1"
                      tabindex="-1"
                    >
                      1
                    </button>
                  </td>
                  <td class="gr-diff no-intraline-info right sign"></td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-1"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-2 left-content-2 right-button-2 right-content-2"
                  class="diff-row gr-diff side-by-side"
                  left-type="both"
                  right-type="both"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="2"></td>
                  <td class="gr-diff left lineNum" data-value="2">
                    <button
                      aria-label="2 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="2"
                      id="left-button-2"
                      tabindex="-1"
                    >
                      2
                    </button>
                  </td>
                  <td class="gr-diff left no-intraline-info sign"></td>
                  <td class="both content gr-diff left no-intraline-info">
                    <div
                      class="contentText gr-diff"
                      data-side="left"
                      id="left-content-2"
                    ></div>
                    <div class="thread-group" data-side="left"></div>
                  </td>
                  <td class="gr-diff lineNum right" data-value="2">
                    <button
                      aria-label="2 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="2"
                      id="right-button-2"
                      tabindex="-1"
                    >
                      2
                    </button>
                  </td>
                  <td class="gr-diff no-intraline-info right sign"></td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-2"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-3 left-content-3 right-button-3 right-content-3"
                  class="diff-row gr-diff side-by-side"
                  left-type="both"
                  right-type="both"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="3"></td>
                  <td class="gr-diff left lineNum" data-value="3">
                    <button
                      aria-label="3 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="3"
                      id="left-button-3"
                      tabindex="-1"
                    >
                      3
                    </button>
                  </td>
                  <td class="gr-diff left no-intraline-info sign"></td>
                  <td class="both content gr-diff left no-intraline-info">
                    <div
                      class="contentText gr-diff"
                      data-side="left"
                      id="left-content-3"
                    ></div>
                    <div class="thread-group" data-side="left"></div>
                  </td>
                  <td class="gr-diff lineNum right" data-value="3">
                    <button
                      aria-label="3 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="3"
                      id="right-button-3"
                      tabindex="-1"
                    >
                      3
                    </button>
                  </td>
                  <td class="gr-diff no-intraline-info right sign"></td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-3"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-4 left-content-4 right-button-4 right-content-4"
                  class="diff-row gr-diff side-by-side"
                  left-type="both"
                  right-type="both"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="4"></td>
                  <td class="gr-diff left lineNum" data-value="4">
                    <button
                      aria-label="4 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="4"
                      id="left-button-4"
                      tabindex="-1"
                    >
                      4
                    </button>
                  </td>
                  <td class="gr-diff left no-intraline-info sign"></td>
                  <td class="both content gr-diff left no-intraline-info">
                    <div
                      class="contentText gr-diff"
                      data-side="left"
                      id="left-content-4"
                    ></div>
                    <div class="thread-group" data-side="left"></div>
                  </td>
                  <td class="gr-diff lineNum right" data-value="4">
                    <button
                      aria-label="4 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="4"
                      id="right-button-4"
                      tabindex="-1"
                    >
                      4
                    </button>
                  </td>
                  <td class="gr-diff no-intraline-info right sign"></td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-4"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
              </tbody>
              <tbody class="delta gr-diff section total">
                <tr
                  aria-labelledby="right-button-5 right-content-5"
                  class="diff-row gr-diff side-by-side"
                  left-type="blank"
                  right-type="add"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="0"></td>
                  <td class="blankLineNum gr-diff left"></td>
                  <td class="blank gr-diff left no-intraline-info sign"></td>
                  <td class="blank gr-diff left no-intraline-info">
                    <div class="contentText gr-diff" data-side="left"></div>
                  </td>
                  <td class="gr-diff lineNum right" data-value="5">
                    <button
                      aria-label="5 added"
                      class="gr-diff lineNumButton right"
                      data-value="5"
                      id="right-button-5"
                      tabindex="-1"
                    >
                      5
                    </button>
                  </td>
                  <td class="add gr-diff no-intraline-info right sign">+</td>
                  <td class="add content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-5"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="right-button-6 right-content-6"
                  class="diff-row gr-diff side-by-side"
                  left-type="blank"
                  right-type="add"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="0"></td>
                  <td class="blankLineNum gr-diff left"></td>
                  <td class="blank gr-diff left no-intraline-info sign"></td>
                  <td class="blank gr-diff left no-intraline-info">
                    <div class="contentText gr-diff" data-side="left"></div>
                  </td>
                  <td class="gr-diff lineNum right" data-value="6">
                    <button
                      aria-label="6 added"
                      class="gr-diff lineNumButton right"
                      data-value="6"
                      id="right-button-6"
                      tabindex="-1"
                    >
                      6
                    </button>
                  </td>
                  <td class="add gr-diff no-intraline-info right sign">+</td>
                  <td class="add content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-6"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="right-button-7 right-content-7"
                  class="diff-row gr-diff side-by-side"
                  left-type="blank"
                  right-type="add"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="0"></td>
                  <td class="blankLineNum gr-diff left"></td>
                  <td class="blank gr-diff left no-intraline-info sign"></td>
                  <td class="blank gr-diff left no-intraline-info">
                    <div class="contentText gr-diff" data-side="left"></div>
                  </td>
                  <td class="gr-diff lineNum right" data-value="7">
                    <button
                      aria-label="7 added"
                      class="gr-diff lineNumButton right"
                      data-value="7"
                      id="right-button-7"
                      tabindex="-1"
                    >
                      7
                    </button>
                  </td>
                  <td class="add gr-diff no-intraline-info right sign">+</td>
                  <td class="add content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-7"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
              </tbody>
              <tbody class="both gr-diff section">
                <tr
                  aria-labelledby="left-button-5 left-content-5 right-button-8 right-content-8"
                  class="diff-row gr-diff side-by-side"
                  left-type="both"
                  right-type="both"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="5"></td>
                  <td class="gr-diff left lineNum" data-value="5">
                    <button
                      aria-label="5 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="5"
                      id="left-button-5"
                      tabindex="-1"
                    >
                      5
                    </button>
                  </td>
                  <td class="gr-diff left no-intraline-info sign"></td>
                  <td class="both content gr-diff left no-intraline-info">
                    <div
                      class="contentText gr-diff"
                      data-side="left"
                      id="left-content-5"
                    ></div>
                    <div class="thread-group" data-side="left"></div>
                  </td>
                  <td class="gr-diff lineNum right" data-value="8">
                    <button
                      aria-label="8 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="8"
                      id="right-button-8"
                      tabindex="-1"
                    >
                      8
                    </button>
                  </td>
                  <td class="gr-diff no-intraline-info right sign"></td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-8"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-6 left-content-6 right-button-9 right-content-9"
                  class="diff-row gr-diff side-by-side"
                  left-type="both"
                  right-type="both"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="6"></td>
                  <td class="gr-diff left lineNum" data-value="6">
                    <button
                      aria-label="6 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="6"
                      id="left-button-6"
                      tabindex="-1"
                    >
                      6
                    </button>
                  </td>
                  <td class="gr-diff left no-intraline-info sign"></td>
                  <td class="both content gr-diff left no-intraline-info">
                    <div
                      class="contentText gr-diff"
                      data-side="left"
                      id="left-content-6"
                    ></div>
                    <div class="thread-group" data-side="left"></div>
                  </td>
                  <td class="gr-diff lineNum right" data-value="9">
                    <button
                      aria-label="9 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="9"
                      id="right-button-9"
                      tabindex="-1"
                    >
                      9
                    </button>
                  </td>
                  <td class="gr-diff no-intraline-info right sign"></td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-9"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-7 left-content-7 right-button-10 right-content-10"
                  class="diff-row gr-diff side-by-side"
                  left-type="both"
                  right-type="both"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="7"></td>
                  <td class="gr-diff left lineNum" data-value="7">
                    <button
                      aria-label="7 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="7"
                      id="left-button-7"
                      tabindex="-1"
                    >
                      7
                    </button>
                  </td>
                  <td class="gr-diff left no-intraline-info sign"></td>
                  <td class="both content gr-diff left no-intraline-info">
                    <div
                      class="contentText gr-diff"
                      data-side="left"
                      id="left-content-7"
                    ></div>
                    <div class="thread-group" data-side="left"></div>
                  </td>
                  <td class="gr-diff lineNum right" data-value="10">
                    <button
                      aria-label="10 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="10"
                      id="right-button-10"
                      tabindex="-1"
                    >
                      10
                    </button>
                  </td>
                  <td class="gr-diff no-intraline-info right sign"></td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-10"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-8 left-content-8 right-button-11 right-content-11"
                  class="diff-row gr-diff side-by-side"
                  left-type="both"
                  right-type="both"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="8"></td>
                  <td class="gr-diff left lineNum" data-value="8">
                    <button
                      aria-label="8 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="8"
                      id="left-button-8"
                      tabindex="-1"
                    >
                      8
                    </button>
                  </td>
                  <td class="gr-diff left no-intraline-info sign"></td>
                  <td class="both content gr-diff left no-intraline-info">
                    <div
                      class="contentText gr-diff"
                      data-side="left"
                      id="left-content-8"
                    ></div>
                    <div class="thread-group" data-side="left"></div>
                  </td>
                  <td class="gr-diff lineNum right" data-value="11">
                    <button
                      aria-label="11 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="11"
                      id="right-button-11"
                      tabindex="-1"
                    >
                      11
                    </button>
                  </td>
                  <td class="gr-diff no-intraline-info right sign"></td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-11"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-9 left-content-9 right-button-12 right-content-12"
                  class="diff-row gr-diff side-by-side"
                  left-type="both"
                  right-type="both"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="9"></td>
                  <td class="gr-diff left lineNum" data-value="9">
                    <button
                      aria-label="9 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="9"
                      id="left-button-9"
                      tabindex="-1"
                    >
                      9
                    </button>
                  </td>
                  <td class="gr-diff left no-intraline-info sign"></td>
                  <td class="both content gr-diff left no-intraline-info">
                    <div
                      class="contentText gr-diff"
                      data-side="left"
                      id="left-content-9"
                    ></div>
                    <div class="thread-group" data-side="left"></div>
                  </td>
                  <td class="gr-diff lineNum right" data-value="12">
                    <button
                      aria-label="12 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="12"
                      id="right-button-12"
                      tabindex="-1"
                    >
                      12
                    </button>
                  </td>
                  <td class="gr-diff no-intraline-info right sign"></td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-12"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
              </tbody>
              <tbody class="delta gr-diff section total">
                <tr
                  aria-labelledby="left-button-10 left-content-10"
                  class="diff-row gr-diff side-by-side"
                  left-type="remove"
                  right-type="blank"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="10"></td>
                  <td class="gr-diff left lineNum" data-value="10">
                    <button
                      aria-label="10 removed"
                      class="gr-diff left lineNumButton"
                      data-value="10"
                      id="left-button-10"
                      tabindex="-1"
                    >
                      10
                    </button>
                  </td>
                  <td class="gr-diff left no-intraline-info remove sign">-</td>
                  <td class="content gr-diff left no-intraline-info remove">
                    <div
                      class="contentText gr-diff"
                      data-side="left"
                      id="left-content-10"
                    ></div>
                    <div class="thread-group" data-side="left"></div>
                  </td>
                  <td class="blankLineNum gr-diff right"></td>
                  <td class="blank gr-diff no-intraline-info right sign"></td>
                  <td class="blank gr-diff no-intraline-info right">
                    <div class="contentText gr-diff" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-11 left-content-11"
                  class="diff-row gr-diff side-by-side"
                  left-type="remove"
                  right-type="blank"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="11"></td>
                  <td class="gr-diff left lineNum" data-value="11">
                    <button
                      aria-label="11 removed"
                      class="gr-diff left lineNumButton"
                      data-value="11"
                      id="left-button-11"
                      tabindex="-1"
                    >
                      11
                    </button>
                  </td>
                  <td class="gr-diff left no-intraline-info remove sign">-</td>
                  <td class="content gr-diff left no-intraline-info remove">
                    <div
                      class="contentText gr-diff"
                      data-side="left"
                      id="left-content-11"
                    ></div>
                    <div class="thread-group" data-side="left"></div>
                  </td>
                  <td class="blankLineNum gr-diff right"></td>
                  <td class="blank gr-diff no-intraline-info right sign"></td>
                  <td class="blank gr-diff no-intraline-info right">
                    <div class="contentText gr-diff" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-12 left-content-12"
                  class="diff-row gr-diff side-by-side"
                  left-type="remove"
                  right-type="blank"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="12"></td>
                  <td class="gr-diff left lineNum" data-value="12">
                    <button
                      aria-label="12 removed"
                      class="gr-diff left lineNumButton"
                      data-value="12"
                      id="left-button-12"
                      tabindex="-1"
                    >
                      12
                    </button>
                  </td>
                  <td class="gr-diff left no-intraline-info remove sign">-</td>
                  <td class="content gr-diff left no-intraline-info remove">
                    <div
                      class="contentText gr-diff"
                      data-side="left"
                      id="left-content-12"
                    ></div>
                    <div class="thread-group" data-side="left"></div>
                  </td>
                  <td class="blankLineNum gr-diff right"></td>
                  <td class="blank gr-diff no-intraline-info right sign"></td>
                  <td class="blank gr-diff no-intraline-info right">
                    <div class="contentText gr-diff" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-13 left-content-13"
                  class="diff-row gr-diff side-by-side"
                  left-type="remove"
                  right-type="blank"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="13"></td>
                  <td class="gr-diff left lineNum" data-value="13">
                    <button
                      aria-label="13 removed"
                      class="gr-diff left lineNumButton"
                      data-value="13"
                      id="left-button-13"
                      tabindex="-1"
                    >
                      13
                    </button>
                  </td>
                  <td class="gr-diff left no-intraline-info remove sign">-</td>
                  <td class="content gr-diff left no-intraline-info remove">
                    <div
                      class="contentText gr-diff"
                      data-side="left"
                      id="left-content-13"
                    ></div>
                    <div class="thread-group" data-side="left"></div>
                  </td>
                  <td class="blankLineNum gr-diff right"></td>
                  <td class="blank gr-diff no-intraline-info right sign"></td>
                  <td class="blank gr-diff no-intraline-info right">
                    <div class="contentText gr-diff" data-side="right"></div>
                  </td>
                </tr>
              </tbody>
              <tbody class="delta gr-diff ignoredWhitespaceOnly section">
                <tr
                  aria-labelledby="left-button-14 left-content-14 right-button-13 right-content-13"
                  class="diff-row gr-diff side-by-side"
                  left-type="remove"
                  right-type="add"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="14"></td>
                  <td class="gr-diff left lineNum" data-value="14">
                    <button
                      aria-label="14 removed"
                      class="gr-diff left lineNumButton"
                      data-value="14"
                      id="left-button-14"
                      tabindex="-1"
                    >
                      14
                    </button>
                  </td>
                  <td class="gr-diff left no-intraline-info remove sign">-</td>
                  <td class="content gr-diff left no-intraline-info remove">
                    <div
                      class="contentText gr-diff"
                      data-side="left"
                      id="left-content-14"
                    ></div>
                    <div class="thread-group" data-side="left"></div>
                  </td>
                  <td class="gr-diff lineNum right" data-value="13">
                    <button
                      aria-label="13 added"
                      class="gr-diff lineNumButton right"
                      data-value="13"
                      id="right-button-13"
                      tabindex="-1"
                    >
                      13
                    </button>
                  </td>
                  <td class="add gr-diff no-intraline-info right sign">+</td>
                  <td class="add content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-13"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-15 left-content-15 right-button-14 right-content-14"
                  class="diff-row gr-diff side-by-side"
                  left-type="remove"
                  right-type="add"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="15"></td>
                  <td class="gr-diff left lineNum" data-value="15">
                    <button
                      aria-label="15 removed"
                      class="gr-diff left lineNumButton"
                      data-value="15"
                      id="left-button-15"
                      tabindex="-1"
                    >
                      15
                    </button>
                  </td>
                  <td class="gr-diff left no-intraline-info remove sign">-</td>
                  <td class="content gr-diff left no-intraline-info remove">
                    <div
                      class="contentText gr-diff"
                      data-side="left"
                      id="left-content-15"
                    ></div>
                    <div class="thread-group" data-side="left"></div>
                  </td>
                  <td class="gr-diff lineNum right" data-value="14">
                    <button
                      aria-label="14 added"
                      class="gr-diff lineNumButton right"
                      data-value="14"
                      id="right-button-14"
                      tabindex="-1"
                    >
                      14
                    </button>
                  </td>
                  <td class="add gr-diff no-intraline-info right sign">+</td>
                  <td class="add content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-14"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
              </tbody>
              <tbody class="delta gr-diff section">
                <tr
                  aria-labelledby="left-button-16 left-content-16 right-button-15 right-content-15"
                  class="diff-row gr-diff side-by-side"
                  left-type="remove"
                  right-type="add"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="16"></td>
                  <td class="gr-diff left lineNum" data-value="16">
                    <button
                      aria-label="16 removed"
                      class="gr-diff left lineNumButton"
                      data-value="16"
                      id="left-button-16"
                      tabindex="-1"
                    >
                      16
                    </button>
                  </td>
                  <td class="gr-diff left remove sign">-</td>
                  <td class="content gr-diff left remove">
                    <div
                      class="contentText gr-diff"
                      data-side="left"
                      id="left-content-16"
                    ></div>
                    <div class="thread-group" data-side="left"></div>
                  </td>
                  <td class="gr-diff lineNum right" data-value="15">
                    <button
                      aria-label="15 added"
                      class="gr-diff lineNumButton right"
                      data-value="15"
                      id="right-button-15"
                      tabindex="-1"
                    >
                      15
                    </button>
                  </td>
                  <td class="add gr-diff right sign">+</td>
                  <td class="add content gr-diff right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-15"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
              </tbody>
              <tbody class="both gr-diff section">
                <tr
                  aria-labelledby="left-button-17 left-content-17 right-button-16 right-content-16"
                  class="diff-row gr-diff side-by-side"
                  left-type="both"
                  right-type="both"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="17"></td>
                  <td class="gr-diff left lineNum" data-value="17">
                    <button
                      aria-label="17 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="17"
                      id="left-button-17"
                      tabindex="-1"
                    >
                      17
                    </button>
                  </td>
                  <td class="gr-diff left no-intraline-info sign"></td>
                  <td class="both content gr-diff left no-intraline-info">
                    <div
                      class="contentText gr-diff"
                      data-side="left"
                      id="left-content-17"
                    ></div>
                    <div class="thread-group" data-side="left"></div>
                  </td>
                  <td class="gr-diff lineNum right" data-value="16">
                    <button
                      aria-label="16 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="16"
                      id="right-button-16"
                      tabindex="-1"
                    >
                      16
                    </button>
                  </td>
                  <td class="gr-diff no-intraline-info right sign"></td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-16"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-18 left-content-18 right-button-17 right-content-17"
                  class="diff-row gr-diff side-by-side"
                  left-type="both"
                  right-type="both"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="18"></td>
                  <td class="gr-diff left lineNum" data-value="18">
                    <button
                      aria-label="18 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="18"
                      id="left-button-18"
                      tabindex="-1"
                    >
                      18
                    </button>
                  </td>
                  <td class="gr-diff left no-intraline-info sign"></td>
                  <td class="both content gr-diff left no-intraline-info">
                    <div
                      class="contentText gr-diff"
                      data-side="left"
                      id="left-content-18"
                    ></div>
                    <div class="thread-group" data-side="left"></div>
                  </td>
                  <td class="gr-diff lineNum right" data-value="17">
                    <button
                      aria-label="17 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="17"
                      id="right-button-17"
                      tabindex="-1"
                    >
                      17
                    </button>
                  </td>
                  <td class="gr-diff no-intraline-info right sign"></td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-17"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-19 left-content-19 right-button-18 right-content-18"
                  class="diff-row gr-diff side-by-side"
                  left-type="both"
                  right-type="both"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="19"></td>
                  <td class="gr-diff left lineNum" data-value="19">
                    <button
                      aria-label="19 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="19"
                      id="left-button-19"
                      tabindex="-1"
                    >
                      19
                    </button>
                  </td>
                  <td class="gr-diff left no-intraline-info sign"></td>
                  <td class="both content gr-diff left no-intraline-info">
                    <div
                      class="contentText gr-diff"
                      data-side="left"
                      id="left-content-19"
                    ></div>
                    <div class="thread-group" data-side="left"></div>
                  </td>
                  <td class="gr-diff lineNum right" data-value="18">
                    <button
                      aria-label="18 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="18"
                      id="right-button-18"
                      tabindex="-1"
                    >
                      18
                    </button>
                  </td>
                  <td class="gr-diff no-intraline-info right sign"></td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-18"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
              </tbody>
              <tbody class="contextControl gr-diff section">
                <tr
                  class="above contextBackground gr-diff side-by-side"
                  left-type="contextControl"
                  right-type="contextControl"
                >
                  <td class="blame gr-diff" data-line-number="0"></td>
                  <td class="contextLineNum gr-diff"></td>
                  <td class="gr-diff sign"></td>
                  <td class="gr-diff"></td>
                  <td class="contextLineNum gr-diff"></td>
                  <td class="gr-diff sign"></td>
                  <td class="gr-diff"></td>
                </tr>
                <tr class="dividerRow gr-diff show-both">
                  <td class="blame gr-diff" data-line-number="0"></td>
                  <td class="gr-diff"></td>
                  <td class="dividerCell gr-diff" colspan="3">
                    <gr-context-controls
                      class="gr-diff"
                      showconfig="both"
                    ></gr-context-controls>
                  </td>
                </tr>
                <tr
                  class="below contextBackground gr-diff side-by-side"
                  left-type="contextControl"
                  right-type="contextControl"
                >
                  <td class="blame gr-diff" data-line-number="0"></td>
                  <td class="contextLineNum gr-diff"></td>
                  <td class="gr-diff sign"></td>
                  <td class="gr-diff"></td>
                  <td class="contextLineNum gr-diff"></td>
                  <td class="gr-diff sign"></td>
                  <td class="gr-diff"></td>
                </tr>
              </tbody>
              <tbody class="both gr-diff section">
                <tr
                  aria-labelledby="left-button-38 left-content-38 right-button-37 right-content-37"
                  class="diff-row gr-diff side-by-side"
                  left-type="both"
                  right-type="both"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="38"></td>
                  <td class="gr-diff left lineNum" data-value="38">
                    <button
                      aria-label="38 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="38"
                      id="left-button-38"
                      tabindex="-1"
                    >
                      38
                    </button>
                  </td>
                  <td class="gr-diff left no-intraline-info sign"></td>
                  <td class="both content gr-diff left no-intraline-info">
                    <div
                      class="contentText gr-diff"
                      data-side="left"
                      id="left-content-38"
                    ></div>
                    <div class="thread-group" data-side="left"></div>
                  </td>
                  <td class="gr-diff lineNum right" data-value="37">
                    <button
                      aria-label="37 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="37"
                      id="right-button-37"
                      tabindex="-1"
                    >
                      37
                    </button>
                  </td>
                  <td class="gr-diff no-intraline-info right sign"></td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-37"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-39 left-content-39 right-button-38 right-content-38"
                  class="diff-row gr-diff side-by-side"
                  left-type="both"
                  right-type="both"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="39"></td>
                  <td class="gr-diff left lineNum" data-value="39">
                    <button
                      aria-label="39 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="39"
                      id="left-button-39"
                      tabindex="-1"
                    >
                      39
                    </button>
                  </td>
                  <td class="gr-diff left no-intraline-info sign"></td>
                  <td class="both content gr-diff left no-intraline-info">
                    <div
                      class="contentText gr-diff"
                      data-side="left"
                      id="left-content-39"
                    ></div>
                    <div class="thread-group" data-side="left"></div>
                  </td>
                  <td class="gr-diff lineNum right" data-value="38">
                    <button
                      aria-label="38 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="38"
                      id="right-button-38"
                      tabindex="-1"
                    >
                      38
                    </button>
                  </td>
                  <td class="gr-diff no-intraline-info right sign"></td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-38"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-40 left-content-40 right-button-39 right-content-39"
                  class="diff-row gr-diff side-by-side"
                  left-type="both"
                  right-type="both"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="40"></td>
                  <td class="gr-diff left lineNum" data-value="40">
                    <button
                      aria-label="40 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="40"
                      id="left-button-40"
                      tabindex="-1"
                    >
                      40
                    </button>
                  </td>
                  <td class="gr-diff left no-intraline-info sign"></td>
                  <td class="both content gr-diff left no-intraline-info">
                    <div
                      class="contentText gr-diff"
                      data-side="left"
                      id="left-content-40"
                    ></div>
                    <div class="thread-group" data-side="left"></div>
                  </td>
                  <td class="gr-diff lineNum right" data-value="39">
                    <button
                      aria-label="39 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="39"
                      id="right-button-39"
                      tabindex="-1"
                    >
                      39
                    </button>
                  </td>
                  <td class="gr-diff no-intraline-info right sign"></td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-39"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
              </tbody>
              <tbody class="delta gr-diff section total">
                <tr
                  aria-labelledby="right-button-40 right-content-40"
                  class="diff-row gr-diff side-by-side"
                  left-type="blank"
                  right-type="add"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="0"></td>
                  <td class="blankLineNum gr-diff left"></td>
                  <td class="blank gr-diff left no-intraline-info sign"></td>
                  <td class="blank gr-diff left no-intraline-info">
                    <div class="contentText gr-diff" data-side="left"></div>
                  </td>
                  <td class="gr-diff lineNum right" data-value="40">
                    <button
                      aria-label="40 added"
                      class="gr-diff lineNumButton right"
                      data-value="40"
                      id="right-button-40"
                      tabindex="-1"
                    >
                      40
                    </button>
                  </td>
                  <td class="add gr-diff no-intraline-info right sign">+</td>
                  <td class="add content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-40"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="right-button-41 right-content-41"
                  class="diff-row gr-diff side-by-side"
                  left-type="blank"
                  right-type="add"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="0"></td>
                  <td class="blankLineNum gr-diff left"></td>
                  <td class="blank gr-diff left no-intraline-info sign"></td>
                  <td class="blank gr-diff left no-intraline-info">
                    <div class="contentText gr-diff" data-side="left"></div>
                  </td>
                  <td class="gr-diff lineNum right" data-value="41">
                    <button
                      aria-label="41 added"
                      class="gr-diff lineNumButton right"
                      data-value="41"
                      id="right-button-41"
                      tabindex="-1"
                    >
                      41
                    </button>
                  </td>
                  <td class="add gr-diff no-intraline-info right sign">+</td>
                  <td class="add content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-41"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="right-button-42 right-content-42"
                  class="diff-row gr-diff side-by-side"
                  left-type="blank"
                  right-type="add"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="0"></td>
                  <td class="blankLineNum gr-diff left"></td>
                  <td class="blank gr-diff left no-intraline-info sign"></td>
                  <td class="blank gr-diff left no-intraline-info">
                    <div class="contentText gr-diff" data-side="left"></div>
                  </td>
                  <td class="gr-diff lineNum right" data-value="42">
                    <button
                      aria-label="42 added"
                      class="gr-diff lineNumButton right"
                      data-value="42"
                      id="right-button-42"
                      tabindex="-1"
                    >
                      42
                    </button>
                  </td>
                  <td class="add gr-diff no-intraline-info right sign">+</td>
                  <td class="add content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-42"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="right-button-43 right-content-43"
                  class="diff-row gr-diff side-by-side"
                  left-type="blank"
                  right-type="add"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="0"></td>
                  <td class="blankLineNum gr-diff left"></td>
                  <td class="blank gr-diff left no-intraline-info sign"></td>
                  <td class="blank gr-diff left no-intraline-info">
                    <div class="contentText gr-diff" data-side="left"></div>
                  </td>
                  <td class="gr-diff lineNum right" data-value="43">
                    <button
                      aria-label="43 added"
                      class="gr-diff lineNumButton right"
                      data-value="43"
                      id="right-button-43"
                      tabindex="-1"
                    >
                      43
                    </button>
                  </td>
                  <td class="add gr-diff no-intraline-info right sign">+</td>
                  <td class="add content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-43"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
              </tbody>
              <tbody class="both gr-diff section">
                <tr
                  aria-labelledby="left-button-41 left-content-41 right-button-44 right-content-44"
                  class="diff-row gr-diff side-by-side"
                  left-type="both"
                  right-type="both"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="41"></td>
                  <td class="gr-diff left lineNum" data-value="41">
                    <button
                      aria-label="41 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="41"
                      id="left-button-41"
                      tabindex="-1"
                    >
                      41
                    </button>
                  </td>
                  <td class="gr-diff left no-intraline-info sign"></td>
                  <td class="both content gr-diff left no-intraline-info">
                    <div
                      class="contentText gr-diff"
                      data-side="left"
                      id="left-content-41"
                    ></div>
                    <div class="thread-group" data-side="left"></div>
                  </td>
                  <td class="gr-diff lineNum right" data-value="44">
                    <button
                      aria-label="44 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="44"
                      id="right-button-44"
                      tabindex="-1"
                    >
                      44
                    </button>
                  </td>
                  <td class="gr-diff no-intraline-info right sign"></td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-44"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-42 left-content-42 right-button-45 right-content-45"
                  class="diff-row gr-diff side-by-side"
                  left-type="both"
                  right-type="both"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="42"></td>
                  <td class="gr-diff left lineNum" data-value="42">
                    <button
                      aria-label="42 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="42"
                      id="left-button-42"
                      tabindex="-1"
                    >
                      42
                    </button>
                  </td>
                  <td class="gr-diff left no-intraline-info sign"></td>
                  <td class="both content gr-diff left no-intraline-info">
                    <div
                      class="contentText gr-diff"
                      data-side="left"
                      id="left-content-42"
                    ></div>
                    <div class="thread-group" data-side="left"></div>
                  </td>
                  <td class="gr-diff lineNum right" data-value="45">
                    <button
                      aria-label="45 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="45"
                      id="right-button-45"
                      tabindex="-1"
                    >
                      45
                    </button>
                  </td>
                  <td class="gr-diff no-intraline-info right sign"></td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-45"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-43 left-content-43 right-button-46 right-content-46"
                  class="diff-row gr-diff side-by-side"
                  left-type="both"
                  right-type="both"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="43"></td>
                  <td class="gr-diff left lineNum" data-value="43">
                    <button
                      aria-label="43 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="43"
                      id="left-button-43"
                      tabindex="-1"
                    >
                      43
                    </button>
                  </td>
                  <td class="gr-diff left no-intraline-info sign"></td>
                  <td class="both content gr-diff left no-intraline-info">
                    <div
                      class="contentText gr-diff"
                      data-side="left"
                      id="left-content-43"
                    ></div>
                    <div class="thread-group" data-side="left"></div>
                  </td>
                  <td class="gr-diff lineNum right" data-value="46">
                    <button
                      aria-label="46 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="46"
                      id="right-button-46"
                      tabindex="-1"
                    >
                      46
                    </button>
                  </td>
                  <td class="gr-diff no-intraline-info right sign"></td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-46"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-44 left-content-44 right-button-47 right-content-47"
                  class="diff-row gr-diff side-by-side"
                  left-type="both"
                  right-type="both"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="44"></td>
                  <td class="gr-diff left lineNum" data-value="44">
                    <button
                      aria-label="44 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="44"
                      id="left-button-44"
                      tabindex="-1"
                    >
                      44
                    </button>
                  </td>
                  <td class="gr-diff left no-intraline-info sign"></td>
                  <td class="both content gr-diff left no-intraline-info">
                    <div
                      class="contentText gr-diff"
                      data-side="left"
                      id="left-content-44"
                    ></div>
                    <div class="thread-group" data-side="left"></div>
                  </td>
                  <td class="gr-diff lineNum right" data-value="47">
                    <button
                      aria-label="47 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="47"
                      id="right-button-47"
                      tabindex="-1"
                    >
                      47
                    </button>
                  </td>
                  <td class="gr-diff no-intraline-info right sign"></td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-47"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
                <tr
                  aria-labelledby="left-button-45 left-content-45 right-button-48 right-content-48"
                  class="diff-row gr-diff side-by-side"
                  left-type="both"
                  right-type="both"
                  tabindex="-1"
                >
                  <td class="blame gr-diff" data-line-number="45"></td>
                  <td class="gr-diff left lineNum" data-value="45">
                    <button
                      aria-label="45 unmodified"
                      class="gr-diff left lineNumButton"
                      data-value="45"
                      id="left-button-45"
                      tabindex="-1"
                    >
                      45
                    </button>
                  </td>
                  <td class="gr-diff left no-intraline-info sign"></td>
                  <td class="both content gr-diff left no-intraline-info">
                    <div
                      class="contentText gr-diff"
                      data-side="left"
                      id="left-content-45"
                    ></div>
                    <div class="thread-group" data-side="left"></div>
                  </td>
                  <td class="gr-diff lineNum right" data-value="48">
                    <button
                      aria-label="48 unmodified"
                      class="gr-diff lineNumButton right"
                      data-value="48"
                      id="right-button-48"
                      tabindex="-1"
                    >
                      48
                    </button>
                  </td>
                  <td class="gr-diff no-intraline-info right sign"></td>
                  <td class="both content gr-diff no-intraline-info right">
                    <div
                      class="contentText gr-diff"
                      data-side="right"
                      id="right-content-48"
                    ></div>
                    <div class="thread-group" data-side="right"></div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        `,
        {
          ignoreTags: [
            'gr-context-controls-section',
            'gr-diff-section',
            'gr-diff-row',
            'gr-diff-text',
            'gr-legacy-text',
            'slot',
          ],
        }
      );
    });
  });

  suite('selectionchange event handling', () => {
    let handleSelectionChangeStub: sinon.SinonSpy;

    const emulateSelection = function () {
      document.dispatchEvent(new CustomEvent('selectionchange'));
    };

    setup(async () => {
      handleSelectionChangeStub = sinon.spy(
        element.highlights,
        'handleSelectionChange'
      );
    });

    test('enabled if logged in', async () => {
      element.loggedIn = true;
      await element.updateComplete;
      emulateSelection();
      assert.isTrue(handleSelectionChangeStub.called);
    });

    test('ignored if logged out', async () => {
      element.loggedIn = false;
      await element.updateComplete;
      emulateSelection();
      assert.isFalse(handleSelectionChangeStub.called);
    });
  });

  test('line limit with line_wrapping', async () => {
    element.prefs = {...MINIMAL_PREFS, line_wrapping: true};
    await element.updateComplete;
    assert.equal(getComputedStyleValue('--line-limit-marker', element), '80ch');
  });

  test('line limit without line_wrapping', async () => {
    element.prefs = {...MINIMAL_PREFS, line_wrapping: false};
    await element.updateComplete;
    assert.equal(getComputedStyleValue('--line-limit-marker', element), '-1px');
  });

  suite('FULL_RESPONSIVE mode', () => {
    setup(async () => {
      element.prefs = {...MINIMAL_PREFS};
      element.renderPrefs = {responsive_mode: 'FULL_RESPONSIVE'};
      await element.updateComplete;
    });

    test('line limit is based on line_length', async () => {
      element.prefs = {...element.prefs!, line_length: 100};
      await element.updateComplete;
      assert.equal(
        getComputedStyleValue('--line-limit-marker', element),
        '100ch'
      );
    });

    test('content-width should not be defined', () => {
      assert.equal(getComputedStyleValue('--content-width', element), 'none');
    });
  });

  suite('SHRINK_ONLY mode', () => {
    setup(async () => {
      element.prefs = {...MINIMAL_PREFS};
      element.renderPrefs = {responsive_mode: 'SHRINK_ONLY'};
      await element.updateComplete;
    });

    test('content-width should not be defined', () => {
      assert.equal(getComputedStyleValue('--content-width', element), 'none');
    });

    test('max-width considers two content columns in side-by-side', async () => {
      element.viewMode = DiffViewMode.SIDE_BY_SIDE;
      await element.updateComplete;
      assert.equal(
        getComputedStyleValue('--diff-max-width', element),
        'calc(2 * 80ch + 2 * 48px + 0ch + 1px + 2px)'
      );
    });

    test('max-width considers one content column in unified', async () => {
      element.viewMode = DiffViewMode.UNIFIED;
      await element.updateComplete;
      assert.equal(
        getComputedStyleValue('--diff-max-width', element),
        'calc(1 * 80ch + 2 * 48px + 0ch + 1px + 2px)'
      );
    });

    test('max-width considers font-size', async () => {
      element.prefs = {...element.prefs!, font_size: 13};
      await element.updateComplete;
      // Each line number column: 4 * 13 = 52px
      assert.equal(
        getComputedStyleValue('--diff-max-width', element),
        'calc(2 * 80ch + 2 * 52px + 0ch + 1px + 2px)'
      );
    });

    test('sign cols are considered if show_sign_col is true', async () => {
      element.renderPrefs = {...element.renderPrefs, show_sign_col: true};
      await element.updateComplete;
      assert.equal(
        getComputedStyleValue('--diff-max-width', element),
        'calc(2 * 80ch + 2 * 48px + 2ch + 1px + 2px)'
      );
    });
  });

  suite('not logged in', () => {
    setup(async () => {
      element.loggedIn = false;
      await element.updateComplete;
    });

    test('toggleLeftDiff', () => {
      element.toggleLeftDiff();
      assert.isTrue(element.classList.contains('no-left'));
      element.toggleLeftDiff();
      assert.isFalse(element.classList.contains('no-left'));
    });

    suite('binary diffs', () => {
      test('render binary diff', async () => {
        element.prefs = {
          ...MINIMAL_PREFS,
        };
        element.diff = {
          meta_a: {name: 'carrot.exe', content_type: 'binary', lines: 0},
          meta_b: {name: 'carrot.exe', content_type: 'binary', lines: 0},
          change_type: 'MODIFIED',
          intraline_status: 'OK',
          diff_header: [],
          content: [],
          binary: true,
        };
        await waitForEventOnce(element, 'render');

        assert.shadowDom.equal(
          element,
          /* HTML */ `
            <div class="diffContainer sideBySide">
              <gr-diff-section class="left-FILE right-FILE"> </gr-diff-section>
              <gr-diff-row class="left-FILE right-FILE"> </gr-diff-row>
              <table class="selected-right" id="diffTable">
                <colgroup>
                  <col class="blame gr-diff" />
                  <col class="gr-diff left" width="48" />
                  <col class="gr-diff left sign" />
                  <col class="gr-diff left" />
                  <col class="gr-diff right" width="48" />
                  <col class="gr-diff right sign" />
                  <col class="gr-diff right" />
                </colgroup>
                <tbody class="binary-diff gr-diff"></tbody>
                <tbody class="both gr-diff section">
                  <tr
                    aria-labelledby="left-button-FILE left-content-FILE right-button-FILE right-content-FILE"
                    class="diff-row gr-diff side-by-side"
                    left-type="both"
                    right-type="both"
                    tabindex="-1"
                  >
                    <td class="blame gr-diff" data-line-number="FILE"></td>
                    <td class="gr-diff left lineNum" data-value="FILE">
                      <button
                        aria-label="Add file comment"
                        class="gr-diff left lineNumButton"
                        data-value="FILE"
                        id="left-button-FILE"
                        tabindex="-1"
                      >
                        File
                      </button>
                    </td>
                    <td class="gr-diff left no-intraline-info sign"></td>
                    <td
                      class="both content file gr-diff left no-intraline-info"
                    >
                      <div class="thread-group" data-side="left">
                        <slot name="left-FILE"> </slot>
                      </div>
                    </td>
                    <td class="gr-diff lineNum right" data-value="FILE">
                      <button
                        aria-label="Add file comment"
                        class="gr-diff lineNumButton right"
                        data-value="FILE"
                        id="right-button-FILE"
                        tabindex="-1"
                      >
                        File
                      </button>
                    </td>
                    <td class="gr-diff no-intraline-info right sign"></td>
                    <td
                      class="both content file gr-diff no-intraline-info right"
                    >
                      <div class="thread-group" data-side="right">
                        <slot name="right-FILE"> </slot>
                      </div>
                    </td>
                  </tr>
                </tbody>
                <tbody class="binary-diff gr-diff">
                  <tr class="gr-diff">
                    <td class="gr-diff" colspan="5">
                      <span> Difference in binary files </span>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          `
        );
      });
    });

    suite('image diffs', () => {
      let mockFile1: ImageInfo;
      let mockFile2: ImageInfo;
      setup(() => {
        mockFile1 = {
          body:
            'Qk06AAAAAAAAADYAAAAoAAAAAQAAAP////8BACAAAAAAAAAAAAATCwAAE' +
            'wsAAAAAAAAAAAAAAAAA/w==',
          type: 'image/bmp',
        };
        mockFile2 = {
          body:
            'Qk06AAAAAAAAADYAAAAoAAAAAQAAAP////8BACAAAAAAAAAAAAATCwAAE' +
            'wsAAAAAAAAAAAAA/////w==',
          type: 'image/bmp',
        };

        element.isImageDiff = true;
        element.prefs = {
          context: 10,
          cursor_blink_rate: 0,
          font_size: 12,
          ignore_whitespace: 'IGNORE_NONE',
          line_length: 100,
          line_wrapping: false,
          show_line_endings: true,
          show_tabs: true,
          show_whitespace_errors: true,
          syntax_highlighting: true,
          tab_size: 8,
        };
      });

      test('render image diff', async () => {
        element.baseImage = mockFile1;
        element.revisionImage = mockFile2;
        element.diff = {
          meta_a: {name: 'carrot.jpg', content_type: 'image/jpeg', lines: 66},
          meta_b: {name: 'carrot.jpg', content_type: 'image/jpeg', lines: 560},
          intraline_status: 'OK',
          change_type: 'MODIFIED',
          diff_header: [
            'diff --git a/carrot.jpg b/carrot.jpg',
            'index 2adc47d..f9c2f2c 100644',
            '--- a/carrot.jpg',
            '+++ b/carrot.jpg',
            'Binary files differ',
          ],
          content: [{skip: 66}],
          binary: true,
        };

        await waitForEventOnce(element, 'render');
        const imageDiffSection = queryAndAssert(element, 'tbody.image-diff');
        assert.lightDom.equal(
          imageDiffSection,
          /* HTML */ `
            <tbody class="gr-diff image-diff">
              <tr class="gr-diff">
                <td class="blank gr-diff left lineNum"></td>
                <td class="gr-diff left">
                  <img
                    class="gr-diff left"
                    src="data:image/bmp;base64,${mockFile1.body}"
                  />
                </td>
                <td class="blank gr-diff lineNum right"></td>
                <td class="gr-diff right">
                  <img
                    class="gr-diff right"
                    src="data:image/bmp;base64,${mockFile2.body}"
                  />
                </td>
              </tr>
              <tr class="gr-diff">
                <td class="blank gr-diff left lineNum"></td>
                <td class="gr-diff left">
                  <label class="gr-diff">
                    <span class="gr-diff label"> image/bmp </span>
                  </label>
                </td>
                <td class="blank gr-diff lineNum right"></td>
                <td class="gr-diff right">
                  <label class="gr-diff">
                    <span class="gr-diff label"> image/bmp </span>
                  </label>
                </td>
              </tr>
            </tbody>
          `
        );
        const endpoint = queryAndAssert(element, 'tbody.endpoint');
        assert.dom.equal(
          endpoint,
          /* HTML */ `
            <tbody class="gr-diff endpoint">
              <tr class="gr-diff">
                <gr-endpoint-decorator class="gr-diff" name="image-diff">
                  <gr-endpoint-param class="gr-diff" name="baseImage">
                  </gr-endpoint-param>
                  <gr-endpoint-param class="gr-diff" name="revisionImage">
                  </gr-endpoint-param>
                </gr-endpoint-decorator>
              </tr>
            </tbody>
          `
        );
      });

      test('renders image diffs with a different file name', async () => {
        const mockDiff: DiffInfo = {
          meta_a: {name: 'carrot.jpg', content_type: 'image/jpeg', lines: 66},
          meta_b: {name: 'carrot2.jpg', content_type: 'image/jpeg', lines: 560},
          intraline_status: 'OK',
          change_type: 'MODIFIED',
          diff_header: [
            'diff --git a/carrot.jpg b/carrot2.jpg',
            'index 2adc47d..f9c2f2c 100644',
            '--- a/carrot.jpg',
            '+++ b/carrot2.jpg',
            'Binary files differ',
          ],
          content: [{skip: 66}],
          binary: true,
        };

        element.baseImage = mockFile1;
        element.baseImage._name = mockDiff.meta_a!.name;
        element.revisionImage = mockFile2;
        element.revisionImage._name = mockDiff.meta_b!.name;
        element.diff = mockDiff;

        await waitForEventOnce(element, 'render');
        const imageDiffSection = queryAndAssert(element, 'tbody.image-diff');
        const leftLabel = queryAndAssert(imageDiffSection, 'td.left label');
        const rightLabel = queryAndAssert(imageDiffSection, 'td.right label');
        assert.dom.equal(
          leftLabel,
          /* HTML */ `
            <label class="gr-diff">
              <span class="gr-diff name"> carrot.jpg </span>
              <br class="gr-diff" />
              <span class="gr-diff label"> image/bmp </span>
            </label>
          `
        );
        assert.dom.equal(
          rightLabel,
          /* HTML */ `
            <label class="gr-diff">
              <span class="gr-diff name"> carrot2.jpg </span>
              <br class="gr-diff" />
              <span class="gr-diff label"> image/bmp </span>
            </label>
          `
        );
      });

      test('renders added image', async () => {
        const mockDiff: DiffInfo = {
          meta_b: {name: 'carrot.jpg', content_type: 'image/jpeg', lines: 560},
          intraline_status: 'OK',
          change_type: 'ADDED',
          diff_header: [
            'diff --git a/carrot.jpg b/carrot.jpg',
            'index 0000000..f9c2f2c 100644',
            '--- /dev/null',
            '+++ b/carrot.jpg',
            'Binary files differ',
          ],
          content: [{skip: 66}],
          binary: true,
        };
        element.revisionImage = mockFile2;
        element.diff = mockDiff;

        await waitForEventOnce(element, 'render');
        const imageDiffSection = queryAndAssert(element, 'tbody.image-diff');
        const leftImage = query(imageDiffSection, 'td.left img');
        const rightImage = queryAndAssert(imageDiffSection, 'td.right img');
        assert.isNotOk(leftImage);
        assert.dom.equal(
          rightImage,
          /* HTML */ `
            <img
              class="gr-diff right"
              src="data:image/bmp;base64,${mockFile2.body}"
            />
          `
        );
      });

      test('renders removed image', async () => {
        const mockDiff: DiffInfo = {
          meta_a: {name: 'carrot.jpg', content_type: 'image/jpeg', lines: 560},
          intraline_status: 'OK',
          change_type: 'DELETED',
          diff_header: [
            'diff --git a/carrot.jpg b/carrot.jpg',
            'index f9c2f2c..0000000 100644',
            '--- a/carrot.jpg',
            '+++ /dev/null',
            'Binary files differ',
          ],
          content: [{skip: 66}],
          binary: true,
        };
        element.baseImage = mockFile1;
        element.diff = mockDiff;

        await waitForEventOnce(element, 'render');
        const imageDiffSection = queryAndAssert(element, 'tbody.image-diff');
        const leftImage = queryAndAssert(imageDiffSection, 'td.left img');
        const rightImage = query(imageDiffSection, 'td.right img');
        assert.isNotOk(rightImage);
        assert.dom.equal(
          leftImage,
          /* HTML */ `
            <img
              class="gr-diff left"
              src="data:image/bmp;base64,${mockFile1.body}"
            />
          `
        );
      });

      test('does not render disallowed image type', async () => {
        const mockDiff: DiffInfo = {
          meta_a: {
            name: 'carrot.jpg',
            content_type: 'image/jpeg-evil',
            lines: 560,
          },
          intraline_status: 'OK',
          change_type: 'DELETED',
          diff_header: [
            'diff --git a/carrot.jpg b/carrot.jpg',
            'index f9c2f2c..0000000 100644',
            '--- a/carrot.jpg',
            '+++ /dev/null',
            'Binary files differ',
          ],
          content: [{skip: 66}],
          binary: true,
        };
        mockFile1.type = 'image/jpeg-evil';
        element.baseImage = mockFile1;
        element.diff = mockDiff;

        await waitForEventOnce(element, 'render');
        const imageDiffSection = queryAndAssert(element, 'tbody.image-diff');
        const leftImage = query(imageDiffSection, 'td.left img');
        assert.isNotOk(leftImage);
      });
    });

    test('handleTap lineNum', async () => {
      const addDraftStub = sinon.stub(element, 'addDraftAtLine');
      const el = document.createElement('div');
      el.className = 'lineNum';
      const promise = mockPromise();
      el.addEventListener('click', e => {
        element.handleTap(e);
        assert.isTrue(addDraftStub.called);
        assert.equal(addDraftStub.lastCall.args[0], el);
        promise.resolve();
      });
      el.click();
      await promise;
    });

    test('handleTap content', async () => {
      const content = document.createElement('div');
      const lineEl = document.createElement('div');
      lineEl.className = 'lineNum';
      const row = document.createElement('div');
      row.appendChild(lineEl);
      row.appendChild(content);

      const selectStub = sinon.stub(element, 'selectLine');

      content.className = 'content';
      const promise = mockPromise();
      content.addEventListener('click', e => {
        element.handleTap(e);
        assert.isTrue(selectStub.called);
        assert.equal(selectStub.lastCall.args[0], lineEl);
        promise.resolve();
      });
      content.click();
      await promise;
    });

    suite('getCursorStops', () => {
      async function setupDiff() {
        element.diff = createDiff();
        element.prefs = {
          context: 10,
          tab_size: 8,
          font_size: 12,
          line_length: 100,
          cursor_blink_rate: 0,
          line_wrapping: false,

          show_line_endings: true,
          show_tabs: true,
          show_whitespace_errors: true,
          syntax_highlighting: true,
          ignore_whitespace: 'IGNORE_NONE',
        };
        await element.updateComplete;
        element.renderDiffTable();
      }

      test('returns [] when hidden and noAutoRender', async () => {
        element.noAutoRender = true;
        await setupDiff();
        element.loading = false;
        await element.updateComplete;
        element.hidden = true;
        await element.updateComplete;
        assert.equal(element.getCursorStops().length, 0);
      });

      test('returns one stop per line and one for the file row', async () => {
        await setupDiff();
        element.loading = false;
        await element.updateComplete;
        const ROWS = 48;
        const FILE_ROW = 1;
        const LOST_ROW = 1;
        assert.equal(
          element.getCursorStops().length,
          ROWS + FILE_ROW + LOST_ROW
        );
      });

      test('returns an additional AbortStop when still loading', async () => {
        await setupDiff();
        element.loading = true;
        await element.updateComplete;
        const ROWS = 48;
        const FILE_ROW = 1;
        const LOST_ROW = 1;
        const actual = element.getCursorStops();
        assert.equal(actual.length, ROWS + FILE_ROW + LOST_ROW + 1);
        assert.isTrue(actual[actual.length - 1] instanceof AbortStop);
      });
    });
  });

  suite('logged in', async () => {
    let fakeLineEl: HTMLElement;
    setup(async () => {
      element.loggedIn = true;

      fakeLineEl = {
        getAttribute: sinon.stub().returns(42),
        classList: {
          contains: sinon.stub().returns(true),
        },
      } as unknown as HTMLElement;
      await element.updateComplete;
    });

    test('addDraftAtLine', () => {
      sinon.stub(element, 'selectLine');
      const createCommentStub = sinon.stub(element, 'createComment');
      element.addDraftAtLine(fakeLineEl);
      assert.isTrue(createCommentStub.calledWithExactly(fakeLineEl, 42));
    });

    test('adds long range comment hint', async () => {
      const range = {
        start_line: 1,
        end_line: 12,
        start_character: 0,
        end_character: 0,
      };
      const threadEl = document.createElement('div');
      threadEl.className = 'comment-thread';
      threadEl.setAttribute('diff-side', 'right');
      threadEl.setAttribute('line-num', '1');
      threadEl.setAttribute('range', JSON.stringify(range));
      threadEl.setAttribute('slot', 'right-1');
      const content = [
        {
          a: ['asdf'],
        },
        {
          ab: Array(13).fill('text'),
        },
      ];
      await setupSampleDiff({content});

      element.appendChild(threadEl);

      const hint = await waitQueryAndAssert<GrRangedCommentHint>(
        element,
        'gr-ranged-comment-hint'
      );
      assert.deepEqual(hint.range, range);
    });

    test('no duplicate range hint for same thread', async () => {
      const range = {
        start_line: 1,
        end_line: 12,
        start_character: 0,
        end_character: 0,
      };
      const threadEl = document.createElement('div');
      threadEl.className = 'comment-thread';
      threadEl.setAttribute('diff-side', 'right');
      threadEl.setAttribute('line-num', '1');
      threadEl.setAttribute('range', JSON.stringify(range));
      threadEl.setAttribute('slot', 'right-1');
      const firstHint = document.createElement('gr-ranged-comment-hint');
      firstHint.range = range;
      firstHint.setAttribute('slot', 'right-1');
      const content = [
        {
          a: ['asdf'],
        },
        {
          ab: Array(13).fill('text'),
        },
      ];
      await setupSampleDiff({content});

      element.appendChild(firstHint);
      element.appendChild(threadEl);

      assert.equal(
        element.querySelectorAll('gr-ranged-comment-hint').length,
        1
      );
    });

    test('removes long range comment hint when comment is discarded', async () => {
      const range = {
        start_line: 1,
        end_line: 7,
        start_character: 0,
        end_character: 0,
      };
      const threadEl = document.createElement('div');
      threadEl.className = 'comment-thread';
      threadEl.setAttribute('diff-side', 'right');
      threadEl.setAttribute('line-num', '1');
      threadEl.setAttribute('range', JSON.stringify(range));
      threadEl.setAttribute('slot', 'right-1');
      const content = [
        {
          ab: Array(8).fill('text'),
        },
      ];
      await setupSampleDiff({content});

      element.appendChild(threadEl);
      await waitUntil(() => element.commentRanges.length === 1);

      threadEl.remove();
      await waitUntil(() => element.commentRanges.length === 0);

      assert.isEmpty(element.querySelectorAll('gr-ranged-comment-hint'));
    });

    suite('change in preferences', () => {
      setup(async () => {
        element.diff = {
          meta_a: {name: 'carrot.jpg', content_type: 'image/jpeg', lines: 66},
          meta_b: {name: 'carrot.jpg', content_type: 'image/jpeg', lines: 560},
          diff_header: [],
          intraline_status: 'OK',
          change_type: 'MODIFIED',
          content: [{skip: 66}],
        };
        await element.updateComplete;
        await element.renderDiffTableTask?.flush();
      });

      test('change in preferences re-renders diff', async () => {
        const stub = sinon.stub(element, 'renderDiffTable');
        element.prefs = {
          ...MINIMAL_PREFS,
        };
        await element.updateComplete;
        await element.renderDiffTableTask?.flush();
        assert.isTrue(stub.called);
      });

      test('adding/removing property in preferences re-renders diff', async () => {
        const stub = sinon.stub(element, 'renderDiffTable');
        const newPrefs1: DiffPreferencesInfo = {
          ...MINIMAL_PREFS,
          line_wrapping: true,
        };
        element.prefs = newPrefs1;
        await element.updateComplete;
        await element.renderDiffTableTask?.flush();
        assert.isTrue(stub.called);
        stub.reset();

        const newPrefs2 = {...newPrefs1};
        delete newPrefs2.line_wrapping;
        element.prefs = newPrefs2;
        await element.updateComplete;
        await element.renderDiffTableTask?.flush();
        assert.isTrue(stub.called);
      });

      test(
        'change in preferences does not re-renders diff with ' +
          'noRenderOnPrefsChange',
        async () => {
          const stub = sinon.stub(element, 'renderDiffTable');
          element.noRenderOnPrefsChange = true;
          element.prefs = {
            ...MINIMAL_PREFS,
            context: 12,
          };
          await element.updateComplete;
          await element.renderDiffTableTask?.flush();
          assert.isFalse(stub.called);
        }
      );
    });
  });

  suite('diff header', () => {
    setup(async () => {
      element.diff = {
        meta_a: {name: 'carrot.jpg', content_type: 'image/jpeg', lines: 66},
        meta_b: {name: 'carrot.jpg', content_type: 'image/jpeg', lines: 560},
        diff_header: [],
        intraline_status: 'OK',
        change_type: 'MODIFIED',
        content: [{skip: 66}],
      };
      await element.updateComplete;
    });

    test('hidden', async () => {
      assert.equal(element.computeDiffHeaderItems().length, 0);
      element.diff?.diff_header?.push('diff --git a/test.jpg b/test.jpg');
      assert.equal(element.computeDiffHeaderItems().length, 0);
      element.diff?.diff_header?.push('index 2adc47d..f9c2f2c 100644');
      assert.equal(element.computeDiffHeaderItems().length, 0);
      element.diff?.diff_header?.push('--- a/test.jpg');
      assert.equal(element.computeDiffHeaderItems().length, 0);
      element.diff?.diff_header?.push('+++ b/test.jpg');
      assert.equal(element.computeDiffHeaderItems().length, 0);
      element.diff?.diff_header?.push('test');
      assert.equal(element.computeDiffHeaderItems().length, 1);
      element.requestUpdate('diff');
      await element.updateComplete;

      const header = queryAndAssert(element, '#diffHeader');
      assert.equal(header.textContent?.trim(), 'test');
    });

    test('binary files', () => {
      element.diff!.binary = true;
      assert.equal(element.computeDiffHeaderItems().length, 0);
      element.diff?.diff_header?.push('diff --git a/test.jpg b/test.jpg');
      assert.equal(element.computeDiffHeaderItems().length, 0);
      element.diff?.diff_header?.push('test');
      assert.equal(element.computeDiffHeaderItems().length, 1);
      element.diff?.diff_header?.push('Binary files differ');
      assert.equal(element.computeDiffHeaderItems().length, 1);
    });
  });

  suite('safety and bypass', () => {
    let renderStub: sinon.SinonStub;

    setup(async () => {
      renderStub = sinon.stub(element, 'legacyRender').callsFake(() => {
        assertIsDefined(element.diffTable);
        element.diffTable.dispatchEvent(
          new CustomEvent('render', {bubbles: true, composed: true})
        );
        return Promise.resolve();
      });
      sinon.stub(element, 'getDiffLength').returns(10000);
      element.diff = createDiff();
      element.noRenderOnPrefsChange = true;
      await element.updateComplete;
    });

    test('large render w/ context = 10', async () => {
      element.prefs = {...MINIMAL_PREFS, context: 10};
      element.renderDiffTable();
      await waitForEventOnce(element, 'render');

      assert.isTrue(renderStub.called);
      assert.isFalse(element.showWarning);
    });

    test('large render w/ whole file and bypass', async () => {
      element.prefs = {...MINIMAL_PREFS, context: -1};
      element.safetyBypass = 10;
      element.renderDiffTable();
      await waitForEventOnce(element, 'render');

      assert.isTrue(renderStub.called);
      assert.isFalse(element.showWarning);
    });

    test('large render w/ whole file and no bypass', async () => {
      element.prefs = {...MINIMAL_PREFS, context: -1};
      element.renderDiffTable();
      await waitForEventOnce(element, 'render');

      assert.isFalse(renderStub.called);
      assert.isTrue(element.showWarning);
    });

    test('toggles expand context using bypass', async () => {
      element.prefs = {...MINIMAL_PREFS, context: 3};

      element.toggleAllContext();
      element.renderDiffTable();
      await element.updateComplete;

      assert.equal(element.prefs.context, 3);
      assert.equal(element.safetyBypass, -1);
      assert.equal(element.getBypassPrefs().context, -1);
    });

    test('toggles collapse context from bypass', async () => {
      element.prefs = {...MINIMAL_PREFS, context: 3};
      element.safetyBypass = -1;

      element.toggleAllContext();
      element.renderDiffTable();
      await element.updateComplete;

      assert.equal(element.prefs.context, 3);
      assert.isNull(element.safetyBypass);
      assert.equal(element.getBypassPrefs().context, 3);
    });

    test('toggles collapse context from pref using default', async () => {
      element.prefs = {...MINIMAL_PREFS, context: -1};

      element.toggleAllContext();
      element.renderDiffTable();
      await element.updateComplete;

      assert.equal(element.prefs.context, -1);
      assert.equal(element.safetyBypass, 10);
      assert.equal(element.getBypassPrefs().context, 10);
    });
  });

  suite('blame', () => {
    test('unsetting', async () => {
      element.blame = [];
      const setBlameSpy = sinon.spy(element, 'setBlame');
      element.classList.add('showBlame');
      element.blame = null;
      await element.updateComplete;
      assert.isTrue(setBlameSpy.calledWithExactly(null));
      assert.isFalse(element.classList.contains('showBlame'));
    });

    test('setting', async () => {
      element.blame = [
        {
          author: 'test-author',
          time: 12345,
          commit_msg: '',
          id: 'commit id',
          ranges: [{start: 1, end: 2}],
        },
      ];
      await element.updateComplete;
      assert.isTrue(element.classList.contains('showBlame'));
    });
  });

  suite('trailing newline warnings', () => {
    const NO_NEWLINE_LEFT = 'No newline at end of left file.';
    const NO_NEWLINE_RIGHT = 'No newline at end of right file.';

    const getWarning = (element: GrDiff) => {
      const warningElement = query(element, '.newlineWarning');
      return warningElement?.textContent ?? '';
    };

    setup(async () => {
      element.showNewlineWarningLeft = false;
      element.showNewlineWarningRight = false;
      await element.updateComplete;
    });

    test('shows combined warning if both sides set to warn', async () => {
      element.showNewlineWarningLeft = true;
      element.showNewlineWarningRight = true;
      await element.updateComplete;
      assert.include(
        getWarning(element),
        NO_NEWLINE_LEFT + ' \u2014 ' + NO_NEWLINE_RIGHT
      ); // \u2014 - '—'
    });

    suite('showNewlineWarningLeft', () => {
      test('show warning if true', async () => {
        element.showNewlineWarningLeft = true;
        await element.updateComplete;
        assert.include(getWarning(element), NO_NEWLINE_LEFT);
      });

      test('hide warning if false', async () => {
        element.showNewlineWarningLeft = false;
        await element.updateComplete;
        assert.notInclude(getWarning(element), NO_NEWLINE_LEFT);
      });
    });

    suite('showNewlineWarningRight', () => {
      test('show warning if true', async () => {
        element.showNewlineWarningRight = true;
        await element.updateComplete;
        assert.include(getWarning(element), NO_NEWLINE_RIGHT);
      });

      test('hide warning if false', async () => {
        element.showNewlineWarningRight = false;
        await element.updateComplete;
        assert.notInclude(getWarning(element), NO_NEWLINE_RIGHT);
      });
    });
  });

  suite('key locations', () => {
    setup(async () => {
      element.prefs = {...MINIMAL_PREFS};
      element.diff = createDiff();
      await element.updateComplete;
    });

    test('lineOfInterest is a key location', () => {
      element.lineOfInterest = {lineNum: 789, side: Side.LEFT};
      assert.deepEqual(element.computeKeyLocations(), {
        left: {789: true},
        right: {},
      });
    });

    test('line comments are key locations', async () => {
      const threadEl = document.createElement('div');
      threadEl.className = 'comment-thread';
      threadEl.setAttribute('diff-side', 'right');
      threadEl.setAttribute('line-num', '3');
      element.appendChild(threadEl);
      await element.updateComplete;

      assert.deepEqual(element.computeKeyLocations(), {
        left: {},
        right: {3: true},
      });
    });

    test('file comments are key locations', async () => {
      const threadEl = document.createElement('div');
      threadEl.className = 'comment-thread';
      threadEl.setAttribute('diff-side', 'left');
      element.appendChild(threadEl);
      await element.updateComplete;

      assert.deepEqual(element.computeKeyLocations(), {
        left: {FILE: true},
        right: {},
      });
    });
  });
  const setupSampleDiff = async function (params: {
    content: DiffContent[];
    ignore_whitespace?: IgnoreWhitespaceType;
    binary?: boolean;
  }) {
    const {ignore_whitespace, content} = params;
    // binary can't be undefined, use false if not set
    const binary = params.binary || false;
    element.prefs = {
      ignore_whitespace: ignore_whitespace || 'IGNORE_ALL',
      context: 10,
      cursor_blink_rate: 0,
      font_size: 12,

      line_length: 100,
      line_wrapping: false,
      show_line_endings: true,
      show_tabs: true,
      show_whitespace_errors: true,
      syntax_highlighting: true,
      tab_size: 8,
    };
    element.diff = {
      intraline_status: 'OK',
      change_type: 'MODIFIED',
      diff_header: [
        'diff --git a/carrot.js b/carrot.js',
        'index 2adc47d..f9c2f2c 100644',
        '--- a/carrot.js',
        '+++ b/carrot.jjs',
        'file differ',
      ],
      content,
      binary,
    };
    await element.updateComplete;
    await element.renderDiffTableTask;
  };

  test('clear diff table content as soon as diff changes', async () => {
    const content = [
      {
        a: ['all work and no play make andybons a dull boy'],
      },
      {
        b: ['Non eram nescius, Brute, cum, quae summis ingeniis '],
      },
    ];
    function diffTableHasContent() {
      assertIsDefined(element.diffTable);
      return element.diffTable.innerText.includes(content[0].a?.[0] ?? '');
    }
    await setupSampleDiff({content});
    await waitUntil(diffTableHasContent);
    element.diff = {...element.diff!};
    await element.updateComplete;
    // immediately cleaned up
    assertIsDefined(element.diffTable);
    assert.equal(element.diffTable.innerHTML, '');
    element.renderDiffTable();
    await element.updateComplete;
    // rendered again
    await waitUntil(diffTableHasContent);
  });

  suite('selection test', () => {
    test('user-select set correctly on side-by-side view', async () => {
      const content = [
        {
          a: ['all work and no play make andybons a dull boy'],
          b: ['elgoog elgoog elgoog'],
        },
        {
          ab: [
            'Non eram nescius, Brute, cum, quae summis ingeniis ',
            'exquisitaque doctrina philosophi Graeco sermone tractavissent',
          ],
        },
      ];
      await setupSampleDiff({content});
      await waitEventLoop();

      const diffLine = queryAll<HTMLElement>(element, '.contentText')[2];
      assert.equal(getComputedStyle(diffLine).userSelect, 'none');
      mouseDown(diffLine);
      assert.equal(getComputedStyle(diffLine).userSelect, 'text');
    });

    test('user-select set correctly on unified view', async () => {
      const content = [
        {
          a: ['all work and no play make andybons a dull boy'],
          b: ['elgoog elgoog elgoog'],
        },
        {
          ab: [
            'Non eram nescius, Brute, cum, quae summis ingeniis ',
            'exquisitaque doctrina philosophi Graeco sermone tractavissent',
          ],
        },
      ];
      await setupSampleDiff({content});
      element.viewMode = DiffViewMode.UNIFIED;
      await element.updateComplete;
      const diffLine = queryAll<HTMLElement>(element, '.contentText')[2];
      assert.equal(getComputedStyle(diffLine).userSelect, 'none');
      mouseDown(diffLine);
      assert.equal(getComputedStyle(diffLine).userSelect, 'text');
    });
  });

  suite('whitespace changes only message', () => {
    test('show the message if ignore_whitespace is criteria matches', async () => {
      await setupSampleDiff({content: [{skip: 100}]});
      element.loading = false;
      assert.isTrue(element.showNoChangeMessage());
    });

    test('do not show the message for binary files', async () => {
      await setupSampleDiff({content: [{skip: 100}], binary: true});
      element.loading = false;
      assert.isFalse(element.showNoChangeMessage());
    });

    test('do not show the message if still loading', async () => {
      await setupSampleDiff({content: [{skip: 100}]});
      element.loading = true;
      assert.isFalse(element.showNoChangeMessage());
    });

    test('do not show the message if contains valid changes', async () => {
      const content = [
        {
          a: ['all work and no play make andybons a dull boy'],
          b: ['elgoog elgoog elgoog'],
        },
        {
          ab: [
            'Non eram nescius, Brute, cum, quae summis ingeniis ',
            'exquisitaque doctrina philosophi Graeco sermone tractavissent',
          ],
        },
      ];
      await setupSampleDiff({content});
      element.loading = false;
      assert.equal(element.diffLength, 3);
      assert.isFalse(element.showNoChangeMessage());
    });

    test('do not show message if ignore whitespace is disabled', async () => {
      const content = [
        {
          a: ['all work and no play make andybons a dull boy'],
          b: ['elgoog elgoog elgoog'],
        },
        {
          ab: [
            'Non eram nescius, Brute, cum, quae summis ingeniis ',
            'exquisitaque doctrina philosophi Graeco sermone tractavissent',
          ],
        },
      ];
      await setupSampleDiff({ignore_whitespace: 'IGNORE_NONE', content});
      element.loading = false;
      assert.isFalse(element.showNoChangeMessage());
    });
  });

  test('getDiffLength', () => {
    const diff = createDiff();
    assert.equal(element.getDiffLength(diff), 52);
  });
});

suite('former gr-diff-builder tests', () => {
  let element: GrDiff;
  let builder: GrDiffBuilder;
  let diffTable: HTMLTableElement;

  const setBuilderPrefs = (prefs: Partial<DiffPreferencesInfo>) => {
    builder = new GrDiffBuilder(
      createEmptyDiff(),
      {...createDefaultDiffPrefs(), ...prefs},
      diffTable
    );
  };

  const line = (text: string) => {
    const line = new GrDiffLine(GrDiffLineType.BOTH);
    line.text = text;
    return line;
  };

  setup(async () => {
    element = await fixture<GrDiff>(html`<gr-diff></gr-diff>`);
    element.diff = createEmptyDiff();
    await element.updateComplete;
    stubRestApi('getLoggedIn').returns(Promise.resolve(false));
    stubRestApi('getProjectConfig').returns(Promise.resolve(createConfig()));
    stubBaseUrl('/r');
    setBuilderPrefs({});
  });

  [DiffViewMode.UNIFIED, DiffViewMode.SIDE_BY_SIDE].forEach(mode => {
    test(`line_length used for regular files under ${mode}`, () => {
      element.path = '/a.txt';
      element.viewMode = mode;
      element.diff = createEmptyDiff();
      element.prefs = {
        ...createDefaultDiffPrefs(),
        tab_size: 4,
        line_length: 50,
      };
      builder = element.getDiffBuilder();
      assert.equal(builder.prefs.line_length, 50);
    });

    test(`line_length ignored for commit msg under ${mode}`, () => {
      element.path = '/COMMIT_MSG';
      element.viewMode = mode;
      element.diff = createEmptyDiff();
      element.prefs = {
        ...createDefaultDiffPrefs(),
        tab_size: 4,
        line_length: 50,
      };
      builder = element.getDiffBuilder();
      assert.equal(builder.prefs.line_length, 72);
    });
  });

  test('_handlePreferenceError throws with invalid preference', () => {
    element.prefs = {...createDefaultDiffPrefs(), tab_size: 0};
    assert.throws(() => element.getDiffBuilder());
  });

  test('_handlePreferenceError triggers alert and javascript error', () => {
    const errorStub = sinon.stub();
    element.diffTable!.addEventListener('show-alert', errorStub);
    assert.throws(() => element.handlePreferenceError('tab size'));
    assert.equal(
      errorStub.lastCall.args[0].detail.message,
      "The value of the 'tab size' user preference is invalid. " +
        'Fix in diff preferences'
    );
  });

  suite('intraline differences', () => {
    let el: HTMLElement;
    let str: string;
    let annotateElementSpy: sinon.SinonSpy;
    let layer: DiffLayer;
    const lineNumberEl = document.createElement('td');

    function slice(str: string, start: number, end?: number) {
      return Array.from(str).slice(start, end).join('');
    }

    setup(async () => {
      el = await fixture(html`
        <div>Lorem ipsum dolor sit amet, suspendisse inceptos vehicula</div>
      `);
      str = el.textContent ?? '';
      annotateElementSpy = sinon.spy(GrAnnotation, 'annotateElement');
      layer = element.createIntralineLayer();
    });

    test('annotate no highlights', () => {
      layer.annotate(el, lineNumberEl, line(str), Side.LEFT);

      // The content is unchanged.
      assert.isFalse(annotateElementSpy.called);
      assert.equal(el.childNodes.length, 1);
      assert.instanceOf(el.childNodes[0], Text);
      assert.equal(str, el.childNodes[0].textContent);
    });

    test('annotate with highlights', () => {
      const l = line(str);
      l.highlights = [
        {contentIndex: 0, startIndex: 6, endIndex: 12},
        {contentIndex: 0, startIndex: 18, endIndex: 22},
      ];
      const str0 = slice(str, 0, 6);
      const str1 = slice(str, 6, 12);
      const str2 = slice(str, 12, 18);
      const str3 = slice(str, 18, 22);
      const str4 = slice(str, 22);

      layer.annotate(el, lineNumberEl, l, Side.LEFT);

      assert.isTrue(annotateElementSpy.called);
      assert.equal(el.childNodes.length, 5);

      assert.instanceOf(el.childNodes[0], Text);
      assert.equal(el.childNodes[0].textContent, str0);

      assert.notInstanceOf(el.childNodes[1], Text);
      assert.equal(el.childNodes[1].textContent, str1);

      assert.instanceOf(el.childNodes[2], Text);
      assert.equal(el.childNodes[2].textContent, str2);

      assert.notInstanceOf(el.childNodes[3], Text);
      assert.equal(el.childNodes[3].textContent, str3);

      assert.instanceOf(el.childNodes[4], Text);
      assert.equal(el.childNodes[4].textContent, str4);
    });

    test('annotate without endIndex', () => {
      const l = line(str);
      l.highlights = [{contentIndex: 0, startIndex: 28}];

      const str0 = slice(str, 0, 28);
      const str1 = slice(str, 28);

      layer.annotate(el, lineNumberEl, l, Side.LEFT);

      assert.isTrue(annotateElementSpy.called);
      assert.equal(el.childNodes.length, 2);

      assert.instanceOf(el.childNodes[0], Text);
      assert.equal(el.childNodes[0].textContent, str0);

      assert.notInstanceOf(el.childNodes[1], Text);
      assert.equal(el.childNodes[1].textContent, str1);
    });

    test('annotate ignores empty highlights', () => {
      const l = line(str);
      l.highlights = [{contentIndex: 0, startIndex: 28, endIndex: 28}];

      layer.annotate(el, lineNumberEl, l, Side.LEFT);

      assert.isFalse(annotateElementSpy.called);
      assert.equal(el.childNodes.length, 1);
    });

    test('annotate handles unicode', () => {
      // Put some unicode into the string:
      str = str.replace(/\s/g, '💢');
      el.textContent = str;
      const l = line(str);
      l.highlights = [{contentIndex: 0, startIndex: 6, endIndex: 12}];

      const str0 = slice(str, 0, 6);
      const str1 = slice(str, 6, 12);
      const str2 = slice(str, 12);

      layer.annotate(el, lineNumberEl, l, Side.LEFT);

      assert.isTrue(annotateElementSpy.called);
      assert.equal(el.childNodes.length, 3);

      assert.instanceOf(el.childNodes[0], Text);
      assert.equal(el.childNodes[0].textContent, str0);

      assert.notInstanceOf(el.childNodes[1], Text);
      assert.equal(el.childNodes[1].textContent, str1);

      assert.instanceOf(el.childNodes[2], Text);
      assert.equal(el.childNodes[2].textContent, str2);
    });

    test('annotate handles unicode w/o endIndex', () => {
      // Put some unicode into the string:
      str = str.replace(/\s/g, '💢');
      el.textContent = str;

      const l = line(str);
      l.highlights = [{contentIndex: 0, startIndex: 6}];

      const str0 = slice(str, 0, 6);
      const str1 = slice(str, 6);
      const numHighlightedChars = GrAnnotation.getStringLength(str1);

      layer.annotate(el, lineNumberEl, l, Side.LEFT);

      assert.isTrue(annotateElementSpy.calledWith(el, 6, numHighlightedChars));
      assert.equal(el.childNodes.length, 2);

      assert.instanceOf(el.childNodes[0], Text);
      assert.equal(el.childNodes[0].textContent, str0);

      assert.notInstanceOf(el.childNodes[1], Text);
      assert.equal(el.childNodes[1].textContent, str1);
    });
  });

  suite('tab indicators', () => {
    let layer: DiffLayer;
    const lineNumberEl = document.createElement('td');

    setup(() => {
      element.showTabs = true;
      layer = element.createTabIndicatorLayer();
    });

    test('does nothing with empty line', () => {
      const l = line('');
      const el = document.createElement('div');
      const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');

      layer.annotate(el, lineNumberEl, l, Side.LEFT);

      assert.isFalse(annotateElementStub.called);
    });

    test('does nothing with no tabs', () => {
      const str = 'lorem ipsum no tabs';
      const l = line(str);
      const el = document.createElement('div');
      el.textContent = str;
      const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');

      layer.annotate(el, lineNumberEl, l, Side.LEFT);

      assert.isFalse(annotateElementStub.called);
    });

    test('annotates tab at beginning', () => {
      const str = '\tlorem upsum';
      const l = line(str);
      const el = document.createElement('div');
      el.textContent = str;
      const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');

      layer.annotate(el, lineNumberEl, l, Side.LEFT);

      assert.equal(annotateElementStub.callCount, 1);
      const args = annotateElementStub.getCalls()[0].args;
      assert.equal(args[0], el);
      assert.equal(args[1], 0, 'offset of tab indicator');
      assert.equal(args[2], 1, 'length of tab indicator');
      assert.include(args[3], 'tab-indicator');
    });

    test('does not annotate when disabled', () => {
      element.showTabs = false;

      const str = '\tlorem upsum';
      const l = line(str);
      const el = document.createElement('div');
      el.textContent = str;
      const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');

      layer.annotate(el, lineNumberEl, l, Side.LEFT);

      assert.isFalse(annotateElementStub.called);
    });

    test('annotates multiple in beginning', () => {
      const str = '\t\tlorem upsum';
      const l = line(str);
      const el = document.createElement('div');
      el.textContent = str;
      const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');

      layer.annotate(el, lineNumberEl, l, Side.LEFT);

      assert.equal(annotateElementStub.callCount, 2);

      let args = annotateElementStub.getCalls()[0].args;
      assert.equal(args[0], el);
      assert.equal(args[1], 0, 'offset of tab indicator');
      assert.equal(args[2], 1, 'length of tab indicator');
      assert.include(args[3], 'tab-indicator');

      args = annotateElementStub.getCalls()[1].args;
      assert.equal(args[0], el);
      assert.equal(args[1], 1, 'offset of tab indicator');
      assert.equal(args[2], 1, 'length of tab indicator');
      assert.include(args[3], 'tab-indicator');
    });

    test('annotates intermediate tabs', () => {
      const str = 'lorem\tupsum';
      const l = line(str);
      const el = document.createElement('div');
      el.textContent = str;
      const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');

      layer.annotate(el, lineNumberEl, l, Side.LEFT);

      assert.equal(annotateElementStub.callCount, 1);
      const args = annotateElementStub.getCalls()[0].args;
      assert.equal(args[0], el);
      assert.equal(args[1], 5, 'offset of tab indicator');
      assert.equal(args[2], 1, 'length of tab indicator');
      assert.include(args[3], 'tab-indicator');
    });
  });

  suite('layers', () => {
    let initialLayersCount = 0;
    let withLayerCount = 0;
    setup(() => {
      const layers: DiffLayer[] = [];
      element.layers = layers;
      element.showTrailingWhitespace = true;
      element.setupAnnotationLayers();
      initialLayersCount = element.layersInternal.length;
    });

    test('no layers', () => {
      element.setupAnnotationLayers();
      assert.equal(element.layersInternal.length, initialLayersCount);
    });

    suite('with layers', () => {
      const layers: DiffLayer[] = [{annotate: () => {}}, {annotate: () => {}}];
      setup(() => {
        element.layers = layers;
        element.showTrailingWhitespace = true;
        element.setupAnnotationLayers();
        withLayerCount = element.layersInternal.length;
      });
      test('with layers', () => {
        element.setupAnnotationLayers();
        assert.equal(element.layersInternal.length, withLayerCount);
        assert.equal(initialLayersCount + layers.length, withLayerCount);
      });
    });
  });

  suite('trailing whitespace', () => {
    let layer: DiffLayer;
    const lineNumberEl = document.createElement('td');

    setup(() => {
      element.showTrailingWhitespace = true;
      layer = element.createTrailingWhitespaceLayer();
    });

    test('does nothing with empty line', () => {
      const l = line('');
      const el = document.createElement('div');
      const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
      layer.annotate(el, lineNumberEl, l, Side.LEFT);
      assert.isFalse(annotateElementStub.called);
    });

    test('does nothing with no trailing whitespace', () => {
      const str = 'lorem ipsum blah blah';
      const l = line(str);
      const el = document.createElement('div');
      el.textContent = str;
      const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
      layer.annotate(el, lineNumberEl, l, Side.LEFT);
      assert.isFalse(annotateElementStub.called);
    });

    test('annotates trailing spaces', () => {
      const str = 'lorem ipsum   ';
      const l = line(str);
      const el = document.createElement('div');
      el.textContent = str;
      const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
      layer.annotate(el, lineNumberEl, l, Side.LEFT);
      assert.isTrue(annotateElementStub.called);
      assert.equal(annotateElementStub.lastCall.args[1], 11);
      assert.equal(annotateElementStub.lastCall.args[2], 3);
    });

    test('annotates trailing tabs', () => {
      const str = 'lorem ipsum\t\t\t';
      const l = line(str);
      const el = document.createElement('div');
      el.textContent = str;
      const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
      layer.annotate(el, lineNumberEl, l, Side.LEFT);
      assert.isTrue(annotateElementStub.called);
      assert.equal(annotateElementStub.lastCall.args[1], 11);
      assert.equal(annotateElementStub.lastCall.args[2], 3);
    });

    test('annotates mixed trailing whitespace', () => {
      const str = 'lorem ipsum\t \t';
      const l = line(str);
      const el = document.createElement('div');
      el.textContent = str;
      const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
      layer.annotate(el, lineNumberEl, l, Side.LEFT);
      assert.isTrue(annotateElementStub.called);
      assert.equal(annotateElementStub.lastCall.args[1], 11);
      assert.equal(annotateElementStub.lastCall.args[2], 3);
    });

    test('unicode preceding trailing whitespace', () => {
      const str = '💢\t';
      const l = line(str);
      const el = document.createElement('div');
      el.textContent = str;
      const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
      layer.annotate(el, lineNumberEl, l, Side.LEFT);
      assert.isTrue(annotateElementStub.called);
      assert.equal(annotateElementStub.lastCall.args[1], 1);
      assert.equal(annotateElementStub.lastCall.args[2], 1);
    });

    test('does not annotate when disabled', () => {
      element.showTrailingWhitespace = false;
      const str = 'lorem upsum\t \t ';
      const l = line(str);
      const el = document.createElement('div');
      el.textContent = str;
      const annotateElementStub = sinon.stub(GrAnnotation, 'annotateElement');
      layer.annotate(el, lineNumberEl, l, Side.LEFT);
      assert.isFalse(annotateElementStub.called);
    });
  });

  suite('rendering text, images and binary files', () => {
    let content: DiffContent[] = [];

    setup(() => {
      element.viewMode = DiffViewMode.SIDE_BY_SIDE;
      element.prefs = {
        ...DEFAULT_PREFS,
        context: -1,
        syntax_highlighting: true,
      };
      content = [
        {
          a: ['all work and no play make andybons a dull boy'],
          b: ['elgoog elgoog elgoog'],
        },
        {
          ab: [
            'Non eram nescius, Brute, cum, quae summis ingeniis ',
            'exquisitaque doctrina philosophi Graeco sermone tractavissent',
          ],
        },
      ];
    });

    test('text', async () => {
      element.diff = {...createEmptyDiff(), content};
      await waitForEventOnce(element.diffTable!, 'render-content');
      assert.equal(querySelectorAll(element.diffTable!, 'tbody')?.length, 4);
    });

    test('image', async () => {
      element.diff = {...createEmptyDiff(), content, binary: true};
      element.isImageDiff = true;
      await waitForEventOnce(element.diffTable!, 'render-content');
      assert.equal(querySelectorAll(element.diffTable!, 'tbody')?.length, 4);
    });

    test('binary', async () => {
      element.diff = {...createEmptyDiff(), content, binary: true};
      await waitForEventOnce(element.diffTable!, 'render-content');
      assert.equal(querySelectorAll(element.diffTable!, 'tbody')?.length, 3);
    });
  });

  suite('context hiding and expanding', () => {
    let dispatchStub: sinon.SinonStub;

    setup(async () => {
      dispatchStub = sinon.stub(element.diffTable!, 'dispatchEvent');
      element.diff = {
        ...createEmptyDiff(),
        content: [
          {ab: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(i => `unchanged ${i}`)},
          {a: ['before'], b: ['after']},
          {ab: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(i => `unchanged ${10 + i}`)},
        ],
      };
      element.viewMode = DiffViewMode.SIDE_BY_SIDE;

      element.prefs = {
        ...DEFAULT_PREFS,
        context: 1,
      };
      await element.updateComplete;
      element.legacyRender();
      // Make sure all listeners are installed.
      await element.untilGroupsRendered();
    });

    test('hides lines behind two context controls', () => {
      const contextControls = element.diffTable!.querySelectorAll(
        'gr-context-controls'
      );
      assert.equal(contextControls.length, 2);

      const diffRows = element.diffTable!.querySelectorAll('.diff-row');
      // The first two are LOST and FILE line
      assert.equal(diffRows.length, 2 + 1 + 1 + 1);
      assert.include(diffRows[2].textContent, 'unchanged 10');
      assert.include(diffRows[3].textContent, 'before');
      assert.include(diffRows[3].textContent, 'after');
      assert.include(diffRows[4].textContent, 'unchanged 11');
    });

    test('clicking +x common lines expands those lines', async () => {
      const contextControls = element.diffTable!.querySelectorAll(
        'gr-context-controls'
      );
      const topExpandCommonButton =
        contextControls[0].shadowRoot?.querySelectorAll<HTMLElement>(
          '.showContext'
        )[0];
      assert.isOk(topExpandCommonButton);
      assert.include(topExpandCommonButton!.textContent, '+9 common lines');
      let diffRows = element.diffTable!.querySelectorAll('.diff-row');
      // 5 lines:
      // FILE, LOST, the changed line plus one line of context in each direction
      assert.equal(diffRows.length, 5);

      topExpandCommonButton!.click();

      await waitUntil(() => {
        diffRows = element.diffTable!.querySelectorAll<GrDiffRow>('.diff-row');
        return diffRows.length === 14;
      });
      // 14 lines: The 5 above plus the 9 unchanged lines that were expanded
      assert.equal(diffRows.length, 14);
      assert.include(diffRows[2].textContent, 'unchanged 1');
      assert.include(diffRows[3].textContent, 'unchanged 2');
      assert.include(diffRows[4].textContent, 'unchanged 3');
      assert.include(diffRows[5].textContent, 'unchanged 4');
      assert.include(diffRows[6].textContent, 'unchanged 5');
      assert.include(diffRows[7].textContent, 'unchanged 6');
      assert.include(diffRows[8].textContent, 'unchanged 7');
      assert.include(diffRows[9].textContent, 'unchanged 8');
      assert.include(diffRows[10].textContent, 'unchanged 9');
      assert.include(diffRows[11].textContent, 'unchanged 10');
      assert.include(diffRows[12].textContent, 'before');
      assert.include(diffRows[12].textContent, 'after');
      assert.include(diffRows[13].textContent, 'unchanged 11');
    });

    test('unhideLine shows the line with context', async () => {
      dispatchStub.reset();
      element.unhideLine(4, Side.LEFT);

      await waitUntil(() => {
        const rows =
          element.diffTable!.querySelectorAll<GrDiffRow>('.diff-row');
        return rows.length === 2 + 5 + 1 + 1 + 1;
      });

      const diffRows = element.diffTable!.querySelectorAll('.diff-row');
      // The first two are LOST and FILE line
      // Lines 3-5 (Line 4 plus 1 context in each direction) will be expanded
      // Because context expanders do not hide <3 lines, lines 1-2 will also
      // be shown.
      // Lines 6-9 continue to be hidden
      assert.equal(diffRows.length, 2 + 5 + 1 + 1 + 1);
      assert.include(diffRows[2].textContent, 'unchanged 1');
      assert.include(diffRows[3].textContent, 'unchanged 2');
      assert.include(diffRows[4].textContent, 'unchanged 3');
      assert.include(diffRows[5].textContent, 'unchanged 4');
      assert.include(diffRows[6].textContent, 'unchanged 5');
      assert.include(diffRows[7].textContent, 'unchanged 10');
      assert.include(diffRows[8].textContent, 'before');
      assert.include(diffRows[8].textContent, 'after');
      assert.include(diffRows[9].textContent, 'unchanged 11');

      await element.untilGroupsRendered();
      const firedEventTypes = dispatchStub.getCalls().map(c => c.args[0].type);
      assert.include(firedEventTypes, 'render-content');
    });
  });
});