Attachment #360346 for bug #193821

View Details Raw Unified Return to Bug 193821

| Differences between



2019-01-28  cathie chen  <cathiechen@igalia.com>

        Import Resize Observer test cases from WPTs
        https://bugs.webkit.org/show_bug.cgi?id=193821

        Reviewed by NOBODY (OOPS!).

        * resources/import-expectations.json:
        * web-platform-tests/resize-observer/META.yml: Added.
        * web-platform-tests/resize-observer/eventloop-expected.txt: Added.
        * web-platform-tests/resize-observer/eventloop.html: Added.
        * web-platform-tests/resize-observer/idlharness.window-expected.txt: Added.
        * web-platform-tests/resize-observer/idlharness.window.html: Added.
        * web-platform-tests/resize-observer/idlharness.window.js: Added.
        * web-platform-tests/resize-observer/notify-expected.txt: Added.
        * web-platform-tests/resize-observer/notify.html: Added.
        * web-platform-tests/resize-observer/observe-expected.txt: Added.
        * web-platform-tests/resize-observer/observe.html: Added.
        * web-platform-tests/resize-observer/resources/iframe.html: Added.
        * web-platform-tests/resize-observer/resources/resizeTestHelper.js: Added.
        (ResizeTestHelper):
        (ResizeTestHelper.prototype.get _currentStep):
        (ResizeTestHelper.prototype._nextStep):
        (ResizeTestHelper.prototype._handleNotification):
        (ResizeTestHelper.prototype._handleTimeout):
        (ResizeTestHelper.prototype._done):
        (ResizeTestHelper.prototype.start):
        (ResizeTestHelper.prototype.get rafCount):
        (ResizeTestHelper.prototype._incrementRaf):
        (ResizeTestHelper.prototype.startCountingRaf):
        * web-platform-tests/resize-observer/resources/w3c-import.log: Added.
        * web-platform-tests/resize-observer/svg-expected.txt: Added.
        * web-platform-tests/resize-observer/svg.html: Added.
        * web-platform-tests/resize-observer/w3c-import.log: Added.

2019-01-24  Charles Vazac  <cvazac@akamai.com>

        Implement PerformanceObserver.supportedEntryTypes

Lines 296-301 a/LayoutTests/imported/w3c/resources/import-expectations.json_sec1
- a/LayoutTests/imported/w3c/resources/import-expectations.json +1 lines
296	"web-platform-tests/remote-playback": "skip",	296	"web-platform-tests/remote-playback": "skip",
297	"web-platform-tests/requestidlecallback": "skip",	297	"web-platform-tests/requestidlecallback": "skip",
298	"web-platform-tests/resize-observer": "skip",	298	"web-platform-tests/resize-observer": "skip",
		299	"web-platform-tests/resize-observer/": "import",
299	"web-platform-tests/resource-timing": "import",	300	"web-platform-tests/resource-timing": "import",
300	"web-platform-tests/resources": "import",	301	"web-platform-tests/resources": "import",
301	"web-platform-tests/screen-orientation": "skip",	302	"web-platform-tests/screen-orientation": "skip",

Line 0 a/LayoutTests/imported/w3c/web-platform-tests/resize-observer/META.yml_sec1
- a/LayoutTests/imported/w3c/web-platform-tests/resize-observer/META.yml +4 lines
	1	spec: https://wicg.github.io/ResizeObserver/
	2	suggested_reviewers:
	3	- atotic
	4	- dholbert

Line 0 a/LayoutTests/imported/w3c/web-platform-tests/resize-observer/eventloop-expected.txt_sec1
- a/LayoutTests/imported/w3c/web-platform-tests/resize-observer/eventloop-expected.txt +7 lines
	1	CONSOLE MESSAGE: line 50: ReferenceError: Can't find variable: ResizeObserver
	2	ResizeObserver notification event loop tests
	3
	4	t1
	5
	6	FAIL ResizeObserver implemented assert_own_property: expected property "ResizeObserver" missing
	7



<!doctype html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="./resources/resizeTestHelper.js"></script>
<style>
  div {
    border: 1px dotted gray
  }
</style>
<p>ResizeObserver notification event loop tests</p>
<div id="target1" style="width:100px;height:100px;">t1
</div>
<div id="container">
  <div id="a1" style="width:100px;height:100px">
    <div id="a2" style="width:100px;height:100px">
    </div>
  </div>
  <div id="b1" style="width:100px;height:100px">
    <div id="b2" style="width:100px;height:100px">
    </div>
  </div>
</div>
<script>
'use strict';

let t1 = document.querySelector('#target1');

// allow uncaught exception because ResizeObserver posts exceptions
// to window error handler when limit is exceeded.
// This codepath is tested in this file.

setup({allow_uncaught_exception: true});

function template() {
  let helper = new ResizeTestHelper(
    "test0: title",
  [
    {
      setup: observer => {
      },
      notify: (entries, observer) => {
        return true;  // Delay next step
      }
    }
  ]);
  return helper.start();
}

var onErrorCalled = false;

window.onerror = err => {
  onErrorCalled = true;
}

function test0() {

  let divs = [t1];
  let rAF = 0;
  let helper = new ResizeTestHelper(
    "test0: multiple notifications inside same event loop",
  [
    {
      setup: observer => {
        onErrorCalled = false;
        let t2 = document.createElement('div');
        let t3 = document.createElement('div');
        t2.appendChild(t3);
        t1.appendChild(t2);
        divs.push(t2);
        divs.push(t3);
        observer.observe(t1);
        observer.observe(t2);
        observer.observe(t3);
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 3, "3 notifications");
      }
    },
    {
      setup: observer => {
        helper.startCountingRaf();
        divs.forEach( el => { el.style.width = "101px";});
      },
      notify: (entries, observer) => {
        // t1 is not delivered
        assert_equals(entries.length, 2, "2 notifications");
        assert_equals(helper.rafCount, 0, "still in same loop");
      }
    },
    {
      setup: observer => {
        divs.forEach( el => { el.style.width = "102px";});
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1, "1 notifications");
        assert_equals(helper.rafCount, 0, "same loop");
      }
    },
    { // t1 and t2 get notified
      setup: observer => {
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 2, "2 notifications");
        assert_equals(helper.rafCount, 1, "new loop");
        assert_equals(onErrorCalled, true, "error was fired");
        observer.disconnect();
        while (t1.childNodes.length > 0)
          t1.removeChild(t1.childNodes[0]);
      }
    }
  ]);
  return helper.start();
}

function test1() {

  var resizers = [t1];
  // Testing depths of shadow roots
  // DOM: t1 <- t2 <- t3 <-shadow- t4 <- t5
  let helper = new ResizeTestHelper(
    "test1: depths of shadow roots",
  [
    {
      setup: observer => {
        onErrorCalled = false;
        let t2 = document.createElement('div');
        t1.appendChild(t2);
        resizers.push(t2);
        let t3 = document.createElement('div');
        resizers.push(t3);
        t2.appendChild(t3);
        let shadow = t3.attachShadow({ mode: "open" });
        let t4 = document.createElement('div');
        resizers.push(t4);
        shadow.appendChild(t4);
        let t5 = document.createElement('div');
        resizers.push(t5);
        t4.appendChild(t5);
        resizers.forEach( el => observer.observe(el) );
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 5, "all entries resized");
      }
    },
    {
      setup: observer => {
        resizers.forEach( el => el.style.width = "111px" );
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 4, "depth limited");
      }
    },
    {
      setup: observer => {
        resizers.forEach( el => el.style.width = "112px" );
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 3, "depth limited");
      }
    },
    {
      setup: observer => {
        resizers.forEach( el => el.style.width = "113px" );
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 2, "depth limited");
      }
    },
    {
      setup: observer => {
        resizers.forEach( el => el.style.width = "114px" );
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1, "depth limited");
      }
    },
    {
      setup: observer => {
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 4, "limit notifications");
        assert_equals(onErrorCalled, true, "breached limit");
        observer.disconnect();
        t1.removeChild(t1.firstChild);
      }
    },
  ]);
  return helper.start();
}

