Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support the `:hover` selector #790

Closed
pcwalton opened this issue Aug 26, 2013 · 9 comments
Closed

Support the `:hover` selector #790

pcwalton opened this issue Aug 26, 2013 · 9 comments

Comments

@pcwalton
Copy link
Contributor

@pcwalton pcwalton commented Aug 26, 2013

This is needed for Acid2 lines 6, 7, 8, 9 (the nose).

@larsbergstrom
Copy link
Contributor

@larsbergstrom larsbergstrom commented Dec 10, 2013

Needed for #1366.

@larsbergstrom
Copy link
Contributor

@larsbergstrom larsbergstrom commented Dec 10, 2013

@metajack
Copy link
Contributor

@metajack metajack commented Jan 22, 2014

  1. Implement Rust event handlers and fix onclick to use them
  2. Get mousemove events into script from the compositor
  3. Script sets hover state on DOM node (special bit on the element)
  4. Selector matching can query that bit
  5. Trigger reflow
@jdm
Copy link
Member

@jdm jdm commented Jan 22, 2014

Step 1 is #1528.

@larsbergstrom
Copy link
Contributor

@larsbergstrom larsbergstrom commented Feb 5, 2014

@sammykim you can work on numbers 2-5 while waiting for Rust event handlers to land. Please ask us in IRC or here on github if you have any questions, particularly about glfw mouse move, hooking into script, and querying the layout task for the correct DOM nodes.

@larsbergstrom
Copy link
Contributor

@larsbergstrom larsbergstrom commented Feb 6, 2014

@sammykim I had a chance to chat with @jdm about some of your questions. Below is a rough outline of the work:

  • Set up glfw to receive the mouse position events
  • Pass those mouse position events from the compositor to the script task
  • The script task should query layout for all of the DOM nodes corresponding to that point on the screen and they should be in a defined order (either bottom-up or top-down is fine - whichever is easiest)
  • The script task should trigger the corresponding events, using the features described in issues #1528 and #1527 . The list of mouse events is specified at:
    https://dvcs.w3.org/hg/dom3events/raw-file/tip/html/DOM3-Events.html#events-mouseevents
  • For the mouse over event, we should also add a handler that sets the hover state on the DOM node and triggers a reflow if it has changed
  • Should ensure that CSS selector matching can properly query that handler bit

The specification for the :hover attribute is here:
http://www.w3.org/TR/CSS21/selector.html#x32

Note that unlike DOM events, which have a more complicated bubbling and cancellation semantics (which is why you need the list of all the DOM nodes for a point on the screen instead of just the top one!), a technically correct implementation of :hover only needs to set the property on the topmost element.

You can implement this work in any order that works for you, and we always prefer seeing partial results so we can give comments before there is too much work in progress. e.g., you could hook up the mouse events and messages and get script handling them but not doing much with them other than querying layout first, before working on the event handling and setting bits.

@hyunjunekim
Copy link
Contributor

@hyunjunekim hyunjunekim commented Feb 6, 2014

@larsbergstrom @jdm
When find element for hover target, Could we use the HitTestQuery with layout_task like LINK?
right?

@larsbergstrom
Copy link
Contributor

@larsbergstrom larsbergstrom commented Feb 6, 2014

@hyunjunekim The HitTestQuery message is almost correct, except that it only returns one item. While that works for the specific case of the :hover pseudo-class, you will need the full list of items to implement the event handler.

@larsbergstrom
Copy link
Contributor

@larsbergstrom larsbergstrom commented Feb 19, 2014

In addition to the EventHandler work mentioned above (which requires #1688 to do), there is one more item. We do not currently parse the selector in ACID2 containing :hover correctly, which I believe is what prevents the patch already landed from working:

60:4 Invalid/unsupported selector: .nose div:hover :before 
61:4 Invalid/unsupported selector: .nose div:hover :after 
63:4 Invalid/unsupported selector: .nose div :after 
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

5 participants
You can’t perform that action at this time.