ThreadNet-Web/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap

// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing

exports[`RoomView for a local room in state CREATING should match the snapshot 1`] = `
<div>
  <div
    class="mx_RoomView mx_RoomView--local"
  >
    <header
      class="_flex_4dswl_9 mx_RoomHeader light-panel"
      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
    >
      <span
        aria-label="Open room settings"
        class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
        data-color="3"
        data-testid="avatar-img"
        data-type="round"
        role="presentation"
        style="--cpd-avatar-size: 40px;"
        tabindex="-1"
      >
        u
      </span>
      <button
        aria-label="Room info"
        class="mx_RoomHeader_infoWrapper"
        tabindex="0"
      >
        <div
          class="mx_RoomHeader_info _box-flex_1odfs_9"
          style="--mx-box-flex: 1;"
        >
          <div
            aria-level="1"
            class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 mx_RoomHeader_heading"
            dir="auto"
            role="heading"
          >
            <span
              class="mx_RoomHeader_truncated mx_lineClamp"
            >
              @user:example.com
            </span>
          </div>
        </div>
      </button>
    </header>
    <div
      class="mx_RoomView_body"
    >
      <div
        class="mx_LargeLoader"
      >
        <div
          class="mx_Spinner"
        >
          <div
            aria-label="Loading…"
            class="mx_Spinner_icon"
            data-testid="spinner"
            role="progressbar"
            style="width: 45px; height: 45px;"
          />
        </div>
        <div
          class="mx_LargeLoader_text"
        >
          We're creating a room with @user:example.com
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`RoomView for a local room in state ERROR should match the snapshot 1`] = `
<div>
  <div
    class="mx_RoomView mx_RoomView--local"
  >
    <header
      class="_flex_4dswl_9 mx_RoomHeader light-panel"
      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
    >
      <span
        aria-label="Open room settings"
        class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
        data-color="3"
        data-testid="avatar-img"
        data-type="round"
        role="presentation"
        style="--cpd-avatar-size: 40px;"
        tabindex="-1"
      >
        u
      </span>
      <button
        aria-label="Room info"
        class="mx_RoomHeader_infoWrapper"
        tabindex="0"
      >
        <div
          class="mx_RoomHeader_info _box-flex_1odfs_9"
          style="--mx-box-flex: 1;"
        >
          <div
            aria-level="1"
            class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 mx_RoomHeader_heading"
            dir="auto"
            role="heading"
          >
            <span
              class="mx_RoomHeader_truncated mx_lineClamp"
            >
              @user:example.com
            </span>
          </div>
        </div>
      </button>
    </header>
    <main
      aria-label="Room content"
      class="mx_RoomView_body"
    >
      <div
        class="mx_RoomView_timeline"
      >
        <div
          class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
          tabindex="-1"
        >
          <div
            class="mx_RoomView_messageListWrapper"
          >
            <ol
              aria-live="polite"
              class="mx_RoomView_MessageList"
              style="height: 400px;"
            >
              <li
                class="mx_NewRoomIntro"
              >
                <div
                  class="mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon_warning"
                >
                  <div
                    class="mx_EventTileBubble_title"
                  >
                    End-to-end encryption isn't enabled
                  </div>
                  <div
                    class="mx_EventTileBubble_subtitle"
                  >
                    <span>
                       
                      Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites.
                       
                       
                    </span>
                  </div>
                </div>
                <button
                  aria-label="Avatar"
                  aria-live="off"
                  class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
                  data-color="3"
                  data-testid="avatar-img"
                  data-type="round"
                  role="button"
                  style="--cpd-avatar-size: 52px;"
                >
                  u
                </button>
                <h2>
                  @user:example.com
                </h2>
                <p>
                  <span>
                    Send your first message to invite 
                    <strong>
                      @user:example.com
                    </strong>
                     to chat
                  </span>
                </p>
              </li>
            </ol>
          </div>
        </div>
      </div>
      <div
        class="mx_RoomStatusBar mx_RoomStatusBar_unsentMessages"
      >
        <div
          role="alert"
        >
          <div
            class="mx_RoomStatusBar_unsentBadge"
          >
            <div
              class="mx_NotificationBadge mx_NotificationBadge_visible mx_NotificationBadge_level_highlight mx_NotificationBadge_2char cpd-theme-light"
            >
              <span
                class="mx_NotificationBadge_count"
              >
                !
              </span>
            </div>
          </div>
          <div>
            <div
              class="mx_RoomStatusBar_unsentTitle"
            >
              Some of your messages have not been sent
            </div>
          </div>
          <div
            class="mx_RoomStatusBar_unsentButtonBar"
          >
            <div
              class="mx_AccessibleButton mx_RoomStatusBar_unsentRetry"
              role="button"
              tabindex="0"
            >
              Retry
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>
`;

exports[`RoomView for a local room in state NEW should match the snapshot 1`] = `
<div>
  <div
    class="mx_RoomView mx_RoomView--local"
  >
    <header
      class="_flex_4dswl_9 mx_RoomHeader light-panel"
      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
    >
      <span
        aria-label="Open room settings"
        class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
        data-color="3"
        data-testid="avatar-img"
        data-type="round"
        role="presentation"
        style="--cpd-avatar-size: 40px;"
        tabindex="-1"
      >
        u
      </span>
      <button
        aria-label="Room info"
        class="mx_RoomHeader_infoWrapper"
        tabindex="0"
      >
        <div
          class="mx_RoomHeader_info _box-flex_1odfs_9"
          style="--mx-box-flex: 1;"
        >
          <div
            aria-level="1"
            class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 mx_RoomHeader_heading"
            dir="auto"
            role="heading"
          >
            <span
              class="mx_RoomHeader_truncated mx_lineClamp"
            >
              @user:example.com
            </span>
          </div>
        </div>
      </button>
    </header>
    <main
      aria-label="Room content"
      class="mx_RoomView_body"
    >
      <div
        class="mx_RoomView_timeline"
      >
        <div
          class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
          tabindex="-1"
        >
          <div
            class="mx_RoomView_messageListWrapper"
          >
            <ol
              aria-live="polite"
              class="mx_RoomView_MessageList"
              style="height: 400px;"
            >
              <li
                class="mx_NewRoomIntro"
              >
                <div
                  class="mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon_warning"
                >
                  <div
                    class="mx_EventTileBubble_title"
                  >
                    End-to-end encryption isn't enabled
                  </div>
                  <div
                    class="mx_EventTileBubble_subtitle"
                  >
                    <span>
                       
                      Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites.
                       
                       
                    </span>
                  </div>
                </div>
                <button
                  aria-label="Avatar"
                  aria-live="off"
                  class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
                  data-color="3"
                  data-testid="avatar-img"
                  data-type="round"
                  role="button"
                  style="--cpd-avatar-size: 52px;"
                >
                  u
                </button>
                <h2>
                  @user:example.com
                </h2>
                <p>
                  <span>
                    Send your first message to invite 
                    <strong>
                      @user:example.com
                    </strong>
                     to chat
                  </span>
                </p>
              </li>
            </ol>
          </div>
        </div>
      </div>
      <div
        aria-label="Message composer"
        class="mx_MessageComposer mx_MessageComposer_e2eStatus"
        role="region"
      >
        <div
          class="mx_MessageComposer_wrapper"
        >
          <div
            class="mx_MessageComposer_row"
          >
            <div
              class="mx_MessageComposer_e2eIconWrapper"
            >
              <svg
                aria-label="Messages in this room are not end-to-end encrypted"
                aria-labelledby="_r_jb_"
                class="mx_E2EIcon mx_MessageComposer_e2eIcon"
                color="var(--cpd-color-icon-info-primary)"
                fill="currentColor"
                height="12"
                viewBox="0 0 24 24"
                width="12"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M6 22q-.825 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412a2 2 0 0 1 .702-.463L1.333 4.167a1 1 0 0 1 1.414-1.414L7 7.006v-.012l13 13v.012l1.247 1.247a1 1 0 1 1-1.414 1.414l-.896-.896A1.94 1.94 0 0 1 18 22zm14-4.834V10q0-.825-.587-1.412A1.93 1.93 0 0 0 18 8h-1V6q0-2.075-1.463-3.537Q14.075 1 12 1T8.463 2.463a4.9 4.9 0 0 0-1.22 1.946L9 6.166V6q0-1.25.875-2.125A2.9 2.9 0 0 1 12 3q1.25 0 2.125.875T15 6v2h-4.166z"
                />
              </svg>
            </div>
            <div
              class="mx_SendMessageComposer"
            >
              <div
                class="mx_BasicMessageComposer"
              >
                <div
                  aria-label="Formatting"
                  class="mx_MessageComposerFormatBar"
                  role="toolbar"
                >
                  <button
                    aria-label="Bold"
                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                    role="button"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      fill="currentColor"
                      height="1em"
                      viewBox="0 0 24 24"
                      width="1em"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M8.8 19q-.824 0-1.413-.587A1.93 1.93 0 0 1 6.8 17V7q0-.824.587-1.412A1.93 1.93 0 0 1 8.8 5h3.525q1.624 0 3 1T16.7 8.775q0 1.275-.575 1.963-.575.687-1.075.987.626.275 1.387 1.025.763.75.763 2.25 0 2.224-1.625 3.113-1.625.887-3.05.887zm1.025-2.8h2.6q1.2 0 1.462-.612.263-.614.263-.888 0-.275-.263-.887-.262-.613-1.537-.613H9.825zm0-5.7h2.325q.825 0 1.2-.425a1.4 1.4 0 0 0 .375-.95q0-.6-.425-.975t-1.1-.375H9.825z"
                      />
                    </svg>
                  </button>
                  <button
                    aria-label="Italics"
                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                    role="button"
                    tabindex="-1"
                    type="button"
                  >
                    <svg
                      fill="currentColor"
                      height="1em"
                      viewBox="0 0 24 24"
                      width="1em"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M6.25 19q-.525 0-.888-.363A1.2 1.2 0 0 1 5 17.75q0-.525.362-.887.363-.363.888-.363H9l3-9H9.25q-.525 0-.887-.362A1.2 1.2 0 0 1 8 6.25q0-.525.363-.888Q8.725 5 9.25 5h7.5q.525 0 .887.362.363.363.363.888t-.363.888a1.2 1.2 0 0 1-.887.362H14.5l-3 9h2.25q.525 0 .887.363.363.362.363.887t-.363.887a1.2 1.2 0 0 1-.887.363z"
                      />
                    </svg>
                  </button>
                  <button
                    aria-label="Strikethrough"
                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                    role="button"
                    tabindex="-1"
                    type="button"
                  >
                    <svg
                      fill="currentColor"
                      height="1em"
                      viewBox="0 0 24 24"
                      width="1em"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M12.15 20q-1.9 0-3.375-1.125T6.65 15.8l2.2-.95q.35 1.2 1.213 1.975.861.775 2.137.775 1.05 0 1.9-.5t.85-1.6q0-.45-.175-.825A2.4 2.4 0 0 0 14.3 14h2.8a4.3 4.3 0 0 1 .25 1.5q0 2.15-1.538 3.325Q14.277 20 12.15 20M3 12a.97.97 0 0 1-.712-.287A.97.97 0 0 1 2 11q0-.424.288-.713A.97.97 0 0 1 3 10h18q.424 0 .712.287.288.288.288.713 0 .424-.288.713A.97.97 0 0 1 21 12zm9.05-8.15q1.65 0 2.887.812T16.85 7.15l-2.2.975a3 3 0 0 0-.838-1.3Q13.2 6.25 12.1 6.25q-1.025 0-1.7.462-.675.463-.75 1.288h-2.4q.05-1.725 1.363-2.938Q9.925 3.85 12.05 3.85"
                      />
                    </svg>
                  </button>
                  <button
                    aria-label="Code block"
                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                    role="button"
                    tabindex="-1"
                    type="button"
                  >
                    <svg
                      fill="currentColor"
                      height="1em"
                      viewBox="0 0 24 24"
                      width="1em"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M14.958 5.62a1 1 0 0 0-1.916-.574l-4 13.333a1 1 0 0 0 1.916.575zM5.974 7.232a1 1 0 0 0-1.409.128l-3.333 4a1 1 0 0 0 0 1.28l3.333 4a1 1 0 1 0 1.537-1.28L3.302 12l2.8-3.36a1 1 0 0 0-.128-1.408m12.053 0a1 1 0 0 1 1.408.128l3.333 4a1 1 0 0 1 0 1.28l-3.333 4a1 1 0 1 1-1.537-1.28l2.8-3.36-2.8-3.36a1 1 0 0 1 .128-1.408"
                      />
                    </svg>
                  </button>
                  <button
                    aria-label="Quote"
                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                    role="button"
                    tabindex="-1"
                    type="button"
                  >
                    <svg
                      fill="currentColor"
                      height="1em"
                      viewBox="0 0 24 24"
                      width="1em"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M4.719 4.34c.094-.642-.366-1.236-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.237 1.028 1.328.663.092 1.276-.354 1.371-.996zm12.115 10.174c.095-.642-.366-1.237-1.028-1.328-.662-.092-1.276.354-1.37.996l-.809 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.277-.354 1.371-.996zM9.318 3.009c.665.077 1.138.662 1.058 1.306l-.022.175a221 221 0 0 1-.266 2.006c-.161 1.171-.368 2.579-.535 3.386-.13.636-.769 1.049-1.425.921s-1.082-.745-.95-1.381c.148-.72.345-2.052.509-3.237a191 191 0 0 0 .262-1.981l.021-.17c.08-.644.684-1.103 1.348-1.025m13.17 11.505c.094-.642-.366-1.237-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.276-.354 1.371-.996z"
                      />
                    </svg>
                  </button>
                  <button
                    aria-label="Insert link"
                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                    role="button"
                    tabindex="-1"
                    type="button"
                  >
                    <svg
                      fill="currentColor"
                      height="1em"
                      viewBox="0 0 24 24"
                      width="1em"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M12 19.071q-1.467 1.467-3.536 1.467-2.067 0-3.535-1.467t-1.467-3.535q0-2.07 1.467-3.536L7.05 9.879q.3-.3.707-.3t.707.3.301.707-.3.707l-2.122 2.121a2.9 2.9 0 0 0-.884 2.122q0 1.237.884 2.12.884.885 2.121.885t2.122-.884l2.121-2.121q.3-.3.707-.3t.707.3.3.707q0 .405-.3.707zm-1.414-4.243q-.3.3-.707.301a.97.97 0 0 1-.707-.3q-.3-.3-.301-.708 0-.405.3-.707l4.243-4.242q.3-.3.707-.3t.707.3.3.707-.3.707zm6.364-.707q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.301-.707 0-.405.3-.707l2.122-2.121q.884-.885.884-2.121 0-1.238-.884-2.122a2.9 2.9 0 0 0-2.121-.884q-1.237 0-2.122.884l-2.121 2.122q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.3-.708 0-.405.3-.707L12 4.93q1.467-1.467 3.536-1.467t3.535 1.467 1.467 3.536T19.071 12z"
                      />
                    </svg>
                  </button>
                </div>
                <div
                  aria-autocomplete="list"
                  aria-disabled="false"
                  aria-haspopup="listbox"
                  aria-label="Send an unencrypted message…"
                  aria-multiline="true"
                  class="mx_BasicMessageComposer_input mx_BasicMessageComposer_input_shouldShowPillAvatar mx_BasicMessageComposer_inputEmpty"
                  contenteditable="true"
                  data-testid="basicmessagecomposer"
                  dir="auto"
                  role="textbox"
                  style="--placeholder: 'Send\\ an\\ unencrypted\\ message…';"
                  tabindex="0"
                  translate="no"
                >
                  <div>
                    <br />
                  </div>
                </div>
              </div>
            </div>
            <div
              class="mx_MessageComposer_actions"
            >
              <div
                aria-label="Emoji"
                class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
                role="button"
                tabindex="0"
              />
              <div
                aria-label="Attachment"
                class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
                role="button"
                tabindex="0"
              />
              <div
                aria-label="More options"
                class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
                role="button"
                tabindex="0"
              />
              <input
                multiple=""
                style="display: none;"
                type="file"
              />
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>
`;

exports[`RoomView for a local room in state NEW that is encrypted should match the snapshot 1`] = `
<div>
  <div
    class="mx_RoomView mx_RoomView--local"
  >
    <header
      class="_flex_4dswl_9 mx_RoomHeader light-panel"
      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
    >
      <span
        aria-label="Open room settings"
        class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
        data-color="3"
        data-testid="avatar-img"
        data-type="round"
        role="presentation"
        style="--cpd-avatar-size: 40px;"
        tabindex="-1"
      >
        u
      </span>
      <button
        aria-label="Room info"
        class="mx_RoomHeader_infoWrapper"
        tabindex="0"
      >
        <div
          class="mx_RoomHeader_info _box-flex_1odfs_9"
          style="--mx-box-flex: 1;"
        >
          <div
            aria-level="1"
            class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 mx_RoomHeader_heading"
            dir="auto"
            role="heading"
          >
            <span
              class="mx_RoomHeader_truncated mx_lineClamp"
            >
              @user:example.com
            </span>
          </div>
        </div>
      </button>
    </header>
    <main
      aria-label="Room content"
      class="mx_RoomView_body"
    >
      <div
        class="mx_RoomView_timeline"
      >
        <div
          class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
          tabindex="-1"
        >
          <div
            class="mx_RoomView_messageListWrapper"
          >
            <ol
              aria-live="polite"
              class="mx_RoomView_MessageList"
              style="height: 400px;"
            >
              <div
                class="mx_EventTileBubble mx_cryptoEvent mx_cryptoEvent_icon"
              >
                <div
                  class="mx_EventTileBubble_title"
                >
                  Encryption enabled
                </div>
                <div
                  class="mx_EventTileBubble_subtitle"
                >
                  Messages in this chat will be end-to-end encrypted.
                </div>
              </div>
              <li
                class="mx_NewRoomIntro"
              >
                <button
                  aria-label="Avatar"
                  aria-live="off"
                  class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
                  data-color="3"
                  data-testid="avatar-img"
                  data-type="round"
                  role="button"
                  style="--cpd-avatar-size: 52px;"
                >
                  u
                </button>
                <h2>
                  @user:example.com
                </h2>
                <p>
                  <span>
                    Send your first message to invite 
                    <strong>
                      @user:example.com
                    </strong>
                     to chat
                  </span>
                </p>
              </li>
            </ol>
          </div>
        </div>
      </div>
      <div
        aria-label="Message composer"
        class="mx_MessageComposer"
        role="region"
      >
        <div
          class="mx_MessageComposer_wrapper"
        >
          <div
            class="mx_MessageComposer_row"
          >
            <div
              class="mx_SendMessageComposer"
            >
              <div
                class="mx_BasicMessageComposer"
              >
                <div
                  aria-label="Formatting"
                  class="mx_MessageComposerFormatBar"
                  role="toolbar"
                >
                  <button
                    aria-label="Bold"
                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                    role="button"
                    tabindex="0"
                    type="button"
                  >
                    <svg
                      fill="currentColor"
                      height="1em"
                      viewBox="0 0 24 24"
                      width="1em"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M8.8 19q-.824 0-1.413-.587A1.93 1.93 0 0 1 6.8 17V7q0-.824.587-1.412A1.93 1.93 0 0 1 8.8 5h3.525q1.624 0 3 1T16.7 8.775q0 1.275-.575 1.963-.575.687-1.075.987.626.275 1.387 1.025.763.75.763 2.25 0 2.224-1.625 3.113-1.625.887-3.05.887zm1.025-2.8h2.6q1.2 0 1.462-.612.263-.614.263-.888 0-.275-.263-.887-.262-.613-1.537-.613H9.825zm0-5.7h2.325q.825 0 1.2-.425a1.4 1.4 0 0 0 .375-.95q0-.6-.425-.975t-1.1-.375H9.825z"
                      />
                    </svg>
                  </button>
                  <button
                    aria-label="Italics"
                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                    role="button"
                    tabindex="-1"
                    type="button"
                  >
                    <svg
                      fill="currentColor"
                      height="1em"
                      viewBox="0 0 24 24"
                      width="1em"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M6.25 19q-.525 0-.888-.363A1.2 1.2 0 0 1 5 17.75q0-.525.362-.887.363-.363.888-.363H9l3-9H9.25q-.525 0-.887-.362A1.2 1.2 0 0 1 8 6.25q0-.525.363-.888Q8.725 5 9.25 5h7.5q.525 0 .887.362.363.363.363.888t-.363.888a1.2 1.2 0 0 1-.887.362H14.5l-3 9h2.25q.525 0 .887.363.363.362.363.887t-.363.887a1.2 1.2 0 0 1-.887.363z"
                      />
                    </svg>
                  </button>
                  <button
                    aria-label="Strikethrough"
                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                    role="button"
                    tabindex="-1"
                    type="button"
                  >
                    <svg
                      fill="currentColor"
                      height="1em"
                      viewBox="0 0 24 24"
                      width="1em"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M12.15 20q-1.9 0-3.375-1.125T6.65 15.8l2.2-.95q.35 1.2 1.213 1.975.861.775 2.137.775 1.05 0 1.9-.5t.85-1.6q0-.45-.175-.825A2.4 2.4 0 0 0 14.3 14h2.8a4.3 4.3 0 0 1 .25 1.5q0 2.15-1.538 3.325Q14.277 20 12.15 20M3 12a.97.97 0 0 1-.712-.287A.97.97 0 0 1 2 11q0-.424.288-.713A.97.97 0 0 1 3 10h18q.424 0 .712.287.288.288.288.713 0 .424-.288.713A.97.97 0 0 1 21 12zm9.05-8.15q1.65 0 2.887.812T16.85 7.15l-2.2.975a3 3 0 0 0-.838-1.3Q13.2 6.25 12.1 6.25q-1.025 0-1.7.462-.675.463-.75 1.288h-2.4q.05-1.725 1.363-2.938Q9.925 3.85 12.05 3.85"
                      />
                    </svg>
                  </button>
                  <button
                    aria-label="Code block"
                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                    role="button"
                    tabindex="-1"
                    type="button"
                  >
                    <svg
                      fill="currentColor"
                      height="1em"
                      viewBox="0 0 24 24"
                      width="1em"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M14.958 5.62a1 1 0 0 0-1.916-.574l-4 13.333a1 1 0 0 0 1.916.575zM5.974 7.232a1 1 0 0 0-1.409.128l-3.333 4a1 1 0 0 0 0 1.28l3.333 4a1 1 0 1 0 1.537-1.28L3.302 12l2.8-3.36a1 1 0 0 0-.128-1.408m12.053 0a1 1 0 0 1 1.408.128l3.333 4a1 1 0 0 1 0 1.28l-3.333 4a1 1 0 1 1-1.537-1.28l2.8-3.36-2.8-3.36a1 1 0 0 1 .128-1.408"
                      />
                    </svg>
                  </button>
                  <button
                    aria-label="Quote"
                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                    role="button"
                    tabindex="-1"
                    type="button"
                  >
                    <svg
                      fill="currentColor"
                      height="1em"
                      viewBox="0 0 24 24"
                      width="1em"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M4.719 4.34c.094-.642-.366-1.236-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.237 1.028 1.328.663.092 1.276-.354 1.371-.996zm12.115 10.174c.095-.642-.366-1.237-1.028-1.328-.662-.092-1.276.354-1.37.996l-.809 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.277-.354 1.371-.996zM9.318 3.009c.665.077 1.138.662 1.058 1.306l-.022.175a221 221 0 0 1-.266 2.006c-.161 1.171-.368 2.579-.535 3.386-.13.636-.769 1.049-1.425.921s-1.082-.745-.95-1.381c.148-.72.345-2.052.509-3.237a191 191 0 0 0 .262-1.981l.021-.17c.08-.644.684-1.103 1.348-1.025m13.17 11.505c.094-.642-.366-1.237-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.276-.354 1.371-.996z"
                      />
                    </svg>
                  </button>
                  <button
                    aria-label="Insert link"
                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                    role="button"
                    tabindex="-1"
                    type="button"
                  >
                    <svg
                      fill="currentColor"
                      height="1em"
                      viewBox="0 0 24 24"
                      width="1em"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M12 19.071q-1.467 1.467-3.536 1.467-2.067 0-3.535-1.467t-1.467-3.535q0-2.07 1.467-3.536L7.05 9.879q.3-.3.707-.3t.707.3.301.707-.3.707l-2.122 2.121a2.9 2.9 0 0 0-.884 2.122q0 1.237.884 2.12.884.885 2.121.885t2.122-.884l2.121-2.121q.3-.3.707-.3t.707.3.3.707q0 .405-.3.707zm-1.414-4.243q-.3.3-.707.301a.97.97 0 0 1-.707-.3q-.3-.3-.301-.708 0-.405.3-.707l4.243-4.242q.3-.3.707-.3t.707.3.3.707-.3.707zm6.364-.707q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.301-.707 0-.405.3-.707l2.122-2.121q.884-.885.884-2.121 0-1.238-.884-2.122a2.9 2.9 0 0 0-2.121-.884q-1.237 0-2.122.884l-2.121 2.122q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.3-.708 0-.405.3-.707L12 4.93q1.467-1.467 3.536-1.467t3.535 1.467 1.467 3.536T19.071 12z"
                      />
                    </svg>
                  </button>
                </div>
                <div
                  aria-autocomplete="list"
                  aria-disabled="false"
                  aria-haspopup="listbox"
                  aria-label="Send a message…"
                  aria-multiline="true"
                  class="mx_BasicMessageComposer_input mx_BasicMessageComposer_input_shouldShowPillAvatar mx_BasicMessageComposer_inputEmpty"
                  contenteditable="true"
                  data-testid="basicmessagecomposer"
                  dir="auto"
                  role="textbox"
                  style="--placeholder: 'Send\\ a\\ message…';"
                  tabindex="0"
                  translate="no"
                >
                  <div>
                    <br />
                  </div>
                </div>
              </div>
            </div>
            <div
              class="mx_MessageComposer_actions"
            >
              <div
                aria-label="Emoji"
                class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
                role="button"
                tabindex="0"
              />
              <div
                aria-label="Attachment"
                class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
                role="button"
                tabindex="0"
              />
              <div
                aria-label="More options"
                class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
                role="button"
                tabindex="0"
              />
              <input
                multiple=""
                style="display: none;"
                type="file"
              />
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>
`;

exports[`RoomView invites renders an invite room 1`] = `
<DocumentFragment>
  <div
    class="mx_RoomView"
  >
    <div
      class="mx_RoomPreviewBar mx_RoomPreviewBar_Invite mx_RoomPreviewBar_dialog"
      role="complementary"
    >
      <div
        class="mx_RoomPreviewBar_message"
      >
        <h3>
          Do you want to join !roomviewinvitesrendersaninviteroom:example.org?
        </h3>
        <p>
          <span
            class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
            data-color="2"
            data-testid="avatar-img"
            data-type="round"
            role="presentation"
            style="--cpd-avatar-size: 36px;"
          >
            !
          </span>
        </p>
        <p>
          <span>
            Invited by 
            <span
              class="mx_RoomPreviewBar_inviter"
            >
              @bob:example.org
            </span>
          </span>
        </p>
      </div>
      <div
        class="mx_RoomPreviewBar_actions"
      >
        <div
          class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
          role="button"
          tabindex="0"
        >
          Accept
        </div>
        <div
          class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary"
          role="button"
          tabindex="0"
        >
          Decline
        </div>
        <button
          class="_button_vczzf_8 _destructive_vczzf_107"
          data-kind="tertiary"
          data-size="lg"
          role="button"
          tabindex="0"
        >
          Decline and block
        </button>
      </div>
      <div
        class="mx_RoomPreviewBar_footer"
      />
    </div>
  </div>