function test2() {
  let container = document.querySelector('#container');
  let a1 = document.querySelector('#a1');
  let a2 = document.querySelector('#a2');
  let b1 = document.querySelector('#b1');
  let b2 = document.querySelector('#b2');
  let targets = [a1, a2, b1, b2];

  let helper = new ResizeTestHelper(
    "test2: move target in dom while inside event loop",
  [
    {
      setup: observer => {
        for (let t of targets)
          observer.observe(t);
      },
      notify: (entries, observer) => {
        return true;  // delay next observation
      }
    },
    { // resize them all
      setup: observer => {
        for (let t of targets)
          t.style.width = "110px";
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, targets.length, "all targets observed");
      }
    },
    { // resize all, move dom upwards
      setup: observer => {
        for (let t of targets)
          t.style.width = "130px";
        container.appendChild(b2);
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1, "b2 moved upwards");
        assert_equals(entries[0].target, a2);
      }
    },
    { // resize all, move dom downwards
      setup: observer => {
        for (let t of targets)
          t.style.width = "130px";
        a2.appendChild(b2);
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1, "b2 moved downwards");
        assert_equals(entries[0].target, b2);
        a1.appendChild(a2);
      }
    },
  ]);
  return helper.start();
}

let guard;
test(_ => {
  assert_own_property(window, "ResizeObserver");
  guard = async_test('guard');
}, "ResizeObserver implemented")

test0()
  .then(() => { return test1(); })
  .then(() => { return test2(); })
  .then(() => { guard.done(); });

</script>





FAIL idl_test setup promise_test: Unhandled rejection with value: object "Got an error before parsing any named definition: Unrecognised tokens, line 1 (tokens: "{\"error\": {\"message\"")
[
    {
        "type": "{",
        "value": "{",
        "trivia": ""
    },
    {
        "type": "string",
        "value": "\"error\"",
        "trivia": ""
    },
    {
        "type": ":",
        "value": ":",
        "trivia": ""
    },
    {
        "type": "{",
        "value": "{",
        "trivia": " "
    },
    {
        "type": "string",
        "value": "\"message\"",
        "trivia": ""
    }
]"


Line 0 a/LayoutTests/imported/w3c/web-platform-tests/resize-observer/idlharness.window.html_sec1
- a/LayoutTests/imported/w3c/web-platform-tests/resize-observer/idlharness.window.html +1 lines
		1	<!-- This file is required for WebKit test infrastructure to run the templated test -->



// META: script=/resources/WebIDLParser.js
// META: script=/resources/idlharness.js
// META: script=resources/resizeTestHelper.js

'use strict';

// https://wicg.github.io/ResizeObserver/

idl_test(
  ['ResizeObserver'],
  ['dom', 'geometry'],
  async idl_array => {
    idl_array.add_objects({
      ResizeObserver: ['observer'],
      ResizeObserverEntry: ['entry'],
    });

    const div = document.createElement('div');
    document.body.appendChild(div);
    let helper = new ResizeTestHelper(
      "ResizeObserverEntry creator",
      [
        {
          setup: observer => {
            self.observer = observer;
            observer.observe(div);
            div.style.width = "5px";
          },
          notify: entries => {
            self.entry = entries[0];
            assert_equals(entries[0].contentRect.width, 5, "target width");
          }
        }
      ]);
    await helper.start();
  }
);



CONSOLE MESSAGE: line 50: ReferenceError: Can't find variable: ResizeObserver
ResizeObserver tests

t1
t2
t3 inline

Harness Error (FAIL), message = ReferenceError: Can't find variable: ResizeObserver

FAIL ResizeObserver implemented assert_own_property: expected property "ResizeObserver" missing




<!doctype html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="./resources/resizeTestHelper.js"></script>
<style>
  div {
    border: 1px dotted gray
  }
  .transform {
    transform: scale(2,2) rotate(90deg)
  }
</style>
<p>ResizeObserver tests</p>
<div id="target1" style="width:100px;height:100px;">t1
  <div id="target2" style="width:100px;height:100px;">t2
    <div id="target3" style="width:100px;height:100px;">t3
      <span id="inline">inline</span>
    </div>
  </div>
</div>
<div id="absolute" style="width:100.5px;height:100.5px;position:absolute;top:10.3px;left:10.3px"></div>
<script>
'use strict';

let t1 = document.querySelector('#target1');
let t2 = document.querySelector('#target2');
let t3 = document.querySelector('#target3');
let abs = document.querySelector('#absolute');
let inline = document.querySelector('#inline');

function test0() {
  let helper = new ResizeTestHelper(
    "test0: notification ordering",
  [
    {
      setup: observer => {
        observer.observe(t3);
        observer.observe(t2);
        observer.observe(t1);
        t1.style.width = "5px";
        t3.style.width = "5px";
        t2.style.width = "5px";
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 3, "3 resizes");
        assert_equals(entries[0].target, t3, "ordering");
        assert_equals(entries[1].target, t2, "ordering");
        assert_equals(entries[2].target, t1, "ordering");
        observer.disconnect();
        t1.style.width = "100px";
        t2.style.width = "100px";
        t3.style.width = "100px";
      }
    }
  ]);
  return helper.start();
}

function test1() {
  let helper = new ResizeTestHelper(
    "test1: display:none triggers notification",
  [
    {
      setup: observer => {
        observer.observe(t1);
      },
      notify: (entries, observer) => {
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
        t1.style.display = "none";
      },
      notify: (entries, observer) => {
        t1.style.display = "";
      }
    }
  ]);
  return helper.start();
}


function test2() {
  let helper = new ResizeTestHelper(
    "test2: remove/appendChild trigger notification",
  [
    {
      setup: observer => {
        observer.observe(t1);
      },
      notify: (entries, observer) => {
        return true;  // Delay next step
      }
    },
    { // "removeChild triggers notification"
      setup: observer => {
        t1.parentNode.removeChild(t1);
      },
      notify: (entries, observer) => {
        assert_equals(entries[0].target, t1);
        return true;  // Delay next step
      }
    },
    { // "appendChild triggers notification",
      setup: observer => {
        document.body.appendChild(t1);
      },
      notify: (entries, observer) => {
        assert_equals(entries[0].target, t1)
      }
    }
  ]);
  return helper.start();
}


function test3() {
  let helper = new ResizeTestHelper(
    "test3: dimensions match",
  [
    {
      setup: observer => {
        observer.observe(t1);
        t1.style.width = "200.5px";
        t1.style.height = "100px";
        t1.style.paddingLeft = "20px";
        t1.style.paddingTop = "10px";
      },
      notify: (entries, observer) => {
        assert_equals(entries[0].contentRect.left,20);
        assert_equals(entries[0].contentRect.top,10);
        assert_between_inclusive(entries[0].contentRect.width, 200.4, 200.6, "width is not rounded");
        assert_equals(entries[0].contentRect.height, 100);
      }
    }
  ]);
  return helper.start();
}

