HTML 5.1

<h2>From today’s featured article</h2>
<img src="/uploads/100-marie-lloyd.jpg" alt="" width="100" height="150">
<p><b><a href="/wiki/Marie_Lloyd">Marie Lloyd</a></b> (1870–1922)
was an English <a href="/wiki/Music_hall">music hall</a> singer, ...

IDL 속성(attribute)들 srcset, sizes, media는 동일한 이름의 각 콘텐트 속성(attribute)들을 반영 해야(must) 합니다.

<source-size-list> = <source-size># [ , <source-size-value> ]? | <source-size-value>
<source-size> = <media-condition> <source-size-value>
<source-size-value> = <length>

---

img 요소(element)는 현재 요청과 보류 중인 요청을 가집니다. 현재 요청은 초기에 새로운 이미지 요청으로 설정됩니다. 보류 중인 요청은 초기에 null로 설정됩니다. 현재 요청은 보통 img 요소(element) 자체로 언급됩니다.

이미지 요청은 상태, 현재 URL, 이미지 데이터를 가집니다.

이미지 요청의 상태는 다음 중 하나입니다:

사용 불가

유저 에이전트가 이미지 데이터를 얻지 못했거나 이미지의 일부 혹은 모든 데이터를 얻었지만 이미지 치수들을 얻기에 이미지를 충분히 디코드 하지 못한 경우.

일부 사용 가능

유저 에이전트가 이미지 데이터의 일부를 얻었고 적어도 이미지 치수들이 사용 가능 한 경우.

완전히 사용 가능

유저 에이전트가 모든 이미지 데이터를 얻었고 적어도 이미지 치수들이 사용 가능한 경우.

깨짐

유저 에이전트가 얻을 수 있는 모든 이미지 데이터를 얻었지만, 이미지 치수들을 얻기에 충분히 디코드 될 수 없는 경우 (예를 들어, 이미지가 손상되었거나, 지원되지 않는 형식이거나, 얻어질 수 있는 데이터가 없는 경우).

이미지 요청의 현재 URL은 초기에 빈 문자열입니다.

이미지 요청의 이미지 데이터는 디코드 된 이미지 데이터입니다.

이미지 요청이 일부 사용 가능한 상태에 있거나 완전히 사용 가능한 상태에 있는 경우, 그것은 사용 가능하다고 불립니다.

이미지 요청은 초기에 사용 불가입니다.

img 요소(element)가 사용 가능한 경우, 너비가 이미지의 밀도 보정 고유 너비이고, 높이가 이미지의 밀도 보정 고유 높이이며, 모양이 이미지의 고유 모양인 페인트 소스를 제공합니다.

스크립팅이 비활성화 된 브라우징 컨텍스트에서, 유저 에이전트들은 즉시 혹은 요청 시 마다 이미지들을 얻을 수 있습니다. 스크립팅이 활성화 된 브라우징 컨텍스트에서, 유저 에이전트들은 즉시 이미지들을 얻어야(must) 합니다.

이미지들을 즉시 얻는 유저 에이전트는 img 요소(element)가 생성되거나 관련 변경들을 경험할 때마다, 애니메이션 재시작 플래그 설정이 명시된 경우 이 플래그를 가지고 즉시 img 요소(element)의 이미지 데이터를 업데이트해야(must) 합니다.

이미지들을 요청 시마다 얻는 유저 에이전트는 img 요소(element)가 사용 불가 상태에 있을 경우에 한하여 이미지 데이터가 요구 될 때마다 (즉, 요청 시 마다) img 요소(element)의 이미지 데이터를 업데이트 해야(must) 합니다. img 요소(element)가 관련 변경들을 경험할 경우, 유저 에이전트가 요청 시에 이미지를 얻기만 한다면, img 요소(element)는 사용 불가 상태를 반환해야(must) 합니다.

img 요소(element)에 대한 관련 변경들은 다음과 같습니다:

• 요소(element)의 src, srcset, width, sizes 속성(attribute)들이 설정, 변경, 제거 되는 것.
• 요소(element)의 src 속성(attribute)이 이전 값과 동일한 값으로 설정 되는 것. 이것은 이미지 데이터 업데이트 알고리즘을 위한 애니메이션 재시작 플래그를 설정해야(must) 합니다.
• 요소(element)의 crossorigin 속성(attribute)의 상태가 변경되는 것.
• 요소(element)가 picture 부모 요소(element)로 삽입되거나 picture 부모 요소(element)로부터 제거되는 것.
• 요소(element)의 부모가 picture 요소(element)이고 source 요소(element)가 이전 형제로 삽입 되는 것.
• 요소(element)의 부모가 picture 요소(element)이고 이전 형제였던 source 요소(element)가 제거 되는 것.
• 요소(element)의 부모가 picture 요소(element)이고 이전 형제인 source 요소(element)가 그것의 srcset, sizes, media, type 속성(attribute)들이 설정, 변경, 제거 되는 것.
• 요소(element)의 채택 단계들이 수행되는 것.

각 img 요소(element)는 초기에 null 이어야(must) 하는 마지막 선택 된 소스를 가집니다.

각 이미지 요청은 초기에 uyndefined여야(must) 하는, 현재 픽셀 밀도를 가집니다.

img 요소(element)가 1.0이 아닌 현재 픽셀 밀도를 가지는 경우, 요소(element)의 이미지 데이터는 그것의 해상도가 CSS 픽셀 당 기기 픽셀로, 현재 픽셀 밀도 였던 것처럼 취급되어야(must) 합니다. 이미지의 밀도 보정 고유 너비와 높이는 현재 픽셀 밀도를 고려한 이후의 고유 너비와 높이입니다.

예를 들어, CSS 인치 당 96 CSS 픽셀로 주어진 스크린은, 현재 픽셀 밀도가 3.125라면, 그것은 CSS 인치 당 96 × 3.125 = 300 기기 픽셀이 있음을 의미하고, 따라서 이미지 데이터가 300x600이라면, 그것은 300 ÷ 3.125 = 96 CSS 픽셀 x 600 ÷ 3.125 = 192 CSS 픽셀의 고유 치수들 을 가집니다. 2.0의 현재 픽셀 밀도과 (CSS 인치 당 192 기기 픽셀) 동일한 이미지 데이터 (300x600)을 가진 경우, 고유 치수들은 150x300 이 될 것입니다.

각 Document 객체는 사용 가능한 이미지들의 목록을 가져야(must) 합니다. 이 목록 내의 각 이미지는 절대 URL, CORS 설정 속성(attribute) 모드, 그리고 모드가 No CORS라면 출처로 구성되는 튜플에 의해 식별됩니다. 각 이미지는 뿐만 아니라 상위 계층 캐싱 무시 플래그를 가집니다. 유저 에이전트들은 하나의 Document 객체의 사용 가능한 이미지들의 목록으로부터 항목들을 언제든지 다른 곳으로 복사할 수 있지만 (예를 들어, Document가 생성 될 때, 유저 에이전트들은 다른 Document들에 로드되는 모든 이미지들에 그것을 추가할 수 있습니다), 그렇게 수행될 때 이 방법으로 복사된 항목들의 키들을 변경하지 않아야(must)하고, 복사된 항목들에 대한 상위 계층 캐싱 무시 플래그를 해제해야(must) 합니다. 유저 에이전트들은 언제든지 (예를 들어, 메모리를 절약하기 위해) 그 목록들로부터 이미지들을 제거 할 수도 있습니다. 유저 에이전트들은 상위 계층 캐싱 무시 플래그가 해제 된 경우 리소스에 대해 주어진 상위 계층 캐싱 의미에 (예를 들어, HTTP Cache-Control 응답 헤더) 적절하게 사용 가능한 이미지들의 목록에서 항목들을 제거해야(must) 합니다.

사용 가능한 이미지들 목록은 src 속성(attribute)을 이전에 로드된 URL로 변경할 때 동기적 전환을 활성화하고, HTTP당 캐싱을 허용하지 않는 경우에도 동일한 문서에서 이미지들을 재 다운로드하는 것을 방지하기 위해 의도되었습니다. 이전 이미지가 여전히 로딩 중인 동안 동일한 이미지를 다시 다운로드 하는 것을 방지하는데에는 사용되지 않습니다.

예를 들어, 리소스가 HTTP 응답 헤더 Cache-Control: must-revalidate를 가진다면, 유저 에이전트는 사용 가능한 이미지들 목록으로부터 그것을 제거할 것이지만 별도로 이미지 데이터를 유지할 수 있고, 서버가 204 No Content 상태로 응답한다면 그것을 사용할 수 있습니다.

유저 에이전트가 선택적으로 애니메이션 재시작 플래그 설정을 가지고, img 요소(element)의 이미지 데이터를 업데이트하기 위한 경우, 다음 단계들을 수행해야(must) 합니다:

1. 요소(element)의 노드 문서가 활성 문서가 아니라면, 이 하위 단계들을 수행합니다:

   1. 병렬로 이 알고리즘을 수행하는 것을 계속합니다.
   2. 요소(element)의 노드 문서가 활성 문서일 때가지 대기합니다.
   3. 이 img 요소에 대한 이 알고리즘의 다른 인스턴스가 이 인스턴스 이후에 시작되었다면 (그것이 중단되었고 더 이상 수행중이 아니라 하더라도), 이 단계들을 중단합니다.
   4. 이 알고리즘을 계속하기 위한 마이크로작업을 대기열에 넣습니다.
2. 유저 에이전트가 이미지들을 지원하지 못하거나, 그것의 이미지들에 대한 지원이 비활성화 되었다면, 현재 요청과 보류 중인 요청에 대한 이미지 요청을 중단시키고, 현재 요청을 사용 불가 상태로 설정하고, 보류 중인 요청을 null로 두고, 이 단계들을 중단합니다.

3. 요소(element)가 srcset나 picture를 사용하지 않고 부모를 가지지 않거나 부모를 가지지만 picture 요소(element)가 아니고, 명시된 src 속성(attribute)을 가지며 그 값이 빈 문자열이 아니라면, selected source를 요소(element)의 src 속성(attribute)의 값으로 두고, selected pixel density를 1.0으로 둡니다. 그렇지 않으면 selected source를 null로 두고 selected pixel density를 undefined로 둡니다.

4. img 요소(element)의 마지막 선택 된 소스를 selected source로 둡니다.

5. selected source가 null이 아니라면, 이 하위 단계들을 수행합니다:

   1. 요소(element)에 관련하여, selected source를 해석하고, 결과를 absolute URL로 둡니다. 그것이 성공적이지 않다면, 이 단계들의 내부 설정을 중단합니다.
   2. key를 결과로 나온 절대 URL, img 요소(element)의 crossorigin 속성(attribute)의 모드, 그리고 그 모드가 No CORS가 아니라면 노드 문서의 출처로 구성되는 튜플로 둡니다.

   3. 사용 가능한 이미지들의 목록이 key에 대한 항목을 포함한다면, 이 하위 단계들을 수행합니다:

      1. 그 항목에 대한 상위 계층 캐싱 무시 플래그를 설정합니다.
      2. 현재 요청과 보류 중인 요청에 대한 이미지 요청을 중단 시킵니다.
      3. 보류 중인 요청을 null로 둡니다.
      4. 현재 요청을 이미지 데이터가 항목의 이미지 데이터이고 상태가 완전히 사용 가능 상태로 설정 된 새로운 이미지 요청으로 둡니다.
      5. 이미지의 표현을 적절하게 업데이트 합니다.
      6. 현재 요청의 현재 픽셀 밀도를 selected pixel density로 둡니다.
      7. 애니메이션 재시작이 설정되고, 현재 응답의 현재 URL을 absolute URL로 변경하고, 이후 img 요소(element)에 load라는 단순 이벤트를 발생시킨다면, 애니메이션을 재시작하기 위한 작업을 대기열에 넣습니다.
      8. 이미지 데이터 업데이트 알고리즘을 중단합니다.
6. 이 알고리즘이 호출되는 작업이 계속되는 것을 허용하여, 병렬로 안정 상태를 기다립니다. 동기 섹션은 알고리즘이 동기 섹션이 종료되었다고 알릴 때까지 이 알고리즘의 모든 나머지 단계들로 구성됩니다. (동기 섹션내 단계들은 ⌛로 표기됩니다.)

7. ⌛ 이 img 요소(element)에 대한 이 알고리즘의 다른 인스턴스가 이 인스턴스 이후 시작되었다면 (그것이 중단되고 더 이상 수행 중이 아닐지라도), 이 단계들을 중단합니다.

   예를 들어, src, srcset, crossorigin 속성(attribute)가 연속적으로 모두 설정되어 있는 경우, 여러 요청들을 방지하기 위해, 오직 마지막 인스턴스만 적용됩니다.

8. ⌛ selected source와 selected pixel density를 각각 이미지 소스 선택으로부터 얻어진 결과 URL과 픽셀 밀도로 둡니다.

9. ⌛ selected source가 null이라면, 이 하위 단계들을 수행합니다:

   1. ⌛ 현재 요청을 깨짐 상태로 설정하고, 현재 요청과 보류 중인 요청에 대한 이미지 요청을 중단하고, 보류 중인 요청을 null로 둡니다.
   2. ⌛ 현재 요청의 현재 ULR을 빈 문자열로 변경하기 위한 작업을 대기열에 넣고, 이후 요소(element)가 src 속성(attribute)을 가지거나 그것이 srcset이나 picture를 사용한다면, img 요소(element)에 error라는 단순 이벤트를 발생시킵니다.
   3. ⌛ 이 알고리즘을 중단합니다.

10. ⌛ img 요소(element)에 loadstart라는 진행 이벤트를 발생시키기 위한 작업을 대기열에 넣습니다.

    ⌛ 요소(element)의 노드 문서에 관련하여, selected source를 해석하고, absolute URL을 결과 URL 문자열로 둡니다. 그것이 성공적이지 않다면, 이 하위 단계들을 수행합니다:

    1. ⌛ 현재 요청과 보류 중인 요청에 대한 이미지 요청을 중단시킵니다.
    2. ⌛ 현재 요청을 깨짐 상태로 설정합니다.
    3. ⌛ 보류 중인 요청을 null로 둡니다.
    4. ⌛ 현재 요청의 현재 URL을 selected source로 변경하기 위한 작업을 대기열에 넣고, img 요소(element)에 error라는 단순 이벤트를 발생시킨 후 img 요소(element)에 loadend라는 단순 이벤트를 발생시킵니다.
    5. ⌛ 이미지 데이터 업데이트 알고리즘을 중단시킵니다.

