Acid3

Acid3는 웹 브라우저가 (특히 DOM과 자바스크립트와 관련하여) 얼마나 잘 웹 표준을 준수하고 있는지를 검사하는 웹 표준 프로젝트의 테스트 페이지이다.

Acid3
Acid3 참조 렌더링
사이트 종류	웹 표준 테스트
사용 언어	영어
소유자	웹 표준 프로젝트
제작자	이언 힉슨
시작일	2008년 3월 3일
웹사이트	http://acid3.acidtests.org

성공할 경우 Acid3 테스트는 흰 배경에 색이 들어간 여러 개의 직사각형을 표현하면서 점차 증가하는 백분율 수치를 보여 준다. 표시되는 백분율 수치는 통과된 서브 테스트의 수에 기반을 둔다(하지만 통과한 서브 테스트의 개수와 백분율이 항상 같다고 볼 수 없다). 또한 브라우저는 같은 브라우저에 표시되는 참고 페이지와 정확히 같은 페이지를 렌더해야 한다. 비트맵 결과만 나오는 Acid2 테스트와 달리 Acid3 테스트의 참고 렌더링의 글자는 비트맵이 아니기 때문에 글꼴 표시의 차이점도 구별할 수 있다.

2007년 4월에 개발되었으며^[1] 2008년 3월 3일에 공개되었다.^[2] 주 개발자는 이언 힉슨(Ian Hickson)으로 그는 Acid2 테스트도 작성하였다. Acid2는 주로 CSS에 초점을 두고 있지만, 세 번째 Acid 테스트는 역시 현대에 쓰이며 매우 상호성이 높은 기술인 웹 2.0(ECMAScript, DOM Level 2와 같은)의 웹사이트 특성에 초점을 둔다. 일부 서브 테스트는 SVG, XML, data: URIs와 관련되어 있다. 논란이 되는 것은, 이 테스트는 CSS2 권고안의 내용 중, CSS2.1에서 삭제되었다가 아직 권고 예정안으로 정해지지 않은 W3C CSS3 개발에 다시 도입된 요소를 일부 포함하고 있다는 점이다.

테스트 내용

Acid3 의 주요 부분은 ECMA스크립트 (자바스크립트)로 쓰여져있고, 네 개의 특별한 서브 테스트(0, 97, 98, 99번)를 포함한 100개의 서브 테스트들이 6개의 '버킷(Bucket)'으로 불리는 묶음으로 나뉘어 있다.^[3]