function test4() {
  let helper = new ResizeTestHelper(
    "test4: transform do not cause notifications",
  [
    {
      setup: observer => {
        observer.observe(t2);
      },
      notify: (entries, observer) => {
        return true; // Delay next step
      }
    },
    {
      setup: observer => {
        t2.classList.add("transform");
      },
      notify: (entries, observer) => {
        assert_unreached("transform must not trigger notifications");
      },
      timeout: () => {
        t2.classList.remove("transform");
      }
    }
  ]);
  return helper.start();
}

function test5() {
  let helper = new ResizeTestHelper(
    "test5: moving an element does not trigger notifications",
  [
    {
      setup: observer => {
        observer.observe(abs);
      },
      notify: (entries, observer) => {
        return true; // Delay next step
      }
    },
    {
      setup: observer => {
        abs.style.top = "20.33px";
        abs.style.left = "20.33px";
      },
      notify: (entries, observer) => {
        assert_unreached("movement should not cause resize notifications");
      },
      timeout: () => {
      }
    }
  ]);
  return helper.start();
}

function test6() {
  let helper = new ResizeTestHelper(
    "test6: inline element does not notify",
  [
    {
      setup: observer => {
        observer.observe(inline);
        observer.observe(t1);
        t1.style.width = "66px";
        inline.style.width = "66px";
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1, "inline elements must not trigger notifications");
        assert_equals(entries[0].target, t1, "inline elements must not trigger notifications");
        return true; // Delay next step
      }
    },
    { // "inline element that becomes block should notify",
      setup: observer => {
        inline.style.display = "block";
      },
      notify: (entries, observer) => {
        assert_equals(entries[0].target, inline);
      }
    }
  ]);
  return helper.start();
}

function test7() {
  let helper = new ResizeTestHelper(
    "test7: unobserve inside notify callback",
  [
    {
      setup: observer => {
        observer.observe(t1);
        observer.observe(t2);
      },
      notify: (entries, observer) => {
        t1.style.width = "777px";
        t2.style.width = "777px";
        observer.unobserve(t1);
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1, "only t2 is observed");
        assert_equals(entries[0].target, t2, "only t2 is observed");
      }
    }
  ]);
  return helper.start();
}

function test8() {
  let helper = new ResizeTestHelper(
    "test8: observe inside notify callback",
  [
    {
      setup: observer => {
        observer.observe(t1);
      },
      notify: (entries, observer) => {
        observer.observe(t2);
        t2.style.width = "888px";
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1, "only t2 is observed");
        assert_equals(entries[0].target, t2, "only t2 is observed");
      }
    }
  ]);
  return helper.start();
}

function test9() {
  let helper = new ResizeTestHelper(
    "test9: disconnect inside notify callback",
  [
    {
      setup: observer => {
        observer.observe(t1);
      },
      notify: (entries, observer) => {
        t1.style.width = "999px";
        observer.disconnect();
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
      },
      notify: (entries, observer) => {
        assert_unreached("there should be no notifications after disconnect");
      },
      timeout: () => {
      }
    }
  ]);
  return helper.start();
}

function test10() {
  var parent = t1.parentNode;
  let helper = new ResizeTestHelper(
    "test10: element notifies when parent removed",
  [
    {
      setup: observer => {
        observer.observe(t3);
      },
      notify: (entries, observer) => {
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
        t1.parentNode.removeChild(t1);
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
        assert_equals(entries[0].target, t3);
        parent.appendChild(t1);
      }
    }
  ]);
  return helper.start();
}

let guard;
test(_ => {
  assert_own_property(window, "ResizeObserver");
  guard = async_test('guard');
}, "ResizeObserver implemented")

test0()
  .then(() => { return test1(); })
  .then(() => { return test2(); })
  .then(() => { return test3(); })
  .then(() => { return test4(); })
  .then(() => { return test5(); })
  .then(() => { return test6(); })
  .then(() => { return test7(); })
  .then(() => { return test8(); })
  .then(() => { return test9(); })
  .then(() => { return test10(); })
  .then(() => { guard.done(); });

</script>



CONSOLE MESSAGE: line 50: ReferenceError: Can't find variable: ResizeObserver
ResizeObserver tests

t1
t2
 

FAIL ResizeObserver implemented assert_own_property: expected property "ResizeObserver" missing




<!doctype html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="./resources/resizeTestHelper.js"></script>
<p>ResizeObserver tests</p>
<div id="target1" style="width:100px;height:100px;">t1</div>
<div id="target2" style="width:100px;height:100px;">t2</div>
<img id="target3" style="width:100px;height:100px;">
<iframe src="./resources/iframe.html" width="300px" height="100px" style="display:block"></iframe>
<script>
'use strict';

let t1 = document.querySelector('#target1');
let t2 = document.querySelector('#target2');

// allow uncaught exception because ResizeObserver posts exceptions
// to window error handler when limit is exceeded.
setup({allow_uncaught_exception: true});

function test0() {
  let helper = new ResizeTestHelper(
    "test0: simple observation",
  [
    {
      setup: observer => {
        observer.observe(t1);
        t1.style.width = "5px";
      },
      notify: entries => {
        assert_equals(entries.length, 1, "1 pending notification");
        assert_equals(entries[0].target, t1, "target is t1");
        assert_equals(entries[0].contentRect.width, 5, "target width");
      }
    }
  ]);
  return helper.start();
}

function test1() {
  let helper = new ResizeTestHelper(
    "test1: multiple observation on same element trigger only one",
  [
    {
      setup: observer => {
        observer.observe(t1);
        observer.observe(t1);
        t1.style.width = "10px";
      },
      notify: entries => {
        assert_equals(entries.length, 1, "1 pending notification");
      }
    }
  ]);
  return helper.start();
}

function test2() {
  test(() => {
      assert_throws({name: "TypeError"}, _=> {
        let ro = new ResizeObserver(() => {});
        ro.observe({});
      });
    },
    "test2: throw exception when observing non-element"
  );
  return Promise.resolve();
}

function test3() {
  let helper = new ResizeTestHelper(
    "test3: disconnect stops all notifications", [
    {
      setup: observer => {
        observer.observe(t1);
        observer.observe(t2);
        observer.disconnect();
        t1.style.width = "30px";
      },
      notify: entries => {
         assert_unreached("no entries should be observed");
      },
      timeout: () => {
        // expected
      }
    }
  ]);
  return helper.start();
}

function test4() {
  let helper = new ResizeTestHelper(
    "test4: unobserve target stops notifications, unobserve non-observed does nothing", [
    {
      setup: observer => {
        observer.observe(t1);
        observer.observe(t2);
        observer.unobserve(t1);
        observer.unobserve(document.body);
        t1.style.width = "40px";
        t2.style.width = "40px";
      },
      notify: entries => {
        assert_equals(entries.length, 1, "only t2");
        assert_equals(entries[0].target, t2, "t2 was observed");
      }
    }
  ]);
  return helper.start();
}

function test5() {
  let t3 = document.querySelector('#target3');
  var helper = new ResizeTestHelper("test5: observe img",[
    {
      setup: observer => {
        observer.observe(t3);
      },
      notify: entries => {
      }
    },
    {
      setup: observer => {
        t3.style.width = "100.5px";
      },
      notify: entries => {
        assert_equals(entries.length, 1);
        assert_equals(entries[0].contentRect.width, 100.5);
      }
    }
  ]);
  return helper.start();
}

