element-web/test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`FontScalingPanel renders the font scaling UI 1`] = `
<DocumentFragment>
  <div
    class="mx_SettingsTab_section mx_FontScalingPanel"
  >
    <span
      class="mx_SettingsTab_subheading"
    >
      Font size
    </span>
    <div
      class="mx_FontScalingPanel_preview mx_EventTilePreview_loader"
    >
      <div
        class="mx_Spinner"
      >
        <div
          aria-label="Loading..."
          class="mx_Spinner_icon"
          data-testid="spinner"
          role="progressbar"
          style="width: 32px; height: 32px;"
        />
      </div>
    </div>
    <div
      class="mx_FontScalingPanel_fontSlider"
    >
      <div
        class="mx_FontScalingPanel_fontSlider_smallText"
      >
        Aa
      </div>
      <div
        class="mx_Slider"
      >
        <div>
          <div
            class="mx_Slider_bar"
          >
            <hr />
            <div
              class="mx_Slider_selection"
            >
              <div
                class="mx_Slider_selectionDot"
                style="left: calc(-1.195em + 50%);"
              >
                <div
                  class="mx_Slider_selectionText"
                >
                  15
                </div>
              </div>
              <hr
                style="width: 50%;"
              />
            </div>
          </div>
          <div
            class="mx_Slider_dotContainer"
          >
            <span
              class="mx_Slider_dotValue"
            >
              <div
                class="mx_Slider_dot mx_Slider_dotActive"
              />
              <div
                class="mx_Slider_labelContainer"
              >
                <div
                  class="mx_Slider_label"
                />
              </div>
            </span>
            <span
              class="mx_Slider_dotValue"
            >
              <div
                class="mx_Slider_dot mx_Slider_dotActive"
              />
              <div
                class="mx_Slider_labelContainer"
              >
                <div
                  class="mx_Slider_label"
                />
              </div>
            </span>
            <span
              class="mx_Slider_dotValue"
            >
              <div
                class="mx_Slider_dot mx_Slider_dotActive"
              />
              <div
                class="mx_Slider_labelContainer"
              >
                <div
                  class="mx_Slider_label"
                />
              </div>
            </span>
            <span
              class="mx_Slider_dotValue"
            >
              <div
                class="mx_Slider_dot"
              />
              <div
                class="mx_Slider_labelContainer"
              >
                <div
                  class="mx_Slider_label"
                />
              </div>
            </span>
            <span
              class="mx_Slider_dotValue"
            >
              <div
                class="mx_Slider_dot"
              />
              <div
                class="mx_Slider_labelContainer"
              >
                <div
                  class="mx_Slider_label"
                />
              </div>
            </span>
          </div>
        </div>
      </div>
      <div
        class="mx_FontScalingPanel_fontSlider_largeText"
      >
        Aa
      </div>
    </div>
    <span
      class="mx_Checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
    >
      <input
        id="checkbox_abdefghi"
        type="checkbox"
      />
      <label
        for="checkbox_abdefghi"
      >
        <div
          class="mx_Checkbox_background"
        >
          <div
            class="mx_Checkbox_checkmark"
          />
        </div>
        <div>
          Use custom size
        </div>
      </label>
    </span>
    <div
      class="mx_Field mx_Field_input mx_FontScalingPanel_customFontSizeField"
    >
      <input
        autocomplete="off"
        disabled=""
        id="font_size_field"
        label="Font size"
        placeholder="15"
        type="number"
        value="15"
      />
      <label
        for="font_size_field"
      >
        Font size
      </label>
    </div>
  </div>
</DocumentFragment>
`;