11. ⌛ 보류 중인 요청이 null이 아니고, absolute URL가 보류 중인 요청의 현재 URL과 동일하다면, 이 단계들을 중단합니다.

    ⌛ absolute URL이 현재 요청의 현재 URL과 동일하고, 현재 요청이 일부 사용 가능 상태에 있다면, 보류 중인 요청에 대한 이미지 요청을 중단시키고, 애니메이션 재시작이 설정되어 있다면 애니메이션을 재시작하기 위한 작업을 대기열에 넣고 이 단계들을 중단합니다.

    ⌛ 보류 중인 요청이 null이 아니라면, 보류 중인 요청에 대한 이미지 요청을 중단합니다.

    ⌛ image request을 현재 URL이 absolute URL인 새로운 이미지 요청으로 둡니다.

    ⌛ 현재 요청이 사용 불가 상태나 깨짐 상태에 있다면, 현재 요청을 image request로 둡니다. 그렇지 않으면 보류 중인 요청을 image request으로 둡니다.

    ⌛ request을 absolute URL과 요소(element)의 crossorigin 콘텐트 속성(attribute)의 현재 상태가 주어지는 잠정적 CORS 요청을 생성한 결과로 둡니다.

    ⌛ request의 클라이언트를 요소(element)의 노드 문서의 Window 객체의 환경 설정 객체와 유형을 "image"로 설정합니다.

    ⌛ 요소(element)가 srcset나 picture를 사용한다면, request의 개시자를 "imageset"로 설정합니다.

    ⌛ request의 동일 출처 데이터 URL 플래그를 설정합니다.

    ⌛ request를 가져옵니다(fetch). 페칭(fetch) 알고리즘의 이 인스턴스를 image request과 연관짓습니다.

    이 방식으로 얻어진 리소스가 있다면 이 리소스는 image request의 이미지 데이터입니다. 그것은 CORS 동일 출처이거나 CORS 교차 출처일 수 있습니다. 이것은 이미지 자체의 출처에 영향을 미칩니다 (예를 들어, canvas에 사용되는 경우).

    이미지를 가져오는 것(fetch)은 리소스가 가져와(fetch) 지자마자 (아래 정의된) 네트워킹 작업 소스에 의해 대기열에 넣어진 작업이 수행되었을 때까지 요소(element)의 노드 문서의 로드 이벤트를 지연시켜야(must) 합니다.

    불행히도, 이것은 사용자의 로컬 네트워크의 기본적인 포트 조사를 수행하는데 사용될 수 있습니다 (특히 스크립트와 함께, 그러한 공격을 수행하기 위해 실제로 스크립팅이 필요한 것은 아니지만). 유저 에이전트는 이 공격을 완화하기 위해 위에 설명된 것들보다 더 엄격한 교차 출처 접근 제어 정책들을 구현할 수 있지만, 불행히도 그러한 정책들은 일반적으로 현재 사용되는 웹 콘텐트와 호환되지 않습니다.

    리소스가 CORS 교차 출처라면, 이미지가 가져와지는(fetch) 동안 네트워킹 작업 소스에 의해 대기열에 넣어진 각 작업은 img 요소(element)에 progress라는 진행 이벤트를 발생시켜야(must) 합니다.

12. 병렬로 남은 단계들을 계속하되, 가져오는(fetch) 것에서 데이터 누락 없이 동기 섹션 종료시킵니다.

13. 가능한 빨리, 다음 목록에서 처음 적절한 항목으로 건너뜁니다:

    리소스 유형이 multipart/x-mixed-replace라면

    이미지가 가져와지는(fetch) 동안 네트워킹 작업 소스에 의해 대기열에 넣어진 다음 작업은 다음 단계들을 수행해야(must) 합니다:

    1. image request가 보류 중 요청이고 적어도 하나의 본문 부분이 완전히 디코드되었다면, 현재 요청에 대한 이미지 요청을 중단하고 보류 중인 요청을 현재 요청으로 업그레이드 합니다.

    2. 그렇지 않고, image request가 보류 중인 요청이고 유저 에이전트가 image request의 이미지가 일부 치명적인 방법으로 손상되어 이미지의 치수들을 얻을 수 없다고 결정할 수 있다면, 현재 요청에 대한 이미지 요청을 중단하고, 보류 중인 요청을 현재 요청으로 업그레이드하고, 현재 요청의 상태를 깨짐으로 설정합니다.

    3. 그렇지 않고, image request가 현재 요청이고, 그것이 사용 불가 상태에 있으며, 유저 에이전트가 image request의 이미지의 너비와 높이를 결정할 수 있다면, 현재 요청의 상태를 일부 사용 가능으로 설정합니다.

    4. 그렇지 않고, image request가 현재 요청이고, 그것이 사용 불가 상태에 있으며, 유저 에이전트가 image request의 이미지가 일부 치명적인 방법으로 손상되어 치수들을 얻을 수 없다고 결정할 수 있다면, 현재 요청의 상태를 깨짐으로 설정합니다.

    이미지가 가져와지는(fetch) 동안 네트워킹 작업 소스에 의해 대기열에 넣어진 각 작업은 이미지의 표현을 업데이트해야(must) 하지만, 각 새로운 본문 부분이 들어올 때 마다, 그것은 이전 이미지를 교체해야(must) 합니다. 하나의 본문 부분이 완전히 디코드되면, 유저 에이전트는 img 요소(element)를 완전히 사용 가능으로 설정하고 img 요소(element)에 load라는 단순 이벤트를 발생시키기 위한 작업을 대기열에 넣어야(must) 합니다.

    progress와 loadend 이벤트들은 multipart/x-mixed-replace 이미지 스트림들에 대해 발생되지 않습니다.

    리소스 유형과 데이터가 지원되는 이미지 형식에 일치한다면, 아래 기술된 대로

    이미지가 가져와지는(fetch) 동안 네트워킹 작업 소스에 의해 대기열에 넣어진 다음 작업은 다음 단계들을 수행해야(must) 합니다:

    1. 유저 에이전트가 image request의 이미지의 너비와 높이를 결정할 수 있고 image request가 보류 중인 요청이라면, image request의 상태를 일부 사용 가능으로 설정합니다.

    2. 그렇지 않고, 유저 에이전트가 image request의 이미지의 너비와 높이를 결정할 수 있고 image request가 현재 요청이라면, img 요소(element)의 표현을 적절하게 업데이트하고 image request의 상태를 일부 사용 가능으로 설정합니다.

    3. 그렇지 않고, 유저 에이전트가 image request의 이미지가 어떤 치명적 오류로 이미지 치수들을 얻을 수 없다고 결정할 수 있고, image request가 보류 중인 요청이라면, 현재 요청과 보류 중인 요청에 대한 이미지 요청을 중단시키고, 보류 중인 요청을 현재 요청으로 업그레이드하고, 현재 요청을 깨짐 상태로 설정하고, img 요소(element)에 error라는 단순 이벤트를 발생시키고, img 요소(element)에 loadend라는 단순 이벤트를 발생시키고, 이 단계들을 중단시킵니다.

    4. 그렇지 않고, 유저 에이전트가 image request의 이미지가 어떤 치명적 오류로 이미지 치수들을 얻을 수 없다고 결정할 수 있고, image request가 현재 요청이라면, image request에 대한 이미지 요청을 중단시키고, img 요소(element)에 error라는 단순 이벤트를 발생시키고, img 요소(element)에 loadend라는 단순 이벤트를 발생시키고, 이 단계들을 중단합니다.

    이미지가 가져와지는(fetch) 동안 네트워킹 작업 소스에 의해 대기열에 넣어진 그 작업, 그리고 각 차후 작업들은, image request가 현재 요청이라면, 이미지의 표현을 적절하게 업데이트 해야(must) 합니다 (예를 들어, 이미지가 점진적 JPEG라면, 각 패킷은 이미지의 해상도를 향상시킬 수 있습니다).

    게다가, 리소스가 가져와졌을(fetch) 때 네트워킹 작업 소스에 의해 대기열에 넣어진 마지막 작업은 추가적으로 이 단계들을 수행해야(must) 합니다:

    1. image request가 보류 중인 요청이라면, 현재 요청에 대한 이미지 요청을 중단시키고, 보류 중인 요청을 현재 요청으로 업그레이드하고, img 요소(element)의 표현을 적절하게 업데이트 합니다.
    2. image request를 완전히 사용 가능 상태로 설정합니다.
    3. 키 key를 사용하여, 상위 계층 캐싱 무시 플래그 설정과 함께, 이미지를 사용 가능한 이미지들의 목록에 추가합니다.
    4. image request 내 리소스에 따라, img 요소에 load라는 진행 이벤트나 단순 이벤트를 발생시킵니다.
    5. image request 내 리소스에 따라, img 요소에 loadend라는 진행 이벤트나 단순 이벤트를 발생시킵니다.

    그렇지 않으면

    이미지 데이터가 지원되는 파일 형식에 없습니다; 유저 에이전트는 image request를 깨짐 상태로 설정하고, 현재 요청과 보류 중인 요청에 대한 이미지 요청을 중단시키고, image request가 보류 중인 요청이라면 보류 중인 요청을 현재 요청으로 업그레이드하고, 그 후 먼저 img 요소(element)에 error라는 단순 이벤트를 발생시키기고 이후 img 요소(element)에 loadend라는 단순 이벤트를 발생시키기 위한 작업을 대기열에 넣습니다.

이미지 요청 image request에 대해 이미지 요청을 중단시키는 것은 다음 단계들을 수행하는 것을 의미합니다:

1. image request의 이미지 데이터가 있다면 무시합니다.
2. 그 알고리즘에 의해 생성된 모든 보류 중인 작업들을 폐기하여, image request에 대한 페칭(fetching) 알고리즘의 모든 인스턴스를 중단합니다.

img 요소(element)에 대한 보류 중인 요청을 현재 요청으로 업그레이드하는 것은 다음 단계들을 수행하는 것을 의미합니다:

1. img 요소(element)의 현재 요청을 보류 중인 요청으로 둡니다.
2. img 요소(element)의 보류 중인 요청을 null로 둡니다.

리소스 r에 따라 요소(element) e에 type이라는 진행 이벤트나 단순 이벤트를 발생시키는 것은 r이 CORS 동일 출처라면 e에 type이라는 진행 이벤트를 발생시키고, 그렇지 않으면 e에 type이라는 단순 이벤트를 발생시키는 것을 의미합니다.

유저 에이전트가 요소(element) x에 대한 위 알고리즘을 수행하는 동안, 그 요소(element)가 그것의 Document에 없더라도, 요소(element)의 노드 문서로부터 요소(element) x까지 강한 참조가 있어야(must) 합니다.

img 요소(element)는 명시된 srcset 속성(attribute)를 가지거나 picture 요소(element)인 부모를 가진다면 srcset나 picture를 사용한다라고 합니다.

img 요소(element)가 완전히 사용 가능 상태에 있고 유저 에이전트가 오류 없이 미디어 데이터를 디코드할 수 있다면, img 요소(element)는 완전히 디코드 가능하다고 합니다.

이미지가 성공적으로 가져와(fetch)졌는지 아닌지는 (예를 들어, 응답 상태들이 ok 상태들이었는지) 이미지의 유형과 그것이 유효한 이미지인지 아닌지를 결정하는 중에는 무시되어야(must) 합니다.

이것은 오류 응답으로 이미지들을 반환하게 하는 것을 허용하고 그것들을 표시할 수 있습니다.

유저 에이전트는 official type을 제공하는 이미지의 연관된 Content-Type 헤더들을 가지고, 이미지의 유형을 결정하는데 이미지 스니핑 규칙들을 적용해야(should) 합니다. 이 규칙들이 적용되지 않았다면, 이미지의 유형은 이미지의 연관된 Content-Type 헤더들에 의해 주어진 유형이어야(must) 합니다.

유저 에이전트들은 img 요소(element)로 이미지가 아닌 리소스들을 지원하지 않아야(must) 합니다 (예를 들어, 루트 요소(element)가 HTML 요소(element)인 XML 파일들). 유저 에이전트들은 이미지 리소스에 삽입된 실행 가능한 코드를 (예를 들어, 스크립트) 수행하지 않아야(must) 합니다. 유저 에이전트들은 여러 페이지 리소스의 (예를 들어, PDF 파일) 첫 번째 페이지만을 표시해야(must) 합니다. 유저 에이전트들은 리소스가 상호 작용 방식으로 동작하는 것을 허용하지 않아야(must) 하지만, 리소스 내 애니메이션은 수행해야(should) 합니다.

이 명세는 지원되는 이미지 유형들을 명시하지 않습니다.

---

img 요소(element)는 소스 세트와 연관됩니다.

소스 세트는 0개 이상의 이미지 소스들과 소스 크기의 정렬된 집합입니다.

이미지 소스는URL과, 선택적으로 밀도 설명자 혹은 너비 설명자입니다.

소스 크기는 <source-size-value>입니다. 소스 크기가 뷰포트와 관련된 단위를 가진다면, 그것은 img 요소(element)의 문서의 뷰포트와 관련하여 해석되어야(must) 합니다. 다른 단위들은 미디어 쿼리 내의 것와 동일하게 해석되어야(must) 합니다. [MEDIAQ]

주어진 img 요소(element) el에 대해 이미지 소스 선택이 요청되는 경우, 유저 에이전트들은 다음을 수행해야(must) 합니다:

1. el에 대해 소스 세트를 업데이트합니다.
2. el의 소스 세트가 비어있다면, URL로서 null을, 픽셀 밀도로 undefined를 반환하고 이 단계들을 중단합니다.
3. 그렇지 않으면, el의 소스 세트를 취하고 그것을 source set로 둡니다.
4. source set 내 b가 source set 내 앞선 항목 a와 동일한 연관된 밀도 설명자를 가진다면, 항목 b를 제거합니다. source set에 앞선 항목과 동일한 연관된 밀도 설명자를 가지는 항목이 없을 때까지 이 단계를 반복합니다.
5. 유저 에이전트 특정 방식으로, source set로부터 이미지 소스하나를 선택합니다. 이것을 selected source로 둡니다.
6. selected source과 그것의 연관된 픽셀 밀도를 반환합니다.

주어진 img 요소(element) el에 대해 소스 세트 업데이트가 요청되는 경우, 유저 에이전트는 다음을 수행해야(must) 합니다:

1. el의 소스 세트를 빈 소스 세트로 설정합니다.
2. el이 부모 노드를 가지고 그것이 picture 요소(element)라면, elements를 연관된 순서를 고정시켜, el의 부모 노드의 자식 요소(element)들을 포함하는 배열로 둡니다. 그렇지 않으면, elements를 el만 포함하는 배열로 둡니다.
3. el이 width 속성(attribute)을 가지고, 치수 값 해석에 대한 규칙 을 사용하여 그 속성(attribtue)의 값을 해석한 것이 오류나 퍼센트 값을 생성하지 않는다면, width를 반환된 정수 값으로 둡니다. 그렇지 않으면, width를 null로 둡니다.

4. 각 항목 child에 대해 다음을 수행하여, elements를 반복합니다:

   1. child가 el라면:

      1. child가 srcset 속성(attribute)을 가진다면, child의 srcset 속성(attribute)을 해석하고 반환 된 소스 세트를 source set로 둡니다. 그렇지 않으면, source set를 빈 소스 세트로 둡니다.
      2. 폴백 너비 width를 가지고 child의 sizes 속성(attribute)을 해석하고, source set의 소스 크기를 반환된 값으로 둡니다.
      3. child가 값이 빈 문자열이 아니고 source set가 1의 밀도 설명자 값을 가진 이미지 소스를 포함하지 않는 src 속성(attribute)을 가지고, 너비 설명자가 있는 이미지 소스가 없다면, child의 src 속성(attribute)을 source set에 추가(append) 합니다.
      4. source set의 소스 밀도를 정규화합니다.
      5. el의 소스 세트를 source set로 둡니다.
      6. 이 알고리즘을 중단합니다.
   2. child가 source 요소(element)가 아니라면, 다음 자식에 대해 계속합니다. 그렇지 않으면, child은 source 요소(element)입니다.
   3. child가 srcset 속성(attribute)을 가지지 않으면, 다음 자식에 대해 계속합니다.
   4. child의 srcset 속성(attribute)을 해석하고 반환된 소스 세트를 source set로 둡니다.
   5. source set가 0개의 소스 세트를 가진다면, 다음 자식에 대해 계속합니다.
   6. child가 media 속성(attribute)을 가지고 그 값이 환경에 일치하지 않으면, 다음 자식에 대해 계속합니다.
   7. 폴백 너비 width를 가지고 child의 sizes 속성(attribute)을 해석하고, source set의 소스 크기를 반환된 값으로 둡니다.
   8. child가 type 속성(attribute)을 가지고, 그 값이 알 수 없거나 지원되지 않는 MIME 타입이라면, 다음 자식에 대해 계속합니다.
   9. source set의 소스 밀도를 정규화합니다.
   10. el의 소스 세트를 source set으로 둡니다.
   11. 이 알고리즘을 중단합니다.