function test6() {
  let resolvePromise;
  let promise = new Promise((resolve) => {
    resolvePromise = resolve;
  });
  let test = async_test('test6: iframe notifications');
  let testRequested = false;
  let iframe = document.querySelector('iframe');
  window.addEventListener('message', event => {
    switch(event.data) {
    case 'readyToTest':
      if (!testRequested) {
        iframe.contentWindow.postMessage('startTest', '*');
        testRequested = true;
      }
    break;
    case 'success':
    case 'fail':
      window.requestAnimationFrame(() => {
        test.step( () => {
          assert_equals(event.data, 'success');
          test.done();
          resolvePromise();
        });
      });
    break;
    }
  }, false);
  return promise;
}

function test7() {
  let harnessTest = async_test("test7: callback.this");
  let resolvePromise;
  let ro = new ResizeObserver( function(entries, obs)  {
    let callbackThis = this;
    resolvePromise();
    harnessTest.step(() => {
      assert_equals(callbackThis, ro, "callback.this is ResizeObserver");
      assert_equals(obs, ro, "2nd argument is ResizeObserver");
      ro.disconnect();
      // every reference to RO must be null before test completes
      // to avoid triggering test leak-detection
      ro = null;
      callbackThis = null;
      obs = null;
      harnessTest.done();
     });
    }
  );
  ro.observe(t1);

  return new Promise( (resolve, reject) => {
    resolvePromise = resolve;
  });
}

let guard;
test(_ => {
  assert_own_property(window, "ResizeObserver");
  guard = async_test('guard');
}, "ResizeObserver implemented")

test0()
  .then(() => { return test1(); })
  .then(() => { return test2(); })
  .then(() => { return test3(); })
  .then(() => { return test4(); })
  .then(() => { return test5(); })
  .then(() => { return test6(); })
  .then(() => { return test7(); })
  .then(() => { guard.done(); });

</script>



<!doctype html>
<head>
  <script src="./resizeTestHelper.js"></script>
</head>
<p>iframe test</p>
<div id="itarget1" style="width:100px;height:100px;">t1</div>
<script>
'use strict';
let t1 = document.querySelector('#itarget1');
function test0() {
  let timeoutId = window.setTimeout( () => {
    window.parent.postMessage('fail', '*');
  }, ResizeTestHelper.TIMEOUT);
  let ro = new ResizeObserver(function(entries) {
    window.clearTimeout(timeoutId);
    window.parent.postMessage('success', '*');
  });
  ro.observe(t1);
}
let testStarted = false;
window.addEventListener('message', function(ev) {
    switch(ev.data) {
        case 'startTest':
          testStarted = true;
          test0();
        break;
    }
});
// How does parent know we've loaded problem is solved by
// broadcasting readyToTest message repeatedly until test starts.
function broadcastReady() {
  if (!testStarted) {
    window.parent.postMessage('readyToTest', '*');
    window.requestAnimationFrame(broadcastReady);
  }
}
broadcastReady();
</script>



'use strict';

/**
  ResizeTestHelper is a framework to test ResizeObserver
  notifications. Use it to make assertions about ResizeObserverEntries.
  This framework is needed because ResizeObservations are
  delivered asynchronously inside the event loop.

  Features:
  - can queue multiple notification steps in a test
  - handles timeouts
  - returns Promise that is fullfilled when test completes.
    Use to chain tests (since parallel async ResizeObserver tests
    would conflict if reusing same DOM elements).

  Usage:

  create ResizeTestHelper for every test.
  Make assertions inside notify, timeout callbacks.
  Start tests with helper.start()
  Chain tests with Promises.
  Counts animation frames, see startCountingRaf
*/

/*
  @param name: test name
  @param steps:
  {
    setup: function(ResizeObserver) {
      // called at the beginning of the test step
      // your observe/resize code goes here
    },
    notify: function(entries, observer) {
      // ResizeObserver callback.
      // Make assertions here.
      // Return true if next step should start on the next event loop.
    },
    timeout: function() {
      // Define this if your test expects to time out.
      // If undefined, timeout is assert_unreached.
    }
  }
*/
function ResizeTestHelper(name, steps)
{
    this._name = name;
    this._steps = steps || [];
    this._stepIdx = -1;
    this._harnessTest = null;
    this._observer = new ResizeObserver(this._handleNotification.bind(this));
    this._timeoutBind = this._handleTimeout.bind(this);
    this._nextStepBind = this._nextStep.bind(this);
}

ResizeTestHelper.TIMEOUT = 100;

ResizeTestHelper.prototype = {
  get _currentStep() {
    return this._steps[this._stepIdx];
  },

  _nextStep: function() {
    if (++this._stepIdx == this._steps.length)
      return this._done();
    this._timeoutId = this._harnessTest.step_timeout(
      this._timeoutBind, ResizeTestHelper.TIMEOUT);
    try {
      this._steps[this._stepIdx].setup(this._observer);
    }
    catch(err) {
      this._harnessTest.step(() => {
        assert_unreached("Caught a throw, possible syntax error");
      });
    }
  },

  _handleNotification: function(entries) {
    if (this._timeoutId) {
      window.clearTimeout(this._timeoutId);
      delete this._timeoutId;
    }
    this._harnessTest.step(() => {
      let rafDelay = this._currentStep.notify(entries, this._observer);
      if (rafDelay)
        window.requestAnimationFrame(this._nextStepBind);
      else
        this._nextStep();
    });
  },

  _handleTimeout: function() {
    delete this._timeoutId;
    this._harnessTest.step(() => {
      if (this._currentStep.timeout) {
        this._currentStep.timeout();
      }
      else {
        assert_unreached("Timed out waiting for notification. (" + ResizeTestHelper.TIMEOUT + "ms)");
      }
      this._nextStep();
    });
  },

  _done: function() {
    this._observer.disconnect();
    delete this._observer;
    this._harnessTest.done();
    if (this._rafCountRequest) {
      window.cancelAnimationFrame(this._rafCountRequest);
      delete this._rafCountRequest;
    }
    window.requestAnimationFrame(() => { this._resolvePromise(); });
  },

  start: function() {
    this._harnessTest = async_test(this._name);
    this._harnessTest.step(() => {
      assert_equals(this._stepIdx, -1, "start can only be called once");
      this._nextStep();
    });
    return new Promise( (resolve, reject) => {
      this._resolvePromise = resolve;
      this._rejectPromise = reject;
    });
  },

  get rafCount() {
    if (!this._rafCountRequest)
      throw "rAF count is not active";
    return this._rafCount;
  },

  _incrementRaf: function() {
    if (this._rafCountRequest) {
      this._rafCount++;
      this._rafCountRequest = window.requestAnimationFrame(this._incrementRafBind);
    }
  },

  startCountingRaf: function() {
    if (this._rafCountRequest)
      window.cancelAnimationFrame(this._rafCountRequest);
    if (!this._incrementRafBind)
      this._incrementRafBind = this._incrementRaf.bind(this);
    this._rafCount = 0;
    this._rafCountRequest = window.requestAnimationFrame(this._incrementRafBind);
  }
}



The tests in this directory were imported from the W3C repository.
Do NOT modify these tests directly in WebKit.
Instead, create a pull request on the WPT github:
	https://github.com/web-platform-tests/wpt

Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport

Do NOT modify or remove this file.

------------------------------------------------------------------------
Properties requiring vendor prefixes:
None
Property values requiring vendor prefixes:
None
------------------------------------------------------------------------
List of files:
/LayoutTests/imported/w3c/web-platform-tests/resize-observer/resources/iframe.html
/LayoutTests/imported/w3c/web-platform-tests/resize-observer/resources/resizeTestHelper.js



CONSOLE MESSAGE: line 50: ReferenceError: Can't find variable: ResizeObserver
ResizeObserver svg tests

Here is a paragraph that requires word wrap

svg text tag

FAIL ResizeObserver implemented assert_own_property: expected property "ResizeObserver" missing




<!doctype html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="./resources/resizeTestHelper.js"></script>
<p>ResizeObserver svg tests</p>
<svg height="430" width="500" >
  <circle cx="10" cy="10" r="5" style="fill:orange;stroke:black;stroke-width:1" />
  <ellipse cx="10" cy="30" rx="5" ry="5" style="fill:orange;stroke:black;stroke-width:1"/>
  <foreignObject cy="50" width="100" height="20">
    <body>
      <p>Here is a paragraph that requires word wrap</p>
    </body>
  </foreignObject>
  <image xlink:href="" x="0" y="100" height="30" width="100" />
  <line x1="0" y1="50" x2="20" y2="70" stroke="black" stroke-width="2"/>
  <path d="M 0 100 L 100 100 L 50 150 z"
        style="fill:orange;stroke:black;stroke-width:1" />
  <polygon points="0,200 100,200 50,250" style="fill:orange;stroke:black;stroke-width:1" />
  <polyline points="0,300 100,300 50,350" style="fill:orange;stroke:black;stroke-width:1"/>
  <rect x="0" y="380" width="10" height="10" style="fill:orange; stroke:black; stroke-width:1" />
  <text x="0" y="400" font-size="20">svg text tag</text>
</svg>
<script>
'use strict';

setup({allow_uncaught_exception: true});

function test0() {
  let target = document.querySelector('circle');
  let helper = new ResizeTestHelper(
    "test0: observe svg:circle",
  [
    {
      setup: observer => {
        observer.observe(target);
      },
      notify: (entries, observer) => {
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
        target.setAttribute('r', 10);
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
      }
    }
  ]);
  return helper.start();
}

function test1() {
  let target = document.querySelector('ellipse');
  let helper = new ResizeTestHelper(
    "test1: observe svg:ellipse",
  [
    {
      setup: observer => {
        observer.observe(target);
      },
      notify: (entries, observer) => {
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
        target.setAttribute('rx', 10);
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
        assert_equals(entries[0].contentRect.width, 20);
        assert_equals(entries[0].contentRect.height, 10);
      }
    }
  ]);
  return helper.start();
}

function test2() {
  let target = document.querySelector('foreignObject');
  let helper = new ResizeTestHelper(
    "test2: observe svg:foreignObject",
  [
    {
      setup: observer => {
        observer.observe(target);
      },
      notify: (entries, observer) => {
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
        target.setAttribute('width', 200);
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
        assert_equals(entries[0].contentRect.width, 200);
        assert_equals(entries[0].contentRect.height, 20);
      }
    }
  ]);
  return helper.start();
}

function test3() {
  let target = document.querySelector('image');
  let helper = new ResizeTestHelper(
    "test3: observe svg:image",
  [
    {
      setup: observer => {
        observer.observe(target);
      },
      notify: (entries, observer) => {
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
        target.setAttribute('height', 40);
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
        assert_equals(entries[0].contentRect.width, 100);
        assert_equals(entries[0].contentRect.height, 40);
      }
    }
  ]);
  return helper.start();
}

function test4() {
  let target = document.querySelector('line');
  let helper = new ResizeTestHelper(
    "test4: observe svg:line",
  [
    {
      setup: observer => {
        observer.observe(target);
      },
      notify: (entries, observer) => {
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
        target.setAttribute('y2', 80);
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
        assert_equals(entries[0].contentRect.width, 20);
        assert_equals(entries[0].contentRect.height, 30);
      }
    }
  ]);
  return helper.start();
}

function test5() {
  let target = document.querySelector('path');
  let helper = new ResizeTestHelper(
    "test5: observe svg:path",
  [
    {
      setup: observer => {
        observer.observe(target);
      },
      notify: (entries, observer) => {
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
        target.setAttribute('d', "M 0 100 L 100 100 L 50 160 z");
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
        assert_equals(entries[0].contentRect.width, 100);
        assert_equals(entries[0].contentRect.height, 60);
      }
    }
  ]);
  return helper.start();
}

function test6() {
  let target = document.querySelector('polygon');
  let helper = new ResizeTestHelper(
    "test6: observe svg:path",
  [
    {
      setup: observer => {
        observer.observe(target);
      },
      notify: (entries, observer) => {
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
        target.setAttribute('points', "0,200 100,200 50,260");
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
        assert_equals(entries[0].contentRect.width, 100);
        assert_equals(entries[0].contentRect.height, 60);
      }
    }
  ]);
  return helper.start();
}

function test7() {
  let target = document.querySelector('polyline');
  let helper = new ResizeTestHelper(
    "test7: observe svg:polyline",
  [
    {
      setup: observer => {
        observer.observe(target);
      },
      notify: (entries, observer) => {
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
        target.setAttribute('points', "0,300 100,300 50,360");
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
        assert_equals(entries[0].contentRect.width, 100);
        assert_equals(entries[0].contentRect.height, 60);
      }
    }
  ]);
  return helper.start();
}

function test8() {
  let target = document.querySelector('rect');
  let helper = new ResizeTestHelper(
    "test8: observe svg:rect",
  [
    {
      setup: observer => {
        observer.observe(target);
      },
      notify: (entries, observer) => {
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
        target.setAttribute('width', "20");
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
        assert_equals(entries[0].contentRect.width, 20);
        assert_equals(entries[0].contentRect.height, 10);
      }
    }
  ]);
  return helper.start();
}

function test9() {
  let target = document.querySelector('text');
  let helper = new ResizeTestHelper(
    "test9: observe svg:text",
  [
    {
      setup: observer => {
        observer.observe(target);
      },
      notify: (entries, observer) => {
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
        target.setAttribute('font-size', "25");
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
      }
    }
  ]);
  return helper.start();
}


function test10() {
  let target = document.querySelector('svg');
  let helper = new ResizeTestHelper(
    "test10: observe svg:svg, top/left is 0 even with padding",
  [
    {
      setup: observer => {
        observer.observe(target);
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
        assert_equals(entries[0].contentRect.top, 0);
        assert_equals(entries[0].contentRect.left, 0);
      }
    }
  ]);
  return helper.start();
}

let guard;
test(_ => {
  assert_own_property(window, "ResizeObserver");
  guard = async_test('guard');
}, "ResizeObserver implemented")

test0()
  .then(() => { return test1(); })
  .then(() => { return test2(); })
  .then(() => { return test3(); })
  .then(() => { return test4(); })
  .then(() => { return test5(); })
  .then(() => { return test6(); })
  .then(() => { return test7(); })
  .then(() => { return test8(); })
  .then(() => { return test9(); })
  .then(() => { return test10(); })
  .then(() => { guard.done(); });

</script>



