Skip to content

Commit

Permalink
[css-nav-1] Modify the step for selecting inside elements
Browse files Browse the repository at this point in the history 
1. Modify the making the set of "insiders" in selecting the best candidate steps:
1) From the search origin, fully overlapped elements and partially overlapped elements depending on the requested direction are included in the "insiders"
2) Element which aren't overlapped with the search origin is "outsiders" (*outsider isn't specified in the spec)

2. Modify the selecting the best candidate steps as
1) find the closest element among "insiders"
  1-1) if there is one, it is the best candidate
  1-2) else fall back to the next step
2) find the closest element among "outsiders" using distance function (https://drafts.csswg.org/css-nav-1/#find-the-shortest-distance)

Related to : w3c#4483
  • Loading branch information
Jihye Hong committed Nov 25, 2019
1 parent 1631265 commit f17e249
Showing 1 changed file with 9 additions and 14 deletions.
23 changes: 9 additions & 14 deletions css-nav-1/Overview.bs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1167,12 +1167,15 @@ run the following steps:
1. If <var>candidates</var> is <a spec=infra for=set>empty</a>, return <code>null</code>
2. If <var>candidates</var> contains a single item, return that item
3. Let <var>insiders</var> be the subset of <var>candidates</var>
* If <var>searchOrigin</var> is the <a>spatial navigation container</a>, whose <a>boundary box</a>'s
* top edge is below the top edge of <a>inside area</a> of <var>searchOrigin</var> if <var>dir</var> is {{SpatialNavigationDirection/down}}
* bottom edge is above the bottom edge of <a>inside area</a> of <var>searchOrigin</var> if <var>dir</var> is {{SpatialNavigationDirection/up}}
* right edge is left of the right edge of <a>inside area</a> of <var>searchOrigin</var> if <var>dir</var> is {{SpatialNavigationDirection/left}}
* left edge is right of the left edge of <a>inside area</a> of <var>searchOrigin</var> if <var>dir</var> is {{SpatialNavigationDirection/right}}
* Else, whose boundary box fully overlaps with <a>inside area</a> of <var>searchOrigin</var>.
* whose boundary box fully overlaps with <a>inside area</a> of <var>searchOrigin</var>

This comment has been minimized.

Sign in to view

Copy link
@hugoholgersson

hugoholgersson Dec 9, 2019

Sounds like you want to add OR after this line?

This comment has been minimized.

Sign in to view

Copy link
@jihyerish

jihyerish Dec 18, 2019

Owner

Yes, "OR" will come after this line. For being "insiders", the element would be fully overlapped or partially overlapped.

This comment has been minimized.

Sign in to view

Copy link
@hugoholgersson

hugoholgersson Jan 10, 2020

Ok. Let's update the spec to make this clear?
* whose boundary box partially overlaps with <a>inside area</a> of <var>searchOrigin</var> as
* top edge is below the top edge of <var>searchOrigin</var>'s <a>boundary box</a> if <var>dir</var> is {{SpatialNavigationDirection/down}}

This comment has been minimized.

Sign in to view

Copy link
@hugoholgersson

hugoholgersson Dec 9, 2019

Are these conditions OR'ed or AND'ed?

It's not clear how you define "partially overlapping".

This comment has been minimized.

Sign in to view

Copy link
@jihyerish

jihyerish Dec 18, 2019

Owner

These conditions are OR'ed.
The element is partially overlapped with search origin if it is more away from the search origin along the navigation direction, and there is overlapped area between it and search origin.

Do you think this definition matches with the description in this commit?

This comment has been minimized.

Sign in to view

Copy link
@hugoholgersson

hugoholgersson Dec 18, 2019

No.

The element is partially overlapped with search origin if it is more away from the search origin along the navigation direction, and there is overlapped area between it and search origin.

This is hard to understand.

This comment has been minimized.

Sign in to view

Copy link
@jihyerish

jihyerish Dec 24, 2019

Owner

This part is for classifying the partially overlapped candidate which can be included in the "insiders" set.
("insiders" may be an ambiguous term, but I couldn't find out more suitable one)
The elements in this condition are inside the container, only considering the navigation direction.
The detailed condition for this is,
(1) There is an overlapped area between search origin and a candidate
(2) Every part of a candidate is further in the navigation direction from the search origin.
(This is the reason that considering "top edge" from both search origin and candidate when the navigation direction is "down")

For example, in the image below,
if the navigation direction is right and "A" is search origin,
image
only "C" is included the set of the partially overlapped "insiders".

This comment has been minimized.

Sign in to view

Copy link
@hugoholgersson

hugoholgersson Jan 10, 2020

Thanks for the example! It makes sense.

("insiders" may be an ambiguous term, but I couldn't find out more suitable one)

Yeah, "intersector", or something like it, might be a better name, now that we also classify partially overlapping candidates?

These conditions are OR'ed.

Ok. Let's update the spec to make this clear?
* bottom edge is above the bottom edge of <var>searchOrigin</var>'s <a>boundary box</a> if <var>dir</var> is {{SpatialNavigationDirection/up}}
* right edge is left of the right edge of <var>searchOrigin</var>'s <a>boundary box</a> if <var>dir</var> is {{SpatialNavigationDirection/left}}
* left edge is right of the left edge of <var>searchOrigin</var>'s <a>boundary box</a> if <var>dir</var> is {{SpatialNavigationDirection/right}}

NOTE: More detail condition about how the element is overlapped with the search origin affects the sequence of focus movement.
The sequence of focus movement is related to UX, so it depends on the UA-defined mechanism.

Note: this sub-setting is necessary to avoid going in the opposite direction than the one requested.
4.
Expand All @@ -1196,14 +1199,6 @@ run the following steps:
* bottom edge is above the top edge of <var>searchOrigin</var>'s <a>boundary box</a> if <var>dir</var> is {{SpatialNavigationDirection/up}}
* right edge is left of the left edge of <var>searchOrigin</var>'s <a>boundary box</a> if <var>dir</var> is {{SpatialNavigationDirection/left}}
* left edge is right of the right edge of <var>searchOrigin</var>'s <a>boundary box</a> if <var>dir</var> is {{SpatialNavigationDirection/right}}
* the item partially overlaps with <var>searchOrigin</var> and its <a>boundary box</a>'s
* top edge is below the top edge of <var>searchOrigin</var>'s <a>boundary box</a> if <var>dir</var> is {{SpatialNavigationDirection/down}}
* bottom edge is above the bottom edge of <var>searchOrigin</var>'s <a>boundary box</a> if <var>dir</var> is {{SpatialNavigationDirection/up}}
* right edge is left of the right edge of <var>searchOrigin</var>'s <a>boundary box</a> if <var>dir</var> is {{SpatialNavigationDirection/left}}
* left edge is right of the left edge of <var>searchOrigin</var>'s <a>boundary box</a> if <var>dir</var> is {{SpatialNavigationDirection/right}}

NOTE: More detail condition about how the element is overlapped with the search origin affects the sequence of focus movement.
The sequence of focus movement is related to UX, so it depends on the UA-defined mechanism.

2. For each <var ignore="">candidate</var> in <var>candidates</var>,
[=find the shortest distance=] between <var>searchOrigin</var>.
Expand Down

0 comments on commit f17e249

Please sign in to comment.