각 img 요소(element)는 이미지 소스를 선택하기 위해 다른 (유효하지 않은) 요소(element)들을 무시하여, 동일한 picture 요소(element) 내 다른 img 요소(element)들이나, 관련된 img 요소(element)의 형제들을 따르는 source 요소(element)들을 포함하여, 독립적으로 그것의 이전 형제 source 요소(element)들과 img 요소(element) 자체를 고려합니다.

요소(element)로부터 srcset 속성(attribute) 해석이 from an element, 요청 되는 경우, 다음과 같이 요소(element)의 srcset의 값을 해석합니다:

1. input을 이 알고리즘에 전달된 값으로 둡니다.
2. position을 초기에 문자열의 시작을 가리키는 input 내 포인터로 둡니다.
3. candidates를 초기에 빈 소스 세트로 둡니다.
4. 분할 반복: 공백 문자들이나 U+002C 콤마 문자들인 일련의 문자들을 수집합니다. U+002C 콤마 문자들이 수집되었다면, 그것은 해석 오류입니다.
5. position가 input의 끝을 지났다면, candidates를 반환하고 이 단계들을 중단합니다.
6. 공백 문자들이 아닌 일련의 문자들을 수집하고, 그것을 url로 둡니다.
7. descriptors를 새로운 빈 목록으로 둡니다

8. url이 U+002C 콤마 문자 (,)로 끝난다면, 이 하위 단계들을 따릅니다:

   1. url로부터 뒤따르는 002C 콤마 문자들을 제거합니다. 이것이 여러 문자를 제거했다면, 그것은 해석 오류입니다.

   그렇지 않으면, 이 하위 단계들을 따릅니다:

   1. Descriptor tokenizer: 여백을 건너뜁니다.
   2. current descriptor를 빈 문자열로 둡니다.
   3. state를 설명자 안에 둡니다.

   4. c를 position에 위치한 문자로 둡니다. state의 값에 따라 다음을 수행합니다. 이 단계의 목적에 따라, "EOF"는 position이 input의 끝을 지났음을 나타내는 특수한 문자입니다.

      설명자 내부

      c의 값에 따라 다음을 수행합니다:

      공백 문자

      current descriptor가 비어있지 않다면, current descriptor를 descriptors에 추가(append)하고 current descriptor를 빈 문자열로 둡니다. state를 다음 설명자로 설정합니다.

      U+002C 콤마 (,)

      position을 input 내 다음 문자로 전진시킵니다. current descriptor가 비어있지 않다면, current descriptor를 descriptors에 추가(append)합니다. 설명자 해석으로 라벨링 된 단계로 건너뜁니다.

      U+0028 왼쪽 괄호 (()

      c를 current descriptor에 추가(append)합니다. state를 괄호(parens) 내부로 설정합니다.

      EOF

      current descriptor이 비어있지 않다면, current descriptor를 descriptors에 추가(append)합니다. 설명자 해석으로 라벨링된 단계로 건너뜁니다.

      그 밖에 다른 것들

      c를 current descriptor에 추가(append) 합니다.

      괄호(parens) 내부

      c의 값에 따라 다음을 수행합니다:

      U+0029 오른쪽 괄호 ())

      c를 current descriptor에 추가(append) 합니다. state를 설명자 내부로 설정합니다.

      EOF

      current descriptor를 descriptors에 추가(append) 합니다. 설명자 해석으로 라벨링 된 단계로 건너뜁니다.

      그 밖에 다른 것들

      c를 current descriptor에 추가(append) 합니다.

      설명자 이후

      c의 값에 따라 다음을 수행합니다:

      공백 문자

      이 상태에 머무릅니다.

      EOF

      설명자 해석으로 라벨링 된 단계로 건너뜁니다.

      그 밖에 다른 것들

      state를 설명자 내부로 설정합니다. position를 input 내 이전 문자로 설정합니다.

      position을 input 내 다음 문자로 전진시킵니다. 이 하위 단계를 반복합니다.

      향후 추가되는 것들과 호환이 되기 위해, 이 알고리즘은 여러 설명자들과 괄호를 가진 설명자들을 지원합니다.

9. 설명자 해석: error를 no로 둡니다.
10. width를 absent로 둡니다.
11. density를 absent로 둡니다.
12. future-compat-h를 absent로 둡니다.

13. descriptors 내 각 설명자에 대해, 다음 목록으로부터 첫 적절한 단계의 세트를 수행합니다:

    설명자가 U+0077 라틴 소문자 W가 뒤따르는 유효한 음이 아닌 정수로 구성된다면

    1. 유저 에이전트가 sizes 속성(attribute)을 지원하지 않는다면, error를 yes로 둡니다.

       지침을 따르는 유저 에이전트는 sizes 속성(attribute)을 지원할 것입니다. 하지만, 유저 에이전트들은 일반적으로 실제로는 점진적인 방식으로 기능을 구현하고 제공합니다.

    2. width와 density가 모두 absent가 아니라면, error를 yes로 둡니다.
    3. 음이 아닌 정수 해석에 대한 규칙을 설명자에 적용합니다. 결과가 0이라면, error를 yes로 둡니다. 그렇지 않으면, width를 그 결과로 둡니다.

    설명자가 U+0078 라틴 소문자 X가 뒤따르는 유효한 부동소수점 수로 구성된다면

    1. width, density, future-compat-h가 모두 absent가 아니라면, error를 yes로 둡니다.

    2. 부동 소수점 수 값 해석에 대한 규칙을 설명자를 적용합니다. 결과가 0보다 작다면, error를 yes로 둡니다. 그렇지 않으면, density를 그 결과로 둡니다.

       density가 0이라면, 고유 치수들은 무한대가 될 것입니다. 유저 에이전트들은 하드웨어 제한사항들 조항에 따라 허용된 큰 이미지들을 렌더링하는데 한계가 있을 것으로 예상됩니다.

    설명자가 U+0068 라틴 소문자 H가 뒤따르는 유효한 음이 아닌 정수로 구성된다면

    이것은 해석 오류입니다.

    1. future-compat-h와 density가 모두 absent가 아니라면, error를 yes로 둡니다.
    2. 음이 아닌 정수 해석에 대한 규칙을 설명자에 적용합니다. 결과가 0이라면, error를 yes로 둡니다. 그렇지 않으면, future-compat-h를 그 결과로 둡니다.

    그 밖에 다른 것들

    error를 yes로 둡니다.

14. future-compat-h가 absent가 아니고 width가 absent라면, error를 yes로 둡니다.
15. error가 여전히 no라면, URL이 url이고 width가 absent가 아니라면 너비 width와 density가 absent가 아니라면 픽셀 밀도가 density와 연관된, 새로운 이미지 소스를 candidates에 추가(append) 합니다. 그렇지 않으면 해석 오류가 있습니다.
16. 분할 반복으로 라벨링 된 단계로 돌아갑니다.

요소(element)에 대해 크기 속성(attribute)을 해석하도록 요청 될 경우, 요소(element)의 sizes 속성(attribute)의 값으로부터 (속성(attribute)이 없다면, 빈 문자열로부터) 컴포넌트 값들의 콤마로 분리된 목록을 해석하고, unparsed sizes list를 그 결과로 둡니다. [CSS-SYNTAX-3]

unparsed sizes list 내 각 unparsed size에 대해:

1. unparsed size의 끝에서 모든 연속된 <whitespace-token>들을 제거합니다. unparsed size가 현재 비어있다면, 그것은 해석 오류입니다; 이 알고리즘의 다음 반복으로 계속합니다.
2. unparsed size 내 마지막 컴포넌트 값이 유효한 음이 아닌 <source-size-value>라면, size를 그것의 값으로 두고 unparsed size로부터 컴포넌트 값을 제거합니다. calc() 함수 이외의 CSS 함수는 유효하지 않습니다. 그렇지 않으면 해석 오류가 있습니다; 이 알고리즘의 다음 반복으로 계속합니다.
3. unparsed size의 끝에서 모든 연속된 <whitespace-token>들을 제거합니다. unparsed size가 현재 비어있다면, size를 반환하고 이 알고리즘을 나갑니다. 이것이 unparsed sizes list의 마지막 항목이 아니었다면, 그것은 해석 오류입니다.
4. unparsed size 내 나머지 컴포넌트 값들을 <media-condition>로 해석합니다. 정확하게 해석하지 않거나, 정확하게 해석하지만 <media-condition>가 false로 평가된다면, 이 알고리즘의 다음 반복으로 계속합니다. [MEDIAQ]
5. size를 반환하고 이 알고리즘을 나갑니다.

위 알고리즘이 반환하는 size 값 없이 unparsed sizes list를 소진한다면, 이 단계들을 따릅니다:

1. width가 null이 아니라면, 값 width과 단위 px을 가진 <length>를 반환합니다.
2. 100vw을 반환합니다.

위 알고리즘들에 대한 해석 오류가 입력과 요구사항들 사이의 치명적이지 않은 불일치를 나타냅니다. 유저 에이전트들은 어떻게든 해석 오류들을 노출하도록 권장됩니다.

유효한 소스 크기 목록이 (<media-condition>를 수반하지 않고) <source-size-list> 내 마지막 항목으로 텅 빈 <source-size-value>만을 포함하는 동안, 해석 알고리즘은 기술적으로 목록 내 어느 지점에나 허용되고, 목록 내 이전 항목들이 사용되지 않았다면 즉시 사이즈로 그것을 받아들일 것입니다. 이것은 미래 확장들을 가능하게 하는 것이고, 마지막 쉼표와 같은 단순한 작성자 오류들로부터 보호합니다.

이미지 소스는 모든 수반하는 그것의 URL에 밀도 설명자나 너비 설명자를 가지거나 어떤 설명자도 가지지 않을 수 있습니다. 소스 세트를 정규화 하는 것은 모든 이미지 소스에 밀도 설명자를 제공합니다

소스 세트 source set의 소스 밀도 정규화가 요청 되는 경우, 유저 에이전트는 다음을 수행해야(must) 합니다:

1. source size를 source set의 소스 크기로 둡니다.

2. source set 내 각 이미지 소스에 대해:

   1. 이미지 소스가 밀도 설명자를 가진다면, 다음 이미지 소스로 계속합니다.

   2. 그렇지 않고, 이미지 소스가 너비 설명자를 가진다면, 너비 설명자를 너비 설명자의 값을 소스 크기로 나눈 값과 x 단위로 교체합니다.

      소스 크기가 0이라면, 밀도는 고유 치수들이 0 x 0이 되는 결과를 낳는 무한대가 될 것입니다.

   3. 그렇지 않으면, 이미지 소스에 1x의 밀도 설명자를 제공합니다.

유저 에이전트는 환경의 변화에 반응하도록 img 요소(element)의 이미지를 갱신하기 위해 언제든지 다음 알고리즘을 수행할 수 있습니다. (유저 에이전트들은 이 알고리즘을 전혀 수행할 필요가 없습니다; 예를 들어, 사용자가 더 이상 페이지를 보고 있지 않다면, 유저 에이전트는 사용자가 사용할 이미지를 결정하기 전에, 그 동안에 환경이 다시 변경되는 경우, 페이지로 돌아올 때까지 기다리기 원할 수 있습니다.)

유저 에이전트들은 특히 사용자가 뷰포트의 크기를 변경하는 경우 (예를 들어 윈도우를 리사이징하거나 페이지 줌을 변경하여), 그리고 img 요소(element)가 문서에 삽입되는 경우, 이 알고리즘이 수행되도록 권장되기 때문에, 밀도 보정 고유 너비와 높이는 새로운 뷰포트에 일치하고, 때문에 art direction이 수반되는 경우 올바른 이미지가 선택됩니다.

1. 병렬로 안정 상태를 기다립니다. 동기 섹션은 알고리즘이 동기 섹션이 종료되었다고 알리기 전까지 이 알고리즘의 모든 나머지 단계들로 구성됩니다. (동기 섹션의 단계들은 ⌛로 표기 됩니다.)
2. ⌛ img 요소(element)가 srcset나 picture를 사용하지 않거나, 그것의 노드 문서는 활성 문서가 아니거나, 리소스 유형이 multipart/x-mixed-replace인 이미지 데이터를 가지거나, 보류 중인 요청이 null이 아니라면, 이 알고리즘을 중단합니다.
3. ⌛ selected source와 selected pixel density를 각각 URL과 이미지 소스 선택의 결과 픽셀 밀도로 둡니다.
4. ⌛ selected source가 null이라면, 이 단계들을 중단합니다.
5. ⌛ selected source와 selected pixel density가 요소(element)의 마지막 선택된 소스와 현재 픽셀 밀도와 동일하다면, 이 단계들을 중단합니다.
6. ⌛ selected source를 해석하고, 요소(element)의 노드 문서에 관련 짓고, absolute URL를 결과 URL 문자열로 둡니다. 그것이 성공적이지 않다면, 이 단계들을 중단합니다.
7. ⌛ corsAttributeState를 요소(element)의 crossorigin 콘텐트 속성(attriute)의 상태로 둡니다.
8. ⌛ origin을 img 요소(element)의 노드 문서의 출처(origin)로 둡니다.
9. ⌛ client를 img 요소(element)의 노드 문서의 Window 객체의 환경 설정 객체로 둡니다.
10. ⌛ Let key를 absolute URL과 corsAttributeState와, corsAttributeState가 No CORS라면 origin으로 구성되는 튜플로 둡니다.
11. ⌛ image request를 현재 URL이 absolute URL인 새로운 이미지 요청으로 둡니다.
12. ⌛ 요소의 보류 중인 요청을 이미지 요청으로 둡니다.
13. 병렬로 나머지 단계들을 계속하여, 동기 섹션을 종료합니다.

14. 사용 가능한 이미지들의 목록이 key에 대한 항목을 포함한다면, image request의 이미지 데이터를 항목의 그것으로 설정합니다. 다음 단계로 계속합니다.

    그렇지 않으면, 이 하위 단계들을 수행합니다:

    1. request를 absolute URL과 corsAttributeState이 주어진 잠정적 CORS 요청을 생성한 결과로 둡니다.
    2. request의 클라이언트를 client로, 유형을 "image"로 설정하고, request의 동기 플래그를 설정합니다.
    3. response를 request를 가져온(fetch) 결과로 둡니다.
    4. response의 안전하지 않은 응답이 네트워크 오류이거나, (앞서 언급된 것 처럼, 이미지 스니핑 규칙들을 적용하여 결정된) 이미지 형식이 지원되지 않거나, 유저 에이전트가 image request의 이미지가 치명적인 방법으로 이미지 치수들을 얻을 수 없는 오류가 생겼다고 결정할 수 있거나, 리소스 유형이 multipart/x-mixed-replace라면, 보류 중인 요청을 null로 두고 이 단계들을 중단합니다.
    5. 그렇지 않으면, response의 안전하지 않은 응답은 image request의 이미지 데이터입니다. 이것은 CORS-동일-출처나 CORS 교차 출처일 수 있습니다; 이것은 아미지 자체의 출처(origin)에 영향을 줍니다 (예를 들어, canvas에 사용되는 경우).