The tests in this directory were imported from the W3C repository.
Do NOT modify these tests directly in WebKit.
Instead, create a pull request on the WPT github:
	https://github.com/web-platform-tests/wpt

Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport

Do NOT modify or remove this file.

------------------------------------------------------------------------
Properties requiring vendor prefixes:
None
Property values requiring vendor prefixes:
None
------------------------------------------------------------------------
List of files:
/LayoutTests/imported/w3c/web-platform-tests/resize-observer/META.yml
/LayoutTests/imported/w3c/web-platform-tests/resize-observer/eventloop.html
/LayoutTests/imported/w3c/web-platform-tests/resize-observer/idlharness.window.js
/LayoutTests/imported/w3c/web-platform-tests/resize-observer/notify.html
/LayoutTests/imported/w3c/web-platform-tests/resize-observer/observe.html
/LayoutTests/imported/w3c/web-platform-tests/resize-observer/svg.html

Return to Bug 193821

Lines 1-3 a/LayoutTests/imported/w3c/ChangeLog_sec1
- a/LayoutTests/imported/w3c/ChangeLog +35 lines
		1	2019-01-28 cathie chen <cathiechen@igalia.com>
		2
		3	Import Resize Observer test cases from WPTs
		4	https://bugs.webkit.org/show_bug.cgi?id=193821
		5
		6	Reviewed by NOBODY (OOPS!).
		7
		8	* resources/import-expectations.json:
		9	* web-platform-tests/resize-observer/META.yml: Added.
		10	* web-platform-tests/resize-observer/eventloop-expected.txt: Added.
		11	* web-platform-tests/resize-observer/eventloop.html: Added.
		12	* web-platform-tests/resize-observer/idlharness.window-expected.txt: Added.
		13	* web-platform-tests/resize-observer/idlharness.window.html: Added.
		14	* web-platform-tests/resize-observer/idlharness.window.js: Added.
		15	* web-platform-tests/resize-observer/notify-expected.txt: Added.
		16	* web-platform-tests/resize-observer/notify.html: Added.
		17	* web-platform-tests/resize-observer/observe-expected.txt: Added.
		18	* web-platform-tests/resize-observer/observe.html: Added.
		19	* web-platform-tests/resize-observer/resources/iframe.html: Added.
		20	* web-platform-tests/resize-observer/resources/resizeTestHelper.js: Added.
		21	(ResizeTestHelper):
		22	(ResizeTestHelper.prototype.get _currentStep):
		23	(ResizeTestHelper.prototype._nextStep):
		24	(ResizeTestHelper.prototype._handleNotification):
		25	(ResizeTestHelper.prototype._handleTimeout):
		26	(ResizeTestHelper.prototype._done):
		27	(ResizeTestHelper.prototype.start):
		28	(ResizeTestHelper.prototype.get rafCount):
		29	(ResizeTestHelper.prototype._incrementRaf):
		30	(ResizeTestHelper.prototype.startCountingRaf):
		31	* web-platform-tests/resize-observer/resources/w3c-import.log: Added.
		32	* web-platform-tests/resize-observer/svg-expected.txt: Added.
		33	* web-platform-tests/resize-observer/svg.html: Added.
		34	* web-platform-tests/resize-observer/w3c-import.log: Added.
		35
1	2019-01-24 Charles Vazac <cvazac@akamai.com>	36	2019-01-24 Charles Vazac <cvazac@akamai.com>
2		37
3	Implement PerformanceObserver.supportedEntryTypes	38	Implement PerformanceObserver.supportedEntryTypes

Line 0 a/LayoutTests/imported/w3c/web-platform-tests/resize-observer/eventloop.html_sec1
- a/LayoutTests/imported/w3c/web-platform-tests/resize-observer/eventloop.html +259 lines
		1	<!doctype html>
		2	<script src="/resources/testharness.js"></script>
		3	<script src="/resources/testharnessreport.js"></script>
		4	<script src="./resources/resizeTestHelper.js"></script>
		5	<style>
		6	div {
		7	border: 1px dotted gray
		8	}
		9	</style>
		10	<p>ResizeObserver notification event loop tests</p>
		11	<div id="target1" style="width:100px;height:100px;">t1
		12	</div>
		13	<div id="container">
		14	<div id="a1" style="width:100px;height:100px">
		15	<div id="a2" style="width:100px;height:100px">
		16	</div>
		17	</div>
		18	<div id="b1" style="width:100px;height:100px">
		19	<div id="b2" style="width:100px;height:100px">
		20	</div>
		21	</div>
		22	</div>
		23	<script>
		24	'use strict';
		25
		26	let t1 = document.querySelector('#target1');
		27
		28	// allow uncaught exception because ResizeObserver posts exceptions
		29	// to window error handler when limit is exceeded.
		30	// This codepath is tested in this file.
		31
		32	setup({allow_uncaught_exception: true});
		33
		34	function template() {
		35	let helper = new ResizeTestHelper(
		36	"test0: title",
		37	[
		38	{
		39	setup: observer => {
		40	},
		41	notify: (entries, observer) => {
		42	return true; // Delay next step
		43	}
		44	}
		45	]);
		46	return helper.start();
		47	}
		48
		49	var onErrorCalled = false;
		50
		51	window.onerror = err => {
		52	onErrorCalled = true;
		53	}
		54
		55	function test0() {
		56
		57	let divs = [t1];
		58	let rAF = 0;
		59	let helper = new ResizeTestHelper(
		60	"test0: multiple notifications inside same event loop",
		61	[
		62	{
		63	setup: observer => {
		64	onErrorCalled = false;
65	let t2 = document.createElement('div');
66	let t3 = document.createElement('div');
67	t2.appendChild(t3);
68	t1.appendChild(t2);
69	divs.push(t2);
70	divs.push(t3);
71	observer.observe(t1);
72	observer.observe(t2);
73	observer.observe(t3);
74	},
75	notify: (entries, observer) => {
76	assert_equals(entries.length, 3, "3 notifications");
77	}
78	},
79	{
80	setup: observer => {
81	helper.startCountingRaf();
82	divs.forEach( el => { el.style.width = "101px";});
83	},
84	notify: (entries, observer) => {
85	// t1 is not delivered
86	assert_equals(entries.length, 2, "2 notifications");
87	assert_equals(helper.rafCount, 0, "still in same loop");
88	}
89	},
90	{
91	setup: observer => {
92	divs.forEach( el => { el.style.width = "102px";});
93	},
94	notify: (entries, observer) => {
95	assert_equals(entries.length, 1, "1 notifications");
96	assert_equals(helper.rafCount, 0, "same loop");
97	}
98	},
99	{ // t1 and t2 get notified
100	setup: observer => {
101	},
102	notify: (entries, observer) => {
103	assert_equals(entries.length, 2, "2 notifications");
104	assert_equals(helper.rafCount, 1, "new loop");
105	assert_equals(onErrorCalled, true, "error was fired");
106	observer.disconnect();
107	while (t1.childNodes.length > 0)
108	t1.removeChild(t1.childNodes[0]);
109	}
110	}
111	]);
112	return helper.start();
113	}
114
115	function test1() {
116
117	var resizers = [t1];
118	// Testing depths of shadow roots
119	// DOM: t1 <- t2 <- t3 <-shadow- t4 <- t5
120	let helper = new ResizeTestHelper(
121	"test1: depths of shadow roots",
122	[
123	{
124	setup: observer => {
125	onErrorCalled = false;
126	let t2 = document.createElement('div');
127	t1.appendChild(t2);
128	resizers.push(t2);
129	let t3 = document.createElement('div');
130	resizers.push(t3);
131	t2.appendChild(t3);
132	let shadow = t3.attachShadow({ mode: "open" });
133	let t4 = document.createElement('div');
134	resizers.push(t4);
135	shadow.appendChild(t4);
136	let t5 = document.createElement('div');
137	resizers.push(t5);
138	t4.appendChild(t5);
139	resizers.forEach( el => observer.observe(el) );
140	},
141	notify: (entries, observer) => {
142	assert_equals(entries.length, 5, "all entries resized");
143	}
144	},
145	{
146	setup: observer => {
147	resizers.forEach( el => el.style.width = "111px" );
148	},
149	notify: (entries, observer) => {
150	assert_equals(entries.length, 4, "depth limited");
151	}
152	},
153	{
154	setup: observer => {
155	resizers.forEach( el => el.style.width = "112px" );
156	},
157	notify: (entries, observer) => {
158	assert_equals(entries.length, 3, "depth limited");
159	}
160	},
161	{
162	setup: observer => {
163	resizers.forEach( el => el.style.width = "113px" );
164	},
165	notify: (entries, observer) => {
166	assert_equals(entries.length, 2, "depth limited");
167	}
168	},
169	{
170	setup: observer => {
171	resizers.forEach( el => el.style.width = "114px" );
172	},
173	notify: (entries, observer) => {
174	assert_equals(entries.length, 1, "depth limited");
175	}
176	},
177	{
178	setup: observer => {
179	},
180	notify: (entries, observer) => {
181	assert_equals(entries.length, 4, "limit notifications");
182	assert_equals(onErrorCalled, true, "breached limit");
183	observer.disconnect();
184	t1.removeChild(t1.firstChild);
185	}
186	},
187	]);
188	return helper.start();
189	}
190
191	function test2() {
192	let container = document.querySelector('#container');
193	let a1 = document.querySelector('#a1');
194	let a2 = document.querySelector('#a2');
195	let b1 = document.querySelector('#b1');
196	let b2 = document.querySelector('#b2');
197	let targets = [a1, a2, b1, b2];
198
199	let helper = new ResizeTestHelper(
200	"test2: move target in dom while inside event loop",
201	[
202	{
203	setup: observer => {
204	for (let t of targets)
205	observer.observe(t);
206	},
207	notify: (entries, observer) => {
208	return true; // delay next observation
209	}
210	},
211	{ // resize them all
212	setup: observer => {
213	for (let t of targets)
214	t.style.width = "110px";
215	},
216	notify: (entries, observer) => {
217	assert_equals(entries.length, targets.length, "all targets observed");
218	}
219	},
220	{ // resize all, move dom upwards
221	setup: observer => {
222	for (let t of targets)
223	t.style.width = "130px";
224	container.appendChild(b2);
225	},
226	notify: (entries, observer) => {
227	assert_equals(entries.length, 1, "b2 moved upwards");
228	assert_equals(entries[0].target, a2);
229	}
230	},
231	{ // resize all, move dom downwards
232	setup: observer => {
233	for (let t of targets)
234	t.style.width = "130px";
235	a2.appendChild(b2);
236	},
237	notify: (entries, observer) => {
238	assert_equals(entries.length, 1, "b2 moved downwards");
239	assert_equals(entries[0].target, b2);
240	a1.appendChild(a2);
241	}
242	},
243	]);
244	return helper.start();
245	}
246
247	let guard;
248	test(_ => {
249	assert_own_property(window, "ResizeObserver");
250	guard = async_test('guard');
251	}, "ResizeObserver implemented")
252
253	test0()
254	.then(() => { return test1(); })
255	.then(() => { return test2(); })
256	.then(() => { guard.done(); });
257
258	</script>
259

