CSS 공간 탐색 레벨 1

1. searchOrigin을 탐색 기점 설정의 결과로 합니다.

2. • searchOrigin이 노드라면, eventTarget을 searchOrigin으로 합니다.

   • 그 외(assert: searchOrigin이 위치일 경우) eventTarget을 searchOrigin을 포함하는 노드로 합니다.

3. eventTarget이 Document나 문서 요소(document element)라면, eventTarget을 body 요소로(만약 null이 아니면), 아니면 문서 요소로 설정합니다.

4. • eventTarget이 스크롤 컨테이너이고, spatial-navigation-action 속성의 계산값이 scroll이며, eventTarget이 수동 스크롤 가능하다면, 해당 요소를 방향 기반으로 스크롤 eventTarget 하고 반환합니다.
   • 그 외, eventTarget이 스크롤 컨테이너 또는 문서라면

     1. candidates를 포커스 가능한 영역 찾기의 결과로, eventTarget 내에서 visibleOnly를 false로 설정하여 구합니다. 만약 spatial-navigation-action 속성의 계산값이 focus이면 false, 아니면 true.

     2. • spatial-navigation-action 계산값이 focus가 아니고, eventTarget이 수동 스크롤 가능하다면, 해당 요소를 방향 기반으로 스크롤 eventTarget을 direction 방향으로 실행하고 반환합니다.
        • 그 외 candidates에 1개 이상의 항목이 있다면:

          1. bestCandidate를 최적의 후보 선택의 결과로, candidates 내에서 direction 방향으로 searchOrigin을 기준으로 구합니다.

          2. navbeforefocus 이벤트 발생을 eventTarget에서 direction과 bestCandidate로 실행합니다.

          3. 포커스 단계를 bestCandidate에 실행하고 반환합니다.

        • 그 외, 다음 단계로 넘어갑니다.
   • 그 외, 다음 단계로 넘어갑니다.

5. container를 eventTarget의 가장 가까운 상위 공간 탐색 컨테이너로 합니다.

6. Loop: candidates를 포커스 가능한 영역 찾기의 결과로, container 내에서 visibleOnly를 false로 설정하여 구합니다. 만약 spatial-navigation-action 속성의 계산값이 focus이면 false, 아니면 true, eventTarget을 제외합니다.

7. candidates가 비어 있으면:

8. spatial-navigation-action 속성의 계산값이 focus가 아니고, container가 스크롤 컨테이너이며 수동 스크롤 가능하다면, 해당 요소를 방향 기반으로 스크롤 container를 direction 방향으로 실행하고 반환합니다.
9. 그 외,

   1. navnotarget 이벤트 발생을 eventTarget에서 direction과 container로 실행합니다.

   2. • container가 문서 요소(document element)이고, 최상위 브라우징 컨텍스트라면, 반환합니다. User Agent는 direction 방향을 존중하여(있다면) 자체 컨트롤로 포커스를 이동할 수 있습니다.

      • 그 외, container가 문서 요소(document element)이고, 중첩 브라우징 컨텍스트라면:

        1. searchOrigin을 container의 브라우징 컨텍스트 컨테이너로 설정합니다.

        2. eventTarget을 searchOrigin으로 합니다.

        3. container를 eventTarget의 가장 가까운 상위 공간 탐색 컨테이너로 합니다.

        4. loop 단계로 돌아갑니다.

      • 그 외, container를 자기 자신의 가장 가까운 상위 공간 탐색 컨테이너로 설정하고 loop 단계로 돌아갑니다.

10. bestCandidate를 최적의 후보 선택의 결과로, candidates 내에서 direction 방향으로 eventTarget을 기준으로 구합니다.

11. navbeforefocus 이벤트 발생을 eventTarget에서 direction과 bestCandidate로 실행합니다.

12. 포커스 단계를 bestCandidate에 실행하고 반환합니다.

탐색 기점 설정을 위해, 다음 단계를 실행합니다:

1. searchOrigin을 DOM 앵커의 최상위 브라우징 컨텍스트의 현재 포커스된 영역으로 합니다.

2. 공간 탐색 시작점이 null이 아니고 searchOrigin 내부에 있으면, 그 값을 반환합니다.

3. 그렇지 않으면 searchOrigin을 반환합니다.

만약 focus target의 상태가 포커스 이동이 아닌 이유로 변경되었다면, 탐색 기점 업데이트를 다음과 같이 수행합니다:

1. focus target이 실제로 비활성화되거나 명시적으로 inert되었거나 렌더링되지 않음이라면, searchOrigin을 focus target의 경계 박스로 합니다.

2. focus target이 제거됨이면, searchOrigin을 focus target이 존재했을 때 위치의 경계 박스로 합니다.

3. focus target이 완전히 화면 밖에 있다면, searchOrigin을 focus target의 가장 가까운 보이는 공간 탐색 컨테이너의 뷰포트로 합니다.