15. 다음 하위 단계들을 수해행하기 위한 작업을 대기열에 넣습니다:

    1. img 요소(element)가 이 알고리즘이 시작된 이후 관련 변경들 경험이 있다면, 보류 중인 요청을 null로 두고 이 단계들을 중단합니다.
    2. img 요소(element)의 마지막 선택된 소스를 selected source로 그리고 img 요소(element)의 현재 픽셀 밀도를 selected pixel density로 둡니다.
    3. image request를 완전히 사용 가능 상태로 설정합니다.
    4. 키 key를 사용하여, 상위 계층 캐싱 무시 플래그 설정을 가지고 이미지를 사용 가능한 이미지들의 목록에 추가(add) 합니다.
    5. 지연 요청을 현재 요청으로 업그레이드 합니다.
    6. img 요소(element)의 표현을 적절하게 업데이트 합니다.
    7. img 요소(element)에 load라는 단순 이벤트를 발생시킵니다.

---

이 섹션내 알고리즘에 의해 대기열에 넣어진 작업들에 대한 작업 소스는 DOM 조작 작업 소스입니다.

---

img 요소(element)가 나타내는 것은 src 속성(attribute)과 alt 속성(attribute)에 따라 달라집니다.

src 속성(attribute)이 설정되었고 alt 속성(attribute)이 빈 문자열로 설정되었다면

이미지는 콘텐트의 나머지에 대해 문서 내 일부 다른 정보와 중복되는 장식적이거나 보조적인 것입니다.

이미지가 사용 가능하고 유저 에이전트가 그 이미지를 표현하도록 설정되었다면, 요소(element)는 요소(element)의 이미지 데이터를 나타냅니다.

그렇지 않으면, 요소(element)는 아무 것도 나타내지 않고, 렌더링으로부터 완전히 생략될 것입니다. 유저 에이전트들은 이미지가 존재하지만 렌더링으로부터 생략되었다는 알림을 사용자에게 제공할 수 있습니다.

src 속성(attribute)이 설정되었고 alt 속성(attribute)이 비어 있지 않은 값으로 설정되었다면

이미지는 콘텐트의 중요한 부분입니다; alt 속성(attribute)은 이미지에 대한 텍스트 형식의 동등한 것이나 대체를 제공합니다.

이미지가 사용 가능하고 유저 에이전트가 그 이미지를 표시하도록 설정되었다면, 요소(element)는 요소(element)의 이미지 데이터를 나타냅니다 .

그렇지 않으면, 요소(element)는 alt 속성(attribute)에 의해 주어진 텍스트를 나타냅니다. 유저 에이전트들은 이미지가 존재하지만 렌더링으로부터 생략되었다는 알림을 사용자에게 제공할 수 있습니다.

src 속성(attribute)이 설정되었고 alt 속성(attribute)이 설정되지 않았다면

사용 가능한 이미지의 텍스트 형식의 동등한 것이 존재하지 않습니다.

이미지가 사용 가능하고 유저 에이전트가 그 이미지를 표시하도록 설정되었다면, 요소(element)는 요소(element)의 이미지 데이터를 나타냅니다.

그렇지 않으면, 유저 에이전트는 렝더링 되지 않는 이미지가 있음을 나타내는 일종의 지시기를 표시해야(should) 하고, 사용자에 의해 요청되었거나 그렇게 설정되었거나, 탐색에 대한 응답으로 상황에 맞는 정보를 제공하도록 요구된 경우 다음과 같이 얻어진 이미지에 대한 캡션 정보를 제공할 수 있습니다:

1. 이미지가 자식 figcaption 요소(element)를 가진 figure 요소(element)의 후손이고, figcaption 요소(element)와 그것의 후손을 무시하고 figure 요소(element)가 요소(element) 간 여백 외 다른 후손 Text 노드를 가지지 않고, img 요소(element) 외 후손 삽입(embedded) 콘텐트가 없다면, 첫 번째 그 figcaption 요소(element)의 콘텐츠가 캡션 정보입니다; 이 단계들을 중단합니다.
2. 캡션 정보가 존재하지 않습니다.

src 속성(attribute)이 설정되지 않았거나, alt 속성(attribute)이 빈 문자열로 설정되었거나 alt 속성(attribute)이 전혀 설정되지 않았다면

요소(element)는 아무 것도 나타내지 않습니다.

그렇지 않으면

요소(element)는 alt 속성(attribute)에 의해 주어진 텍스트를 나타냅니다.

alt 속성(attribute)은 조언 정보를 나타내지 않습니다. 유저 에이전트들은 title 속성(attribute)의 콘텐트와 동일한 방식으로 alt 속성(attribute)의 콘텐츠를 표현하지 않아야(must) 합니다.

유저 에이전트들은 사용자에게 이미지를 표시하거나, 이미지가 표시되는 것을 막는 옵션을 옵션을 항상 제공할 수 있습니다. 유저 에이전트들은 또한 사용자가 그것을 볼 수 없을 경우, 예를 들어, 시각 장애 때문에 혹은 그들이 그래픽 기능이 없는 텍스트 단말기를 사용하기 때문에, 이미지를 사용할 수 있도록 휴리스틱을 적용할 수 있습니다. 그러한 휴리스틱들은 예를 들어, 이미지 내에서 발견된 텍스트의 광학 문자 인식 (OCR)을 포함할 수 있습니다.

유저 에이전트들이 alt 속성(attribute)들이 누락되는 케이스를 바로잡도록 권장되는 반면, 작성자들은 그러한 행위에 의존하지 않아야(must) 합니다. 이미지들에 대한 대체로서 수행하도록 텍스트를 제공하는 요구사항들은 아래 상세 내용에 기술됩니다.

img 요소(element)들의 콘텐츠가 있다면, 렌더링 목적을 위해 무시됩니다.

alt, src, srcset, sizes IDL 속성(attribute)들은 각각 동일한 이름의 콘텐트 속성(attribute)들을 반영해야(must) 합니다.

crossOrigin IDL 속성(attribute)은 crossorigin 콘텐트 속성(attribute)을 반영해야(must) 합니다.

useMap IDL 속성(attribute)은 usemap 콘텐트 속성(attribute)을 반영해야(must) 합니다.

isMap IDL 속성(attribute)은 ismap 콘텐트 속성(attribute)을 반영해야(must) 합니다.

IDL 속성(attribute) width와 height는 이미지가 렌더링 되고 있고 시각 매체에 렌더링 되고 있다면 CSS 픽셀로 이미지의 렌더링 된 너비와 높이를 반환해야(must) 하거나; 이미지가 고유 치수들을 가지고 사용 가능 하지만 시각 매체에 렌더링 되고 있지 않다면 이미지의 밀도 보정 고유 너비와 높이를 CSS 픽셀로 반환해야(must) 하거나; 이미지가 사용 가능 하지않거나 고유 치수들을 가지지 않는다면 0을 반환해야(must) 합니다. [CSS-2015]

설정할 때, 그것들은 각각 동일한 이름의 콘텐트 속성(attribute)들을 반영한 것처럼 수행해야(must) 합니다.

IDL 속성(attribute)들 naturalWidth와 naturalHeight는 이미지가 고유 치수들을 가지고 사용 가능 하다면 이미지의 밀도 보정 고유 너비와 높이를 CSS 픽셀로 반환해야(must) 하고, 그렇지 않으면 0을 반환해야(must) 합니다. [CSS-2015]

IDL 속성(attribue) complete는 다음 조건 중 어떤 것이라도 참이라면 true를 반환해야(must) 합니다:

• src 속성(attribute)과 srcset 속성(attribute)이 모두 생략.
• srcset 속성(attribute)이 생략되었고 src 속성(attribute)의 값이 빈 문자열.
• 리소스가 가져와졌을(fetch) 때 네트워킹 작업 소스에 의해 대기열에 넣어진 마지막 작업이 대기열에 넣어짐.
• img 요소(element)가 완전히 사용 가능.
• img 요소(element)가 깨짐.

그렇지 않으면, 속성(attribute)은 false를 반환해야(must) 합니다.

complete의 값은 따라서 script가 실행되는 동안 변경될 수 있습니다.

currentSrc IDL 속성(attribute)은 img 요소(element)의 현재 요청의 현재 URL을 반환해야(must) 합니다.

생성자는 HTMLImageElement 객체를 (이외에도 createElement() 같은 DOM에서 팩토리 메서드) 생성하기 위해 제공됩니다: Image(width, height). 생성자가 호출 될 때, 이것은 새로운 HTMLImageElement 객체를 (새로운 img 요소(element)를) 반환해야(must) 합니다. width 인자가 존재한다면, 새로운 객체의 width 콘텐트 속성(attribute)은 width로 설정되어야(must) 합니다. height 인자 역시 존재한다면, 새로운 객체의 height 콘텐트 속성(attribute)은 height로 설정되어야(must) 합니다. 요소(element)의 노드 문서는 호출된 생성자의 인터페이스 객체가 발견된 Window 객체의 브라우징 컨텍스트의 활성 문서이어야(must) 합니다.

<ul>
  <li><button><img src="b.png" alt="Bold"></button></li>
  <li><button><img src="i.png" alt="Italics"></button></li>
  <li><button><img src="strike.png" alt="Strike through"></button></li>
  <li><button><img src="blist.png" alt="Bulleted list"></button></li>
  <li><button><img src="nlist.png" alt="Numbered list"></button></li>
</ul>

<a href="https://w3.org">
<img src="images/w3c_home.png" width="72" height="48" alt="W3C web site">
</a>

<a href="https://w3.org">
<img src="images/w3c_home.png" width="72" height="48" alt="W3C home">
</a>

<a href="preview.html">
<img src="images/preview.png" width="32" height="30" alt="Print preview.">
</a>

<button>
<img src="images/search.png" width="74" height="29" alt="Search">
</button>

<a href="pipco-home.html">
<img src="pip.gif" alt="PIP CO home"><img src="co.gif" alt="">
</a>

<img src="piechart.gif" alt="Pie chart: Browser Share - Internet Explorer 25%, Firefox 40%, Chrome 25%, Safari 6% and Opera 4%.">

<p id="graph7">According to a recent study Firefox has a 40% browser share,
  Internet Explorer has 25%, Chrome has 25%, Safari has 6% and Opera has 4%.</p>
<p><img src="piechart.gif" alt="The browser shares as a pie chart."></p>

<a href="#desc"><img src="flowchart.gif"
  alt="Flowchart: Dealing with a broken lamp."></a>

...

...

<div id="desc">
<h2>Dealing with a broken lamp</h2>
<ol>
<li>Check if it’s plugged in, if not, plug it in.</li>
<li>If it still doesn’t work; check if the bulb is burned out. If it is, replace the bulb.</li>
<li>If it still doesn’t work; buy a new lamp.</li>
</ol>
</div>

<figure>
<figcaption>Rainfall Data</figcaption>
<img src="rainchart.gif" alt="Bar chart: average rainfall by Country and Season.
Full description in Table below.">
<table id="table-4">
<caption>Rainfall in millimetres by Country and Season.</caption>
<tr><td><th scope="col">UK <th scope="col">Japan<th scope="col">Australia</tr>
<tr><th scope="row">Spring <td>5.5 (highest)<td>2.4 <td>2 (lowest)</tr>
<tr><th scope="row">Summer <td>4.5 (highest)<td>3.4<td>2 (lowest)</tr>
<tr><th scope="row">Autumn <td>3.5 (highest) <td>1.8 <td>1.5 (lowest)</tr>
<tr><th scope="row">Winter <td>1.5 (highest) <td>1.2 <td>1 lowest</tr>
</table>
</figure>

<figure>
<img src="flowchart.gif" alt="Flowchart: Dealing with a broken lamp.">
<details>
<summary>Dealing with a broken lamp</summary>
<ol>
<li>Check if it’s plugged in, if not, plug it in.</li>
<li>If it still doesn’t work; check if the bulb is burned out. If it is, replace the bulb.</li>
<li>If it still doesn’t work; buy a new lamp.</li>
</ol>
</details>
</figure>

<h1><img src="gethappy.gif" alt="Get Happy!"></h1>

<p><img src="sale.gif" alt="The BIG sale ...ends Friday."></p>

<p>Only <img src="euro.png" alt="euro ">5.99!

<p><img src="initials/fancyO.png" alt="O">nce upon a time and a long long time ago...

<p><img src="figure1.gif" alt="Figure 1. Distribution of Articles by Journal Category.
Pie chart: Language=68%, Education=14% and Science=18%."></p>

<figure>
<img src="figure1.gif" alt="Figure 1">
<figcaption><strong>Figure 1.</strong> Distribution of Articles by Journal Category.
Pie chart: Language=68%, Education=14% and Science=18%.</figcaption>
</figure>

<header>
<h1>The Lady of Shalott</h1>
<p>A poem by Alfred Lord Tennyson</p>
</header>

<img src="shalott.jpeg" alt="Painting - a young woman with long hair, sitting in a wooden boat. Full description below.">
<p><a href="#des">Description of the painting</a>.</p>

<!-- Full Recitation of Alfred, Lord Tennyson’s Poem.  -->

...
...
...
<p id="des">The woman in the painting is wearing a flowing white dress. A large piece of intricately
patterned fabric is draped over the side. In her right hand she holds the chain mooring the boat. Her expression
is mournful. She stares at a crucifix lying in front of her. Beside it are three candles. Two have blown out.
<a href="https://bit.ly/5HJvVZ">Further information about the painting</a>.</p>

<img src="orateur_robin_berjon.png" alt="Portrait photo(black and white) of Robin.">
<h1>Robin Berjon</h1>
<p>What more needs to be said?</p>

<header><h1>The Lady of Shalott</h1>
<p>A poem by Alfred Lord Tennyson</p></header>
<figure>
<img src="shalott.jpeg" alt="Painting: a woman in a white flowing dress, sitting in a small boat.">
<p><a href="https://bit.ly/5HJvVZ">About this painting.</a></p>
</figure>
<!-- Full Recitation of Alfred, Lord Tennyson’s Poem.  -->

<header>
<div><img src="border.gif" alt="" width="400" height="30"></div>
<h1>Clara’s Blog</h1>
</header>
<p>Welcome to my blog...</p>

I <img src="heart.png" alt="love"> you.

My <img src="heart.png" alt="heart"> breaks.

<img src="pip.gif" alt="PIP CO"><img src="co.gif" alt="">

<p>Rating:
<img src="1" alt="3 out of 5">
<img src="1" alt=""><img src="1" alt="">
<img src="0" alt=""><img src="0" alt="">
</p>

<p>View houses for sale in North Katoomba or South Katoomba:</p>
  <p><img src="imagemap.png" width="209" alt="Map of Katoomba" height="249" usemap="#Map">

  <map name="Map">
  <area shape="poly" coords="78,124,124,10,189,29,173,93,168,132,136,151,110,130"
  href="north.html" alt="Houses in North Katoomba">
  <area shape="poly" coords="66,63,80,135,106,138,137,154,167,137,175,133,144,240,49,223,17,137,17,61"
  alt="Houses in South Katoomba" href="south.html">
  </map>

<h1>The crocoduck</h1>
<p>You encounter a strange creature called a "crocoduck".
The creature seems angry! Perhaps some friendly stroking will help to calm
it, but be careful not to stroke any crocodile parts. This would just enrage
the beast further.</p>
<a href="?stroke=head"><img src="crocoduck1.png" alt="Stroke crocodile’s angry, chomping head"></a>
<a href="?stroke=body"><img src="crocoduck2.png" alt="Stroke duck’s soft, feathery body"></a>