Line 0 a/LayoutTests/imported/w3c/web-platform-tests/resize-observer/idlharness.window-expected.txt_sec1
- a/LayoutTests/imported/w3c/web-platform-tests/resize-observer/idlharness.window-expected.txt +30 lines
	1
	2	FAIL idl_test setup promise_test: Unhandled rejection with value: object "Got an error before parsing any named definition: Unrecognised tokens, line 1 (tokens: "{\"error\": {\"message\"")
	3	[
	4	{
	5	"type": "{",
	6	"value": "{",
	7	"trivia": ""
	8	},
	9	{
	10	"type": "string",
	11	"value": "\"error\"",
	12	"trivia": ""
	13	},
	14	{
	15	"type": ":",
	16	"value": ":",
	17	"trivia": ""
	18	},
	19	{
	20	"type": "{",
	21	"value": "{",
	22	"trivia": " "
	23	},
	24	{
	25	"type": "string",
	26	"value": "\"message\"",
	27	"trivia": ""
	28	}
	29	]"
	30

Line 0 a/LayoutTests/imported/w3c/web-platform-tests/resize-observer/idlharness.window.js_sec1
- a/LayoutTests/imported/w3c/web-platform-tests/resize-observer/idlharness.window.js +37 lines
	1	// META: script=/resources/WebIDLParser.js
	2	// META: script=/resources/idlharness.js
	3	// META: script=resources/resizeTestHelper.js
	4
	5	'use strict';
	6
	7	// https://wicg.github.io/ResizeObserver/
	8
	9	idl_test(
	10	['ResizeObserver'],
	11	['dom', 'geometry'],
	12	async idl_array => {
	13	idl_array.add_objects({
	14	ResizeObserver: ['observer'],
	15	ResizeObserverEntry: ['entry'],
	16	});
	17
	18	const div = document.createElement('div');
	19	document.body.appendChild(div);
	20	let helper = new ResizeTestHelper(
	21	"ResizeObserverEntry creator",
	22	[
	23	{
	24	setup: observer => {
	25	self.observer = observer;
	26	observer.observe(div);
	27	div.style.width = "5px";
	28	},
	29	notify: entries => {
	30	self.entry = entries[0];
	31	assert_equals(entries[0].contentRect.width, 5, "target width");
	32	}
	33	}
	34	]);
	35	await helper.start();
	36	}
	37	);

Line 0 a/LayoutTests/imported/w3c/web-platform-tests/resize-observer/notify-expected.txt_sec1
- a/LayoutTests/imported/w3c/web-platform-tests/resize-observer/notify-expected.txt +11 lines
	1	CONSOLE MESSAGE: line 50: ReferenceError: Can't find variable: ResizeObserver
	2	ResizeObserver tests
	3
	4	t1
	5	t2
	6	t3 inline
	7
	8	Harness Error (FAIL), message = ReferenceError: Can't find variable: ResizeObserver
	9
	10	FAIL ResizeObserver implemented assert_own_property: expected property "ResizeObserver" missing
	11

