// 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 mx_MessageComposerFormatBar_buttonIconBold"
                    role="button"
                    tabindex="0"
                    type="button"
                  />
                  <button
                    aria-label="Italics"
                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
                    role="button"
                    tabindex="-1"
                    type="button"
                  />
                  <button
                    aria-label="Strikethrough"
                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
                    role="button"
                    tabindex="-1"
                    type="button"
                  />
                  <button
                    aria-label="Code block"
                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
                    role="button"
                    tabindex="-1"
                    type="button"
                  />
                  <button
                    aria-label="Quote"
                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
                    role="button"
                    tabindex="-1"
                    type="button"
                  />
                  <button
                    aria-label="Insert link"
                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
                    role="button"
                    tabindex="-1"
                    type="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 mx_MessageComposerFormatBar_buttonIconBold"
                    role="button"
                    tabindex="0"
                    type="button"
                  />
                  <button
                    aria-label="Italics"
                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
                    role="button"
                    tabindex="-1"
                    type="button"
                  />
                  <button
                    aria-label="Strikethrough"
                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
                    role="button"
                    tabindex="-1"
                    type="button"
                  />
                  <button
                    aria-label="Code block"
                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
                    role="button"
                    tabindex="-1"
                    type="button"
                  />
                  <button
                    aria-label="Quote"
                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
                    role="button"
                    tabindex="-1"
                    type="button"
                  />
                  <button
                    aria-label="Insert link"
                    class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
                    role="button"
                    tabindex="-1"
                    type="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 mx_MessageComposerFormatBar_buttonIconBold"
                      role="button"
                      tabindex="0"
                      type="button"
                    />
                    <button
                      aria-label="Italics"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
                      role="button"
                      tabindex="-1"
                      type="button"
                    />
                    <button
                      aria-label="Strikethrough"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
                      role="button"
                      tabindex="-1"
                      type="button"
                    />
                    <button
                      aria-label="Code block"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
                      role="button"
                      tabindex="-1"
                      type="button"
                    />
                    <button
                      aria-label="Quote"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
                      role="button"
                      tabindex="-1"
                      type="button"
                    />
                    <button
                      aria-label="Insert link"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
                      role="button"
                      tabindex="-1"
                      type="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 mx_MessageComposerFormatBar_buttonIconBold"
                      role="button"
                      tabindex="0"
                      type="button"
                    />
                    <button
                      aria-label="Italics"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
                      role="button"
                      tabindex="-1"
                      type="button"
                    />
                    <button
                      aria-label="Strikethrough"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
                      role="button"
                      tabindex="-1"
                      type="button"
                    />
                    <button
                      aria-label="Code block"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
                      role="button"
                      tabindex="-1"
                      type="button"
                    />
                    <button
                      aria-label="Quote"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
                      role="button"
                      tabindex="-1"
                      type="button"
                    />
                    <button
                      aria-label="Insert link"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
                      role="button"
                      tabindex="-1"
                      type="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 mx_MessageComposerFormatBar_buttonIconBold"
                      role="button"
                      tabindex="0"
                      type="button"
                    />
                    <button
                      aria-label="Italics"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
                      role="button"
                      tabindex="-1"
                      type="button"
                    />
                    <button
                      aria-label="Strikethrough"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
                      role="button"
                      tabindex="-1"
                      type="button"
                    />
                    <button
                      aria-label="Code block"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
                      role="button"
                      tabindex="-1"
                      type="button"
                    />
                    <button
                      aria-label="Quote"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
                      role="button"
                      tabindex="-1"
                      type="button"
                    />
                    <button
                      aria-label="Insert link"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
                      role="button"
                      tabindex="-1"
                      type="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 mx_MessageComposerFormatBar_buttonIconBold"
                      role="button"
                      tabindex="0"
                      type="button"
                    />
                    <button
                      aria-label="Italics"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
                      role="button"
                      tabindex="-1"
                      type="button"
                    />
                    <button
                      aria-label="Strikethrough"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
                      role="button"
                      tabindex="-1"
                      type="button"
                    />
                    <button
                      aria-label="Code block"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
                      role="button"
                      tabindex="-1"
                      type="button"
                    />
                    <button
                      aria-label="Quote"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
                      role="button"
                      tabindex="-1"
                      type="button"
                    />
                    <button
                      aria-label="Insert link"
                      class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
                      role="button"
                      tabindex="-1"
                      type="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 mx_MessageComposerFormatBar_buttonIconBold"
                          role="button"
                          tabindex="0"
                          type="button"
                        />
                        <button
                          aria-label="Italics"
                          class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
                          role="button"
                          tabindex="-1"
                          type="button"
                        />
                        <button
                          aria-label="Strikethrough"
                          class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
                          role="button"
                          tabindex="-1"
                          type="button"
                        />
                        <button
                          aria-label="Code block"
                          class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
                          role="button"
                          tabindex="-1"
                          type="button"
                        />
                        <button
                          aria-label="Quote"
                          class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
                          role="button"
                          tabindex="-1"
                          type="button"
                        />
                        <button
                          aria-label="Insert link"
                          class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
                          role="button"
                          tabindex="-1"
                          type="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>
`;