<figure>
<img src="664aef.jpg" alt="Lola the cat sitting under an umbrella in the bath tub.">
<figcaption>Lola prefers a bath to a shower.</figcaption>
</figure>

<figure>
  <img src="Rorschach1.jpg" alt="An abstract, freeform, vertically symmetrical, black inkblot on a light background.">
  <figcaption>The first of the ten cards in the Rorschach test.</figcaption>
  </figure>

<figure>
  <img src="webcam1.jpg" alt="Sopwith house weather cam. Taken on the 21/04/10 at 11:51 and 34 seconds.
  In the foreground are the safety rails on the flat part of the roof. Nearby there are low rize industrial buildings,
  beyond are blocks of flats. In the distance there’s a church steeple.">
  <figcaption>View from Sopwith house, looking towards north Kingston. This image is updated every hour.</figcaption>
  </figure>
  <p>View the <a href="https://news.bbc.co.uk/weather/forecast/4296?area=Kingston">latest weather details</a> for Kingston upon Thames.</p>

<figure>
<img src="clara.jpg">
<figcaption>clara.jpg, taken on 12/11/2010.</figcaption>
</figure>

<figure>
<img src="elo.jpg">
<figcaption>Eloisa with Princess Belle</figcaption>
</figure>

<table>
  <tr><tr> <th> Image <th> Description<tr>
  <td>
  <figure>
  <img src="2421.png">
  <figcaption>Image 640 by 100, filename 'banner.gif'</figcaption>
  </figure>
  <td> <input name="alt2421">
  <tr>
  <td> <figure>
  <img src="2422.png">
  <figcaption>Image 200 by 480, filename 'ad3.gif'</figcaption>
  </figure>
  <td> <input name="alt2422">
  </table>

<img src="https://server3.stats.com/count.pl?NeonMeatDream.com" width="0" height="0" alt="">

<img src="spacer.gif" width="10" height="10" alt="">

<a href="home.html"><img src="home.gif" width="15" height="15" alt="">Home</a>

#home:before
{
content: url(home.png);
}

<a href="home.html" id="home">Home</a>

<p><img src="warning.png" width="15" height="15" alt="">
<strong>Warning!</strong>
Your session is about to expire</p>

<p><img src="warning.png" width="15" height="15" alt="Warning!">
Your session is about to expire</p>

<a href="https://w3c.github.io/html/">
<img src="HTML5_Logo.png" alt="HTML 5.1 specification"></a>

<h2><img src="images/webplatform.png" alt="WebPlatform.org"> and other developer resources<h2>

<img src="images/webplatform1.png" alt=""> WebPlatform.org

<p><img src="HTML5_Logo.png" alt="HTML5 logo: Shaped like a shield with the
text 'HTML' above and the numeral '5' prominent on the face of the shield."></p>

Information about HTML

<img src="captcha.png" alt="If you cannot view this image an audio challenge is provided.">
<!-- audio CAPTCHA option that allows the user to listen and type the word -->
<!-- form that asks a question -->

<h2>Is it a ghost?</h2>
<picture>
  <source media="(min-width: 32em)" srcset="large.jpg">
  <img src="small.jpg" alt="Reflection of a girls face in a train window.">
</picture>

4.7.5.1.22. 마크업 생성기들을 위한 지침

마크업 생성기들은 (WYSIWYG 작성도구들 같은), 가능한 어디든지, 그것들의 사용자들로부터 대체 텍스트를 얻어야(should) 합니다. 하지만, 많은 경우에, 이것은 가능하지 않을 것으로 인정됩니다.

링크들의 유일한 콘텐트인 이미지들에 대해, 마크업 생성기들은 대상의 제목이나 대상의 URL을 결정하기 위해 링크 대상을 검토해야(should)하고, 이 방법으로 얻어진 정보를 대체 텍스트로 사용해야 합니다.

캡션을 가지는 이미지들에 대해, 마크업 생성기들은 이미지의 캡션을 제공하기 위해 figure와 figcaption 요소(element)들을 사용해야(should) 합니다.

최후의 수단으로, 구현자는 이미지가 어떤 정보도 추가하지 않지만 여전히 주변 콘텐트에 따라 다른 순수하게 장식 이미지라는 가정 하에 alt 속성(attribute)을 빈 문자열로 설정 해야(should) 하거나, 이미지가 콘텐트의 핵심 부분이라는 가정하에alt 속성(attribute)을 완전히 생략해야(should) 합니다.

마크업 생성기들은 대체 텍스트를 얻는 것이 불가능하고 때문에 alt 속성(attribute)이 생략된 img 요소(element)들에 generator-unable-to-provide-required-alt 속성(attribute)을 명시할 수 있습니다. 이 속성(attribute)의 값은 빈 문자열이어야(must) 합니다. 그 속성(attribute)들을 포함하는 문서들은 적합하지 않지만, 적합성 검사기들은 이 오류를 묵시적으로 무시할 것입니다.

이것은 최신의 자동화 적합성 검사기들이 가짜 대체 텍스트들과 올바른 대체 텍스트들을 구별할 수 없기 때문에, alt 속성(attribute)의 생략 오류를 가짜 대체 텍스트들을 제공하는 훨씬 더 엄청난 오류로의 교체가 강제되는 것으로부터 마크업 생성기들을 방지하기 위해 의도된 것입니다.

마크업 생성기들은 일반적으로 대체 텍스트로서 이미지 자신의 파일 이름을 사용하는 것을 방지해야(should) 합니다. 마찬가지로, 마크업 생성기들은 프리젠테이션 유저 에이전트들에 (예를 들어, 웹 브라우저들) 동일하게 사용 가능한 콘텐트로부터 대체 텍스트들을 생성하는 것을 방지해야(should) 합니다.

이것은, 나중에 페이지를 읽는 브라우저들이 사용자에 의해 업데이트 될 수 있는 반면에, 일단 페이지가 생성되면 일반적으로 업데이트 될 수 없기 때문에, 브라우저는 페이지가 생성될 때 마크업 생성기가 하는 것 보다 좀 더 최신의 그리고 미세하게 조정된 휴리스틱을 가질 가능성이 높습니다.

<article>
  <h1>I got my own magazine!</h1>
  <p>After much effort, I’ve finally found a publisher, and so now I
  have my own magazine! Isn’t that awesome?! The first issue will come
  out in September, and we have articles about getting food, and about
  getting in boxes, it’s going to be great!</p>
  <footer>
  <p>Written by <a href="/users/cap">cap</a>, 1 hour ago.
  </footer>
  <article>
  <footer> Thirteen minutes ago, <a href="/users/ch">ch</a> wrote: </footer>
  <iframe sandbox srcdoc="<p>did you get a cover picture yet?"></iframe>
  </article>
  <article>
  <footer> Nine minutes ago, <a href="/users/cap">cap</a> wrote: </footer>
  <iframe sandbox srcdoc="<p>Yeah, you can see it <a href=&quot;/gallery?mode=cover&amp;amp;page=1&quot;>in my gallery</a>."></iframe>
  </article>
  <article>
  <footer> Five minutes ago, <a href="/users/ch">ch</a> wrote: </footer>
  <iframe sandbox srcdoc="<p>hey that’s earl’s table.
<p>you should get earl&amp;amp;me on the next cover."></iframe>
  </article>

---

iframe 요소(element)가 브라우징 컨텍스트를 가지는 문서에 삽입 되는 경우, 유저 에이전트는 중첩된 브라우징 컨텍스트를 생성해야(must) 하고, "처음"으로 iframe 속성(attribute)들을 처리해야(must) 합니다.

iframe 요소(element)가 문서로부터 제거 되는 경우, 유저 에이전트는 중첩된 브라우징 컨텍스트가 있다면 이를 폐기해야(must) 합니다.

이것은 unload 이벤트 발생 없이 일어납니다 (중첩된 브라우징 컨텍스트와 그것의 Document는 언로드가 아니라 폐기됩니다).

중첩된 브라우징 컨텍스트를 가진 iframe 요소(element)가 그것의 srcdoc 속성(attribute)이 설정, 변경, 제거 될 때마다, 유저 에이전트는 iframe 속성(attribute)들을 처리해야(must) 합니다.

마찬가지로, 중첩된 브라우징 컨텍스트를 가지지만 명시된 srcdoc 속성(attribute)이 없는 iframe 요소(element)가 그것의 src 속성(attribute)이 설정, 변경, 제거 될 때마다, 유저 에이전트는 iframe 속성(attribute)들을 처리해야(must) 합니다.

유저 에이전트가 iframe 속성(attribute)들을 처리하는 경우, 다음 목록에서 첫 번째 적절한 단계들을 수행해야(must) 합니다:

srcdoc 속성(attribute)이 명시되어 있다면

요소(element)의 자식 브라우징 컨텍스트를 url 목록이 about:srcdoc로 구성되고, 헤더 목록이 Content-Type/text/html로 구성되며, body가 속성(attribute)의 값이고, CSP 목록이 iframe 요소(element)의 노드 문서의 CSP 목록이며, HTTPS 상태가 iframe 요소(element)의 노드 문서의 HTTPS 상태인 새로운 응답으로 이동(navigate)시키세요.

결과 Document는 iframe srcdoc 문서로 간주되어야(must) 합니다.

그렇지 않고, 요소(element)가 명시된 src 속성(attribute)을 가지지 않고 유저 에이전트가 "처음"으로 iframe 속성(attribute)들을 처리하고 있다면

iframe load event 단계들을 수행하기 위한 작업을 대기열에 넣습니다.

이 작업에 대한 작업 소스는 DOM 조작 작업 소스입니다.

그렇지 않으면

1. 요소(element)가 명시된 src 속성(attribute)을 가지지 않거나, 그것의 값이 빈 문자열이라면, url을 문자열 "about:blank"로 둡니다.

   그렇지 않으면, src 속성(attribute)의 값을 iframe 요소(element)와 관련하여 해석 하세요.

   그것이 성공적이지 않다면, url를 문자열 "about:blank"로 둡니다. 그렇지 않으면 url을 결과 URL 문자열로 둡니다.

2. 문서 조각 식별자를 무시하여, 활성 문서의 주소가 url가 동일한 조상 브라우징 컨텍스트가 존재한다면, 이 단계들을 중단합니다.

3. 요소(element)의 자식 브라우징 컨텍스트를 url로 이동(navigate) 시키세요.

게다가, 그 이동 전에 요소(element)의 자식 브라우징 컨텍스트의 활성 문서가 새로운 이동의 시점에 완전히 로드 되지 않았다면, 이동은 교체 활성화를 가지고 완료되어야(must) 합니다.

마찬가지로, iframe 속성(attribute)들 처리 알고리즘이 호출되는 경우, 자식 브라우징 컨텍스트의 세션 히스토리가 오직 하나의 Document를 포함하고, 그것이 자식 브라우징 컨텍스트가 생성 될 때 생성 된 about:blank Document였다면, 그 알고리즘에서 유저 에이전트의 요구된 모든 이동은 교체 활성화를 가지고 완료되어야(must) 합니다.

iframe 내의 Document가 완전히 로드 된것으로 표기되는 경우, 유저 에이전트는 병렬로 iframe load 이벤트 단계들을 수행해야(must) 합니다.

그것이 생성될 때 어떤 다른 데이터도 그 내부에서 로드되지 않는다면 load 이벤트도 iframe 요소(element)에서 발생됩니다.

각 Document는 iframe load in progress 플래그와 mute iframe load 플래그를 가집니다. Document가 생성될 때, 이 플래그들은 그 Document에 대해 해제되어야(must) 합니다.

iframe load 이벤트 단계들은 다음과 같습니다:

1. child document를 iframe 요소(element)의 중첩된 브라우징 컨텍스트의 활성 문서로 둡니다.
2. child document가 그것의 설정된 mute iframe load 플래그를 가진다면, 이 단계들을 중단합니다.
3. child document의 iframe load in progress 플래그를 설정합니다.
4. iframe 요소(element)에 load라는 단순 이벤트를 발생 시킵니다.
5. child document의 iframe load in progress 플래그를 해제합니다.

이것은, 스크립팅과 함께, 로컬 네트워크의 HTTP 서버들의 URL 공간을 살피는데 사용될 수 있습니다. 유저 에이전트들은 이 공격을 완화시키기 위해 위에 기술된 것 보다 엄격한 cross-origin 접근 제어 정책들을 구현할 수 있지만, 불행하게도 그 정책들은 일반적으로 기존의 웹 콘텐트와 호환되지 않습니다.

iframe의 브라우징 컨텍스트의 활성 문서가 post-load 작업들에 대해 준비되지 않은 경우와, iframe 내의 모든 것이 iframe의 브라우징 컨텍스트의 활성 문서의 load 이벤트를 지연 중인 경우와, iframe의 브라우징 컨텍스트가 load 이벤트 지연 모드에 있는 경우, iframe은 그 문서의 load 이벤트를 지연시켜야(must) 합니다.

load 이벤트의 처리 동안, iframe 내의 브라우징 컨텍스트가 다시 이동되었다면, 좀 더 load 이벤트를 지연시킬 것입니다.

name 속성(attribute)이 설정될 때 마다, 중첩된 브라우징 컨텍스트의 이름은 새로운 값으로 변경되어야(must) 합니다. 속성(attribute)이 제거 되었다면, 브라우징 컨텍스트 이름은 빈 문자열로 설정되어야(must) 합니다.

sandbox 속성(attribute)을 가진 iframe 요소(element)가 그것의 생성된 중첩 브라우징 컨텍스트를 가지는 (초기 about:blank Document가 생성되기 전에) 경우와, iframe 요소(element)가 중첩 브라우징 컨텍스트를 가지는 동안 sandbox 속성(attribute)이 설정되거나 변경되는 경우, 유저 에이전트는 input으로서 속성(attribute)의 값과 출력으로서 iframe 요소(element)의 중첩된 브라우징 컨텍스트의 iframe sandboxing 플래그 설정을, 그리고 iframe이 allowfullscreen 속성(attribute)를 가진다면 allow fullscreen flag를 사용하여 샌드박싱 지시를 해석해야(must)합니다.

iframe 요소(element)가 중첩된 브라우징 컨텍스트를 가지는 동안 sandbox 속성(attribute)이 제거되는 경우, 유저 에이전트는 출력으로 iframe 요소(element)의 중첩된 브라우징 컨텍스트의 iframe 샌드박싱 플래그 설정을 비워야(must) 합니다.

<p>We’re not scared of you! Here is your content, unedited:</p>
<iframe title="Example iframe" sandbox src="https://usercontent.example.net/getusercontent.cgi?id=12193"></iframe>

<iframe title="Maps" sandbox="allow-same-origin allow-forms allow-scripts"
        src="https://maps.example.com/embedded.html"></iframe>

<iframe title="Example iframe" sandbox="allow-same-origin allow-forms" src=B></iframe>

<iframe title="Example iframe" sandbox="allow-scripts" src=C></iframe>

<a href=D>Link</a>

<article>
  <header>
  <p><img src="/usericons/1627591962735"> <b>Fred Flintstone</b></p>
  <p><a href="/posts/3095182851" rel=bookmark>12:44</a> — <a href="#acl-3095182851">Private Post</a></p>
  </header>
  <main>
  <p>Check out my new ride!</p>
  <iframe title="Video" src="https://video.example.com/embed?id=92469812" allowfullscreen></iframe>
  </main>
</article>

---

IDL 속성(attribute)들 src, srcdoc, name, sandbox는 각각 동일한 이름의 콘텐트 속성(attribute)들을 반영해야(must) 합니다.

