WebKit/ManualTests/css3-cursor-fallback-strict.html at main · ztc0611/WebKit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>Strict custom cursor tests</title></head>
<body>
<p><a href="http://bugs.webkit.org/show_bug.cgi?id=8991">Bug .991</a>: REGRESSION: missing or broken CSS custom cursors are displayed as a missing image icon.</p>
<p>Move the cursor over the blue box - it should not turn into a missing image icon, and should turn into an I-beam over text.</p>

<div style="width:100px;height:50px;background-color:lightblue; cursor:url(https://github.com/nonexistent.png), auto;"><span style="cursor:url(https://github.com/nonexistent.png), auto;">some text</span></div>
<div style="width:100px;height:50px;background-color:lightblue; cursor:url(https://github.com/nonexistent.png);"></div>

<hr>
<p><a href="http://bugs.webkit.org/show_bug.cgi?id=6001">Bug 6001</a>: WebKit does not handle fallback custom cursors</p>
<p><a href="http://bugs.webkit.org/show_bug.cgi?id=9013">Bug 9013</a>: Let correct CSS custom cursor declarations parse</p>
<p>In each of the blue boxes below, the cursor should become a help cursor (question mark).</p>
<table><tr>
 <td><div style="width:100px;height:100px;background-color:lightblue; cursor:url(https://github.com/resources/helpCursor.tiff), text;"></div></td> <!-- Valid, no fallback needed -->
 <td><div style='width:100px;height:100px;background-color:lightblue; cursor:url(https://github.com/nonexistent.png), help;'></div></td>
 <td><div style='width:100px;height:100px;background-color:lightblue; cursor:url(https://github.com/nonexistent.png), url(https://github.com/custom-cursors.html), url(/service/unknown-scheme:custom-cursors.html), url(https://github.com/resources/helpCursor.tiff), text;'></div></td>
 <td><div style='width:100px;height:100px;background-color:lightblue; cursor:url(https://github.com/nonexistent.png), url(https://github.com/"resources/helpCursor.tiff"), text;'></div></td>
 <td><div style='width:100px;height:100px;background-color:lightblue; cursor:url(https://github.com/resources/helpCursor.tiff) 1 1, text;'></div></td> <!-- CSS3 hot spot - valid, no fallback needed -->
</tr>
</table>
<p>In each of the blue boxes below, the cursor should remain the default cursor, since all cursor definitions are invalid in strict mode.</p>
<table><tr>
<td><div style='width:100px;height:100px;background-color:lightblue; cursor:url(https://github.com/resources/helpCursor.tiff) 1 1 text;'></div></td> <!-- CSS3 hot spot - invalid, should have comma after hotspot coords -->
<td><div style='width:100px;height:100px;background-color:lightblue; cursor:url(https://github.com/resources/helpCursor.tiff) 1, text;'></div></td> <!-- CSS3 hot spot - invalid, should have two hotspot coords -->
<td><div style='width:100px;height:100px;background-color:lightblue; cursor:url(https://github.com/resources/helpCursor.tiff) 1 2 3, text;'></div></td> <!-- CSS3 hot spot - invalid, should have two hotspot coords -->
 <td><div style='width:100px;height:100px;background-color:lightblue; cursor:url(https://github.com/resources/helpCursor.tiff);'></div></td> <!-- Invalid -->
</tr>
</table>

<p></p>
<p><span style='background-color:gray; cursor:url(https://github.com/nonexistent.png), url(https://github.com/"resources/helpCursor.tiff");'>Should show an I-beam cursor.</span></p> <!-- An invalid declaration, even by WinIE standards -->
<p>The following testcases test inheritance of the cursor property. The first one should have the help cursor for both divs (normal inheritance). The second one should have help cursor for big div, text cursor for small div (inner div has cursor property, should not inherit). The next two have invalid css syntax in the inner div, so they should inherit from parent. The rightmost testcase has a nonexistant url, but the syntax is correct, and there is no inheritance in this case.</p>
<table>
<tr><td>
<div style='width:100px;height:100px;background-color:lightblue; cursor:url(https://github.com/resources/helpCursor.tiff), text;'><div style="width:50px;height:50px;background-color:gray;"></div></div>
</td><td>
<div style='width:100px;height:100px;background-color:lightblue; cursor:url(https://github.com/resources/helpCursor.tiff), text;'><div style="width:50px;height:50px;background-color:gray;cursor:text"></div></div>
</td><td>
<div style='width:100px;height:100px;background-color:lightblue; cursor:url(https://github.com/resources/helpCursor.tiff), text;'><div style="width:50px;height:50px;background-color:gray;cursor:foobar"></div></div>
</td><td>
<div style='width:100px;height:100px;background-color:lightblue; cursor:url(https://github.com/resources/helpCursor.tiff), text;'><div style="width:50px;height:50px;background-color:gray;cursor:url(https://github.com/resources/helpCursor.tiff) 1 2 3, text"></div></div>
</td><td>
<div style='width:100px;height:100px;background-color:lightblue; cursor:url(https://github.com/resources/helpCursor.tiff), text;'><div style="width:50px;height:50px;background-color:gray;cursor:url(https://github.com/nonexistant.png), text"></div></div>
</td></tr>
</table>
<p>In each of the blue boxes below, the hotspot is out-of-range. For now this means a failure to show the custom cursor(lower level problem?).</p>
<table><tr>
 <td><div style='width:100px;height:100px;background-color:lightblue; cursor:url(https://github.com/resources/helpCursor.tiff) -1 -1, help;'></div></td> <!-- CSS3 hot spot out-of-range -->
 <td><div style='width:100px;height:100px;background-color:lightblue; cursor:url(https://github.com/resources/helpCursor.tiff) 100 100, help;'></div></td> <!-- CSS3 hot spot out-of-range -->
</tr>
</table>
</body>
</html>