[Webkit-unassigned] [Bug 213349] New: <summary> transitions not when <details> is opened

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=213349

            Bug ID: 213349
           Summary: <summary> transitions not when <details> is opened
           Product: WebKit
           Version: Safari 13
          Hardware: Macintosh
                OS: macOS 10.15
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: bouke at haarsma.eu

Say I have implemented a custom disclosure triangle for my <summary> element:

details summary {
  list-style: none;
}

details summary::-webkit-details-marker {
  display: none;
}

details summary::before {
  content: ">";
  display: inline-block;
  transition: transform 0.5s ease;
  width: 1em;
  vertical-align: baseline;
  text-align: center;
}

details[open] summary::before {
  transform: rotate(90deg);
}

And it is used like this:

<details>
  <summary>System Information</summary>
  <p>
    macOS Catalina
  </p>
</details>

Expected behaviour:
As soon as I click the <summary> element, the transition from > to ⌄ should start, and vice versa.

Actual behaviour:
The transition doesn't start when the <summary> element is clicked. The exact conditions that are triggering the transition are somewhat unclear to me. It seems to start only after giving another element focus or moving the cursor outside of the parent element.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20200618/938cdeb6/attachment.htm>