blob: 0436b29104d5f71a8abf002a0248f3811a1d9c67 [file] [log] [blame]
<!doctype html>
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
<style>
* {
background-color:white;
}
:any-link {
background-color:rgb(1, 2, 3);
}
</style>
</head>
<body>
<div style="display:none">
<div data-description="Anchors basics.">
<a id="target-tag-1">Anchors without href are no links.</a>
<a id="target-tag-2" href>Anchors with an empty href are links.</a>
<a id="target-tag-3" href="">Anchors with an empty href are links.</a>
<a id="target-tag-4" href="a">An anchor with any href is a link.</a>
<a id="target-tag-5" href="http://www.webkit.org">An anchor with a valid href is a link.</a>
<!-- Case sensitivity of the attribute name -->
<a id="target-tag-6" Href>Anchors with an empty href are links.</a>
<a id="target-tag-7" HREF="">Anchors with an empty href are links.</a>
<a id="target-tag-8" hreF="a">An anchor with any href is a link.</a>
<a id="target-tag-9" hReF="http://www.webkit.org">An anchor with a valid href is a link.</a>
</div>
<div data-description="Standalone images are not link.">
<!-- The WebKit version of "any-link" was incorrectly classifying images with "usemap" as links. -->
<img id="target-tag-10" href="http://www.webkit.org"></img>
<img id="target-tag-11" usemap></img>
<img id="target-tag-12" usemap=""></img>
<map id="target-tag-13" name="image-map-1">
<area id="target-tag-14" href="http://www.webkit.org" shape="rect" coords="10,10,10,10">
</map>
<img id="target-tag-15" src="invalid.png" usemap="#image-map-1">
</div>
<div data-description="Area basics..">
<!-- No href -> not a link. -->
<area id="target-tag-16">
<area id="target-tag-17" href>
<area id="target-tag-18" href="">
<area id="target-tag-19" href="http://www.webkit.org">
<area id="target-tag-20" HREF="http://www.webkit.org">
<map id="target-tag-21" name="image-map-2">
<area id="target-tag-22" href>
<area id="target-tag-23" href="">
<area id="target-tag-24" href="http://www.webkit.org">
<area id="target-tag-25" HREF="http://www.webkit.org">
</map>
</div>
<div data-description="SVG basics.">
<svg>
<a id="target-tag-26"><text>No href.</text></a>
<a id="target-tag-27" href><text>Link.</text></a>
<a id="target-tag-28" href=""><text>Link.</text></a>
<a id="target-tag-29" href="http://www.webkit.org"><text>Link.</text></a>
<a id="target-tag-30" HREF="http://www.webkit.org"><text>Link.</text></a>
<a id="target-tag-31" xlink:href><text>Link.</text></a>
<a id="target-tag-32" xlink:href=""><text>Link.</text></a>
<a id="target-tag-33" xlink:href="http://www.webkit.org"><text>Link.</text></a>
<a id="target-tag-34" xlink:HREF="http://www.webkit.org"><text>Link.</text></a>
</svg>
</div>
</div>
</body>
<script>
description('Test the basic matching of the :any-link selector.');
shouldBe('document.querySelectorAll(":any-link").length', '21');
// Query Selector.
var expectedIds = ['target-tag-2',
'target-tag-3',
'target-tag-4',
'target-tag-5',
'target-tag-6',
'target-tag-7',
'target-tag-8',
'target-tag-9',
'target-tag-14',
'target-tag-17',
'target-tag-18',
'target-tag-19',
'target-tag-20',
'target-tag-22',
'target-tag-23',
'target-tag-24',
'target-tag-25',
'target-tag-31',
'target-tag-32',
'target-tag-33',
'target-tag-34'];
for (var i = 0; i < expectedIds.length; ++i)
shouldBe('document.querySelectorAll(":any-link")[' + i + ']', 'document.getElementById("' + expectedIds[i] + '")');
// Styling.
var expectedStyles = [['target-tag-1', 'rgb(255, 255, 255)'],
['target-tag-2', 'rgb(1, 2, 3)'],
['target-tag-3', 'rgb(1, 2, 3)'],
['target-tag-4', 'rgb(1, 2, 3)'],
['target-tag-5', 'rgb(1, 2, 3)'],
['target-tag-6', 'rgb(1, 2, 3)'],
['target-tag-7', 'rgb(1, 2, 3)'],
['target-tag-8', 'rgb(1, 2, 3)'],
['target-tag-9', 'rgb(1, 2, 3)'],
['target-tag-10', 'rgb(255, 255, 255)'],
['target-tag-11', 'rgb(255, 255, 255)'],
['target-tag-12', 'rgb(255, 255, 255)'],
['target-tag-13', 'rgb(255, 255, 255)'],
['target-tag-14', 'rgb(1, 2, 3)'],
['target-tag-15', 'rgb(255, 255, 255)'],
['target-tag-16', 'rgb(255, 255, 255)'],
['target-tag-17', 'rgb(1, 2, 3)'],
['target-tag-18', 'rgb(1, 2, 3)'],
['target-tag-19', 'rgb(1, 2, 3)'],
['target-tag-20', 'rgb(1, 2, 3)'],
['target-tag-21', 'rgb(255, 255, 255)'],
['target-tag-22', 'rgb(1, 2, 3)'],
['target-tag-23', 'rgb(1, 2, 3)'],
['target-tag-24', 'rgb(1, 2, 3)'],
['target-tag-25', 'rgb(1, 2, 3)'],
['target-tag-26', 'rgb(255, 255, 255)'],
['target-tag-27', 'rgb(255, 255, 255)'],
['target-tag-28', 'rgb(255, 255, 255)'],
['target-tag-29', 'rgb(255, 255, 255)'],
['target-tag-30', 'rgb(255, 255, 255)'],
['target-tag-31', 'rgb(1, 2, 3)'],
['target-tag-32', 'rgb(1, 2, 3)'],
['target-tag-33', 'rgb(1, 2, 3)'],
['target-tag-34', 'rgb(1, 2, 3)']];
for (var i = 0; i < expectedStyles.length; ++i)
shouldBeEqualToString('getComputedStyle(document.getElementById("' + expectedStyles[i][0] + '")).backgroundColor', "" + expectedStyles[i][1]);
</script>
<script src="../../resources/js-test-post.js"></script>
</html>