참고: User Agent는 예를 들어, 포커스된 요소가 마우스 스크롤로 뷰포트 밖으로 나가거나 사라진 경우 탐색 기점 업데이트를 해야 합니다.

포커스 가능한 영역 찾기를 포함 요소 C 내에서, true를 기본값으로 하는 선택적 visibleOnly 인자와 함께 실행하려면 다음 단계를 수행합니다:

1. focusables을 C의 자손인 포커스 가능한 영역의 DOM 앵커의 집합(set)으로 합니다. 박스가 여러 박스 조각을 가지는 경우, 각 박스 조각을 별도로 취급합니다.

2. User Agent는 focusables에서 DOM 앵커의 tabindex 속성이 음수로 설정된 항목을 제거해야 합니다.

   참고: 이는 순차 포커스 탐색 순서에서 음수 tabindex를 가진 요소를 제외하는 tabindex 규정과 맞추기 위한 "SHOULD"입니다.

3. visibleOnly가 false이면, focusables을 반환합니다.

   참고: focusables가 비어있을 수 있습니다

4. visibles을 focusables 중 경계 박스가 C의 내부 영역에 일부라도 포함되어 있는 항목의 부분집합으로 합니다.

   스크롤러의 현재 보이지 않는 부분에 있는 요소를 제외하면, 공간 탐색은 클릭할 수 없는 요소(예: 다른 요소에 의해 가려진 경우)를 자동으로 제외하지 않습니다. 사용자가 실질적으로 포커스하고 활성화할 때 애플리케이션 로직의 가정을 깨뜨리거나, 사용자에게 보이지 않거나 접근 불가능한 요소에 포커스가 이동해 혼란을 줄 수 있으므로, 저자는 tab-index="-1" 또는 inert 속성 등 순차 탐색과 동일한 모범 사례로 공간 탐색에서도 이런 요소들을 접근 불가로 만드는 것이 좋습니다.

5. visibles을 반환합니다.

   참고: visibles가 비어있을 수 있습니다

최적의 후보 선택을 집합(set) candidates에서, 방향 dir과 searchOrigin을 기준으로 실행하려면 다음 단계를 수행합니다:

1. candidates가 비어있으면 null을 반환합니다.

2. candidates에 단일 항목만 있으면 그 항목을 반환합니다.

3. insiders를 candidates의 부분집합으로 합니다.

   • 경계 박스가 searchOrigin의 내부 영역과 완전히 겹치는 항목

   • 경계 박스가 searchOrigin의 내부 영역과 부분적으로 겹치는 항목으로서

     • 위쪽 에지가 dir이 down일 때 searchOrigin의 경계 박스의 위쪽 에지보다 아래에 있음

     • 아래쪽 에지가 dir이 up일 때 searchOrigin의 경계 박스의 아래쪽 에지보다 위에 있음

     • 오른쪽 에지가 dir이 left일 때 searchOrigin의 경계 박스의 오른쪽 에지 왼쪽에 있음

     • 왼쪽 에지가 dir이 right일 때 searchOrigin의 경계 박스의 왼쪽 에지 오른쪽에 있음

     참고: 요소가 탐색 기점과 어떻게 겹치는지 더 상세한 조건은 포커스 이동 순서에 영향을 주며, 포커스 이동 순서는 UX와 관련이 있으므로 UA 정의 메커니즘에 따라 달라집니다.

   참고: 이 부분집합 설정은 요청한 방향과 반대 방향으로 이동하는 것을 방지하기 위해 필요합니다.

4. • insiders가 비어있지 않으면,

     1. closest subset을 insiders 중에서 경계 박스의

        • 위쪽 에지가 dir이 down일 때 내부 영역의 위쪽 에지와 가장 가까운 항목

        • 아래쪽 에지가 dir이 up일 때 내부 영역의 아래쪽 에지와 가장 가까운 항목

        • 오른쪽 에지가 dir이 left일 때 내부 영역의 오른쪽 에지와 가장 가까운 항목

        • 왼쪽 에지가 dir이 right일 때 내부 영역의 왼쪽 에지와 가장 가까운 항목

     2. closest subset이 단일 항목이면 그 항목을 반환하고, 아니면 closest subset의 첫 번째 항목을 문서 순서대로 반환합니다. 단, 그 경계 박스가 다른 항목의 경계 박스와 겹치고 그 항목이 CSS 페인팅 순서상 더 위에 있다면, 그 항목을 반환합니다(더 위 항목이 또 겹치는 경우 재귀적으로 적용).

   • 그 외

     1. candidates를 다음 조건 중 하나를 만족하는 항목의 부분집합으로 설정합니다:

        • 해당 항목이 searchOrigin과 겹치지 않고, 경계 박스의

          • 위쪽 에지가 dir이 down일 때 searchOrigin의 경계 박스의 아래쪽 에지 아래에 위치

          • 아래쪽 에지가 dir이 up일 때 searchOrigin의 경계 박스의 위쪽 에지 위에 위치

          • 오른쪽 에지가 dir이 left일 때 searchOrigin의 경계 박스의 왼쪽 에지 왼쪽에 위치

          • 왼쪽 에지가 dir이 right일 때 searchOrigin의 경계 박스의 오른쪽 에지 오른쪽에 위치

     2. candidates의 각 candidate에 대해 최단 거리 찾기를 searchOrigin과 계산합니다.

     3. candidates 집합에서 최단 거리를 가진 항목을 반환합니다. 여러 항목이 동일 거리라면, 문서 순서의 첫 번째 항목을 반환합니다. 단, 그 경계 박스가 동일 거리의 다른 항목의 경계 박스와 겹치고 그 항목이 CSS 페인팅 순서상 더 위에 있다면, 그 항목을 반환합니다(더 위 항목이 또 겹치는 경우 재귀적으로 적용).

