Adding Element.closest() API

Adding Element.closest() API 

Implementing Element.closest() API according to specs https://dom.spec.whatwg.org/#dom-element-closest

This API will parse selectors and if fails then throw SyntaxError
else return closest ancestor that matches selectors if there is
no ancestor that matches selectors, it will return nullptr.

Blink-Dev Intent to Implement and ship Link :
https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/yk_Fo6hyvb8

This patch is a merge from webkit http://trac.webkit.org/changeset/174324
by Dhi Aurrahman <diorahman@rockybars.com>".

BUG=422731, 417603
R=habib.virji@samsung.com

Committed: https://src.chromium.org/viewvc/blink?view=rev&revision=185180

[Paritosh Kumar, 2014-11-11 09:24:04]

paritosh.in@samsung.com changed reviewers:
+ pdr@chromium.org

[Paritosh Kumar, 2014-11-11 09:24:04]

Please have a look.

[Paritosh Kumar, 2014-11-12 02:46:41]

On 2014/11/11 09:24:04, Paritosh Kumar wrote:
> Please have a look.

Re-uploaded as per your suggestion, please take a look.

Thanks & Regards
Paritosh

[pdr., 2014-11-12 03:13:18]

This looks much better, just a few comments below.

https://codereview.chromium.org/701723007/diff/1/LayoutTests/fast/selectors/e...
File LayoutTests/fast/selectors/element-closest-general.html (right):

https://codereview.chromium.org/701723007/diff/1/LayoutTests/fast/selectors/e...
LayoutTests/fast/selectors/element-closest-general.html:26: <bar>
Please fix the indentation here so foo and bar are indented, and above
(testRunner.dumpAsText()), and below (<c/> is incorrectly indented). Two-space
indent is fine, or four spaces, as long as we're consistent.

https://codereview.chromium.org/701723007/diff/1/LayoutTests/fast/selectors/e...
LayoutTests/fast/selectors/element-closest-general.html:33: <e/>
Lets go ahead and fix this: <e/> should be <e/>, similarly for <c/>.

https://codereview.chromium.org/701723007/diff/1/LayoutTests/fast/selectors/e...
LayoutTests/fast/selectors/element-closest-general.html:75:
shouldBeNull('theTarget.closest("ancestor[name=young]")', 'ancestor');
shouldBeNull doesn't take a second argument. This is why your test output is
missing a PASS line for ancestor[name=young].

[Paritosh Kumar, 2014-11-12 04:41:40]

Patchset #2 (id:20001) has been deleted

[Paritosh Kumar, 2014-11-12 04:44:09]

Thanks

Updated as suggested. Please have a look.

https://codereview.chromium.org/701723007/diff/1/LayoutTests/fast/selectors/e...
File LayoutTests/fast/selectors/element-closest-general.html (right):

https://codereview.chromium.org/701723007/diff/1/LayoutTests/fast/selectors/e...
LayoutTests/fast/selectors/element-closest-general.html:26: <bar>
On 2014/11/12 03:13:18, pdr wrote:
> Please fix the indentation here so foo and bar are indented, and above
> (testRunner.dumpAsText()), and below (<c/> is incorrectly indented). Two-space
> indent is fine, or four spaces, as long as we're consistent.

Done.

https://codereview.chromium.org/701723007/diff/1/LayoutTests/fast/selectors/e...
LayoutTests/fast/selectors/element-closest-general.html:33: <e/>
On 2014/11/12 03:13:17, pdr wrote:
> Lets go ahead and fix this: <e/> should be <e/>, similarly for <c/>.

Done.

[pdr., 2014-11-12 04:47:26]

The CQ bit was checked by pdr@chromium.org

[pdr., 2014-11-12 04:47:27]

LGTM

[commit-bot: I haz the power, 2014-11-12 04:48:05]

CQ is trying da patch. Follow status at
 https://chromium-cq-status.appspot.com/patch-status/701723007/40001

[commit-bot: I haz the power, 2014-11-12 05:57:00]

Committed patchset #2 (id:40001) as 185180

[kozy, 2015-05-13 03:40:20]

Will it work through shadow root?
<div id='outside'>
#shadow-root
  <div id='inside'></div>
</div>
docoument.getElementById('inside').closest('#outside') returns null. Is it work
as intended or not?

[Paritosh Kumar, 2015-05-22 07:29:24]

On 2015/05/13 03:40:20, kozyatinskiy wrote:
> Will it work through shadow root?
> <div id='outside'>
> #shadow-root
>   <div id='inside'></div>
> </div>
> docoument.getElementById('inside').closest('#outside') returns null. Is it
work
> as intended or not?

I'm not sure, this will return null.
As when I checked the same on 43.0.2357.65 (Official Build) m (32-bit), Blink:
@195283

with HTML:

<html>
<body>
<div id='outside'>
#shadow-root
  <div id='inside'></div>
</div>
<script>
console.log( document.getElementById('inside').closest('#outside'));
</script>
</body>
</html>

I got, 
<div id="outside">
#shadow-root
  <div id="inside"></div>
</div>

on console, as I'm expecting this also.
Same result found on FF also.

Not sure, may be, You got return value null because typo in
"docoument.getElementById('inside').closest('#outside')", docoument => document.