tor-browser

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

1529992-1.html (2428B)

      1 <!DOCTYPE html>
      2 
      3 <!--
      4 This is a bunch of tests that verify we properly handle weird corner cases
      5 in shadow bounding boxes.
      6 
      7 Problem 1: parts of text that are seemingly hidden (as in overflow:hidden)
      8 may actually be visible in shadows, because they include an offset. We can
      9 mess this up in two ways:
     10 
     11    1a. we completely culled a glyph from existence for being out of view
     12 
     13    1b. we have all the glyphs but are clipping parts out in the shadow
     14 
     15 Problem 2: shadows that are defined by the ::selection pseudo-class are
     16 trapped inside the local selection rect of the item. This means they
     17 *can and should* sometimes get weirdly clipped (shadow6 and shadow7 in
     18 version 2 of this test). Also just more generally selections take a bunch
     19 of special paths in text styling so they are included to make sure both
     20 paths are tested.
     21 
     22 We messed all of these up for webrender because it handles shadows in a very
     23 different way from non-webrender.
     24 
     25 The selection-box is inherently implementation-specific, so I apologize in
     26 advanced if this test breaks when you tweak how selections work. Hopefully
     27 only shadow6 needs to be tweaked?
     28 -->
     29 
     30 <html class="reftest-wait"><head>
     31 <script type="text/javascript">
     32 function onload() {
     33  var range = document.createRange();
     34  range.selectNodeContents(document.getElementById("selectMe"));
     35  var sel = window.getSelection();
     36  sel.removeAllRanges();
     37  sel.addRange(range);
     38 
     39  document.documentElement.className = '';
     40 }
     41 </script>
     42 <style>
     43 body {
     44    font-size: 60px;
     45    position: absolute;
     46    margin: 0px;
     47    padding: 0px;
     48 }
     49 div {
     50    position: absolute;
     51    margin: 0px;
     52    padding: 0px;
     53 }
     54 div::selection {
     55    /* hide all selection boxes for convenience */
     56    background-color: transparent;
     57 }
     58 #shadow1 {
     59    text-shadow: 80px 50px 0px;
     60    top: -30px;
     61    left: -60px;
     62 }
     63 #shadow2 {
     64    text-shadow: 80px 50px 10px;
     65    top: 100px;
     66    left: -60px;
     67 }
     68 #shadow3 {
     69    text-shadow: 80px 50px 10px;
     70    top: -30px;
     71    left: 100px;
     72 }
     73 #shadow4 {
     74    top: 200px;
     75    left: -60px;
     76 }
     77 #shadow4::selection {
     78    text-shadow: 20px 5px 10px;
     79 }
     80 #shadow5 {
     81    top: -30px;
     82    left: 250px;
     83 }
     84 #shadow5::selection {
     85    text-shadow: 20px 5px 10px;
     86 }
     87 </style>
     88 </head><body id="selectMe" onload="onload()">
     89    <div id="shadow1">hello</div>
     90    <div id="shadow2">hello</div>
     91    <div id="shadow3">hello</div>
     92    <div id="shadow4">hello&nbsp;&nbsp;</div>
     93    <div id="shadow5">hello&nbsp;&nbsp;</div>
     94 </body></html>