third_party/WebKit/ManualTests/css3-cursor-fallback-quirks.html

   1 <html>
   2 <head><title>Quirks custom cursor tests</title></head>
   3 <body>
   4 <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>
   5 <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>
   6
   7 <div style="width:100px;height:50px;background-color:lightblue; cursor:url(nonexistent.png), auto;"><span style="cursor:url(nonexistent.png), auto;">some text</span></div>
   8 <div style="width:100px;height:50px;background-color:lightblue; cursor:url(nonexistent.png);"></div>
   9
  10 <hr>
  11 <p><a href="http://bugs.webkit.org/show_bug.cgi?id=6001">Bug 6001</a>: WebKit does not handle fallback custom cursors</p>
  12 <p><a href="http://bugs.webkit.org/show_bug.cgi?id=9013">Bug 9013</a>: Let correct CSS custom cursor declarations parse</p>
  13 <p>In each of the blue boxes below, the cursor should become a help cursor (question mark).</p>
  14 <table><tr>
  15  <td><div style="width:100px;height:100px;background-color:lightblue; cursor:url(resources/helpCursor.tiff), text;"></div></td> <!-- Valid, no fallback needed -->
  16  <td><div style='width:100px;height:100px;background-color:lightblue; cursor:url(resources/helpCursor.tiff);'></div></td> <!-- Invalid, but allowed by WinIE -->
  17  <td><div style='width:100px;height:100px;background-color:lightblue; cursor:url(nonexistent.png), help;'></div></td>
  18  <td><div style='width:100px;height:100px;background-color:lightblue; cursor:url(nonexistent.png), url(custom-cursors.html), url(unknown-scheme:custom-cursors.html), url(resources/helpCursor.tiff), text;'></div></td>
  19  <td><div style='width:100px;height:100px;background-color:lightblue; cursor:url(nonexistent.png), url("resources/helpCursor.tiff"), text;'></div></td>
  20 </tr>
  21 </table>
  22 <p>In each of the blue boxes below, the cursor should remain the default cursor, since all cursor definitions are invalid in quirks mode.</p>
  23 <table><tr>
  24 <td><div style='width:100px;height:100px;background-color:lightblue; cursor:url(resources/helpCursor.tiff) 1 1 text;'></div></td> <!-- CSS3 hot spot - invalid, should have comma after hotspot coords -->
  25 </tr>
  26 </table>
  27 <p>In each of the blue boxes below, the cursor should show the text cursor, since they contain invalid hotspots.</p>
  28 <table><tr>
  29 <td><div style='width:100px;height:100px;background-color:lightblue; cursor:url(resources/helpCursor.tiff) 1, text;'></div></td> <!-- CSS3 hot spot - ignored in IE -->
  30  <td><div style='width:100px;height:100px;background-color:lightblue; cursor:url(resources/helpCursor.tiff) 1 2 3, text;'></div></td> <!-- CSS3 hot spot - ignored in IE -->
  31 </tr>
  32 </table>
  33
  34 <p>In each of the blue boxes below, the cursor should show the help, since they contain valid hotspots.</p>
  35 <table><tr>
  36 <td><div style='width:100px;height:100px;background-color:lightblue; cursor:url(resources/helpCursor.tiff) 1 2;'></div></td> <!-- CSS3 hot spot - ignored in IE -->
  37 <td><div style='width:100px;height:100px;background-color:lightblue; cursor:url(resources/helpCursor.tiff) 1 2, text;'></div></td> <!-- CSS3 hot spot - ignored in IE -->
  38 </tr>
  39 </table>
  40
  41 <p></p>
  42 <p><span style='background-color:gray; cursor:url(nonexistent.png), url("resources/helpCursor.tiff");'>Should show an I-beam cursor.</span></p> <!-- An invalid declaration, even by WinIE standards -->
  43 <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 has invalid css syntax in the inner div, so it should inherit from the parent. The last two testcases have correct syntax and there is no inheritance in this case.</p>
  44 <table>
  45 <tr><td>
  46 <div style='width:100px;height:100px;background-color:lightblue; cursor:url(resources/helpCursor.tiff), text;'><div style="width:50px;height:50px;background-color:gray;"></div></div>
  47 </td><td>
  48 <div style='width:100px;height:100px;background-color:lightblue; cursor:url(resources/helpCursor.tiff), text;'><div style="width:50px;height:50px;background-color:gray;cursor:text"></div></div>
  49 </td><td>
  50 <div style='width:100px;height:100px;background-color:lightblue; cursor:url(resources/helpCursor.tiff), text;'><div style="width:50px;height:50px;background-color:gray;cursor:foobar"></div></div>
  51 </td><td>
  52 <div style='width:100px;height:100px;background-color:lightblue; cursor:url(resources/helpCursor.tiff), text;'><div style="width:50px;height:50px;background-color:gray;cursor:url(resources/helpCursor.tiff) 1 2, text"></div></div>
  53 </td><td>
  54 <div style='width:100px;height:100px;background-color:lightblue; cursor:url(resources/helpCursor.tiff), text;'><div style="width:50px;height:50px;background-color:gray;cursor:url(nonexistant.png), text"></div></div>
  55 </td></tr>
  56 </table>
  57 <p>In each of the blue boxes below, the hotspot is out-of-range. In quirks mode we do not support hotspots at all, so we show the fallback cursor(text).</p>
  58 <table><tr>
  59  <td><div style='width:100px;height:100px;background-color:lightblue; cursor:url(resources/helpCursor.tiff) -1 -1, text;'></div></td> <!-- CSS3 hot spot out-of-range -->
  60  <td><div style='width:100px;height:100px;background-color:lightblue; cursor:url(resources/helpCursor.tiff) 100 100, text;'></div></td> <!-- CSS3 hot spot out-of-range -->
  61 </tr>
  62 </table>
  63 </body>
  64 </html>