distance = euclidean + displacement - alignment - sqrt(Overlap)

각 용어의 의미는 다음과 같습니다:

euclidean

P1과 P2 사이의 유클리드 거리

displacement

reference와 candidate 사이 dir에서의 변위 정도. 아래와 같이 정의됨:

displacement = (dir에 직교하는 축에서 P1과 P2 사이의 절대 거리 +
                orthogonalBias) *
               orthogonalWeight

orthogonalBias:

• dir이 left 또는 right면, reference의 축에 정렬된 바운딩 박스의 높이 / 2

• 그 외 dir이 up 또는 down면, reference의 축에 정렬된 바운딩 박스의 너비 / 2

orthogonalWeight:

• dir이 left 또는 right면, 30

• 그 외 dir이 up 또는 down면, 2

alignment

reference와 candidate 사이 dir에서의 정렬 정도. 아래와 같이 정의됨:

alignment = alignBias * alignWeight

alignBias:

• dir이 left 또는 right면, projectedOverlap / reference의 축에 정렬된 바운딩 박스의 높이

• 그 외 dir이 up 또는 down면, projectedOverlap / reference의 축에 정렬된 바운딩 박스의 너비

projectedOverlap:

• dir이 left 또는 right면, reference와 candidate의 수직축에 수평 투영된 부분의 겹치는 길이

• 그 외 dir이 up 또는 down면, reference와 candidate의 수평축에 수직 투영된 부분의 겹치는 길이

alignWeight:

5

sqrt(Overlap)

reference와 candidate 사이의 겹친 영역의 제곱근 값, 겹치지 않으면 0

참고: 이 일반 공식은 여러 가능한 대안 중에서 직관적으로 가장 자주 맞는 결과를 주는 공식을 UX 테스트 케이스(UX test cases)에서 선택하여 채택한 것입니다. alignWeight와 orthogonalWeight의 값도 같은 테스트 케이스를 기반으로 실험적으로 결정되었습니다. 결과 공식은 다소 복잡하지만, 좋은 결과를 주는 듯합니다. 개선이나 단순화 제안도 환영합니다.

이런 용어는 [CSSOM-VIEW-1], [CSS-OVERFLOW-3], [CSS-SCROLL-SNAP-1]에 포함되어야 합니다. <https://github.com/w3c/csswg-drafts/issues/2322>

요소 e는 주어진 방향 d로 수동으로 스크롤될 수 있다:

• e가 생성하는 주 박스(principal box)가 스크롤 컨테이너일 것, 그리고

• d가 up 또는 down일 때, overflow-y 속성의 계산값이 hidden이 아닐 것, 그리고

• d가 left 또는 right일 때, overflow-x 속성의 계산값이 hidden이 아닐 것, 그리고

• e가 방향 d에서 스크롤 경계에 있지 않을 것

• e가 방향 d에서 마지막 mandatory 스냅 포인트에 스냅되어 있지 않을 것

[CSSOM-VIEW-1]에서는 명시적 위치 없이 주어진 방향으로 스크롤하는 방법을 정의해야 합니다. 그 전까지는 직접 정의함. <https://github.com/w3c/csswg-drafts/issues/2323>

요소 e를 방향 dir로 방향 기반 스크롤하려면:

1. d를 User Agent가 정의한 거리로 설정합니다.

2. x를 e의 현재 x축 스크롤 위치로 설정합니다.

3. y를 e의 현재 y축 스크롤 위치로 설정합니다.

4. scroll an element 알고리즘([CSSOM-VIEW-1])을 e에 적용하여

   • dir이 up일 때 (x, y - d)

   • dir이 down일 때 (x, y + d)

   • dir이 left일 때 (x - d, y)

   • dir이 right일 때 (x + d, y)