</DocumentFragment>
`;

exports[`RoomView should hide the composer when hideComposer=true 1`] = `
<DocumentFragment>
  <div
    class="mx_RoomView"
  >
    <canvas
      aria-hidden="true"
      height="768"
      style="display: block; z-index: 999999; pointer-events: none; position: fixed; top: 0px; right: 0px;"
      width="0"
    />
    <div
      class="mx_MainSplit"
    >
      <div
        class="mx_RoomView_body mx_MainSplit_timeline"
        data-layout="group"
      >
        <header
          class="_flex_4dswl_9 mx_RoomHeader light-panel"
          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
        >
          <button
            aria-label="Open room settings"
            aria-live="off"
            class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
            data-color="2"
            data-testid="avatar-img"
            data-type="round"
            role="button"
            style="--cpd-avatar-size: 40px;"
            tabindex="-1"
          >
            !
          </button>
          <button
            aria-label="Room info"
            class="mx_RoomHeader_infoWrapper"
            tabindex="0"
          >
            <div
              class="mx_RoomHeader_info _box-flex_1odfs_9"
              style="--mx-box-flex: 1;"
            >
              <div
                aria-level="1"
                class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 mx_RoomHeader_heading"
                dir="auto"
                role="heading"
              >
                <span
                  class="mx_RoomHeader_truncated mx_lineClamp"
                >
                  !roomviewshouldhidethecomposerwhenhidecomposertrue:example.org
                </span>
              </div>
            </div>
          </button>
          <button
            aria-disabled="false"
            aria-label="Video call"
            class="_icon-button_1pz9o_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
            tabindex="0"
          >
            <div
              class="_indicator-icon_zr2a0_17"
              style="--cpd-icon-button-size: 100%;"
            >
              <svg
                aria-labelledby="_r_0_"
                fill="currentColor"
                height="1em"
                viewBox="0 0 24 24"
                width="1em"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
                />
              </svg>
            </div>
          </button>
          <button
            aria-disabled="false"
            aria-label="Voice call"
            aria-labelledby="_r_5_"
            class="_icon-button_1pz9o_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
            tabindex="0"
          >
            <div
              class="_indicator-icon_zr2a0_17"
              style="--cpd-icon-button-size: 100%;"
            >
              <svg
                fill="currentColor"
                height="1em"
                viewBox="0 0 24 24"
                width="1em"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="m20.958 16.374.039 3.527q0 .427-.33.756-.33.33-.756.33a16 16 0 0 1-6.57-1.105 16.2 16.2 0 0 1-5.563-3.663 16.1 16.1 0 0 1-3.653-5.573 16.3 16.3 0 0 1-1.115-6.56q0-.427.33-.757T4.095 3l3.528.039a1.07 1.07 0 0 1 1.085.93l.543 3.954q.039.271-.039.504a1.1 1.1 0 0 1-.271.426l-1.64 1.64q.505 1.008 1.154 1.909c.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444q.9.65 1.909 1.153l1.64-1.64q.193-.193.426-.27t.504-.04l3.954.543q.406.059.668.359t.262.727"
                />
              </svg>
            </div>
          </button>
          <button
            aria-label="Threads"
            aria-labelledby="_r_a_"
            class="_icon-button_1pz9o_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
            tabindex="0"
          >
            <div
              class="_indicator-icon_zr2a0_17"
              style="--cpd-icon-button-size: 100%;"
            >
              <svg
                class=""
                fill="currentColor"
                height="1em"
                viewBox="0 0 24 24"
                width="1em"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2m3 7h10q.424 0 .712-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.288-.713A.97.97 0 0 0 17 8H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .424.287.713Q6.576 10 7 10m0 4h6q.424 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .424.287.713Q6.576 14 7 14"
                />
              </svg>
            </div>
          </button>
          <button
            aria-label="Room info"
            aria-labelledby="_r_f_"
            class="_icon-button_1pz9o_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
            tabindex="0"
          >
            <div
              class="_indicator-icon_zr2a0_17"
              style="--cpd-icon-button-size: 100%;"
            >
              <svg
                class=""
                fill="currentColor"
                height="1em"
                viewBox="0 0 24 24"
                width="1em"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16v-4a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 11a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 12v4q0 .424.287.712.288.288.713.288m0-8q.424 0 .713-.287A.97.97 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8q0 .424.287.713Q11.576 9 12 9m0 13a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
                />
              </svg>
            </div>
          </button>
          <div
            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41"
          >
            <div
              aria-label="0 members"
              aria-labelledby="_r_k_"
              class="mx_AccessibleButton mx_FacePile"
              role="button"
              tabindex="0"
            >
              <div
                class="_stacked-avatars_1qbcf_102"
              />
              0
            </div>
          </div>
        </header>
        <div
          class="mx_AutoHideScrollbar mx_AuxPanel"
          role="region"
          tabindex="-1"
        >
          <div />
        </div>
        <main
          class="mx_RoomView_timeline mx_RoomView_timeline_rr_enabled"
        >
          <div
            class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
            tabindex="-1"
          >
            <div
              class="mx_RoomView_messageListWrapper"
            >
              <ol
                aria-live="polite"
                class="mx_RoomView_MessageList"
                style="height: 400px;"
              />
            </div>
          </div>
        </main>
        <div
          aria-label="Room status bar"
          class="mx_RoomView_statusArea"
          role="region"
        >
          <div
            class="mx_RoomView_statusAreaBox"
          >
            <div
              class="mx_RoomView_statusAreaBox_line"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</DocumentFragment>
