observe-element-resize.html | Explore in Territory

<!DOCTYPE html>
<body>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<textarea id="resizable"></textarea>
<script>
var test = async_test('Resizing an element via CSS property |resize| should trigger MutationObserver for style attribute.');
test.step(() => {
  assert_true(!!window.eventSender, 'Needs window.eventSender');
  var resizable = document.querySelector('#resizable');
  var mutationCount = 0;
  new MutationObserver(records => {
    ++mutationCount;
  }).observe(resizable, {attributes:true, attributeFilter:['style']});
  
  var resizerX = resizable.offsetLeft + resizable.offsetWidth - 4;
  var resizerY = resizable.offsetTop + resizable.offsetHeight - 4;
  eventSender.mouseMoveTo(resizerX, resizerY);
  eventSender.mouseDown();
  eventSender.mouseMoveTo(resizerX + 100, resizerY + 100);
  eventSender.mouseUp();
  setTimeout(test.step_func(() => {
    assert_true(!!mutationCount);
    test.done();
  }), 0);
});
</script>
</body>

chromium/third_party/blink/web_tests/fast/dom/MutationObserver/observe-element-resize.html