sandbox의 DOMTokenList에 대한 지원되는 토큰들은 sandbox 속성(attribute)에 정의된 값들이 허용되고 유저 에이전트들에 의해 지원됩니다.

allowFullscreen IDL 속성(attribute)는 allowfullscreen 콘텐트 속성(attribute)을 반영해야(must) 합니다.

contentDocument IDL 속성(attribute)은 iframe 요소(element)의 중첩된 브라우징 컨텍스트가 있다면 그리고 그것의 출처가 현직 설정 객체에 의해 명시된 출처로서 동일 출처 도메인인 활성 문서의 Document 객체를 반환해야(must) 하고, 그렇지 않으면 null을 반환해야(must) 합니다.

contentWindow IDL 속성(attribute)은 iframe 요소(element)의 중첩된 브라우징 컨텍스트의 WindowProxy 객체가 있다면 WindowProxy 객체를 반환해야(must) 하고, 그렇지 않으면 null을 반환해야(must) 합니다.

<iframe title="Advert" src="https://ads.example.com/?customerid=923513721&amp;format=banner"
        width="468" height="60"></iframe>

다음 조건들 중 하나라도 발생한다면, 요소(element)에 대해 인스턴스화 된 모든 플러그인은 제거되어야(must)하고, embed 요소(element )는 아무 것도 나타내지 않습니다:

• 요소(element)가 src 속성(attribute)과 type 속성(attribute) 중 어떠한 것도 가지지 않는 경우.
• 요소(element)가 조상 미디어 요소(element)를 가지는 경우 .
• 요소(element)가 그것의 폴백 콘텐트를 보여주지 않는 조상 object 요소(element)를 가지는 경우.

embed 요소(element)가 다음 조건들을 모두 동시에 만족하는 경우 잠재적으로 활성이라고 불립니다:

• 요소(element)가 Document 안에 있거나 마지막으로 이벤트 루프가 단계 1에 도달했을 때 Document 안에 있었을 경우.
• 요소(element)의 노드 문서가 완전히 활성화된 경우.
• 요소(element)가 설정 된 src 속성(attriute)이나 설정 된 type 속성(attribute) (혹은 둘 모두)를 가지는 경우.
• 요소(element)의 src 속성(attribute)이 없거나 그 값이 빈 문자열이 아닌 경우.
• 요소(element)가 미디어 요소(element)의 후손이 아닌 경우.
• 요소(element)가 그것의 폴백 콘텐트를 보여주지 않는 object 요소(element)의 후손이 아닌 경우.
• 요소(element)가 렌더링 되는 것 이거나, 마지막으로 이벤트 루프가 단계 1에 도달했을 때 렌더링 되는 것이었을 경우.

잠재적으로 활성이 아니었던 embed 요소(element)가 잠재적으로 활성화 될 때마다, 그리고 잠재적 활성 embed 요소(element)가 남아있는 잠재적으로 활성이고 그것의 src 속성(attribute)이 설정, 변경, 혹은 제거되거나, 그것의 type 속성(attribute)이 설정, 변경, 혹은 제거 될 때 마다, 유저 에이전트는 embed 요소(element) 설정 단계들을 수행하기 위한 삽입(embed) 작업 소스를 사용하여 작업을 대기열에 넣어야(must) 합니다.

embed 요소(element) 설정 단계들은 다음과 같습니다:

1. 이 요소(element)에 대해 embed 요소(element) 설정 단계들을 수행하기 위해 다른 작업이 대기열에 넣어진 이후라면, 이 단계들을 중단합니다.

2. 요소(element)가 설정 된 src 속성(attribute)을 가진다면

   유저 에이전트는 요소(element)의 src 속성(attribute)의 값을 요소(element)에 관련하여 해석해야(must) 합니다. 그것이 성공적이라면, 유저 에이전트는 이 단계들을 수행해야(should) 합니다:

   1. request를 URL이 결과 URL 문자열이고, 클라이언트가 요소(element)의 노드 문서의 Window 객체의 환경 설정 객체이고, 목적지가 "unknown"이며, 요소(element)가 브라우징 컨테스트 범위 출처를 가지지 않는다면 출처 헤더 생략 플래그가 설정되어 있고, 자격 증명 모드가 "include"이며, URL 자격 증명 사용 플래그가 설정된 새로운 요청으로둡니다.
   2. request를 가져옵니다(fetch).

   네트워킹 작업 소스에 의해 대기열에 넣어진 작업은 리소스가 가져와졌을(fetch) 때 다음 단계들을 수행해야(must) 합니다:

   1. 이 요소(element)에 대해 embed 요소(element) 설정 단계를 수행하기 위해 다른 작업이 대기열에 넣어진 이후라면, 이 단계들을 중단합니다.

   2. 삽입되는 콘텐트의 유형을 (유형을 결정하는 첫 번째 하위 단계에서 중지하여) 다음과 같이 결정합니다:

      1. 요소(element)가 type 속성(attribute)을 가지고 그 속성(attribute)의 값이 플러그인이 지원하는 유형이라면, type 속성(attribute)의 값은 콘텐트의 유형입니다.

      2. 그렇지 않고, 명시된 리소스의 URL에 URL 해석 알고리즘을 적용하는 것이 (모든 리다이렉트들 이후) 경로 컴포넌트가 플러그인이 지원하는 패턴과 일치하는 URL 레코드를 야기한다면, 콘텐트의 유형은 플러그인이 처리할 수 있는 유형입니다.

         예를 들어, 플러그인은 네 개 문자 문자열 ".swf"로 끝나는 경로 컴포넌트들을 가진 리소스를 처리할 수 있다고 말할 수 있습니다.

      3. 그렇지 않고, 명시된 리소스가 명시적 Content-Type 메타데이터를 가진다면, 그것이 콘텐트의 유형입니다.
      4. 그렇지 않으면 콘텐트는 유형을 가지지 않고 그것에 대한 적절한 플러그인이 없을 수 있습니다.

   3. 이전 단계가 콘텐트의 유형이 image/svg+xml이라고 결정했다면, 다음 하위 단계들을 수행합니다:

      1. embed 요소(element)가 중첩된 브라우징 컨텍스트와 연관되지 않는다면, 새롭게 생성된 중첩된 브라우징 컨텍스트와 연관짓고, 요소(element)가 name 속성(attribute)을 가진다면, 요소(element)의 중첩된 브라우징 컨텍스트의 브라우징 컨텍스트 이름을 이 속성(attribute)의 값으로 설정합니다.
      2. 중첩된 브라우징 컨텍스트를 가져와진 리소스로 교체 활성화와 소스 브라우징 컨텍스트로서 embed 요소(element)의 노드 문서의 브라우징 컨텍스트를 가지고 이동시킵니다. (embed 요소(element)의 src 속성(attribute)은 브라우징 컨텍스트가 다른 위치들로 더 이동된다면 업데이트 되지 않습니다.)
      3. embed 요소(element)는 이제 그것의 연관된 중첩된 브라우징 컨텍스트를 나타냅니다.

   4. 그렇지 않으면, 콘텐트 유형을 기반으로 적절한 플러그인을 찾고 인스턴스화 하고, 리소스의 콘텐트를 요소(element)에 대해 이전에 인스턴스화 된 플러그인들을 대신하여 그 플러그인에 전달합니다. embed 요소(element)는 이제 이 플러그인 인스턴스를 나타냅니다.

   5. 리소스나 플러그인이 완전히 로드되었을 때, 요소(element)에 load라는 단순 이벤트를 발생시키기 위한 작업을 대기열에 넣습니다.

   리소스가 성공적으로 가져와(fetch)졌는지 아닌지의 여부는 (예를 들어, 응답 상태가 ok 상태였는지 여부) 콘텐트의 유형을 결정하는 중인 경우 와 리소스를 플러그인에 전달하는 중인 경우 무시되어야(must) 합니다.

   이것은 오류 응답들에도 불구하고 플러그인들에 대해 데이터를 반환하는 것을 허용합니다 (예를 들어, HTTP 500 서버 내부 오류 코드들은 여전히 플러그인 데이터를 포함할 수 있습니다).

   리소스를 가져오는(fetch) 것은 요소(element)의 노드 문서의 load 이벤트를 지연시켜야(must) 합니다.

   요소(element)가 설정된 src 속성(attribute)을 가지지 않는다면

   유저 에이전트는 type 속성(attribute)의 값을 기반으로 적절한 플러그인을 찾고 인스턴스화 해야(should)합니다. embed 요소(element)는 이제 이 플러그인 인스턴스를 나타냅니다.

   플러그인이 완전히 로드되었을 때, 요소(element)에 load라는 단순 이벤트를 발생시키기 위한 작업을 대기열에 넣습니다.

embed 요소(element)는 폴백 콘텐트를 가지지 않습니다. 유저 에이전트가 위 알고리즘에 대한 것을 찾고 인스턴스화 하기 위해 시도하는 경우 적절한 플러그인을 찾을 수 없다면, 유저 에이전트는 기본 플러그인을 사용해야(must)합니다. 이 기본 플러그인은 "지원되지 않는 형식"으로 나타내는 것처럼 단순할 수 있습니다.

잠재적으로 활성이었던 embed 요소(element)가 잠재적으로 활성화 되는 것을 중단 할 때마다, 그 요소(element)에 대해 인스턴스화 된 모든 플러그인은 언로드 되어야(must) 합니다.

플러그인이 인스턴스화 되어야 하지만 보호될 수 없고 embed 요소(element)의 노드 문서의 샌드박싱 활성화 플래그 설정에 샌드박스 된 플러그인들 브라우징 컨텍스트 플래그가 설정되는 경우, 유저 에이전트는 플러그인을 인스턴스화 하지 않아야(must)하고, 대신 플러그인이 비활성화 되었음을 전달하는 방법으로 embed 요소(element)를 렌더링해야(must) 합니다. 유저 에이전트는 사용자에게 샌드박스를 재정의하고 그래도 플러그인을 인스턴스화 하기 위한 옵션을 권할 수 있습니다; 사용자가 그러한 옵션을 호출한다면, 유저 에이전트는 위 조건들이 이 요소(element)의 목적에 대해 적용하지 않는 것처럼 수행해야(must) 합니다.

보호될 수 없는 플러그인들은 샌드박스에 의해 부여된 제약사항들을 이행하지 않을 것이기 때문에 (예를 들어, 샌드박스 내 스크립팅이 비활성화 되었을 때 조차 스크립팅을 허용할 수 있습니다) 샌드박스 된 브라우징 컨텍스트들 내에서 비활성화 될 수 있습니다. 유저 에이전트들은 그렇게 하기 위한 옵션이 제공된다면 사용자에게 샌드박스를 재정의하는 것의 위험을 전달해야(should) 합니다.

embed 요소(element)가 중첩된 브라우징 컨텍스트를 나타내는 경우: embed 요소(element)의 중첩된 브라우징 컨텍스트의 활성 문서가 로드 후 작업들에 대해 준비되지 않았고, 무엇이든 embed 요소(element)의 브라우징 컨텍스트의 활성 문서의 load 이벤트를 지연 시키는 중인 경우, 그리고 embed 요소(element)의 브라우징 컨텍스트가 load 이벤트들 지연 중 모드에 있는 경우, embed는 그것의 문서의 load 이벤트를 지연시켜야(must) 합니다.

이 섹션에 언급된 작업들에 대한 작업 소스는 DOM 조작 작업 소스입니다.

유저 에이전트는 embed가 인스턴스화 될 때, 사용된 플러그인에 대한 네임스페이스를 갖지 않는 embed의 모든 속성(attribute)들의 이름들과 값들을 전달해야(should) 합니다.

요소(element)를 나타내는 HTMLEmbedElement 객체는 embed 요소(element)에 대해 인스턴스화 된 플러그인의 스크립트 가능한 인터페이스가 있다면 이를 노출해야(must) 합니다. 최소한, 이 인터페이스는 레거시 호출 연산을 구현해야(must) 합니다. (이 레거시 호출 연산의 기본 동작은, 예를 들어 기본 플러그인의 레거시 호출자 연산의 동작은, NotSupportedError 예외를 던지는 것이 되도록 제안됩니다.)

IDL 속성(attribute)들 src과 type는 각각 동일한 이름의 각 콘텐트 속성(attribute)들을 반영해야(must) 합니다.

<embed src="catgame.swf">

<embed src="catgame.swf" quality="high">

<object data="catgame.swf">
  <param name="quality" value="high">
</object>

다음 조건들 중 하나가 발생할 때마다:

• 요소(element)가 생성,
• 요소(element)가 HTML 해석기나 XML 해석기의 열린 요소(element)들의 스택을 끊어냄,
• 요소(element)가 HTML 해석기나 XML 해석기의 열린 요소(element)들의 스택에 있지 않고, 문서에 삽입되거나 문서로부터 제거됨
• 요소(element)의 노드 문서가 완전히 활성화인지 여부를 변경,
• 요소(element)의 후손 object 요소(element)들 중 하나가 그것의 폴백 콘텐트를 보여주는 것으로 혹은 보여주는 것에서 변경,
• 요소(element)의 classid 속성(attribute)이 설정, 변경, 제거,
• 요소(element)의 classid 속성(attribute)이 존재하지 않고, 요소(element)의 data 속성(attribute)이 설정, 변경, 제거,
• 요소(element)의 classid 속성(attribute)이나 data 속성(attribute)이 둘 다 존재하지 않고, 요소(element)의 type 속성(attribute)이 설정, 변경, 제거,
• 요소(element)가 렌더링 되는 것에서 렌더링 되지 않는 것으로 변경, 혹은 그 반대,

...유저 에이전트는 object 요소(element)가 무엇을 나타내는지를 (재)결정하기 위한 다음 단계들을 수행하기 위한 작업을 대기열에 넣어야(must) 합니다. 대기열에 넣어지거나 활발히 수행 중인 이 작업은 요소(element)의 노드 문서의 load 이벤트를 지연시켜야(must) 합니다.

1. 사용자가 이 object 요소(element)의 폴백 콘텐트가 요소(element)의 보통의 동작 대신 보여지도록 설정을 지시했다면, 아래 fallback으로 라벨링 된 단계로 건너 뜁니다.

   예를 들어, 콘텐트는 사용자가 더 접근 가능한 것을 찾는 형식을 사용하기 때문에 사용자는 요소(element)의 폴백 콘텐트가 보여지도록 요청할 수 있습니다.

2. 요소(element)가 후손 미디어 요소(element)를 가지거나, 폴백 콘텐트를 보여주고 있지 않은 후손 object 요소(element)를 가지거나, 요소(element)가 브라우징 컨텍스트를 가진 Document 안에 있지 않거나, 요소(element)의 노드 문서가 완전히 활성화가 아니거나, 요소(element)가 여전히 HTML 해석기나 XML 해석기의 열린 요소(element)들의 스택 안에 있거나, 요소(element)가 렌더링 되는 것이 아니라면, fallback으로 라벨링 된 단계로 건너뜁니다.

3. classid 속성(attribute)이 존재하고 빈 문자열이 아닌 값을 가진다면: 유저 에이전트가 classid 속성(attribute)의 값에 따라 적절한 플러그인을 찾을 수 있고, 플러그인들이 샌드박스 되지 않는 것이거나 그 플러그인이 보호될 수 있다면, 그 플러그인은 사용되어야(should)하고, data 속성(attribute)의 값이 있다면 그것은 플러그인으로 전달되어야(should) 합니다. 적절한 플러그인을 찾을 수 없거나, 플러그인이 오류를 보고한다면, fallback으로 라벨링 된 단계로 점프합니다.