`;

exports[`RoomView should hide the header when hideHeader=true 1`] = `
<DocumentFragment>
  <div
    class="mx_RoomView"
  >
    <canvas
      aria-hidden="true"
      height="768"
      style="display: block; z-index: 999999; pointer-events: none; position: fixed; top: 0px; right: 0px;"
      width="0"
    />
    <div
      class="mx_MainSplit"
    >
      <div
        class="mx_RoomView_body mx_MainSplit_timeline"
        data-layout="group"
      >
        <div
          class="mx_AutoHideScrollbar mx_AuxPanel"
          role="region"
          tabindex="-1"
        >
          <div />
        </div>
        <main
          class="mx_RoomView_timeline mx_RoomView_timeline_rr_enabled"
        >
          <div
            class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
            tabindex="-1"
          >
            <div
              class="mx_RoomView_messageListWrapper"
            >
              <ol
                aria-live="polite"
                class="mx_RoomView_MessageList"
                style="height: 400px;"
              />
            </div>
          </div>
        </main>
        <div
          aria-label="Room status bar"
          class="mx_RoomView_statusArea"
          role="region"
        >
          <div
            class="mx_RoomView_statusAreaBox"
          >
            <div
              class="mx_RoomView_statusAreaBox_line"
            />
          </div>
        </div>
        <div
          aria-label="Message composer"
          class="mx_MessageComposer mx_MessageComposer_e2eStatus"
          role="region"
        >
          <div
            class="mx_MessageComposer_wrapper"
          >
            <div
              class="mx_MessageComposer_row"
            >
              <div
                class="mx_MessageComposer_e2eIconWrapper"
              >
                <svg
                  aria-label="Messages in this room are not end-to-end encrypted"
                  aria-labelledby="_r_14_"
                  class="mx_E2EIcon mx_MessageComposer_e2eIcon"
                  color="var(--cpd-color-icon-info-primary)"
                  fill="currentColor"
                  height="12"
                  viewBox="0 0 24 24"
                  width="12"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M6 22q-.825 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412a2 2 0 0 1 .702-.463L1.333 4.167a1 1 0 0 1 1.414-1.414L7 7.006v-.012l13 13v.012l1.247 1.247a1 1 0 1 1-1.414 1.414l-.896-.896A1.94 1.94 0 0 1 18 22zm14-4.834V10q0-.825-.587-1.412A1.93 1.93 0 0 0 18 8h-1V6q0-2.075-1.463-3.537Q14.075 1 12 1T8.463 2.463a4.9 4.9 0 0 0-1.22 1.946L9 6.166V6q0-1.25.875-2.125A2.9 2.9 0 0 1 12 3q1.25 0 2.125.875T15 6v2h-4.166z"
                  />
                </svg>
              </div>
              <div
                class="mx_SendMessageComposer"
              >
                <div
                  class="mx_BasicMessageComposer"
                >
                  <div
                    aria-label="Formatting"
                    class="mx_MessageComposerFormatBar"
                    role="toolbar"
                  >
                    <button
                      aria-label="Bold"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                      role="button"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M8.8 19q-.824 0-1.413-.587A1.93 1.93 0 0 1 6.8 17V7q0-.824.587-1.412A1.93 1.93 0 0 1 8.8 5h3.525q1.624 0 3 1T16.7 8.775q0 1.275-.575 1.963-.575.687-1.075.987.626.275 1.387 1.025.763.75.763 2.25 0 2.224-1.625 3.113-1.625.887-3.05.887zm1.025-2.8h2.6q1.2 0 1.462-.612.263-.614.263-.888 0-.275-.263-.887-.262-.613-1.537-.613H9.825zm0-5.7h2.325q.825 0 1.2-.425a1.4 1.4 0 0 0 .375-.95q0-.6-.425-.975t-1.1-.375H9.825z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Italics"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                      role="button"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M6.25 19q-.525 0-.888-.363A1.2 1.2 0 0 1 5 17.75q0-.525.362-.887.363-.363.888-.363H9l3-9H9.25q-.525 0-.887-.362A1.2 1.2 0 0 1 8 6.25q0-.525.363-.888Q8.725 5 9.25 5h7.5q.525 0 .887.362.363.363.363.888t-.363.888a1.2 1.2 0 0 1-.887.362H14.5l-3 9h2.25q.525 0 .887.363.363.362.363.887t-.363.887a1.2 1.2 0 0 1-.887.363z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Strikethrough"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                      role="button"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M12.15 20q-1.9 0-3.375-1.125T6.65 15.8l2.2-.95q.35 1.2 1.213 1.975.861.775 2.137.775 1.05 0 1.9-.5t.85-1.6q0-.45-.175-.825A2.4 2.4 0 0 0 14.3 14h2.8a4.3 4.3 0 0 1 .25 1.5q0 2.15-1.538 3.325Q14.277 20 12.15 20M3 12a.97.97 0 0 1-.712-.287A.97.97 0 0 1 2 11q0-.424.288-.713A.97.97 0 0 1 3 10h18q.424 0 .712.287.288.288.288.713 0 .424-.288.713A.97.97 0 0 1 21 12zm9.05-8.15q1.65 0 2.887.812T16.85 7.15l-2.2.975a3 3 0 0 0-.838-1.3Q13.2 6.25 12.1 6.25q-1.025 0-1.7.462-.675.463-.75 1.288h-2.4q.05-1.725 1.363-2.938Q9.925 3.85 12.05 3.85"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Code block"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                      role="button"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M14.958 5.62a1 1 0 0 0-1.916-.574l-4 13.333a1 1 0 0 0 1.916.575zM5.974 7.232a1 1 0 0 0-1.409.128l-3.333 4a1 1 0 0 0 0 1.28l3.333 4a1 1 0 1 0 1.537-1.28L3.302 12l2.8-3.36a1 1 0 0 0-.128-1.408m12.053 0a1 1 0 0 1 1.408.128l3.333 4a1 1 0 0 1 0 1.28l-3.333 4a1 1 0 1 1-1.537-1.28l2.8-3.36-2.8-3.36a1 1 0 0 1 .128-1.408"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Quote"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                      role="button"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M4.719 4.34c.094-.642-.366-1.236-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.237 1.028 1.328.663.092 1.276-.354 1.371-.996zm12.115 10.174c.095-.642-.366-1.237-1.028-1.328-.662-.092-1.276.354-1.37.996l-.809 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.277-.354 1.371-.996zM9.318 3.009c.665.077 1.138.662 1.058 1.306l-.022.175a221 221 0 0 1-.266 2.006c-.161 1.171-.368 2.579-.535 3.386-.13.636-.769 1.049-1.425.921s-1.082-.745-.95-1.381c.148-.72.345-2.052.509-3.237a191 191 0 0 0 .262-1.981l.021-.17c.08-.644.684-1.103 1.348-1.025m13.17 11.505c.094-.642-.366-1.237-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.276-.354 1.371-.996z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Insert link"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                      role="button"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M12 19.071q-1.467 1.467-3.536 1.467-2.067 0-3.535-1.467t-1.467-3.535q0-2.07 1.467-3.536L7.05 9.879q.3-.3.707-.3t.707.3.301.707-.3.707l-2.122 2.121a2.9 2.9 0 0 0-.884 2.122q0 1.237.884 2.12.884.885 2.121.885t2.122-.884l2.121-2.121q.3-.3.707-.3t.707.3.3.707q0 .405-.3.707zm-1.414-4.243q-.3.3-.707.301a.97.97 0 0 1-.707-.3q-.3-.3-.301-.708 0-.405.3-.707l4.243-4.242q.3-.3.707-.3t.707.3.3.707-.3.707zm6.364-.707q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.301-.707 0-.405.3-.707l2.122-2.121q.884-.885.884-2.121 0-1.238-.884-2.122a2.9 2.9 0 0 0-2.121-.884q-1.237 0-2.122.884l-2.121 2.122q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.3-.708 0-.405.3-.707L12 4.93q1.467-1.467 3.536-1.467t3.535 1.467 1.467 3.536T19.071 12z"
                        />
                      </svg>
                    </button>
                  </div>
                  <div
                    aria-autocomplete="list"
                    aria-disabled="false"
                    aria-haspopup="listbox"
                    aria-label="Send an unencrypted message…"
                    aria-multiline="true"
                    class="mx_BasicMessageComposer_input mx_BasicMessageComposer_input_shouldShowPillAvatar mx_BasicMessageComposer_inputEmpty"
                    contenteditable="true"
                    data-testid="basicmessagecomposer"
                    dir="auto"
                    role="textbox"
                    style="--placeholder: 'Send\\ an\\ unencrypted\\ message…';"
                    tabindex="0"
                    translate="no"
                  >
                    <div>
                      <br />
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="mx_MessageComposer_actions"
              >
                <div
                  aria-label="Emoji"
                  class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
                  role="button"
                  tabindex="0"
                />
                <div
                  aria-label="Attachment"
                  class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
                  role="button"
                  tabindex="0"
                />
                <div
                  aria-label="More options"
                  class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
                  role="button"
                  tabindex="0"
                />
                <input
                  multiple=""
                  style="display: none;"
                  type="file"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</DocumentFragment>