• 버킷 1: DOM 순회(DOM Traversal), DOM 범위(Range), HTTP
• 버킷 2: DOM2 코어(Core), DOM2 이벤트(Events)
• 버킷 3: DOM2 뷰(Views), DOM2 스타일(Style, CSS 3 선택자(Selectors), 미디어 쿼리
• 버킷 4: 스크립트와 DOM2 HTML에 의한 HTML 테이블/형식의 가동
• 버킷 5: Acid3 경쟁에서 나온 테스트들 (SVG^[4], HTML, SMIL, 유니코드, ...)
• 버킷 6: ECMA스크립트

이 테스트의 표준 규정은 각 브라우저가 기본 설정으로 테스트를 진행하기를 요구한다. 최종 결과는 100/100 의 점수와 함께, 참고 페이지와 픽셀 하나도 다르지 않은 결과가 나와야 한다. 개인용 컴퓨터를 위해 개발된 브라우저의 경우, 화면의 변화가 부드러워야(애플 랩톱에 준하는 성능의 환경에서 각 서브 테스트를 33 ms 안에 통과)^[5] 하지만, 보다 뒤떨어진 환경에서의 느린 결과가 불합격을 뜻하진 않는다.^[6]

테스트를 통과하기 위해서는 또한, 브라우저의 툴바에 특정한 파비콘을 표시해야한다. 하지만 이것은 Acid3 웹 서버에 있는 파비콘 그림이 아닌데, 만일 Acid3 서버에 favicon.ico 파일을 요청하면 404 응답을 하며 화면엔 그림의 데이터만 표시하기 때문이다. 이 테스트는 브라우저가 파비콘을 불러올 때 404 에러 코드를 정확하게 처리하면, 에러를 제대로 인식하여 특정 파비콘을 나타내게 된다.^[7]

페넥 1.0 알파로 테스트한 Acid3 결과. 1. 버킷 2, 4와 6은 16 개의 서브테스트를 모두 통과했고, 버킷 1과 3 은 10개 이상의 서브 테스트를, 버킷 5는 5개 이상의 서브 테스트를 통과했음을 알 수 있다.

테스트가 실행되면서 그림에 사각형들이 추가되는데, 각 사각형의 색깔은 한 버킷 당 통과한 서브 테스트의 개수로부터 결정된다. 만일 특정 버킷에 포함된 모든 서브 테스트에 불합격했다면, 그 버킷에 해당되는 사각형은 화면에 나타나지 않을 것이다. 하나 이상의 서브 테스트에 통과하면, 사각형의 색깔은 네 단계로 변화하게 된다.

• 1 ~ 5 개의 서브 테스트 통과: 검정 사각형
• 6 ~ 10 개의 서브 테스트 통과: 회색 사각형
• 11 ~ 15 개의 서브 테스트 통과: 은색 사각형
• 16개 서브 테스트 모두 통과: 유채색 사각형 (각각 빨강, 주황, 노랑, 연두, 파랑, 보라 색의 사각형)

Acid3 테스트 페이지 표시가 완료되면, 대문자 A는 클릭이 가능한 상태가 되며, 클릭할 경우(새 창에서 보려면 Shift + 클릭) 어떤 서브 테스트가 실패했는지, 그리고 어떤 에러가 발생했는지 설명하는 경고를 볼 수 있다.

이 테스트를 정확히 수행하려면, 프로그램은 W3C에서 현재 표준으로 지정할 것으로 고려중인 CSS 3 Text Shadows 와 CSS 2.x Downloadable Fonts 지시 사항을 만족해야한다. 이것은 테스트에서 20x20 픽셀 크기의 붉은 사각형을 가려주는, "AcidAhemTest"라고 하는 자체 트루타입 폰트의 사용에 필요하다. 내려받아진 폰트가 표시되면 이 글자 모양은, CSS 에 의해 하얀 네모로만 표시되어, 결국 보이지 않게 된다.^[8]

추가로, 이 테스트는 또한 베이스64 코드로 만들어진 그림과, 몇 가지의 더 발달된 선택자, CSS 3 색상 값(HSLA), 그리고 무시되어야 할 가짜 선택자와 값들도 사용한다.

정식 통과한 브라우저

이미 배포된 정식판, 혹은 안정판의 테스트 결과만을 인정한다.

데스크톱 브라우저

레이아웃 엔진	브라우저	발매 일자	최신 버전 및 출시일	렌더링	수행능력
게코	모질라 파이어폭스 4.0[9][10]	2011년 3월 22일	80.0.1 (2020년 9월 1일(4년 전)(2020-09-01)[11]) [±] 78.2.0 (ESR 1) (2020년 8월 25일(4년 전)(2020-08-25)[12]) [±] 68.12.0 (ESR 2) (2020년 8월 25일(4년 전)(2020-08-25)[13]) [±]	예	?
웹키트	구글 크롬 4.0.249.78[14]	2010년 1월 25일	PC, macOS, 리눅스용 62.0.3202.62 (2017년 10월 17일(7년 전)(2017-10-17)) [±] 안드로이드용 (ARM, x86) 62.0.3202.66 (2017년 10월 19일(7년 전)(2017-10-19)) [±] iOS용 62.0.3202.60 (2017년 10월 18일(7년 전)(2017-10-18)) [±]	예	예
웹키트	사파리 4.0[15][16]	2011년 3월 26일	11.0 (2017년 9월 19일(7년 전)(2017-09-19)) [±]	예	예[17]
프레스토	오페라 10[18]	2009년 9월 1일	48.0.2685.32 (2017년 9월 27일(7년 전)(2017-09-27)[19]) [±]	예	?
웹키트	웹 2.28.0[20]	2009년 10월 2일	3.16.3 (2015년 5월 18일(10년 전)(2015-05-18)) [±]	?	?

모바일 브라우저

모바일 브라우저는 기준이 되는 하드웨어를 정할 수 없기 때문에 기능 수행 능력을 '평가'할 수 없다.

레이아웃 엔진	브라우저	발매 일자	렌더링
웹키트	아이리스 브라우저 1.1.4[21]	2009년 3월 14일	예
웹키트	볼트 브라우저 1.6[22]	2009년 12월 7일	예
프레스토	오페라 모바일 9.7[23]	2009년 3월 26일	예

통과하지 못한 브라우저

Acid3는 처음 공개 당시 모든 웹 브라우저가 통과하지 못했기 때문에, 이에 대해 언급하는 것에 신중했다. 많은 수의 브라우저 개발 팀은 테스트 결과를 향상시키기 위해 열의를 다해 일하고 있다.

데스크톱 브라우저

데스크톱 레이아웃 엔진의 Acid3 테스트 결과 추이

레이아웃 엔진	주요 브라우저	Acid3 공개 당시 최신버전의 스크린샷	현재 배포판의 스크린샷	알려진 개발 버전의 스크린샷
KHTML	캉커러	61/100 캉커러 4.0.2	89/100 캉커러 4.3.0	89/100 캉커러[24]
트라이던트	인터넷 익스플로러	14/100 인터넷 익스플로러 7.0	100/100 (만점이지만 부정확한 렌더링 있음) 인터넷 익스플로러 9.0	없음

모바일 브라우저

Acid3 테스트의 모바일 레이아웃 엔진 진행 상황

레이아웃 엔진	주요 브라우저	현재 배포판의 스크린샷	알려진 개발 버전의 스크린샷
웹키트	모바일 사파리	100/100 (만점이지만 부정확한 렌더링 있음) iOS 4.3.3	없음
	안드로이드 브라우저	93/100 안드로이드 2.3 100/100 (만점이지만 부정확한 렌더링 있음) 안드로이드 3.1	없음
	블랙베리 브라우저	100/100 (만점이지만 부정확한 렌더링 있음) 블랙베리 OS 6	없음
	바다 브라우저	98/100 바다 OS 1.0.2	없음
	노키아 미니 맵 브라우저	47/100 S60 5번째 판	없음
	스카이파이어	100/100 (만점이지만 부정확한 렌더링 있음) 스카이파이어 2.0	없음
	웹OS 브라우저	92/100 webOS 1.4	없음
	아이리스 브라우저	100/100 (만점이지만 부정확한 렌더링 있음) 아이리스 브라우저 1.1.4	없음
프레스토	오페라 미니	98/100 오페라 미니 5	없음
게코	모질라 파이어폭스 모바일	97/100 모질라 파이어폭스 모바일 4	없음
	마이크로B	94/100	없음
트라이던트	인터넷 익스플로러 모바일	95/100 인터넷 익스플로러 모바일 9	없음

여담

상단에 YOU SHOULD NOT SEE THIS AT ALL라는 내용이 숨어있다.

같이 보기

• Acid1
• Acid2
• 레이아웃 엔진