4. data 속성(attribute)이 존재하고 그 값이 빈 문자열이 아니라면 :
   1. type 속성(attribute)이 존재하고 그 값이 유저 에이전트가 지원하는 유형이 아니며, 유저 에이전트가 그 속성(attribute) 값에 대한 플러그인을 찾을 수 있는 유형이 아니라면, 유저 에이전트는 그것의의 실제 유형을 검사하기 위해 콘텐트를 가져오는(fetch) 것 없이 아래 fallback으로 라벨링 된 단계로 건너뛸 수 있습니다.
   2. data 속성(attribute)에 의해 명시된 URL을 요소(element)에 관련하여 해석 합니다.
   3. 그것이 실패했다면, 요소(element)에 error라는 단순 이벤트를 발생시키고, 아래 fallback으로 라벨링 된 단계로 건너뜁니다.
   4. request를 URL이 결과 URL 문자열이고, 클라이언트가 요소(element)의 노드 문서의 Window 객체의 환경 설정 객체이며, 목적지가 "unknown"이고, 요소(element)가 브라우징 컨텍스트 범위 출처를 가지지 않는다면 출처 헤더 생략 플래그가 설정되어 있으며, 자격 증명 모드가 "include"이고 URL 자격 증명 사용 플래그가 설정 된 새로운 요청으로 둡니다.
   5. request을 가져옵니다(fetch).

      리소스를 가져오는(fetch) 것은 리소스가 가져와(fetch)졌을 때 네트워킹 작업 소스에 의해 대기열에 넣어진 작업이 (다음으로 정의된) 수행 될 때까지 요소(element)의 노드 문서의 load 이벤트를 지연시켜야(must) 합니다.

   6. 리소스가 아직 사용 가능하지 않다면 (예를 들어, 리소스가 캐시에서 아직 사용할 수 없기 때문에, 리소스를 로딩하는 것은 네트워크를 통해 요청을 만드는 것을 요구합니다), 아래 fallback으로 라벨링 된 단계로 건너뜁니다. 리소스가 사용 가능 할 때 네트워킹 작업 소스에 의해 대기열에 넣어진 작업은 이 단계로부터 이 알고리즘을 재시작해야(must) 합니다. 리소스들이 점차적으로 로드될 수 있습니다; 유저 에이전트들은 리소스를 처리하는 것을 시작하기 위해 충분한 데이터라가 얻어질 때마다 리소스를 "사용 가능"한 것으로 간주되도록 선택할 수 있습니다.
   7. 로드가 실패되었다면 (예를 들어, HTTP 404 오류가 있었거나, DNS 오류가 있었거나), 요소(element)에 error라는 단순 이벤트를 발생시키고, 아래 fallback으로 라벨링 된 단계로 건너뜁니다.

   8. 다음과 같이, resource type을 결정합니다:

      1. resource type를 알 수 없음으로 둡니다.

      2. object 요소(element)가 type 속성(attribute)과 typemustmatch 속성(attribute)을 가지고, 리소스가 연관된 Content-Type 메타데이터를 가지며, 리소스의 Content-Type 메타데이터에 명시된 유형이 요소(element)의 type 속성(attribute)의 값에 ASCII 대소문자 구분 없이 일치한다면, resource type을 그 유형으로 두고 아래 handler라고 라벨링 된 단계로 건너뜁니다.

      3. object 요소(element)가 typemustmatch 속성(attribute)을 가진다면, 아래 handler라고 라벨링 된 단계로 건너뜁니다.

      4. 유저 에이전트가 이 리소스에 대해 Content-Type 헤더들을 엄격히 준수하도록 설정되어 있고, 리소스가 연관된 Content-Type 메타데이터를 가진다면, resource type을 리소스의 Content-Type 메타데이터 내에 명시된 유형으로 두고, 아래 handler라고 라벨링 된 단계로 건너뜁니다.

         이것은 사이트가 특정 플러그인을 사용하는 삽입된 리소스를 시도하고 있다는 점에서 취약성을 끌어들일 수 있지만, 원격 사이트는 그것을 무시하고 대신 유저 에이전트에 다른 보안성들을 가진 다른 플러그인을 작동시키는 리소스를 제공합니다.

      5. object 요소(element)에 type 속성(attribute)이 존재하고, 그 속성(attribute)의 값이 유저 에이전트들이 지원하는 유형이 아니라, 플러그인이 지원하는 유형이라면, resource type을 그 type 속성(attribute)에 명시된 유형으로 두고, 아래 handler라고 라벨링 된 단계로 건너뜁니다.

      6. 다음 목록에서 적절한 단계들의 세트를 수행합니다:

         리소스가 연관된 Content-Type 메타데이터를 가진다면

         1. binary를 false로 둡니다.

         2. 리소스의 Content-Type 메타데이터에 명시된 유형이 "text/plain"이고, 리소스가 텍스트인지 바이너리인지 결정하기 위한 규칙들을 리소스에 적용한 결과가 리소스는 text/plain이 아니다는 것이라면, binary를 true로 설정합니다.

         3. 리소스의 Content-Type 메타데이터에 명시된 유형이 "application/octet-stream"이라면, binary를 true로 설정합니다.

         4. binary가 false라면, resource type을 리소스의 Content-Type 메타데이터에 명시된 유형으로 두고, 아래 handler라고 라벨링 된 단계로 건너뜁니다.

         5. object 요소(element)에 type 속성(attribute)이 존재하고, 그 값이 application/octet-stream이 아니라면, 다음 단계들을 수행합니다:

            1. 속성(attribute)의 값이 플러그인이 지원하는 유형이거나, 속성(attribute)의 값이 XML MIME 타입이 아닌 "image/"로 시작하는 유형이라면, resource type을 그 type 속성(attribute)에 명시된 유형으로 둡니다.

            2. 아래 handler라고 라벨링 된 단계로 건너뜁니다.

         그렇지 않고, 리소스가 연관된 Content-Type 메타데이터를 가지지 않는다면

         1. object 요소(element)에 type 속성(attribute)이 존재한다면, tentative type을 그 type 속성(attribute)에 명시된 유형으로 둡니다.

            그렇지 않으면, tentative type을 계산된 리소스의 유형으로 둡니다.

         2. tentative type이 application/octet-stream이 아니라면, resource type을 tentative type로 두고 아래 handler라고 라벨링 된 단계로 건너뜁니다.

      7. URL 해석 알고리즘을 명시된 리소스의 URL에 적용 하는 것이 (다른 리다이렉트들 이후) 경로 컴포넌트가 플러그인이 지원하는 패턴에 일치하는 URL 레코드를 야기한다면, resource type을 그 플러그인이 처리할 수 있는 유형으로 둡니다.

         예를 들어, 플러그인은 네 개 문자열 ".swf"로 끝나는 경로 컴포넌트들을 가진 리소스들을 처리할 수 있다로 말 할 수 있습니다.

      이 단계가 종료되는 것이나, 위 하위 단계들 중 하나가 여전히 알 수 없는 resource type을 가지고 다음 단계로 바로 건너 뛰는 것이 가능합니다. 이 두 경우들에, 다음 단계는 폴백을 작동 시킬 것입니다.

   9. Handler: 다음 경우들의 첫 번째 일치하는 것에 의해 주어진 것으로 콘텐트를 처리합니다:

      resource type이 유저 에이전트가 지원하는 유형이 아니라, 플러그인이 지원하는 유형이라면,

      플러그인들이 샌드박스 되는 것이고 resource type을 지원한는 플러그인이 보호될 수 없다면, 아래 fallback으로 라벨링 된 단계로 건너뜁니다.

      그렇지 않으면, 유저 에이전트는 resource type을 지원하는 플러그인을 사용해야(should) 하고, 그 플러그인에 리소스의 콘텐트를 전달해야(should) 합니다. 플러그인이 오류를 보고한다면, fallback으로 라벨링 된 단계로 건너뜁니다.

      resource type이 XML MIME 타입이거나 resource type이 "image/"로 시작하지 않는다면

      object 요소(element)는 새롭게 생성된 중첩된 브라우징 컨텍스트를 이미 가지고 있지 않다면 이와 연관되어야(must) 합니다.

      주어진 리소스의 URL이 about:blank가 아니라면, 요소(element)의 중첩된 브라우징 컨텍스트는 교체 활성화와, 소스 브라우징 컨텍스트로서 object 요소(element)의 노드 문서의 브라우징 컨텍스트를 가지고 그 리소스로 이동되어야(must) 합니다. (브라우징 컨텍스트가 다른 위치들로 더 이동한다면 object 요소(element)의 data 속성(attribute)은 업데이트 되지 않습니다.)

      주어진 리소스의 URL이 about:blank라면, 대신에, 유저 에이전트는 object 요소(element)에 load라는 단순 이벤트를 발생시키기 위한 작업을 대기열에 넣어야(must) 합니다. load 이벤트는 about:blank 문서 자체에 발생되지 않습니다.

      object 요소(element)는 중첩된 브라우징 컨텍스트를 나타냅니다.

      name 속성(attribute)이 존재한다면, 브라우징 컨텍스트 이름은 이 속성(attribute)의 값으로 설정 되어야(must) 합니다; 그렇지 않으면, 브라우징 컨텍스트 이름은 빈 문자열로 설정 되어야(must) 합니다.

      resource type이 "image/"로 시작하고, 이미지에 대한 지원이 비활성화되지 않았다면

      이미지 스니핑 규칙을 이미지의 유형을 결정하는데 적용합니다.

      object 요소(element)는 명시된 이미지를 나타냅니다. 이미지는 중첩된 브라우징 컨텍스트가 아닙니다.

      이미지가 렌더링 될 수 없다면, 예를 들어 그것이 잘못되었거나 지원되지 않는 형식이라면, 아래 fallback으로 라벨링 된 단계로 건너뜁니다.

      그렇지 않으면

      주어진 resource type은 지원되지 않습니다. 아래 fallback으로 라벨링 된 단계로 건너뜁니다.

      앞선 단계가 알 수 없는 것이 되는 resource type으로 끝났다면, 이것은 작동 된 경우입니다.

   10. 요소(element)의 콘텐트는 object 요소(element)가 나타내는 것의 일부가 아닙니다.

   11. 이 단계들을 중단시킵니다. 리소스가 완전히 로드되었을 때, 요소(element)에 load라는 단순 이벤트를 발생시키기 위한 작업을 대기열에 넣습니다.

5. data 속성(attribute)이 없지만 type 속성(attribute)이 존재하고, 유저 에이전트가 type 속성(attribute)의 값에 따라 적절한 플러그인을 찾을 수 있고, 플러그인들이 샌드박스 되는 것이 아니거나 플러그인이 보호될 수 있다면, 그 플러그인이 사용되어야(should) 합니다. 이 조건을 만나지 못하거나, 플러그인이 오류를 보고한다면, 아래 fallback으로 라벨링 된 단계로 건너뜁니다. 그렇지 않으면 이 단계들을 중단합니다; 플러그인이 완전히 로드될 때, 요소(element)에 load라는 단순 이벤트를 발생시키기 위한 작업을 대기열에 넣습니다.
6. Fallback: object 요소(element)는 다른 선두의 자식 param 요소(element)들을 무시하고, 요소(element)의 자식을 나타냅니다. 이것이 요소(element)의 폴백 콘텐트입니다. 요소(element)가 인스턴스화 된 플러그인을 가진다면, 그것은 언로드 됩니다.

위 알고리즘이 플러그인을 인스턴스화 할 때, 유저 에이전트는 요소(element)의 사용된 모든 모든 속성(attribute)들의 이름들과 값들을, 그것들이 요소(element)에 추가된 순서에 따라, 소스 순서에 따라 정렬되는 해석기 의해 추가된 속성(attribute)들, 그 뒤로 값이 null인 "PARAM"이라는 파라미터, 그 뒤로 object 요소(element)의 자식인 param 요소(element)에 의해 주어진 파라미터들의 모든 이름들과 값들을 트리 순서에 따라 플러그인에 전달해야(should) 합니다. 플러그인이 스트립트 가능한 인터페이스를 지원한다면, 요소(element)를 나타내는 HTMLObjectElement 객체는 그 인터페이스를 노출해야(should) 합니다. object 요소(element)는 플러그인을 나타냅니다. 플러그인은 중첩된 브라우징 컨텍스트가 아닙니다.

object 요소(element)의 노드 문서의 샌드박싱 활성화 플래그 설정에 샌드박스 된 플러그인 브라우징 컨텍스트 플래그가 설정 되었다면 플러그인들은 object 요소(element)의 목적을 위해 샌드박스 된 것으로 간주됩니다.

위 알고리즘 때문에, object 요소(element)들의 콘텐츠는 참조된 리소스들이 보여질 수 없을 때에만 (예를 들어, 그것이 404 오류를 반환했기 때문에) 사용되는 폴백 콘텐트로서 동작합니다. 이것은 다른 능력들을 가진 여러 유저 에이전트들을 타게팅하여, 유저 에이전트가 지원하는 처음 것을 선택하도록 여러 object 요소(element)들이 서로의 내부에 중첩되는 것을 허용합니다.

object 요소(element)가 중첩된 브라우징 컨텍스트를 나타내는 경우: object 요소(element)의 중첩된 브라우징 컨텍스트의 활성 문서가 로드 후 작업들에 대해 준비되지 않고, 어떤 것이든 object 요소(element)의 브라우징 컨텍스트의 활성 문서의 load 이벤트를 지원시키고 있는 경우와, object 요소(element)의 브라우징 컨텍스트가 load 이벤트들 지연 중 모드에 있다면, object는 그것의 문서의 load 이벤트를 지연시켜야(must) 합니다.

이 섹션에 언급된 작업들에 대한 작업 소스는 DOM 조작 작업 소스입니다.

name 속성(attribute)이 설정될 때마다, object 요소(element)가 중첩된 브라우징 컨텍스트를 가진다면, 그것의 이름은 새로운 값으로 변경되어야(must) 합니다. 속성(attribute)이 제거된다면, object 요소(element)가 브라우징 컨텍스트를 가진다면, 브라우징 컨텍스트 이름은 빈 문자열로 설정 되어야(must) 합니다.

제약조건 확인: object 요소(element)들은 항상 제약 조건 확인을 금지됩니다.

IDL 속성(attribute)들 data, type, name은 각각 동일한 이름의 각 콘텐트 속성(attribute)들을 반영해야(must) 합니다. typeMustMatch IDL 속성(attribute)은 typemustmatch 콘텐트 속성(attribute)을 반영해야 합니다. useMap IDL 속성은 usemap 콘텐트 속성을 반영해야(must) 합니다.

contentDocument IDL 속성(attribute)은 object 요소(element)의 중첩된 브라우징 컨텍스트의 활성 문서의 Document 객체가 존재하고 그것의 출처가 현직 설정 객체에 의해 명시된 출처로서 동일 출처 도메인이라면 object 요소(element)의 중첩된 브라우징 컨텍스트의 활성 문서의 Document 객체를 반환해야(must) 하고, 그렇지 않으면 null을 반환해야(must) 합니다.

contentWindow IDL 속성(attribute)은 object 요소(element)의 중첩된 브라우징 컨텍스트의 WindowProxy 객체를 가진다면 이를 반환해야(must) 하고 그렇지 않으면 null을 반환해야(must) 합니다.

willValidate, validity, validationMessage 속성(attribute)들과 checkValidity(), reportValidity(), setCustomValidity() 메서드들은 제약 조건 확인 API의 일부입니다. form IDL 속성(attribute)은 요소(element)의 forms API의 일부입니다.

