Quellcode durchsuchen

Base: Add test for a box placed over links with negative z-index

In this test, a set of links has a background box placed behind them via
a negative z-index. The expectation is that a hit test on a link during
a mouse-move event should select that link, and not the background box.
Timothy Flynn vor 4 Jahren
Ursprung
Commit
2cc10c62ee
2 geänderte Dateien mit 48 neuen und 0 gelöschten Zeilen
  1. 47 0
      Base/res/html/misc/link-over-zindex-block.html
  2. 1 0
      Base/res/html/misc/welcome.html

+ 47 - 0
Base/res/html/misc/link-over-zindex-block.html

@@ -0,0 +1,47 @@
+<style>
+    ul {
+        margin: 0;
+        padding: 0;
+        text-align: center;
+        list-style-type: none;
+    }
+    a {
+        color: black;
+        text-decoration: none;
+    }
+    a:hover {
+        text-decoration: underline;
+    }
+    #contents {
+        position: relative;
+        overflow: hidden;
+    }
+    #links {
+        width: 110px;
+        float: left;
+        padding: 5px;
+    }
+    #background {
+        width: 120px;
+        position: absolute;
+        float: left;
+        left: 0;
+        bottom: 0;
+        top: 0;
+        background: cyan;
+        border: 1px solid black;
+        z-index: -10000;
+    }
+</style>
+<body>
+    <div id=contents>
+        <div id=links>
+            <ul>
+                <li><a href="welcome.html">Home 1</a></li>
+                <li><a href="welcome.html">Home 2</a></li>
+                <li><a href="welcome.html">Home 3</a></li>
+            </ul>
+        </div>
+        <div id=background></div>
+    </div>
+</body>

+ 1 - 0
Base/res/html/misc/welcome.html

@@ -38,6 +38,7 @@ span#loadtime {
     <p>This page loaded in <b><span id="loadtime"></span></b> ms</p>
     <p>Some small test pages:</p>
     <ul>
+        <li><a href="link-over-zindex-block.html">link elements with background box placed with z-index</a></li>
         <li><a href="contenteditable.html">contenteditable</a></li>
         <li><a href="clear-1.html">clearing floats</a></li>
         <li><a href="float-1.html">floating boxes</a></li>