Практическое занятие№5 Проверка правильности отображения сайта в различных браузерах

Цель работы: изучить поведение различных WEB страниц в различных браузерах. Провести Acid-тесты для всех установленных в системе браузеров.

1. Теоретическая часть

Acid3 — тест на поддержку браузером веб-стандартов. Он осуществляет проверку 100 вероятно уязвимых мест в HTTP, HTML, CSS, ECMAScript, SVG и XML, а также проверяет работу с DOM. Намеренно выбирались такие тесты, которые не проходила сборка хотя бы одного из браузеров того времени (последние 16 тестов — Firefox или Safari).

29 января 2008 года Ян Хиксон, разработчик Acid2 и Acid3, а ныне работник Google, сообщил о предварительном релизе Acid3 — пока сам тест проходил проверку на соответствие спецификациям, каждый желающий мог проверить свои браузеры. 3 марта 2008 разработка теста была закончена, и появились наброски для Acid4.

Основная часть теста написана на JavaScript и содержит 100 подтестов в шести группах плюс несколько специальных тестов (0, 97, 98, 99)

Группа 1: DOM Traversal, DOM Range, HTTP

Группа 2: DOM2 Core и DOM2 Events

Группа 3: DOM2 Views, DOM2 Style, CSS 3 селекторы и Media Queries

Группа 4: Поведение HTML таблиц и форм при управлении из скрипта и DOM2 HTML

Группа 5: Тесты из соревнования Acid3

Группа 6: ECMAScript

Основной критерий проверки — запуск тестов с настройками браузера по умолчанию. Конечный результат должен получить сто из ста баллов и соответствовать пиксел в пиксел стандартному исполнению. На браузерах для персональных компьютеров анимация должна быть гладкой (каждый тест должен проходиться быстрее чем за 33 мс, что является примерным эквивалентом по производительности топовому ноутбуку Apple), однако малая производительность на слабом компьютере не является критерием непрохождения теста.

Также для полного прохождения необходимо, чтобы браузер отображал правильную иконку и заголовок страницы. При этом сервер возвращает ошибку 404 при попытке загрузить её, а изображение иконки содержится в теле страницы. Этот тест служит проверкой на правильность реакции браузера на ошибки сервера. Отображение стандартной иконки является ошибкой.

Во время выполнения теста на страницу добавляются цветные квадраты; цвет квадратов зависит от числа выполненных подтестов в группе. Если в группе все тесты провалены — квадрат не отображается. Если несколько тестов провалено, цвета будут такими:

1-5 подтестов пройдены: чёрный квадрат.

6-10 подтестов пройдены: серый квадрат.

11-15 подтестов пройдены: серебристый квадрат.

Все 16 подтестов пройдены: цветной (красный, оранжевый, жёлтый, зелёный, синий, фиолетовый — для каждой из групп свой цвет).

После прохождения теста буква «А» в слове Acid3 становится кликабельной, при этом при простом нажатии выводится всплывающее окно с перечнем непройденных тестов, или же данная информация выводится в новом окне при щелчке с нажатой кнопкой Shift.

Тест использует картинки, закодированные Base64, некоторые сложные селекторы, цветовые значения CSS 3 (HSLA, при этом ненастоящие селекторы и значения должны игнорироваться).

2. Методические указания

Для выполнения практической части произведём тестирование WEB страницы Acid во всех браузерах, установленных в системе, результаты занесём в таблицу:

Таблица 3 – Результаты Acid Теста

№, название и версия браузера	Результаты теста в Acid

3. Задания для самостоятельного выполнения

1. Протестировать все установленные в систему браузеры

2. Субъективно сравнить вид популярных интернет-порталов в различных браузерах

4. Содержание отчёта

1. Название и цели работы

2. Порядок выполнения практической части

3. Выполненные задания 1-2

4. Вывод о проделанной работе

5. Контрольные вопросы

1. Что такое браузер?

2. Что такое тест Acid?

3. Почему одинаковые странички выглядят в разных браузерах по-разному?

4. Что показывают цветные квадратики в тесте Acid?

5. Почему время прорисовки страницы должно быть меньше 33 мс?

6. Перечислите известные вам браузеры?