tor-browser

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

eye-dropper.tentative.html (2992B)

      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4 <title>EyeDropper API test</title>
      5 <style>
      6 #canvas {
      7  background-color: #ff0000;
      8  position: absolute;
      9  left: 250px;
     10  height: 300px;
     11  width: 300px;
     12 }
     13 #color {
     14  background: url("resources/eye_dropper_icon.svg") no-repeat;
     15  width: 20px;
     16  height: 20px;
     17  border: 0;
     18  padding: 10px;
     19 }
     20 #color:disabled {
     21  visibility: hidden;
     22 }
     23 #result {
     24  visibility: hidden;
     25  width: 50px;
     26  height: 50px;
     27 }
     28 #result.visible {
     29  visibility: visible;
     30 }
     31 #action {
     32  font-weight: bold;
     33 }
     34 #action.hidden {
     35  visibility: hidden;
     36 }
     37 #logger {
     38  position: absolute;
     39  top: 400px;
     40 }
     41 #reset {
     42  position: absolute;
     43  top: 40px;
     44  visibility: hidden;
     45 }
     46 #reset.visible {
     47  visibility: visible;
     48 }
     49 .passed {
     50  color: green;
     51  font-size: x-large;
     52 }
     53 .failed {
     54  color: red;
     55  font-size: x-large;
     56 }
     57 </style>
     58 </head>
     59 <body>
     60  This tests the EyeDropper API.<br><br><br>
     61  <div id="action">TODO: Click on the eye dropper icon.</div>
     62  <div id="canvas"></div>
     63  <button id="color"></button>
     64  <div id="result"></div>
     65  <ol id="logger"></ol>
     66  <button id="reset">Reset test!</button>
     67 
     68  <script>
     69    function log(str) {
     70      let entry = document.createElement("li");
     71      entry.innerText = str;
     72      logger.appendChild(entry);
     73      return entry;
     74    }
     75 
     76    document.getElementById("color").addEventListener("click", function() {
     77      action.innerHTML = "TODO: Click on the red canvas";
     78      log("eye dropper opened");
     79      let eyeDropper = new EyeDropper();
     80      eyeDropper.open()
     81      .then(colorSelectionResult => {
     82        let entry = log("color selected is " + colorSelectionResult.sRGBHex + " expected: #ff0000");
     83 
     84        result.style.backgroundColor = colorSelectionResult.sRGBHex;
     85        result.classList.add("visible");
     86 
     87        let span = document.createElement("span");
     88        let red = parseInt(colorSelectionResult.sRGBHex.substring(1, 3), 16);
     89        let green = parseInt(colorSelectionResult.sRGBHex.substring(3, 5), 16);
     90        let blue = parseInt(colorSelectionResult.sRGBHex.substring(5, 7), 16);
     91        // Make sure the selected color is close to pure red (#FF0000), but allow
     92        // some deviation due to monitor color calibration.
     93        if (red >= 0xC0 && green <= 0x3F && blue <= 0x3F) {
     94          span.innerText = "PASS ";
     95          span.classList.add("passed");
     96        } else {
     97          span.innerText = "FAIL ";
     98          span.classList.add("failed");
     99        }
    100        entry.prepend(span);
    101        reset.classList.add("visible");
    102        action.classList.add("hidden");
    103        color.disabled = true;
    104      })
    105      .catch(error => {
    106        log("no color was selected");
    107      });
    108    });
    109 
    110    document.getElementById("reset").addEventListener("click", function() {
    111      action.innerHTML = "TODO: Click on the eye dropper icon.";
    112      action.classList.remove("hidden");
    113      result.classList.remove("visible");
    114      reset.classList.remove("visible");
    115      color.disabled = false;
    116      logger.innerHTML = "";
    117    })
    118  </script>
    119 </body>
    120 </html>