Prevent menulist backdrops from intercepting pointer events

popover 속성이 없는 menulist의 backdrop에도 UA 스타일을 적용해, 메뉴 바깥의 요소가 클릭을 받을 수 있도록 수정했습니다.

문제 설명

menulist는 popover 속성을 명시하지 않아도 기본적으로 popover로 동작합니다. 기존 popover backdrop의 UA 규칙은 popover 속성이 있는 요소만 선택하므로 이 경우에는 pointer-events: none !important가 적용되지 않았습니다.

작성자 스타일로 backdrop이 화면을 덮고 포인터 이벤트를 받도록 지정하면 메뉴 밖의 요소로 전달되어야 할 클릭을 backdrop이 가로챌 수 있었습니다.

해결 내용

html.css의 menulist UA 스타일에 다음 규칙을 추가했습니다.

menulist:-internal-popover-in-top-layer::backdrop {
  pointer-events: none !important;
}

실제로 top layer에 있는 menulist의 backdrop을 선택하므로 popover 속성 유무에 의존하지 않습니다. !important를 사용해 작성자 스타일이 backdrop의 포인터 이벤트를 다시 켜는 경우에도 메뉴 밖 클릭이 전달되도록 했습니다.

테스트 방법

기존 menulist-popover-attribute.html WPT에 실제 클릭 검증을 추가했습니다. 테스트는 popover 속성이 없는 menulist를 사용하고, 작성자 스타일로 backdrop에 pointer-events: auto를 지정합니다.

메뉴를 열기 전과 연 뒤에 바깥 요소를 클릭해 두 경우 모두 대상 요소의 click 이벤트가 발생하는지 확인합니다. testdriver의 클릭 동작을 사용하며 메뉴를 닫는 cleanup도 등록했습니다.

같은 테스트를 Linux의 overlay-disabled 가상 테스트에 추가했습니다. 현재 CL은 PS2로 리뷰 중이며, Gerrit에서 CQ 통과 결과는 아직 확인되지 않았습니다.

배운 점

HTML 속성의 존재 여부와 요소의 기본 동작은 다를 수 있습니다. UA 선택자가 명시적 속성에만 의존하면 기본 동작을 제공하는 요소가 빠질 수 있습니다.
포인터 이벤트 문제는 스타일 값 확인에 더해 실제 클릭이 어느 요소에 전달되는지 검증해야 합니다. 작성자 스타일과 기능 플래그 구성도 함께 다룹니다.