1
    2
    3
    4
    5
    6
    7
    8
    9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
  100
  101
  102
  103
  104
  105
  106
  107
  108
  109
  110
  111
  112
  113
  114
  115
  116
  117
  118
  119
  120
  121
  122
  123
  124
  125
  126
  127
  128
  129
  130
  131
  132
  133
  134
  135
  136


content / test / data / iframe_clipped.html [blame]

<!DOCTYPE html>
<html>
<head>
  <style>
    body, html {
      width: 100%;
      height: 100%;
      margin: 0;
    }

    #iframe {
      width: 100vw;
      height: 100vh;
      border: 0;
      padding: 0;
      overflow: scroll;
    }

    #clip {
      width: 50%;
      height: 20%;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div id="clip">
    <iframe id="iframe">
    </iframe>
  </div>
  <script>
  window.loaded = false;
  window.notifyBrowser = false;
  const kMarginOfError = 1;
  const tinyTimeout = 50;

  window.addEventListener("load", () => {
    window.loaded = true;
    if (window.notifyBrowser)
      notifyWhenLoaded();
  });

  function notifyWhenLoaded() {
    if (loaded)
      window.domAutomationController.send("LOADED");
    else
      window.notifyBrowser = true;
  }

  // Waits until the |visualViewport| reaches the given size (approximately).
  // Notifies the browser when this happens.
  function notifyVisualViewportChanged(width, height) {
    if ((Math.abs(visualViewport.width - width) < kMarginOfError) &&
        (Math.abs(visualViewport.height - height) < kMarginOfError)) {
      return window.domAutomationController.send("SIZED");
    }

    window.setTimeout(() => {
      notifyVisualViewportChanged(width, height);
    }, tinyTimeout);
  }

  function isEmptyRect(rect) {
    return (rect.width * rect.height) === 0;
  }

  function intersect(rect1, rect2) {
    let minX1 = rect1.x, maxX1 = minX1 + rect1.width
        minY1 = rect1.y, maxY1 = minY1 + rect1.height,
        minX2 = rect2.x, maxX2 = minX2 + rect2.width,
        minY2 = rect2.y, maxY2 = minY2 + rect2.height;

    return !(isEmptyRect(rect1) ||
             isEmptyRect(rect2) ||
             (minX1 > maxX2) ||
             (minX2 > maxX1) ||
             (minY1 > maxY2) ||
             (minY2 > maxY1));
  }

  function visualViewportAsRect() {
    return {
      x: visualViewport.offsetLeft,
      y: visualViewport.offsetTop,
      width: Math.round(visualViewport.width),
      height: Math.round(visualViewport.height)
    };
  }

  function rectAsString(rect) {
    return `${rect.x},${rect.y},${rect.width},${rect.height}`;
  }

  // Waits until the given element is inside the |visualViewport|.
  function notifyWhenVisible(el) {
    if (intersect(el.getBoundingClientRect(), visualViewportAsRect())) {
      window.domAutomationController.send("VISIBLE");
    } else {
      window.setTimeout(() => {
        notifyWhenVisible(el);
      }, tinyTimeout);
    }
  }

  let lastLayoutViewportX;
  let lastLayoutViewportY;
  let lastVisualViewportX;
  let lastVisualViewportY;
  let lastScale;
  function notifyWhenViewportStable(numFrames) {
    const kUnchangedFramesConsideredStable = 10;

    if (lastLayoutViewportX !== window.scrollX ||
        lastLayoutViewportY !== window.scrollY ||
        lastVisualViewportX !== window.visualViewport.offsetLeft ||
        lastVisualViewportY !== window.visualViewport.offsetTop ||
        lastScale !== window.visualViewport.scale) {
      lastLayoutViewportX = window.scrollX;
      lastLayoutViewportY = window.scrollY;
      lastVisualViewportX = window.visualViewport.offsetLeft;
      lastVisualViewportY = window.visualViewport.offsetTop;
      lastScale = window.visualViewport.scale;
      numFrames = 0;
    }

    numFrames++;

    if (numFrames == kUnchangedFramesConsideredStable) {
      window.domAutomationController.send("VIEWPORT_STABLE");
    } else {
      requestAnimationFrame(notifyWhenViewportStable.bind(null, numFrames));
    }
  }
  </script>
</body>
</html>