`;

exports[`RoomView should hide the pinned message banner when hidePinnedMessageBanner=true 1`] = `
<DocumentFragment>
  <div
    class="mx_RoomView"
  >
    <canvas
      aria-hidden="true"
      height="768"
      style="display: block; z-index: 999999; pointer-events: none; position: fixed; top: 0px; right: 0px;"
      width="0"
    />
    <div
      class="mx_MainSplit"
    >
      <div
        class="mx_RoomView_body mx_MainSplit_timeline"
        data-layout="group"
      >
        <header
          class="_flex_4dswl_9 mx_RoomHeader light-panel"
          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
        >
          <button
            aria-label="Open room settings"
            aria-live="off"
            class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
            data-color="2"
            data-testid="avatar-img"
            data-type="round"
            role="button"
            style="--cpd-avatar-size: 40px;"
            tabindex="-1"
          >
            !
          </button>
          <button
            aria-label="Room info"
            class="mx_RoomHeader_infoWrapper"
            tabindex="0"
          >
            <div
              class="mx_RoomHeader_info _box-flex_1odfs_9"
              style="--mx-box-flex: 1;"
            >
              <div
                aria-level="1"
                class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 mx_RoomHeader_heading"
                dir="auto"
                role="heading"
              >
                <span
                  class="mx_RoomHeader_truncated mx_lineClamp"
                >
                  !roomviewshouldhidethepinnedmessagebannerwhenhidepinnedmessagebannertrue:example.org
                </span>
              </div>
            </div>
          </button>
          <button
            aria-disabled="false"
            aria-label="Video call"
            class="_icon-button_1pz9o_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
            tabindex="0"
          >
            <div
              class="_indicator-icon_zr2a0_17"
              style="--cpd-icon-button-size: 100%;"
            >
              <svg
                aria-labelledby="_r_5b_"
                fill="currentColor"
                height="1em"
                viewBox="0 0 24 24"
                width="1em"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
                />
              </svg>
            </div>
          </button>
          <button
            aria-disabled="false"
            aria-label="Voice call"
            aria-labelledby="_r_5g_"
            class="_icon-button_1pz9o_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
            tabindex="0"
          >
            <div
              class="_indicator-icon_zr2a0_17"
              style="--cpd-icon-button-size: 100%;"
            >
              <svg
                fill="currentColor"
                height="1em"
                viewBox="0 0 24 24"
                width="1em"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="m20.958 16.374.039 3.527q0 .427-.33.756-.33.33-.756.33a16 16 0 0 1-6.57-1.105 16.2 16.2 0 0 1-5.563-3.663 16.1 16.1 0 0 1-3.653-5.573 16.3 16.3 0 0 1-1.115-6.56q0-.427.33-.757T4.095 3l3.528.039a1.07 1.07 0 0 1 1.085.93l.543 3.954q.039.271-.039.504a1.1 1.1 0 0 1-.271.426l-1.64 1.64q.505 1.008 1.154 1.909c.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444q.9.65 1.909 1.153l1.64-1.64q.193-.193.426-.27t.504-.04l3.954.543q.406.059.668.359t.262.727"
                />
              </svg>
            </div>
          </button>
          <button
            aria-label="Threads"
            aria-labelledby="_r_5l_"
            class="_icon-button_1pz9o_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
            tabindex="0"
          >
            <div
              class="_indicator-icon_zr2a0_17"
              style="--cpd-icon-button-size: 100%;"
            >
              <svg
                class=""
                fill="currentColor"
                height="1em"
                viewBox="0 0 24 24"
                width="1em"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2m3 7h10q.424 0 .712-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.288-.713A.97.97 0 0 0 17 8H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .424.287.713Q6.576 10 7 10m0 4h6q.424 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .424.287.713Q6.576 14 7 14"
                />
              </svg>
            </div>
          </button>
          <button
            aria-label="Room info"
            aria-labelledby="_r_5q_"
            class="_icon-button_1pz9o_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
            tabindex="0"
          >
            <div
              class="_indicator-icon_zr2a0_17"
              style="--cpd-icon-button-size: 100%;"
            >
              <svg
                class=""
                fill="currentColor"
                height="1em"
                viewBox="0 0 24 24"
                width="1em"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16v-4a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 11a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 12v4q0 .424.287.712.288.288.713.288m0-8q.424 0 .713-.287A.97.97 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8q0 .424.287.713Q11.576 9 12 9m0 13a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
                />
              </svg>
            </div>
          </button>
          <div
            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41"
          >
            <div
              aria-label="0 members"
              aria-labelledby="_r_5v_"
              class="mx_AccessibleButton mx_FacePile"
              role="button"
              tabindex="0"
            >
              <div
                class="_stacked-avatars_1qbcf_102"
              />
              0
            </div>
          </div>
        </header>
        <div
          class="mx_AutoHideScrollbar mx_AuxPanel"
          role="region"
          tabindex="-1"
        >
          <div />
        </div>
        <main
          class="mx_RoomView_timeline mx_RoomView_timeline_rr_enabled"
        >
          <div
            class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
            tabindex="-1"
          >
            <div
              class="mx_RoomView_messageListWrapper"
            >
              <ol
                aria-live="polite"
                class="mx_RoomView_MessageList"
                style="height: 400px;"
              />
            </div>
          </div>
        </main>
        <div
          aria-label="Room status bar"
          class="mx_RoomView_statusArea"
          role="region"
        >
          <div
            class="mx_RoomView_statusAreaBox"
          >
            <div
              class="mx_RoomView_statusAreaBox_line"
            />
          </div>
        </div>
        <div
          aria-label="Message composer"
          class="mx_MessageComposer mx_MessageComposer_e2eStatus"
          role="region"
        >
          <div
            class="mx_MessageComposer_wrapper"
          >
            <div
              class="mx_MessageComposer_row"
            >
              <div
                class="mx_MessageComposer_e2eIconWrapper"
              >
                <svg
                  aria-label="Messages in this room are not end-to-end encrypted"
                  aria-labelledby="_r_6e_"
                  class="mx_E2EIcon mx_MessageComposer_e2eIcon"
                  color="var(--cpd-color-icon-info-primary)"
                  fill="currentColor"
                  height="12"
                  viewBox="0 0 24 24"
                  width="12"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M6 22q-.825 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412a2 2 0 0 1 .702-.463L1.333 4.167a1 1 0 0 1 1.414-1.414L7 7.006v-.012l13 13v.012l1.247 1.247a1 1 0 1 1-1.414 1.414l-.896-.896A1.94 1.94 0 0 1 18 22zm14-4.834V10q0-.825-.587-1.412A1.93 1.93 0 0 0 18 8h-1V6q0-2.075-1.463-3.537Q14.075 1 12 1T8.463 2.463a4.9 4.9 0 0 0-1.22 1.946L9 6.166V6q0-1.25.875-2.125A2.9 2.9 0 0 1 12 3q1.25 0 2.125.875T15 6v2h-4.166z"
                  />
                </svg>
              </div>
              <div
                class="mx_SendMessageComposer"
              >
                <div
                  class="mx_BasicMessageComposer"
                >
                  <div
                    aria-label="Formatting"
                    class="mx_MessageComposerFormatBar"
                    role="toolbar"
                  >
                    <button
                      aria-label="Bold"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                      role="button"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M8.8 19q-.824 0-1.413-.587A1.93 1.93 0 0 1 6.8 17V7q0-.824.587-1.412A1.93 1.93 0 0 1 8.8 5h3.525q1.624 0 3 1T16.7 8.775q0 1.275-.575 1.963-.575.687-1.075.987.626.275 1.387 1.025.763.75.763 2.25 0 2.224-1.625 3.113-1.625.887-3.05.887zm1.025-2.8h2.6q1.2 0 1.462-.612.263-.614.263-.888 0-.275-.263-.887-.262-.613-1.537-.613H9.825zm0-5.7h2.325q.825 0 1.2-.425a1.4 1.4 0 0 0 .375-.95q0-.6-.425-.975t-1.1-.375H9.825z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Italics"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                      role="button"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M6.25 19q-.525 0-.888-.363A1.2 1.2 0 0 1 5 17.75q0-.525.362-.887.363-.363.888-.363H9l3-9H9.25q-.525 0-.887-.362A1.2 1.2 0 0 1 8 6.25q0-.525.363-.888Q8.725 5 9.25 5h7.5q.525 0 .887.362.363.363.363.888t-.363.888a1.2 1.2 0 0 1-.887.362H14.5l-3 9h2.25q.525 0 .887.363.363.362.363.887t-.363.887a1.2 1.2 0 0 1-.887.363z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Strikethrough"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                      role="button"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M12.15 20q-1.9 0-3.375-1.125T6.65 15.8l2.2-.95q.35 1.2 1.213 1.975.861.775 2.137.775 1.05 0 1.9-.5t.85-1.6q0-.45-.175-.825A2.4 2.4 0 0 0 14.3 14h2.8a4.3 4.3 0 0 1 .25 1.5q0 2.15-1.538 3.325Q14.277 20 12.15 20M3 12a.97.97 0 0 1-.712-.287A.97.97 0 0 1 2 11q0-.424.288-.713A.97.97 0 0 1 3 10h18q.424 0 .712.287.288.288.288.713 0 .424-.288.713A.97.97 0 0 1 21 12zm9.05-8.15q1.65 0 2.887.812T16.85 7.15l-2.2.975a3 3 0 0 0-.838-1.3Q13.2 6.25 12.1 6.25q-1.025 0-1.7.462-.675.463-.75 1.288h-2.4q.05-1.725 1.363-2.938Q9.925 3.85 12.05 3.85"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Code block"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                      role="button"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M14.958 5.62a1 1 0 0 0-1.916-.574l-4 13.333a1 1 0 0 0 1.916.575zM5.974 7.232a1 1 0 0 0-1.409.128l-3.333 4a1 1 0 0 0 0 1.28l3.333 4a1 1 0 1 0 1.537-1.28L3.302 12l2.8-3.36a1 1 0 0 0-.128-1.408m12.053 0a1 1 0 0 1 1.408.128l3.333 4a1 1 0 0 1 0 1.28l-3.333 4a1 1 0 1 1-1.537-1.28l2.8-3.36-2.8-3.36a1 1 0 0 1 .128-1.408"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Quote"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                      role="button"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M4.719 4.34c.094-.642-.366-1.236-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.237 1.028 1.328.663.092 1.276-.354 1.371-.996zm12.115 10.174c.095-.642-.366-1.237-1.028-1.328-.662-.092-1.276.354-1.37.996l-.809 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.277-.354 1.371-.996zM9.318 3.009c.665.077 1.138.662 1.058 1.306l-.022.175a221 221 0 0 1-.266 2.006c-.161 1.171-.368 2.579-.535 3.386-.13.636-.769 1.049-1.425.921s-1.082-.745-.95-1.381c.148-.72.345-2.052.509-3.237a191 191 0 0 0 .262-1.981l.021-.17c.08-.644.684-1.103 1.348-1.025m13.17 11.505c.094-.642-.366-1.237-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.276-.354 1.371-.996z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Insert link"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                      role="button"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M12 19.071q-1.467 1.467-3.536 1.467-2.067 0-3.535-1.467t-1.467-3.535q0-2.07 1.467-3.536L7.05 9.879q.3-.3.707-.3t.707.3.301.707-.3.707l-2.122 2.121a2.9 2.9 0 0 0-.884 2.122q0 1.237.884 2.12.884.885 2.121.885t2.122-.884l2.121-2.121q.3-.3.707-.3t.707.3.3.707q0 .405-.3.707zm-1.414-4.243q-.3.3-.707.301a.97.97 0 0 1-.707-.3q-.3-.3-.301-.708 0-.405.3-.707l4.243-4.242q.3-.3.707-.3t.707.3.3.707-.3.707zm6.364-.707q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.301-.707 0-.405.3-.707l2.122-2.121q.884-.885.884-2.121 0-1.238-.884-2.122a2.9 2.9 0 0 0-2.121-.884q-1.237 0-2.122.884l-2.121 2.122q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.3-.708 0-.405.3-.707L12 4.93q1.467-1.467 3.536-1.467t3.535 1.467 1.467 3.536T19.071 12z"
                        />
                      </svg>
                    </button>
                  </div>
                  <div
                    aria-autocomplete="list"
                    aria-disabled="false"
                    aria-haspopup="listbox"
                    aria-label="Send an unencrypted message…"
                    aria-multiline="true"
                    class="mx_BasicMessageComposer_input mx_BasicMessageComposer_input_shouldShowPillAvatar mx_BasicMessageComposer_inputEmpty"
                    contenteditable="true"
                    data-testid="basicmessagecomposer"
                    dir="auto"
                    role="textbox"
                    style="--placeholder: 'Send\\ an\\ unencrypted\\ message…';"
                    tabindex="0"
                    translate="no"
                  >
                    <div>
                      <br />
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="mx_MessageComposer_actions"
              >
                <div
                  aria-label="Emoji"
                  class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
                  role="button"
                  tabindex="0"
                />
                <div
                  aria-label="Attachment"
                  class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
                  role="button"
                  tabindex="0"
                />
                <div
                  aria-label="More options"
                  class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
                  role="button"
                  tabindex="0"
                />
                <input
                  multiple=""
                  style="display: none;"
                  type="file"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</DocumentFragment>
