tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

interestfor-pseudo-element-appearance.tentative.html (1059B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8" />
      3 <link rel="author" href="mailto:masonf@chromium.org">
      4 <link rel="help" href="https://open-ui.org/components/interest-invokers.explainer">
      5 <link rel="match" href="interestfor-pseudo-element-appearance-ref.html">
      6 
      7 <div class=example>
      8  <button interestfor=target><span>Button</span></button>
      9 </div>
     10 <div class=example>
     11  <a href=# interestfor=target><span>Link</span></a>
     12 </div>
     13 <div class=example>
     14  <img src="/images/blue.png" usemap="#map1" width=40 height=40>
     15  <map id="map1"><area href="/" shape="default" interestfor=target></map>
     16 </div>
     17 
     18 <div id=target></div>
     19 
     20 <style>
     21  [interestfor]::before {
     22    content: "::before";
     23    border: 1px solid green;
     24  }
     25  [interestfor]::interest-hint {
     26    content: "::interest-hint";
     27    font-family: arial;
     28    font-size: 13px;
     29  }
     30  [interestfor]::after {
     31    content: "::after";
     32    border: 1px solid green;
     33  }
     34  /* Test convenience: */
     35  .example {
     36    display:block;
     37    width: 400px;
     38    height: 50px;
     39  }
     40  [interestfor]>span {
     41    border: 1px solid black;
     42  }
     43 </style>