Funcionamiento del test Text Scaling
Descripción: Comprueba si el texto ha escalado luego de aplicar 200% de Zoom
Ejemplo
En un caso observado, los encabezados H4, H5 y H6 no escalaron después de aplicado el Zoom, por lo que esos elementos son reportados.
Flujo de acciones
- Captura todos los elementos textuales y los guarda
- Aplica Zoom
- Captura todos los elementos textuales después del Zoom
- Compara si el fontSize de los elementos antes y después del Zoom es diferente y si estos elementos tienen unidades de medidas relativas al viewport
Unidades relativas al viewport
Los elementos textuales con unidades relativas al viewport deberían ser reportados automáticamente. Algunas de estas unidadeds son:
- vw
- vh
- svw
- svh
- svmin
- etc
Aunque parezca contra intuitivo, las unidades de medidad relativas al viewport son las que cambian su valor interno de fontSize al aplicar el zoom del navegador (Ctrl + "+", Ctrl + "-"). De manera visual, para el usuario, permanecen sin ser afectadas por el zoom.
Fuera de Scope
Elementos computados sobreescritos: ej, Si originalmente el elemento tenía 2.5vh y luego esta unidad es sobreescrita a 1.2rem, puede llegar a generar un falso positivo. Si hay algún Missing Issue, adjunte a la revisión una screenshot de los ComputedStyles del elemento de manera que se vean el fontSize y los estilos sobreescritos.
Web https://garyvaynerchuk.com
En esta web, el encabezado "Legacy is greater than currency." pareciera no escalar, pudiendo interpretarse como un Missing Issue. Sin embargo al comprobar el tamaño de fuente antes y después del elemento, se comprueba que sí escala.
Para comprobar que la fuente escala, se colocó un rectángulo rojo del tamaño de una letra superpuesto sobre el encabezado. En este mismo caso, a pesar de que se sobreescriben los estilos varias veces, no es un Missing Issue, el elemento es ignorado correctamente. La diferencia de escala en el encabezado es de algunos pocos píxeles