`;

exports[`RoomView should hide the right panel when hideRightPanel=true 1`] = `
<DocumentFragment>
  <div
    class="mx_RoomView"
  >
    <canvas
      aria-hidden="true"
      height="768"
      style="display: block; z-index: 999999; pointer-events: none; position: fixed; top: 0px; right: 0px;"
      width="0"
    />
    <div
      class="mx_MainSplit"
    >
      <div
        class="mx_RoomView_body mx_MainSplit_timeline"
        data-layout="group"
      >
        <header
          class="_flex_4dswl_9 mx_RoomHeader light-panel"
          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
        >
          <button
            aria-label="Open room settings"
            aria-live="off"
            class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
            data-color="2"
            data-testid="avatar-img"
            data-type="round"
            role="button"
            style="--cpd-avatar-size: 40px;"
            tabindex="-1"
          >
            !
          </button>
          <button
            aria-label="Room info"
            class="mx_RoomHeader_infoWrapper"
            tabindex="0"
          >
            <div
              class="mx_RoomHeader_info _box-flex_1odfs_9"
              style="--mx-box-flex: 1;"
            >
              <div
                aria-level="1"
                class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 mx_RoomHeader_heading"
                dir="auto"
                role="heading"
              >
                <span
                  class="mx_RoomHeader_truncated mx_lineClamp"
                >
                  !roomviewshouldhidetherightpanelwhenhiderightpaneltrue:example.org
                </span>
              </div>
            </div>
          </button>
          <button
            aria-disabled="false"
            aria-label="Video call"
            class="_icon-button_1pz9o_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
            tabindex="0"
          >
            <div
              class="_indicator-icon_zr2a0_17"
              style="--cpd-icon-button-size: 100%;"
            >
              <svg
                aria-labelledby="_r_2e_"
                fill="currentColor"
                height="1em"
                viewBox="0 0 24 24"
                width="1em"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
                />
              </svg>
            </div>
          </button>
          <button
            aria-disabled="false"
            aria-label="Voice call"
            aria-labelledby="_r_2j_"
            class="_icon-button_1pz9o_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
            tabindex="0"
          >
            <div
              class="_indicator-icon_zr2a0_17"
              style="--cpd-icon-button-size: 100%;"
            >
              <svg
                fill="currentColor"
                height="1em"
                viewBox="0 0 24 24"
                width="1em"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="m20.958 16.374.039 3.527q0 .427-.33.756-.33.33-.756.33a16 16 0 0 1-6.57-1.105 16.2 16.2 0 0 1-5.563-3.663 16.1 16.1 0 0 1-3.653-5.573 16.3 16.3 0 0 1-1.115-6.56q0-.427.33-.757T4.095 3l3.528.039a1.07 1.07 0 0 1 1.085.93l.543 3.954q.039.271-.039.504a1.1 1.1 0 0 1-.271.426l-1.64 1.64q.505 1.008 1.154 1.909c.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444q.9.65 1.909 1.153l1.64-1.64q.193-.193.426-.27t.504-.04l3.954.543q.406.059.668.359t.262.727"
                />
              </svg>
            </div>
          </button>
          <button
            aria-label="Threads"
            aria-labelledby="_r_2o_"
            class="_icon-button_1pz9o_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
            tabindex="0"
          >
            <div
              class="_indicator-icon_zr2a0_17"
              style="--cpd-icon-button-size: 100%;"
            >
              <svg
                class=""
                fill="currentColor"
                height="1em"
                viewBox="0 0 24 24"
                width="1em"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2m3 7h10q.424 0 .712-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.288-.713A.97.97 0 0 0 17 8H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .424.287.713Q6.576 10 7 10m0 4h6q.424 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .424.287.713Q6.576 14 7 14"
                />
              </svg>
            </div>
          </button>
          <button
            aria-label="Room info"
            aria-labelledby="_r_2t_"
            class="_icon-button_1pz9o_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
            tabindex="0"
          >
            <div
              class="_indicator-icon_zr2a0_17"
              style="--cpd-icon-button-size: 100%;"
            >
              <svg
                class=""
                fill="currentColor"
                height="1em"
                viewBox="0 0 24 24"
                width="1em"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16v-4a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 11a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 12v4q0 .424.287.712.288.288.713.288m0-8q.424 0 .713-.287A.97.97 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8q0 .424.287.713Q11.576 9 12 9m0 13a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
                />
              </svg>
            </div>
          </button>
          <div
            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41"
          >
            <div
              aria-label="0 members"
              aria-labelledby="_r_32_"
              class="mx_AccessibleButton mx_FacePile mx_FacePile_toggled"
              role="button"
              tabindex="0"
            >
              <div
                class="_stacked-avatars_1qbcf_102"
              />
              0
            </div>
          </div>
        </header>
        <div
          class="mx_AutoHideScrollbar mx_AuxPanel"
          role="region"
          tabindex="-1"
        >
          <div />
        </div>
        <main
          class="mx_RoomView_timeline mx_RoomView_timeline_rr_enabled"
        >
          <div
            class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
            tabindex="-1"
          >
            <div
              class="mx_RoomView_messageListWrapper"
            >
              <ol
                aria-live="polite"
                class="mx_RoomView_MessageList"
                style="height: 400px;"
              />
            </div>
          </div>
        </main>
        <div
          aria-label="Room status bar"
          class="mx_RoomView_statusArea"
          role="region"
        >
          <div
            class="mx_RoomView_statusAreaBox"
          >
            <div
              class="mx_RoomView_statusAreaBox_line"
            />
          </div>
        </div>
        <div
          aria-label="Message composer"
          class="mx_MessageComposer mx_MessageComposer_e2eStatus"
          role="region"
        >
          <div
            class="mx_MessageComposer_wrapper"
          >
            <div
              class="mx_MessageComposer_row"
            >
              <div
                class="mx_MessageComposer_e2eIconWrapper"
              >
                <svg
                  aria-label="Messages in this room are not end-to-end encrypted"
                  aria-labelledby="_r_3h_"
                  class="mx_E2EIcon mx_MessageComposer_e2eIcon"
                  color="var(--cpd-color-icon-info-primary)"
                  fill="currentColor"
                  height="12"
                  viewBox="0 0 24 24"
                  width="12"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M6 22q-.825 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412a2 2 0 0 1 .702-.463L1.333 4.167a1 1 0 0 1 1.414-1.414L7 7.006v-.012l13 13v.012l1.247 1.247a1 1 0 1 1-1.414 1.414l-.896-.896A1.94 1.94 0 0 1 18 22zm14-4.834V10q0-.825-.587-1.412A1.93 1.93 0 0 0 18 8h-1V6q0-2.075-1.463-3.537Q14.075 1 12 1T8.463 2.463a4.9 4.9 0 0 0-1.22 1.946L9 6.166V6q0-1.25.875-2.125A2.9 2.9 0 0 1 12 3q1.25 0 2.125.875T15 6v2h-4.166z"
                  />
                </svg>
              </div>
              <div
                class="mx_SendMessageComposer"
              >
                <div
                  class="mx_BasicMessageComposer"
                >
                  <div
                    aria-label="Formatting"
                    class="mx_MessageComposerFormatBar"
                    role="toolbar"
                  >
                    <button
                      aria-label="Bold"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                      role="button"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M8.8 19q-.824 0-1.413-.587A1.93 1.93 0 0 1 6.8 17V7q0-.824.587-1.412A1.93 1.93 0 0 1 8.8 5h3.525q1.624 0 3 1T16.7 8.775q0 1.275-.575 1.963-.575.687-1.075.987.626.275 1.387 1.025.763.75.763 2.25 0 2.224-1.625 3.113-1.625.887-3.05.887zm1.025-2.8h2.6q1.2 0 1.462-.612.263-.614.263-.888 0-.275-.263-.887-.262-.613-1.537-.613H9.825zm0-5.7h2.325q.825 0 1.2-.425a1.4 1.4 0 0 0 .375-.95q0-.6-.425-.975t-1.1-.375H9.825z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Italics"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                      role="button"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M6.25 19q-.525 0-.888-.363A1.2 1.2 0 0 1 5 17.75q0-.525.362-.887.363-.363.888-.363H9l3-9H9.25q-.525 0-.887-.362A1.2 1.2 0 0 1 8 6.25q0-.525.363-.888Q8.725 5 9.25 5h7.5q.525 0 .887.362.363.363.363.888t-.363.888a1.2 1.2 0 0 1-.887.362H14.5l-3 9h2.25q.525 0 .887.363.363.362.363.887t-.363.887a1.2 1.2 0 0 1-.887.363z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Strikethrough"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                      role="button"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M12.15 20q-1.9 0-3.375-1.125T6.65 15.8l2.2-.95q.35 1.2 1.213 1.975.861.775 2.137.775 1.05 0 1.9-.5t.85-1.6q0-.45-.175-.825A2.4 2.4 0 0 0 14.3 14h2.8a4.3 4.3 0 0 1 .25 1.5q0 2.15-1.538 3.325Q14.277 20 12.15 20M3 12a.97.97 0 0 1-.712-.287A.97.97 0 0 1 2 11q0-.424.288-.713A.97.97 0 0 1 3 10h18q.424 0 .712.287.288.288.288.713 0 .424-.288.713A.97.97 0 0 1 21 12zm9.05-8.15q1.65 0 2.887.812T16.85 7.15l-2.2.975a3 3 0 0 0-.838-1.3Q13.2 6.25 12.1 6.25q-1.025 0-1.7.462-.675.463-.75 1.288h-2.4q.05-1.725 1.363-2.938Q9.925 3.85 12.05 3.85"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Code block"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                      role="button"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M14.958 5.62a1 1 0 0 0-1.916-.574l-4 13.333a1 1 0 0 0 1.916.575zM5.974 7.232a1 1 0 0 0-1.409.128l-3.333 4a1 1 0 0 0 0 1.28l3.333 4a1 1 0 1 0 1.537-1.28L3.302 12l2.8-3.36a1 1 0 0 0-.128-1.408m12.053 0a1 1 0 0 1 1.408.128l3.333 4a1 1 0 0 1 0 1.28l-3.333 4a1 1 0 1 1-1.537-1.28l2.8-3.36-2.8-3.36a1 1 0 0 1 .128-1.408"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Quote"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                      role="button"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M4.719 4.34c.094-.642-.366-1.236-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.237 1.028 1.328.663.092 1.276-.354 1.371-.996zm12.115 10.174c.095-.642-.366-1.237-1.028-1.328-.662-.092-1.276.354-1.37.996l-.809 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.277-.354 1.371-.996zM9.318 3.009c.665.077 1.138.662 1.058 1.306l-.022.175a221 221 0 0 1-.266 2.006c-.161 1.171-.368 2.579-.535 3.386-.13.636-.769 1.049-1.425.921s-1.082-.745-.95-1.381c.148-.72.345-2.052.509-3.237a191 191 0 0 0 .262-1.981l.021-.17c.08-.644.684-1.103 1.348-1.025m13.17 11.505c.094-.642-.366-1.237-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.276-.354 1.371-.996z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Insert link"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                      role="button"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M12 19.071q-1.467 1.467-3.536 1.467-2.067 0-3.535-1.467t-1.467-3.535q0-2.07 1.467-3.536L7.05 9.879q.3-.3.707-.3t.707.3.301.707-.3.707l-2.122 2.121a2.9 2.9 0 0 0-.884 2.122q0 1.237.884 2.12.884.885 2.121.885t2.122-.884l2.121-2.121q.3-.3.707-.3t.707.3.3.707q0 .405-.3.707zm-1.414-4.243q-.3.3-.707.301a.97.97 0 0 1-.707-.3q-.3-.3-.301-.708 0-.405.3-.707l4.243-4.242q.3-.3.707-.3t.707.3.3.707-.3.707zm6.364-.707q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.301-.707 0-.405.3-.707l2.122-2.121q.884-.885.884-2.121 0-1.238-.884-2.122a2.9 2.9 0 0 0-2.121-.884q-1.237 0-2.122.884l-2.121 2.122q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.3-.708 0-.405.3-.707L12 4.93q1.467-1.467 3.536-1.467t3.535 1.467 1.467 3.536T19.071 12z"
                        />
                      </svg>
                    </button>
                  </div>
                  <div
                    aria-autocomplete="list"
                    aria-disabled="false"
                    aria-haspopup="listbox"
                    aria-label="Send an unencrypted message…"
                    aria-multiline="true"
                    class="mx_BasicMessageComposer_input mx_BasicMessageComposer_input_shouldShowPillAvatar mx_BasicMessageComposer_inputEmpty"
                    contenteditable="true"
                    data-testid="basicmessagecomposer"
                    dir="auto"
                    role="textbox"
                    style="--placeholder: 'Send\\ an\\ unencrypted\\ message…';"
                    tabindex="0"
                    translate="no"
                  >
                    <div>
                      <br />
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="mx_MessageComposer_actions"
              >
                <div
                  aria-label="Emoji"
                  class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
                  role="button"
                  tabindex="0"
                />
                <div
                  aria-label="Attachment"
                  class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
                  role="button"
                  tabindex="0"
                />
                <div
                  aria-label="More options"
                  class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
                  role="button"
                  tabindex="0"
                />
                <input
                  multiple=""
                  style="display: none;"
                  type="file"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</DocumentFragment>