Line 0 a/LayoutTests/imported/w3c/web-platform-tests/resize-observer/resources/iframe.html_sec1
- a/LayoutTests/imported/w3c/web-platform-tests/resize-observer/resources/iframe.html +38 lines
	1	<!doctype html>
	2	<head>
	3	<script src="./resizeTestHelper.js"></script>
	4	</head>
	5	<p>iframe test</p>
	6	<div id="itarget1" style="width:100px;height:100px;">t1</div>
	7	<script>
	8	'use strict';
	9	let t1 = document.querySelector('#itarget1');
	10	function test0() {
	11	let timeoutId = window.setTimeout( () => {
	12	window.parent.postMessage('fail', '*');
	13	}, ResizeTestHelper.TIMEOUT);
	14	let ro = new ResizeObserver(function(entries) {
	15	window.clearTimeout(timeoutId);
	16	window.parent.postMessage('success', '*');
	17	});
	18	ro.observe(t1);
	19	}
	20	let testStarted = false;
	21	window.addEventListener('message', function(ev) {
	22	switch(ev.data) {
	23	case 'startTest':
	24	testStarted = true;
	25	test0();
	26	break;
	27	}
	28	});
	29	// How does parent know we've loaded problem is solved by
	30	// broadcasting readyToTest message repeatedly until test starts.
	31	function broadcastReady() {
	32	if (!testStarted) {
	33	window.parent.postMessage('readyToTest', '*');
	34	window.requestAnimationFrame(broadcastReady);
	35	}
	36	}
	37	broadcastReady();
	38	</script>

Line 0 a/LayoutTests/imported/w3c/web-platform-tests/resize-observer/resources/resizeTestHelper.js_sec1
- a/LayoutTests/imported/w3c/web-platform-tests/resize-observer/resources/resizeTestHelper.js +148 lines
		1	'use strict';
		2
		3	/**
		4	ResizeTestHelper is a framework to test ResizeObserver
		5	notifications. Use it to make assertions about ResizeObserverEntries.
		6	This framework is needed because ResizeObservations are
		7	delivered asynchronously inside the event loop.
		8
		9	Features:
		10	- can queue multiple notification steps in a test
		11	- handles timeouts
		12	- returns Promise that is fullfilled when test completes.
		13	Use to chain tests (since parallel async ResizeObserver tests
		14	would conflict if reusing same DOM elements).
		15
		16	Usage:
		17
		18	create ResizeTestHelper for every test.
		19	Make assertions inside notify, timeout callbacks.
		20	Start tests with helper.start()
		21	Chain tests with Promises.
		22	Counts animation frames, see startCountingRaf
		23	*/
		24
		25	/*
		26	@param name: test name
		27	@param steps:
		28	{
		29	setup: function(ResizeObserver) {
		30	// called at the beginning of the test step
		31	// your observe/resize code goes here
		32	},
		33	notify: function(entries, observer) {
		34	// ResizeObserver callback.
		35	// Make assertions here.
		36	// Return true if next step should start on the next event loop.
		37	},
		38	timeout: function() {
		39	// Define this if your test expects to time out.
		40	// If undefined, timeout is assert_unreached.
		41	}
		42	}
		43	*/
		44	function ResizeTestHelper(name, steps)
		45	{
		46	this._name = name;
		47	this._steps = steps \|\| [];
		48	this._stepIdx = -1;
		49	this._harnessTest = null;
		50	this._observer = new ResizeObserver(this._handleNotification.bind(this));
		51	this._timeoutBind = this._handleTimeout.bind(this);
		52	this._nextStepBind = this._nextStep.bind(this);
		53	}
		54
		55	ResizeTestHelper.TIMEOUT = 100;
		56
		57	ResizeTestHelper.prototype = {
		58	get _currentStep() {
		59	return this._steps[this._stepIdx];
		60	},
		61
		62	_nextStep: function() {
		63	if (++this._stepIdx == this._steps.length)
		64	return this._done();
65	this._timeoutId = this._harnessTest.step_timeout(
66	this._timeoutBind, ResizeTestHelper.TIMEOUT);
67	try {
68	this._steps[this._stepIdx].setup(this._observer);
69	}
70	catch(err) {
71	this._harnessTest.step(() => {
72	assert_unreached("Caught a throw, possible syntax error");
73	});
74	}
75	},
76
77	_handleNotification: function(entries) {
78	if (this._timeoutId) {
79	window.clearTimeout(this._timeoutId);
80	delete this._timeoutId;
81	}
82	this._harnessTest.step(() => {
83	let rafDelay = this._currentStep.notify(entries, this._observer);
84	if (rafDelay)
85	window.requestAnimationFrame(this._nextStepBind);
86	else
87	this._nextStep();
88	});
89	},
90
91	_handleTimeout: function() {
92	delete this._timeoutId;
93	this._harnessTest.step(() => {
94	if (this._currentStep.timeout) {
95	this._currentStep.timeout();
96	}
97	else {
98	assert_unreached("Timed out waiting for notification. (" + ResizeTestHelper.TIMEOUT + "ms)");
99	}
100	this._nextStep();
101	});
102	},
103
104	_done: function() {
105	this._observer.disconnect();
106	delete this._observer;
107	this._harnessTest.done();
108	if (this._rafCountRequest) {
109	window.cancelAnimationFrame(this._rafCountRequest);
110	delete this._rafCountRequest;
111	}
112	window.requestAnimationFrame(() => { this._resolvePromise(); });
113	},
114
115	start: function() {
116	this._harnessTest = async_test(this._name);
117	this._harnessTest.step(() => {
118	assert_equals(this._stepIdx, -1, "start can only be called once");
119	this._nextStep();
120	});
121	return new Promise( (resolve, reject) => {
122	this._resolvePromise = resolve;
123	this._rejectPromise = reject;
124	});
125	},
126
127	get rafCount() {
128	if (!this._rafCountRequest)
129	throw "rAF count is not active";
130	return this._rafCount;
131	},
132
133	_incrementRaf: function() {
134	if (this._rafCountRequest) {
135	this._rafCount++;
136	this._rafCountRequest = window.requestAnimationFrame(this._incrementRafBind);
137	}
138	},
139
140	startCountingRaf: function() {
141	if (this._rafCountRequest)
142	window.cancelAnimationFrame(this._rafCountRequest);
143	if (!this._incrementRafBind)
144	this._incrementRafBind = this._incrementRaf.bind(this);
145	this._rafCount = 0;
146	this._rafCountRequest = window.requestAnimationFrame(this._incrementRafBind);
147	}
148	}

Line 0 a/LayoutTests/imported/w3c/web-platform-tests/resize-observer/resources/w3c-import.log_sec1
- a/LayoutTests/imported/w3c/web-platform-tests/resize-observer/resources/w3c-import.log +18 lines
	1	The tests in this directory were imported from the W3C repository.
	2	Do NOT modify these tests directly in WebKit.
	3	Instead, create a pull request on the WPT github:
	4	https://github.com/web-platform-tests/wpt
	5
	6	Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport
	7
	8	Do NOT modify or remove this file.
	9
	10	------------------------------------------------------------------------
	11	Properties requiring vendor prefixes:
	12	None
	13	Property values requiring vendor prefixes:
	14	None
	15	------------------------------------------------------------------------
	16	List of files:
	17	/LayoutTests/imported/w3c/web-platform-tests/resize-observer/resources/iframe.html
	18	/LayoutTests/imported/w3c/web-platform-tests/resize-observer/resources/resizeTestHelper.js

Line 0 a/LayoutTests/imported/w3c/web-platform-tests/resize-observer/svg-expected.txt_sec1
- a/LayoutTests/imported/w3c/web-platform-tests/resize-observer/svg-expected.txt +9 lines
	1	CONSOLE MESSAGE: line 50: ReferenceError: Can't find variable: ResizeObserver
	2	ResizeObserver svg tests
	3
	4	Here is a paragraph that requires word wrap
	5
	6	svg text tag
	7
	8	FAIL ResizeObserver implemented assert_own_property: expected property "ResizeObserver" missing
	9