From 3c5a779f6debe41645ea437214095eeb7f11fd29 Mon Sep 17 00:00:00 2001 From: umsangdon Date: Sat, 17 Oct 2026 13:39:31 +0900 Subject: [PATCH] =?UTF-8?q?fix(B05):=20367-6=20=EC=9C=A0=ED=86=A0=EA=B3=A1?= =?UTF-8?q?=EC=84=A0=20=EB=B2=94=EB=A1=80=20=3D=20=EC=86=90=EC=9E=A1?= =?UTF-8?q?=EC=9D=B4=20=EC=98=A4=EB=A5=B8=EC=AA=BD=EB=B6=80=ED=84=B0=20?= =?UTF-8?q?=C2=B7=20=EC=A2=81=EC=9C=BC=EB=A9=B4=20=EC=A4=84=20=EB=B0=94?= =?UTF-8?q?=EA=BF=88=20=E2=80=94=20=EC=86=90=EC=9E=A1=EC=9D=B4=EA=B0=80=20?= =?UTF-8?q?=EB=B2=94=EB=A1=80=20=EB=8B=A8=EC=B6=94=20=EB=8D=AE=EC=9D=8C=20?= =?UTF-8?q?=EC=97=86=EC=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 배수유역 판이 펼쳐 종단 열이 좁을 때 ▲유토곡선 손잡이가 [횡단 기준]을 덮던 것 · 넓을 땐 지금 한 줄 그대로. 시험 test_367_6 = 폭 넷에서 범례 단추 셋 · 손잡이 elementFromPoint = 자기. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01QfHKQs7J3hQELKMWQMUJEy --- B05_Profile/B05_Profile_UI_Style_MassHaul.css | 12 +++- .../test_367_6_masshaul_legend_handle.py | 55 +++++++++++++++++++ 2 files changed, 65 insertions(+), 2 deletions(-) create mode 100644 resources/tester/test_367_6_masshaul_legend_handle.py diff --git a/B05_Profile/B05_Profile_UI_Style_MassHaul.css b/B05_Profile/B05_Profile_UI_Style_MassHaul.css index 1d458de7c..06ad87755 100644 --- a/B05_Profile/B05_Profile_UI_Style_MassHaul.css +++ b/B05_Profile/B05_Profile_UI_Style_MassHaul.css @@ -143,18 +143,26 @@ } /* 범례 오버레이 — 유토곡선 우상단에 절대배치(B06과 같은 문법). 요약 막대 아래에 앉힌다. - 공용 범례(.b06-masshaul__legend)가 이미 absolute + right 배치라 top만 이 래퍼가 정한다. */ + 공용 범례(.b06-masshaul__legend)가 이미 absolute + right 배치라 top만 이 래퍼가 정한다. + 왼쪽 끝 = 손잡이(중앙 +44 · 폭 72) 오른쪽 — 좁으면 범례가 줄을 바꿔 손잡이를 피함(367-6). */ .b05-profile__masshaul-legend { position: absolute; top: 4px; right: 0; - left: 0; + left: calc(50% + 92px); z-index: 3; height: 0; pointer-events: none; } .b05-profile__masshaul-legend .b06-masshaul__legend { + left: 0; + flex-wrap: wrap; + justify-content: flex-end; + pointer-events: none; +} + +.b05-profile__masshaul-legend .b06-masshaul__legend > * { pointer-events: auto; } diff --git a/resources/tester/test_367_6_masshaul_legend_handle.py b/resources/tester/test_367_6_masshaul_legend_handle.py new file mode 100644 index 000000000..841832209 --- /dev/null +++ b/resources/tester/test_367_6_masshaul_legend_handle.py @@ -0,0 +1,55 @@ +"""367-6 유토곡선 손잡이 · 범례 안 겹침 — 실제 브라우저(서버 없이 · 진짜 CSS). + +유토 판 머리줄(손잡이 = 중앙 +44)과 범례(오른쪽 붙임)를 진짜 CSS 로 세우고 판 폭마다 +범례 단추 셋 · 손잡이 가운데 elementFromPoint = 그 단추. 좁은 폭 = 배수유역 판이 펼친 B06 · +B05 종단 열(≈ 434px) · 더 좁은 열 · 넓은 폭 = 배수유역 접은 칸(1162px) — 넓을 땐 한 줄 그대로. +""" + +from pathlib import Path + +ROOT = Path(__file__).resolve().parents[2] +CSS = [ + "ui_template/ui_template_theme.css", + "ui_template/ui_template_overlay.css", + "common_util/common_util_mass_haul.css", + "B05_Profile/B05_Profile_UI_Style_MassHaul.css", +] +BUTTONS = ["도형 위치 초기화", "횡단 기준", "토량 분배"] +HTML = """ +
+
+ +
+
+
+ + + +
+
+""" +PROBE = """() => [...document.querySelectorAll('button')].map((b) => { + const r = b.getBoundingClientRect(); + const hit = document.elementFromPoint(r.left + r.width / 2, r.top + r.height / 2); + return [b.textContent.trim(), b === hit || b.contains(hit), Math.round(r.top)]; +})""" + + +def test_legend_buttons_clear_of_handle(): + from playwright.sync_api import sync_playwright + + css = "\n".join((ROOT / p).read_text(encoding="utf-8") for p in CSS) + with sync_playwright() as p: + browser = p.chromium.launch(channel="msedge", headless=True) + page = browser.new_page(viewport={"width": 1300, "height": 600}) + for width in (360, 434, 700, 1162): + page.set_content(f"{HTML.format(w=width)}") + rows = page.evaluate(PROBE) + assert [r[0] for r in rows] == ["유토곡선", *BUTTONS] + assert all(r[1] for r in rows), (width, rows) + if width == 1162: + # 넓을 땐 지금 모양 — 범례 한 줄 + assert len({r[2] for r in rows[1:]}) == 1, rows + browser.close()