`;

exports[`RoomView should not display the timeline when the room encryption is loading 1`] = `
<DocumentFragment>
  <div
    class="mx_RoomView"
  >
    <canvas
      aria-hidden="true"
      height="768"
      style="display: block; z-index: 999999; pointer-events: none; position: fixed; top: 0px; right: 0px;"
      width="0"
    />
    <div
      class="mx_MainSplit"
    >
      <div
        class="mx_RoomView_body mx_MainSplit_timeline"
        data-layout="group"
      >
        <header
          class="_flex_4dswl_9 mx_RoomHeader light-panel"
          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
        >
          <button
            aria-label="Open room settings"
            aria-live="off"
            class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
            data-color="1"
            data-testid="avatar-img"
            data-type="round"
            role="button"
            style="--cpd-avatar-size: 40px;"
            tabindex="-1"
          >
            !
          </button>
          <button
            aria-label="Room info"
            class="mx_RoomHeader_infoWrapper"
            tabindex="0"
          >
            <div
              class="mx_RoomHeader_info _box-flex_1odfs_9"
              style="--mx-box-flex: 1;"
            >
              <div
                aria-level="1"
                class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 mx_RoomHeader_heading"
                dir="auto"
                role="heading"
              >
                <span
                  class="mx_RoomHeader_truncated mx_lineClamp"
                >
                  !roomviewshouldnotdisplaythetimelinewhentheroomencryptionisloading:example.org
                </span>
              </div>
            </div>
          </button>
          <button
            aria-disabled="false"
            aria-label="Video call"
            class="_icon-button_1pz9o_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
            tabindex="0"
          >
            <div
              class="_indicator-icon_zr2a0_17"
              style="--cpd-icon-button-size: 100%;"
            >
              <svg
                aria-labelledby="_r_ab_"
                fill="currentColor"
                height="1em"
                viewBox="0 0 24 24"
                width="1em"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
                />
              </svg>
            </div>
          </button>
          <button
            aria-disabled="false"
            aria-label="Voice call"
            aria-labelledby="_r_ag_"
            class="_icon-button_1pz9o_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
            tabindex="0"
          >
            <div
              class="_indicator-icon_zr2a0_17"
              style="--cpd-icon-button-size: 100%;"
            >
              <svg
                fill="currentColor"
                height="1em"
                viewBox="0 0 24 24"
                width="1em"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="m20.958 16.374.039 3.527q0 .427-.33.756-.33.33-.756.33a16 16 0 0 1-6.57-1.105 16.2 16.2 0 0 1-5.563-3.663 16.1 16.1 0 0 1-3.653-5.573 16.3 16.3 0 0 1-1.115-6.56q0-.427.33-.757T4.095 3l3.528.039a1.07 1.07 0 0 1 1.085.93l.543 3.954q.039.271-.039.504a1.1 1.1 0 0 1-.271.426l-1.64 1.64q.505 1.008 1.154 1.909c.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444q.9.65 1.909 1.153l1.64-1.64q.193-.193.426-.27t.504-.04l3.954.543q.406.059.668.359t.262.727"
                />
              </svg>
            </div>
          </button>
          <button
            aria-label="Threads"
            aria-labelledby="_r_al_"
            class="_icon-button_1pz9o_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
            tabindex="0"
          >
            <div
              class="_indicator-icon_zr2a0_17"
              style="--cpd-icon-button-size: 100%;"
            >
              <svg
                class=""
                fill="currentColor"
                height="1em"
                viewBox="0 0 24 24"
                width="1em"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2m3 7h10q.424 0 .712-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.288-.713A.97.97 0 0 0 17 8H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .424.287.713Q6.576 10 7 10m0 4h6q.424 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .424.287.713Q6.576 14 7 14"
                />
              </svg>
            </div>
          </button>
          <button
            aria-label="Room info"
            aria-labelledby="_r_aq_"
            class="_icon-button_1pz9o_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
            tabindex="0"
          >
            <div
              class="_indicator-icon_zr2a0_17"
              style="--cpd-icon-button-size: 100%;"
            >
              <svg
                class=""
                fill="currentColor"
                height="1em"
                viewBox="0 0 24 24"
                width="1em"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16v-4a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 11a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 12v4q0 .424.287.712.288.288.713.288m0-8q.424 0 .713-.287A.97.97 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8q0 .424.287.713Q11.576 9 12 9m0 13a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
                />
              </svg>
            </div>
          </button>
          <div
            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41"
          >
            <div
              aria-label="0 members"
              aria-labelledby="_r_av_"
              class="mx_AccessibleButton mx_FacePile"
              role="button"
              tabindex="0"
            >
              <div
                class="_stacked-avatars_1qbcf_102"
              />
              0
            </div>
          </div>
        </header>
        <div
          class="mx_AutoHideScrollbar mx_AuxPanel"
          role="region"
          tabindex="-1"
        >
          <div />
        </div>
        <main
          class="mx_RoomView_timeline mx_RoomView_timeline_rr_enabled"
        />
        <div
          aria-label="Room status bar"
          class="mx_RoomView_statusArea"
          role="region"
        >
          <div
            class="mx_RoomView_statusAreaBox"
          >
            <div
              class="mx_RoomView_statusAreaBox_line"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</DocumentFragment>