모든 object 요소(element)는 레거시 호출자 연산을 가집니다. object 요소(element)가 레거시 호출자 연산을 정의하는 스크립트 가능한 인터페이스를 지원하는 인스턴스화 된 플러그인을 가진다면, 그것은 객체의 레거시 호출자 연산의 동작이어야(must) 합니다. 그렇지 않으면, 객체의 레거시 호출자 연산은 NotSupportedError 예외를 던져야(must) 합니다.

<figure>
  <object type="application/x-java-applet">
  <param name="code" value="MyJavaClass">
  <p>You do not have Java available, or it is disabled.</p>
  </object>
  <figcaption>My Java Clock</figcaption>
</figure>

<figure>
  <object data="clock.html"></object>
  <figcaption>My HTML Clock</figcaption>
</figure>

<p>Look at my video:
  <object type="application/x-shockwave-flash">
  <param name=movie value="https://video.example.com/library/watch.swf">
  <param name=allowfullscreen value=true>
  <param name=flashvars value="https://video.example.com/vids/315981">
  <video controls src="https://video.example.com/vids/315981">
    <a href="https://video.example.com/vids/315981">View video</a>.
  </video>
  </object>
</p>

두 속성(attribute)들이 모두 존재하고, param의 부모 요소(element)가 object 요소(element)라면, 요소(element)는 주어진 이름-값 쌍으로 파라미터를 정의합니다.

인스턴스화 된 플러그인을 나타내는 object 요소(element)의 자식인 param 요소(element)에 의해 정의된 파라미터의 이름과 값이 변경되고, 그 플러그인이 파라미터의 이름과 값이 변경될 때 플러그인을 업데이트 할 수 있는 특징을 가진 API를 사용하는 유저 에이전트와 통신 중이라면, 유저 에이전트는 변경된 플러그인을 통지할 수 있도록 적절하게 수행해야(must) 합니다.

IDL 속성(attribute)들 name과 value는 모두 동일한 이름의 각각의 콘텐트 속성(attribute)들을 반영해야(must) 합니다.

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <title>O3D Utah Teapot</title>
  </head>
  <body>
    <p>
    <object type="application/vnd.o3d.auto">
      <param name="o3d_features" value="FloatingPointTextures">
      <img src="o3d-teapot.png"
          title="3D Utah Teapot illustration rendered using O3D."
          alt="When O3D renders the Utah Teapot, it appears as a squat
          teapot with a shiny metallic finish on which the
          surroundings are reflected, with a faint shadow caused by
          the lighting.">
      <p>To see the teapot actually rendered by O3D on your
      computer, please download and install the <a
      href="https://code.google.com/apis/o3d/docs/gettingstarted.html#install">O3D plugin</a>.</p>
    </object>
    <script src="o3d-teapot.js"></script>
    </p>
  </body>
</html>

명시된 리소스가 사용된다면, 요소(element)가 생성될 때나 poster 속성(attribute)이 설정, 변경, 제거 될 경우, 유저 에이전트는 요소(element)의 포스터 프레임을 결정하기 위해 (요소(element)의 포스터 표시 플래그의 값에 상관없이) 다음 단계들을 수행해야(must) 합니다:

1. 이 video 요소(element)에 대해 수행하는 이 알고리즘의 기존의 인스턴스가 존재한다면, 포스터 프레임 변경 없이 이 알고리즘의 그 인스턴스를 중단합니다.
2. poster 속성(attribute)의 값이 빈 문자열 이거나, 이 속성(attribute)이 없다면, 포스터 프레임은 존재하지 않습니다; 이 단계들을 중단합니다.
3. poster 속성(attribute)의 값을 요소(element)에 관련하여 해석합니다. 이것이 실패한다면, 포스터 프레임은 존재하지 않습니다; 이 단계들을 중단합니다.
4. request를 URL이 결과 URL 문자열이고, 클라이언트가 요소(element)의 노드 문서의 Window 객체의 환경 설정 객체이며, 유형이 "image"이고, 목적지가 "subresource"이며, 자격 증명 모드가 "include"이고 URL 자격 증명 사용 플래그가 설정 된 새로운 요청으로 둡니다.
5. request를 가져(fetch)옵니다. 이것은 요소(element)의 노드 문서의 load 이벤트를 지연시켜야(must) 합니다.
6. 이미지가 얻어졌다면, 포스터 프레임은 그 이미지 입니다. 그렇지 않으면, 포스터 프레임은 존재하지 않습니다.

---

video 요소(element)는 다음 목록에 처음 일치하는 조건에 대해 주어진 것을 나타냅니다:

사용 가능한 비디오 데이터가 없는 경우 (요소(element)의 readyState 속성(attribute)이 HAVE_NOTHING 이거나, HAVE_METADATA이지만 비디오 데이터가 아직 전혀 얻어지지 않았거나, 요소(element)의 readyState 속성(attribute)이 차후의 값이지만 미디어 리소스가 비디오 채널을 가지지 않는 경우)

video 요소(element)는 그것의 포스터 프레임이 있다면 포스터 프레임을, 그렇지 않으면 고유 치수들이 없는 투명한 검정 화면을 나타냅니다.

video 요소(element)가 일시 중지되고, 현재 재생 위치가 비디오의 첫 번째 프레임이고, 요소(element)의 포스터 표시 플래그가 설정 된 경우

video 요소(element)는 그것의 포스터 프레임이 있다면 포스터 프레임을, 그렇지 않으면 비디오의 첫 번째 프레임을 나타냅니다.

video 요소(element)가 일시 중지되었고, 현재 재생 위치에 해당하는 비디오의 프레임이 사용 가능하지 않은 경우(예를 들어, 비디오가 탐색 중이거나 버퍼링 중이기 때문에)

video 요소(element)가 재생 중 일 수 있지도 일시 중지 되지도 않은 경우 (예를 들어 탐색 중이거나 멈춘(stalled) 경우)

video 요소(element)는 렌더링 된 비디오의 마지막 프레임을 나타냅니다.

video 요소(element)가 일시 중지 된 경우

video 요소(element)는 현재 재생 위치에 해당하는 비디오의 프레임을 나타냅니다.

그 외 (video 요소(element)가 비디오 채널을 가지며 재생 중 일 수있는)

video 요소(element)는 계속적으로 증가하는 "현재" 위치의 비디오 프레임을 나타냅니다. 현재 재생 위치가 렌더링 된 마지막 프레임이 비디오에서 더 이상 현재 재생 위치에 일치하지 않는 프레임으로 변경하는 경우, 새로운 프레임이 렌더링 되어야(must) 합니다.

비디오의 프레임들은 마지막으로 이벤트 루프가 단계 1에 도달했을 때 선택 되었던 비디오 트랙으로부터 얻어져야(must) 합니다.

특정 재생 위치에 해당하는 비디오 스트림에서 프레임은 비디오 스트림의 형식에 의해 정의됩니다.

video 요소(element)는 또한 현재 재생 위치에, 텍스트 트랙 큐 활성화 플래그가 설정되고 텍스트 트랙이 표시 모드에 있는 모든 텍스트 트랙 큐들과 미디어 리소스로부터의 오디오를 나타냅니다.

미디어 리소스와 연관된 모든 오디오는, 재생 되었다면, 요소(element)의 유효한 미디어 볼륨에 현재 재생 위치와 동시에 재생 되어야(must) 합니다. 유저 에이전트는 마지막으로 이벤트 루프가 단계 1에 도달했을 때 활성화 되었던 오디오 트랙들로부터 오디오를 재생해야(must) 합니다.

위의 것에 추가적으로, 유저 에이전트는 사용자에게 메세지를 ("버퍼링 중", "로드된 비디오 없음", "오류", 또는 더 자세한 정보와 같은) 비디오 위 혹은 요소(element)의 재생 영역의 다른 영역들에 텍스트나 아이콘들을 중첩시키거나, 다른 적절한 방법으로 제공 할 수 있습니다.

비디오를 렌더링 할 수 없는 유저 에이전트들은 대신 외부 비디오 재생 유틸리티로의 링크나 비디오 데이터 자체로의 링크를 나타내는 요소(element)를 만들 수 있습니다.

video 요소(element)의 미디어 리소스가 비디오 채널을 가지는 경우, 요소(element)는 너비가 미디어 리소스의 고유 너비이고, 높이가 미디어 리소스의 고유 높이이며, 모양이 현재 재생 위치에 해당하는 비디오의 프레임이 가능하다면 그 프레임인, 그렇지 않으면 (예를 들어 비디오가 탐색 중이거나 버퍼링 중인 경우) 이전 모양이 있다면 이전 모양을, 그렇지 않으면 (예를 들어 비디오가 여전히 첫 번째 프레임을 로딩 중이기 때문에) 검은색 그림 소스를 제공합니다.

---

미디어 리소스의 고유 너비와 고유 높이는 리소스에 의해 사용되는 형식에 대해 정의된 것으로서, 리소스의 치수들, 화면 종횡비, clean aperture, 해상도, 기타 등등을 고려하여 CSS 픽셀로 리소스의 치수입니다. 아나모픽(anamorphic) 형식이 "올바른" 치수들을 얻어오기 위해 종횡비를 비디오 데이터의 치수들에 적용하는 방법을 정의하지 않는다면, 유저 에이전트는 한쪽 치수를 증가시키고 다른 변하지 않은 것은 그대로 둠으로 비율을 적용해야(must) 합니다.

videoWidth IDL 속성(attribute)은 비디오의 고유 너비를 CSS 픽셀로 반환해야(must) 합니다. videoHeight IDL 속성(attribute)은 비디오의 고유 높이를 CSS 픽셀로 반환해야(must) 합니다. 요소(element)의 readyState 속성(attribute)이 HAVE_NOTHING이라면, 속성(attribute)은 0을 반환해야(must) 합니다.

비디오의 고유 너비나 고유 높이가 변경될 때 마다 (예를들어, 선택 된 비디오 트랙이 변경되는 경우를 포함하여), 요소(element)의 readyState 속성이 HAVE_NOTHING이 아니라면, 유저 에이전트는 미디어 요소에 resize라는 단순 이벤트를 발생시키기 위한 작업을 대기열에 넣어야(must) 합니다.

반대로 스타일 규칙이 없는 경우, 비디오 콘텐트는 비디오 콘텐트의 종횡비가 보존되면서 비디오 콘텐트가 그 내부에 완전히 맞는 가능한 가장 큰 사이즈의 재생 영역 가운데로 보여지는 요소(element)의 재생 영역 안에 렌더링 되어야(should) 합니다. 따라서, 재생 영역의 종횡비가 비디오의 종횡비와 매칭되지 않는다면, 비디오는 레터박스나 필러박스로 보여질 것입니다. 비디오를 포함하지 않는 요소(element)의 재생 영역의 영역은 아무 것도 나타내지 않습니다.

레터박스(letterboxed)

16 : 9를 4 : 3에 맞추는 방법

필러박스(pillarboxed)

4 : 3을 16 : 9에 맞추는 방법

CSS를 구현하는 유저 에이전트들에서, 위 요구사항은 §10 Rendering에 제안된 스타일 규칙을 사용하여 구현될 수 있습니다.

포스터 프레임의 고유 너비가 사용 가능하고 요소(element)가 현재 그것의 포스터 프레임을 나타낸다면, video 요소(element)의 재생 영역의 고유 너비는 포스터 프레임의 고유 너비이고; 그렇지 않고 비디오 리소스의 고유 너비가 사용 가능하다면 비디오 리소스의 고유 너비이며; 그렇지 않으면 고유 너비는 누락 된 것입니다.

포스터 프레임의 고유 높이가 사용 가능하고 요소(element)가 현재 그것의 포스터 프레임을 나타낸다면, video 요소(element)의 재생 영역의 고유 높이는 포스터 프레임의 고유 높이이고; 그렇지 않고 비디오 리소스의 고유 높이가 사용 가능하다면 비디오 리소스의 고유 높이이며; 그렇지 않으면 고유 높이는 누락 된 것입니다.

기본 객체 크기는 너비 300px과 높이 150px 입니다. [CSS3-IMAGES]

---

유저 에이전트들은 폐쇄 자막(closed caption)들의 표시, 오디오 설명 트랙들, 비디오 스트림과 연관된 다른 추가적인 데이터를 활성화 혹은 비활성화하는 컨트롤들을 제공해야(should)하지만, 그 기능들이 페이지의 일반적인 렌더링을 방해하지 않아야(should) 합니다.

유저 에이전트들은 사용자에게 좀 더 적절한 방법들로 (예를 들어, 풀 스크린이나 독립된 사이즈 조절 가능한 창에서) 비디오 콘텐트를 보는 것을 허용할 수 있습니다. 다른 유저 인터페이스 기능의 경우, 이를 활성화하기 위한 컨트롤은 유저 에이전트가 유저 인터페이스를 노출 중이 아닌 한 페이지의 일반적인 렌더링을 방해하지 않아야(should) 합니다. 그러나 그러한 독립적인 컨텍스트에서, 유저 에이전트들은 controls 속성(attribute)이 없다하더라도 전체 유저 인터페이스들을 표시할 수 있습니다.

유저 에이전트들은 비디오 재생이 사용자 경험을 방해할 수 있는 시스템 기능들에 영향을 주는 것을 허용할 수 있습니다; 예를 들어, 유저 에이전트들은 비디오 재생이 처리 중인 동안 화면보호기들을 비활성화 할 수 있습니다.

---

poster IDL 속성(attribute)은 poster 콘텐트 속성(attribute)을 반영해야(must) 합니다.

<script>
  function failed(e) {
    // video playback failed - show a message saying why
    switch (e.target.error.code) {
      case e.target.error.MEDIA_ERR_ABORTED:
        alert('You aborted the video playback.');
        break;
      case e.target.error.MEDIA_ERR_NETWORK:
        alert('A network error caused the video download to fail part-way.');
        break;
      case e.target.error.MEDIA_ERR_DECODE:
        alert('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
        break;
      case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
        alert('The video could not be loaded, either because the server or network failed or because the format is not supported.');
        break;
      default:
        alert('An unknown error occurred.');
        break;
    }
  }
</script>
<p><video src="tgif.vid" autoplay controls onerror="failed(event)"></video></p>
<p><a href="tgif.vid">Download the video file</a>.</p>

audio 요소(element)가 재생 중 일 수있는 경우, 요소(element)의 유효한 미디어 볼륨에 현재 재생 위치와 동시에 재생 되어야(must) 합니다. 유저 에이전트는 마지막으로 이벤트 루프가 단계 1에 도달했을 때 활성화 되었던 오디오 트랙들로부터 오디오를 재생해야(must) 합니다.

audio 요소(element)가 재생 중 일 수있지 않을 때, 오디오는 요소(element)에 대해 재생하지 않아야(must) 합니다.

(createElement()과 같은 DOM 팩토리 메서드들 뿐 아니라) HTMLAudioElement 객체들을 생성하기 위한 생성자가 제공됩니다: Audio(src)). 생성자로서 호출 될 경우, 이는 새로운 HTMLAudioElement 객체 (새로운 audio 요소(element))를 반환해야(must) 합니다. 요소(element)는 리터럴 값 "auto"로 설정 된 preload 속성(attribute)을 가지고 생성되어야(must) 합니다. src 인자가 존재한다면, 객체는 제공된 값으로 설정된 src 콘텐트 속성을 가지고 생성되어여(must) 합니다 (이것은 유저 에이전트가 반환 이전에 객체의 리소스 선택 알고리즘을 호출하게 될 것입니다). 요소(element)의 노드 문서는 작동된 생성자의 인터페이스 객체가 발견되는 Window 객체의 브라우징 컨텍스트의 활성 문서이어야(must) 합니다.