`;

exports[`RoomView should not display the timeline when the room encryption is loading 2`] = `
<DocumentFragment>
  <div
    class="mx_RoomView"
  >
    <canvas
      aria-hidden="true"
      height="768"
      style="display: block; z-index: 999999; pointer-events: none; position: fixed; top: 0px; right: 0px;"
      width="0"
    />
    <div
      class="mx_MainSplit"
    >
      <div
        class="mx_RoomView_body mx_MainSplit_timeline"
        data-layout="group"
      >
        <header
          class="_flex_4dswl_9 mx_RoomHeader light-panel"
          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
        >
          <button
            aria-label="Open room settings"
            aria-live="off"
            class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
            data-color="1"
            data-testid="avatar-img"
            data-type="round"
            role="button"
            style="--cpd-avatar-size: 40px;"
            tabindex="-1"
          >
            !
          </button>
          <button
            aria-label="Room info"
            class="mx_RoomHeader_infoWrapper"
            tabindex="0"
          >
            <div
              class="mx_RoomHeader_info _box-flex_1odfs_9"
              style="--mx-box-flex: 1;"
            >
              <div
                aria-level="1"
                class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 mx_RoomHeader_heading"
                dir="auto"
                role="heading"
              >
                <span
                  class="mx_RoomHeader_truncated mx_lineClamp"
                >
                  !roomviewshouldnotdisplaythetimelinewhentheroomencryptionisloading:example.org
                </span>
              </div>
            </div>
          </button>
          <button
            aria-disabled="false"
            aria-label="Video call"
            class="_icon-button_1pz9o_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
            tabindex="0"
          >
            <div
              class="_indicator-icon_zr2a0_17"
              style="--cpd-icon-button-size: 100%;"
            >
              <svg
                aria-labelledby="_r_ab_"
                fill="currentColor"
                height="1em"
                viewBox="0 0 24 24"
                width="1em"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M6 4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4V8a4 4 0 0 1 4-4"
                />
              </svg>
            </div>
          </button>
          <button
            aria-disabled="false"
            aria-label="Voice call"
            aria-labelledby="_r_ag_"
            class="_icon-button_1pz9o_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
            tabindex="0"
          >
            <div
              class="_indicator-icon_zr2a0_17"
              style="--cpd-icon-button-size: 100%;"
            >
              <svg
                fill="currentColor"
                height="1em"
                viewBox="0 0 24 24"
                width="1em"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="m20.958 16.374.039 3.527q0 .427-.33.756-.33.33-.756.33a16 16 0 0 1-6.57-1.105 16.2 16.2 0 0 1-5.563-3.663 16.1 16.1 0 0 1-3.653-5.573 16.3 16.3 0 0 1-1.115-6.56q0-.427.33-.757T4.095 3l3.528.039a1.07 1.07 0 0 1 1.085.93l.543 3.954q.039.271-.039.504a1.1 1.1 0 0 1-.271.426l-1.64 1.64q.505 1.008 1.154 1.909c.433.6 1.444 1.696 1.444 1.696s1.095 1.01 1.696 1.444q.9.65 1.909 1.153l1.64-1.64q.193-.193.426-.27t.504-.04l3.954.543q.406.059.668.359t.262.727"
                />
              </svg>
            </div>
          </button>
          <button
            aria-label="Threads"
            aria-labelledby="_r_al_"
            class="_icon-button_1pz9o_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
            tabindex="0"
          >
            <div
              class="_indicator-icon_zr2a0_17"
              style="--cpd-icon-button-size: 100%;"
            >
              <svg
                class=""
                fill="currentColor"
                height="1em"
                viewBox="0 0 24 24"
                width="1em"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2m3 7h10q.424 0 .712-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.288-.713A.97.97 0 0 0 17 8H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .424.287.713Q6.576 10 7 10m0 4h6q.424 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .424.287.713Q6.576 14 7 14"
                />
              </svg>
            </div>
          </button>
          <button
            aria-label="Room info"
            aria-labelledby="_r_aq_"
            class="_icon-button_1pz9o_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
            tabindex="0"
          >
            <div
              class="_indicator-icon_zr2a0_17"
              style="--cpd-icon-button-size: 100%;"
            >
              <svg
                class=""
                fill="currentColor"
                height="1em"
                viewBox="0 0 24 24"
                width="1em"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16v-4a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 11a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 12v4q0 .424.287.712.288.288.713.288m0-8q.424 0 .713-.287A.97.97 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8q0 .424.287.713Q11.576 9 12 9m0 13a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
                />
              </svg>
            </div>
          </button>
          <div
            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41"
          >
            <div
              aria-label="0 members"
              aria-labelledby="_r_av_"
              class="mx_AccessibleButton mx_FacePile"
              role="button"
              tabindex="0"
            >
              <div
                class="_stacked-avatars_1qbcf_102"
              />
              0
            </div>
          </div>
        </header>
        <div
          class="mx_AutoHideScrollbar mx_AuxPanel"
          role="region"
          tabindex="-1"
        >
          <div />
        </div>
        <main
          class="mx_RoomView_timeline mx_RoomView_timeline_rr_enabled"
        >
          <div
            class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
            tabindex="-1"
          >
            <div
              class="mx_RoomView_messageListWrapper"
            >
              <ol
                aria-live="polite"
                class="mx_RoomView_MessageList"
                style="height: 400px;"
              />
            </div>
          </div>
        </main>
        <div
          aria-label="Room status bar"
          class="mx_RoomView_statusArea"
          role="region"
        >
          <div
            class="mx_RoomView_statusAreaBox"
          >
            <div
              class="mx_RoomView_statusAreaBox_line"
            />
          </div>
        </div>
        <div
          aria-label="Message composer"
          class="mx_MessageComposer mx_MessageComposer_e2eStatus"
          role="region"
        >
          <div
            class="mx_MessageComposer_wrapper"
          >
            <div
              class="mx_MessageComposer_row"
            >
              <div
                class="mx_MessageComposer_e2eIconWrapper"
              >
                <span
                  tabindex="0"
                >
                  <div
                    aria-labelledby="_r_be_"
                    class="mx_E2EIcon mx_E2EIcon_verified mx_MessageComposer_e2eIcon"
                    data-testid="e2e-icon"
                  >
                    <div
                      class="mx_E2EIcon_normal"
                    />
                  </div>
                </span>
              </div>
              <div
                class="mx_SendMessageComposer"
              >
                <div
                  class="mx_BasicMessageComposer"
                >
                  <div
                    aria-label="Formatting"
                    class="mx_MessageComposerFormatBar"
                    role="toolbar"
                  >
                    <button
                      aria-label="Bold"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                      role="button"
                      tabindex="0"
                      type="button"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M8.8 19q-.824 0-1.413-.587A1.93 1.93 0 0 1 6.8 17V7q0-.824.587-1.412A1.93 1.93 0 0 1 8.8 5h3.525q1.624 0 3 1T16.7 8.775q0 1.275-.575 1.963-.575.687-1.075.987.626.275 1.387 1.025.763.75.763 2.25 0 2.224-1.625 3.113-1.625.887-3.05.887zm1.025-2.8h2.6q1.2 0 1.462-.612.263-.614.263-.888 0-.275-.263-.887-.262-.613-1.537-.613H9.825zm0-5.7h2.325q.825 0 1.2-.425a1.4 1.4 0 0 0 .375-.95q0-.6-.425-.975t-1.1-.375H9.825z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Italics"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                      role="button"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M6.25 19q-.525 0-.888-.363A1.2 1.2 0 0 1 5 17.75q0-.525.362-.887.363-.363.888-.363H9l3-9H9.25q-.525 0-.887-.362A1.2 1.2 0 0 1 8 6.25q0-.525.363-.888Q8.725 5 9.25 5h7.5q.525 0 .887.362.363.363.363.888t-.363.888a1.2 1.2 0 0 1-.887.362H14.5l-3 9h2.25q.525 0 .887.363.363.362.363.887t-.363.887a1.2 1.2 0 0 1-.887.363z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Strikethrough"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                      role="button"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M12.15 20q-1.9 0-3.375-1.125T6.65 15.8l2.2-.95q.35 1.2 1.213 1.975.861.775 2.137.775 1.05 0 1.9-.5t.85-1.6q0-.45-.175-.825A2.4 2.4 0 0 0 14.3 14h2.8a4.3 4.3 0 0 1 .25 1.5q0 2.15-1.538 3.325Q14.277 20 12.15 20M3 12a.97.97 0 0 1-.712-.287A.97.97 0 0 1 2 11q0-.424.288-.713A.97.97 0 0 1 3 10h18q.424 0 .712.287.288.288.288.713 0 .424-.288.713A.97.97 0 0 1 21 12zm9.05-8.15q1.65 0 2.887.812T16.85 7.15l-2.2.975a3 3 0 0 0-.838-1.3Q13.2 6.25 12.1 6.25q-1.025 0-1.7.462-.675.463-.75 1.288h-2.4q.05-1.725 1.363-2.938Q9.925 3.85 12.05 3.85"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Code block"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                      role="button"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M14.958 5.62a1 1 0 0 0-1.916-.574l-4 13.333a1 1 0 0 0 1.916.575zM5.974 7.232a1 1 0 0 0-1.409.128l-3.333 4a1 1 0 0 0 0 1.28l3.333 4a1 1 0 1 0 1.537-1.28L3.302 12l2.8-3.36a1 1 0 0 0-.128-1.408m12.053 0a1 1 0 0 1 1.408.128l3.333 4a1 1 0 0 1 0 1.28l-3.333 4a1 1 0 1 1-1.537-1.28l2.8-3.36-2.8-3.36a1 1 0 0 1 .128-1.408"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Quote"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                      role="button"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M4.719 4.34c.094-.642-.366-1.236-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.237 1.028 1.328.663.092 1.276-.354 1.371-.996zm12.115 10.174c.095-.642-.366-1.237-1.028-1.328-.662-.092-1.276.354-1.37.996l-.809 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.277-.354 1.371-.996zM9.318 3.009c.665.077 1.138.662 1.058 1.306l-.022.175a221 221 0 0 1-.266 2.006c-.161 1.171-.368 2.579-.535 3.386-.13.636-.769 1.049-1.425.921s-1.082-.745-.95-1.381c.148-.72.345-2.052.509-3.237a191 191 0 0 0 .262-1.981l.021-.17c.08-.644.684-1.103 1.348-1.025m13.17 11.505c.094-.642-.366-1.237-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.276-.354 1.371-.996z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Insert link"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                      role="button"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        fill="currentColor"
                        height="1em"
                        viewBox="0 0 24 24"
                        width="1em"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M12 19.071q-1.467 1.467-3.536 1.467-2.067 0-3.535-1.467t-1.467-3.535q0-2.07 1.467-3.536L7.05 9.879q.3-.3.707-.3t.707.3.301.707-.3.707l-2.122 2.121a2.9 2.9 0 0 0-.884 2.122q0 1.237.884 2.12.884.885 2.121.885t2.122-.884l2.121-2.121q.3-.3.707-.3t.707.3.3.707q0 .405-.3.707zm-1.414-4.243q-.3.3-.707.301a.97.97 0 0 1-.707-.3q-.3-.3-.301-.708 0-.405.3-.707l4.243-4.242q.3-.3.707-.3t.707.3.3.707-.3.707zm6.364-.707q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.301-.707 0-.405.3-.707l2.122-2.121q.884-.885.884-2.121 0-1.238-.884-2.122a2.9 2.9 0 0 0-2.121-.884q-1.237 0-2.122.884l-2.121 2.122q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.3-.708 0-.405.3-.707L12 4.93q1.467-1.467 3.536-1.467t3.535 1.467 1.467 3.536T19.071 12z"
                        />
                      </svg>
                    </button>
                  </div>
                  <div
                    aria-autocomplete="list"
                    aria-disabled="false"
                    aria-haspopup="listbox"
                    aria-label="Send a message…"
                    aria-multiline="true"
                    class="mx_BasicMessageComposer_input mx_BasicMessageComposer_input_shouldShowPillAvatar mx_BasicMessageComposer_inputEmpty"
                    contenteditable="true"
                    data-testid="basicmessagecomposer"
                    dir="auto"
                    role="textbox"
                    style="--placeholder: 'Send\\ a\\ message…';"
                    tabindex="0"
                    translate="no"
                  >
                    <div>
                      <br />
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="mx_MessageComposer_actions"
              >
                <div
                  aria-label="Emoji"
                  class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
                  role="button"
                  tabindex="0"
                />
                <div
                  aria-label="Attachment"
                  class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
                  role="button"
                  tabindex="0"
                />
                <div
                  aria-label="More options"
                  class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
                  role="button"
                  tabindex="0"
                />
                <input
                  multiple=""
                  style="display: none;"
                  type="file"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</DocumentFragment>
`;

exports[`RoomView should show error view if failed to look up room alias 1`] = `
<DocumentFragment>
  <div
    class="mx_RoomView"
  >
    <div
      class="mx_RoomPreviewBar mx_RoomPreviewBar_RoomNotFound mx_RoomPreviewBar_dialog"
      role="complementary"
    >
      <div
        class="mx_RoomPreviewBar_message"
      >
        <h3>
          #addy:server does not exist.
        </h3>
        <p>
          Are you sure you're at the right place?
        </p>
      </div>
      <div
        class="mx_RoomPreviewBar_actions"
      />
      <div
        class="mx_RoomPreviewBar_footer"
      />
    </div>
  </div>
</DocumentFragment>
`;

exports[`RoomView video rooms should render joined video room view 1`] = `
<DocumentFragment>
  <div
    class="mx_RoomView mx_RoomView_immersive"
  >
    <canvas
      aria-hidden="true"
      height="768"
      style="display: block; z-index: 999999; pointer-events: none; position: fixed; top: 0px; right: 0px;"
      width="0"
    />
    <div
      class="mx_MainSplit"
    >
      <div
        class="mx_RoomView_body mx_MainSplit_call"
        data-layout="group"
      >
        <header
          class="_flex_4dswl_9 mx_RoomHeader light-panel"
          style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;"
        >
          <button
            aria-label="Open room settings"
            aria-live="off"
            class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
            data-color="2"
            data-testid="avatar-img"
            data-type="round"
            role="button"
            style="--cpd-avatar-size: 40px;"
            tabindex="-1"
          >
            !
          </button>
          <button
            aria-label="Room info"
            class="mx_RoomHeader_infoWrapper"
            tabindex="0"
          >
            <div
              class="mx_RoomHeader_info _box-flex_1odfs_9"
              style="--mx-box-flex: 1;"
            >
              <div
                aria-level="1"
                class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74 mx_RoomHeader_heading"
                dir="auto"
                role="heading"
              >
                <span
                  class="mx_RoomHeader_truncated mx_lineClamp"
                >
                  !roomviewvideoroomsshouldrenderjoinedvideoroomview:example.org
                </span>
              </div>
            </div>
          </button>
          <button
            aria-label="Chat"
            aria-labelledby="_r_fd_"
            class="_icon-button_1pz9o_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
            tabindex="0"
          >
            <div
              class="_indicator-icon_zr2a0_17"
              style="--cpd-icon-button-size: 100%;"
            >
              <svg
                class="mx_RoomHeader_toggled"
                fill="currentColor"
                height="1em"
                viewBox="0 0 24 24"
                width="1em"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M2.95 16.3 1.5 21.25a.94.94 0 0 0 .25 1 .94.94 0 0 0 1 .25l4.95-1.45a10.2 10.2 0 0 0 2.1.712Q10.875 22 12 22a9.7 9.7 0 0 0 3.9-.788 10.1 10.1 0 0 0 3.175-2.137q1.35-1.35 2.137-3.175A9.7 9.7 0 0 0 22 12a9.7 9.7 0 0 0-.788-3.9 10.1 10.1 0 0 0-2.137-3.175q-1.35-1.35-3.175-2.137A9.7 9.7 0 0 0 12 2a9.7 9.7 0 0 0-3.9.788 10.1 10.1 0 0 0-3.175 2.137Q3.575 6.275 2.788 8.1A9.7 9.7 0 0 0 2 12q0 1.125.238 2.2.237 1.076.712 2.1"
                />
              </svg>
            </div>
          </button>
          <button
            aria-label="Threads"
            aria-labelledby="_r_fi_"
            class="_icon-button_1pz9o_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
            tabindex="0"
          >
            <div
              class="_indicator-icon_zr2a0_17"
              style="--cpd-icon-button-size: 100%;"
            >
              <svg
                class=""
                fill="currentColor"
                height="1em"
                viewBox="0 0 24 24"
                width="1em"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M4 3h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6l-2.293 2.293c-.63.63-1.707.184-1.707-.707V5a2 2 0 0 1 2-2m3 7h10q.424 0 .712-.287A.97.97 0 0 0 18 9a.97.97 0 0 0-.288-.713A.97.97 0 0 0 17 8H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 9q0 .424.287.713Q6.576 10 7 10m0 4h6q.424 0 .713-.287A.97.97 0 0 0 14 13a.97.97 0 0 0-.287-.713A.97.97 0 0 0 13 12H7a.97.97 0 0 0-.713.287A.97.97 0 0 0 6 13q0 .424.287.713Q6.576 14 7 14"
                />
              </svg>
            </div>
          </button>
          <button
            aria-label="Room info"
            aria-labelledby="_r_fn_"
            class="_icon-button_1pz9o_8"
            data-kind="primary"
            role="button"
            style="--cpd-icon-button-size: 32px;"
            tabindex="0"
          >
            <div
              class="_indicator-icon_zr2a0_17"
              style="--cpd-icon-button-size: 100%;"
            >
              <svg
                class=""
                fill="currentColor"
                height="1em"
                viewBox="0 0 24 24"
                width="1em"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M12 17q.424 0 .713-.288A.97.97 0 0 0 13 16v-4a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 11a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 12v4q0 .424.287.712.288.288.713.288m0-8q.424 0 .713-.287A.97.97 0 0 0 13 8a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 7a.97.97 0 0 0-.713.287A.97.97 0 0 0 11 8q0 .424.287.713Q11.576 9 12 9m0 13a9.7 9.7 0 0 1-3.9-.788 10.1 10.1 0 0 1-3.175-2.137q-1.35-1.35-2.137-3.175A9.7 9.7 0 0 1 2 12q0-2.075.788-3.9a10.1 10.1 0 0 1 2.137-3.175q1.35-1.35 3.175-2.137A9.7 9.7 0 0 1 12 2q2.075 0 3.9.788a10.1 10.1 0 0 1 3.175 2.137q1.35 1.35 2.137 3.175A9.7 9.7 0 0 1 22 12a9.7 9.7 0 0 1-.788 3.9 10.1 10.1 0 0 1-2.137 3.175q-1.35 1.35-3.175 2.137A9.7 9.7 0 0 1 12 22"
                />
              </svg>
            </div>
          </button>
          <div
            class="_typography_6v6n8_153 _font-body-sm-medium_6v6n8_41"
          >
            <div
              aria-label="0 members"
              aria-labelledby="_r_fs_"
              class="mx_AccessibleButton mx_FacePile"
              role="button"
              tabindex="0"
            >
              <div
                class="_stacked-avatars_1qbcf_102"
              />
              0
            </div>
          </div>
        </header>
        <div
          class="mx_CallView"
          role="main"
        >
          <div
            class="mx_AppTile"
            id="vY7Q4uEh9K38QgU2PomxwKpa"
          >
            <div
              class="mx_AppTileBody mx_AppTileBody--large mx_AppTileBody--loading mx_AppTileBody--call"
            >
              <div
                class="mx_AppTileBody_fadeInSpinner"
              >
                <div
                  class="mx_Spinner"
                >
                  <div
                    class="mx_Spinner_Msg"
                  >
                    Loading…
                  </div>
                   
                  <div
                    aria-label="Loading…"
                    class="mx_Spinner_icon"
                    data-testid="spinner"
                    role="progressbar"
                    style="width: 32px; height: 32px;"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="mx_RightPanel_ResizeWrapper"
        style="position: relative; user-select: auto; width: 420px; height: 100%; max-width: 50%; min-width: 320px; box-sizing: border-box; flex-shrink: 0;"
      >
        <aside
          class="mx_RightPanel"
          data-testid="right-panel"
          id="mx_RightPanel"
        >
          <div
            class="mx_BaseCard mx_ThreadPanel mx_TimelineCard"
          >
            <div
              class="mx_BaseCard_header"
            >
              <div
                class="mx_BaseCard_header_title"
              >
                <p
                  class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 mx_BaseCard_header_title_heading"
                  role="heading"
                >
                  Chat
                </p>
              </div>
              <button
                aria-labelledby="_r_g5_"
                class="_icon-button_1pz9o_8"
                data-kind="secondary"
                data-testid="base-card-close-button"
                role="button"
                style="--cpd-icon-button-size: 28px;"
                tabindex="0"
              >
                <div
                  class="_indicator-icon_zr2a0_17"
                  style="--cpd-icon-button-size: 100%;"
                >
                  <svg
                    fill="currentColor"
                    height="1em"
                    viewBox="0 0 24 24"
                    width="1em"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414"
                    />
                  </svg>
                </div>
              </button>
            </div>
            <div
              class="mx_TimelineCard_timeline"
            >
              <div
                class="mx_AutoHideScrollbar mx_ScrollPanel mx_RoomView_messagePanel"
                tabindex="-1"
              >
                <div
                  class="mx_RoomView_messageListWrapper"
                >
                  <ol
                    aria-live="polite"
                    class="mx_RoomView_MessageList"
                    style="height: 400px;"
                  />
                </div>
              </div>
            </div>
            <div
              aria-label="Message composer"
              class="mx_MessageComposer mx_MessageComposer--compact mx_MessageComposer_e2eStatus"
              role="region"
            >
              <div
                class="mx_MessageComposer_wrapper"
              >
                <div
                  class="mx_MessageComposer_row"
                >
                  <div
                    class="mx_MessageComposer_e2eIconWrapper"
                  >
                    <svg
                      aria-label="Messages in this room are not end-to-end encrypted"
                      aria-labelledby="_r_ge_"
                      class="mx_E2EIcon mx_MessageComposer_e2eIcon"
                      color="var(--cpd-color-icon-info-primary)"
                      fill="currentColor"
                      height="12"
                      viewBox="0 0 24 24"
                      width="12"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M6 22q-.825 0-1.412-.587A1.93 1.93 0 0 1 4 20V10q0-.825.588-1.412a2 2 0 0 1 .702-.463L1.333 4.167a1 1 0 0 1 1.414-1.414L7 7.006v-.012l13 13v.012l1.247 1.247a1 1 0 1 1-1.414 1.414l-.896-.896A1.94 1.94 0 0 1 18 22zm14-4.834V10q0-.825-.587-1.412A1.93 1.93 0 0 0 18 8h-1V6q0-2.075-1.463-3.537Q14.075 1 12 1T8.463 2.463a4.9 4.9 0 0 0-1.22 1.946L9 6.166V6q0-1.25.875-2.125A2.9 2.9 0 0 1 12 3q1.25 0 2.125.875T15 6v2h-4.166z"
                      />
                    </svg>
                  </div>
                  <div
                    class="mx_SendMessageComposer"
                  >
                    <div
                      class="mx_BasicMessageComposer"
                    >
                      <div
                        aria-label="Formatting"
                        class="mx_MessageComposerFormatBar"
                        role="toolbar"
                      >
                        <button
                          aria-label="Bold"
                          class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                          role="button"
                          tabindex="0"
                          type="button"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M8.8 19q-.824 0-1.413-.587A1.93 1.93 0 0 1 6.8 17V7q0-.824.587-1.412A1.93 1.93 0 0 1 8.8 5h3.525q1.624 0 3 1T16.7 8.775q0 1.275-.575 1.963-.575.687-1.075.987.626.275 1.387 1.025.763.75.763 2.25 0 2.224-1.625 3.113-1.625.887-3.05.887zm1.025-2.8h2.6q1.2 0 1.462-.612.263-.614.263-.888 0-.275-.263-.887-.262-.613-1.537-.613H9.825zm0-5.7h2.325q.825 0 1.2-.425a1.4 1.4 0 0 0 .375-.95q0-.6-.425-.975t-1.1-.375H9.825z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Italics"
                          class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                          role="button"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M6.25 19q-.525 0-.888-.363A1.2 1.2 0 0 1 5 17.75q0-.525.362-.887.363-.363.888-.363H9l3-9H9.25q-.525 0-.887-.362A1.2 1.2 0 0 1 8 6.25q0-.525.363-.888Q8.725 5 9.25 5h7.5q.525 0 .887.362.363.363.363.888t-.363.888a1.2 1.2 0 0 1-.887.362H14.5l-3 9h2.25q.525 0 .887.363.363.362.363.887t-.363.887a1.2 1.2 0 0 1-.887.363z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Strikethrough"
                          class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                          role="button"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M12.15 20q-1.9 0-3.375-1.125T6.65 15.8l2.2-.95q.35 1.2 1.213 1.975.861.775 2.137.775 1.05 0 1.9-.5t.85-1.6q0-.45-.175-.825A2.4 2.4 0 0 0 14.3 14h2.8a4.3 4.3 0 0 1 .25 1.5q0 2.15-1.538 3.325Q14.277 20 12.15 20M3 12a.97.97 0 0 1-.712-.287A.97.97 0 0 1 2 11q0-.424.288-.713A.97.97 0 0 1 3 10h18q.424 0 .712.287.288.288.288.713 0 .424-.288.713A.97.97 0 0 1 21 12zm9.05-8.15q1.65 0 2.887.812T16.85 7.15l-2.2.975a3 3 0 0 0-.838-1.3Q13.2 6.25 12.1 6.25q-1.025 0-1.7.462-.675.463-.75 1.288h-2.4q.05-1.725 1.363-2.938Q9.925 3.85 12.05 3.85"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Code block"
                          class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                          role="button"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M14.958 5.62a1 1 0 0 0-1.916-.574l-4 13.333a1 1 0 0 0 1.916.575zM5.974 7.232a1 1 0 0 0-1.409.128l-3.333 4a1 1 0 0 0 0 1.28l3.333 4a1 1 0 1 0 1.537-1.28L3.302 12l2.8-3.36a1 1 0 0 0-.128-1.408m12.053 0a1 1 0 0 1 1.408.128l3.333 4a1 1 0 0 1 0 1.28l-3.333 4a1 1 0 1 1-1.537-1.28l2.8-3.36-2.8-3.36a1 1 0 0 1 .128-1.408"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Quote"
                          class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                          role="button"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M4.719 4.34c.094-.642-.366-1.236-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.237 1.028 1.328.663.092 1.276-.354 1.371-.996zm12.115 10.174c.095-.642-.366-1.237-1.028-1.328-.662-.092-1.276.354-1.37.996l-.809 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.277-.354 1.371-.996zM9.318 3.009c.665.077 1.138.662 1.058 1.306l-.022.175a221 221 0 0 1-.266 2.006c-.161 1.171-.368 2.579-.535 3.386-.13.636-.769 1.049-1.425.921s-1.082-.745-.95-1.381c.148-.72.345-2.052.509-3.237a191 191 0 0 0 .262-1.981l.021-.17c.08-.644.684-1.103 1.348-1.025m13.17 11.505c.094-.642-.366-1.237-1.028-1.328-.663-.092-1.276.354-1.371.996l-.808 5.478c-.094.642.366 1.236 1.028 1.328.663.092 1.276-.354 1.371-.996z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Insert link"
                          class="mx_AccessibleButton mx_MessageComposerFormatBar_button"
                          role="button"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            fill="currentColor"
                            height="1em"
                            viewBox="0 0 24 24"
                            width="1em"
                            xmlns="http://www.w3.org/2000/svg"
                          >
                            <path
                              d="M12 19.071q-1.467 1.467-3.536 1.467-2.067 0-3.535-1.467t-1.467-3.535q0-2.07 1.467-3.536L7.05 9.879q.3-.3.707-.3t.707.3.301.707-.3.707l-2.122 2.121a2.9 2.9 0 0 0-.884 2.122q0 1.237.884 2.12.884.885 2.121.885t2.122-.884l2.121-2.121q.3-.3.707-.3t.707.3.3.707q0 .405-.3.707zm-1.414-4.243q-.3.3-.707.301a.97.97 0 0 1-.707-.3q-.3-.3-.301-.708 0-.405.3-.707l4.243-4.242q.3-.3.707-.3t.707.3.3.707-.3.707zm6.364-.707q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.301-.707 0-.405.3-.707l2.122-2.121q.884-.885.884-2.121 0-1.238-.884-2.122a2.9 2.9 0 0 0-2.121-.884q-1.237 0-2.122.884l-2.121 2.122q-.3.3-.707.3a.97.97 0 0 1-.707-.3q-.3-.3-.3-.708 0-.405.3-.707L12 4.93q1.467-1.467 3.536-1.467t3.535 1.467 1.467 3.536T19.071 12z"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        aria-autocomplete="list"
                        aria-disabled="false"
                        aria-haspopup="listbox"
                        aria-label="Send an unencrypted message…"
                        aria-multiline="true"
                        class="mx_BasicMessageComposer_input mx_BasicMessageComposer_input_shouldShowPillAvatar mx_BasicMessageComposer_inputEmpty"
                        contenteditable="true"
                        data-testid="basicmessagecomposer"
                        dir="auto"
                        role="textbox"
                        style="--placeholder: 'Send\\ an\\ unencrypted\\ message…';"
                        tabindex="0"
                        translate="no"
                      >
                        <div>
                          <br />
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="mx_MessageComposer_actions"
                  >
                    <div
                      aria-label="Emoji"
                      class="mx_AccessibleButton mx_EmojiButton mx_MessageComposer_button mx_EmojiButton_icon"
                      role="button"
                      tabindex="0"
                    />
                    <div
                      aria-label="Attachment"
                      class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_upload"
                      role="button"
                      tabindex="0"
                    />
                    <div
                      aria-label="More options"
                      class="mx_AccessibleButton mx_MessageComposer_button mx_MessageComposer_buttonMenu"
                      role="button"
                      tabindex="0"
                    />
                    <input
                      multiple=""
                      style="display: none;"
                      type="file"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </aside>
        <div>
          <div
            class="mx_ResizeHandle--horizontal"
            style="position: absolute; user-select: none; width: 10px; height: 100%; top: 0px; left: -5px; cursor: col-resize;"
          />
        </div>
      </div>
    </div>
  </div>
</DocumentFragment>
`;