Log Message
Resync web-platform-tests/resize-observer from upstream https://bugs.webkit.org/show_bug.cgi?id=214375
Reviewed by Alex Christensen. LayoutTests/imported/w3c: Resync web-platform-tests/resize-observer from upstream b2a666d93581a71e9338b2. * resources/import-expectations.json: * web-platform-tests/resize-observer/META.yml: * web-platform-tests/resize-observer/change-layout-in-error-expected.txt: Added. * web-platform-tests/resize-observer/change-layout-in-error.html: Added. * web-platform-tests/resize-observer/devicepixel-expected.html: Added. * web-platform-tests/resize-observer/devicepixel.html: Added. * web-platform-tests/resize-observer/eventloop.html: * web-platform-tests/resize-observer/idlharness.window-expected.txt: * web-platform-tests/resize-observer/idlharness.window.html: * web-platform-tests/resize-observer/idlharness.window.js: * web-platform-tests/resize-observer/observe-expected.txt: * web-platform-tests/resize-observer/observe.html: * web-platform-tests/resize-observer/resources/image.png: Added. * web-platform-tests/resize-observer/resources/resizeTestHelper.js: (ResizeTestHelper.prototype._handleNotification): (ResizeTestHelper.prototype._handleTimeout): (ResizeTestHelper.prototype.start): (ResizeTestHelper.prototype.get test): (createAndAppendElement): * web-platform-tests/resize-observer/resources/w3c-import.log: * web-platform-tests/resize-observer/svg-expected.txt: * web-platform-tests/resize-observer/svg.html: * web-platform-tests/resize-observer/w3c-import.log: LayoutTests: * TestExpectations:
Modified Paths
- trunk/LayoutTests/ChangeLog
- trunk/LayoutTests/TestExpectations
- trunk/LayoutTests/imported/w3c/ChangeLog
- trunk/LayoutTests/imported/w3c/resources/import-expectations.json
- trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/META.yml
- trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/eventloop.html
- trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/idlharness.window-expected.txt
- trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/idlharness.window.html
- trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/idlharness.window.js
- trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/observe-expected.txt
- trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/observe.html
- trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/resources/resizeTestHelper.js
- trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/resources/w3c-import.log
- trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/svg-expected.txt
- trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/svg.html
- trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/w3c-import.log
Added Paths
- trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/change-layout-in-error-expected.txt
- trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/change-layout-in-error.html
- trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/devicepixel-expected.html
- trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/devicepixel.html
- trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/resources/image.png
- trunk/LayoutTests/platform/mac-wk1/imported/w3c/web-platform-tests/resize-observer/
- trunk/LayoutTests/platform/mac-wk1/imported/w3c/web-platform-tests/resize-observer/change-layout-in-error-expected.txt
Diff
Modified: trunk/LayoutTests/ChangeLog (264431 => 264432)
--- trunk/LayoutTests/ChangeLog 2020-07-15 22:28:59 UTC (rev 264431)
+++ trunk/LayoutTests/ChangeLog 2020-07-15 22:51:55 UTC (rev 264432)
@@ -1,3 +1,12 @@
+2020-07-15 Chris Dumez <cdu...@apple.com>
+
+ Resync web-platform-tests/resize-observer from upstream
+ https://bugs.webkit.org/show_bug.cgi?id=214375
+
+ Reviewed by Alex Christensen.
+
+ * TestExpectations:
+
2020-07-15 Hector Lopez <hector_i_lo...@apple.com>
[ macOS wk1 ] http/tests/media/reload-after-dialog.html is a flaky failure
Modified: trunk/LayoutTests/TestExpectations (264431 => 264432)
--- trunk/LayoutTests/TestExpectations 2020-07-15 22:28:59 UTC (rev 264431)
+++ trunk/LayoutTests/TestExpectations 2020-07-15 22:51:55 UTC (rev 264432)
@@ -3010,6 +3010,7 @@
# If requestAnimationFrame is invoked before ResizeObserver timer fired, it would pass, otherwise it would fail same as eventloop-expected.txt
webkit.org/b/157743 imported/w3c/web-platform-tests/resize-observer/eventloop.html [ Pass Failure ]
+imported/w3c/web-platform-tests/resize-observer/devicepixel.html [ ImageOnlyFailure ]
webkit.org/b/198103 imported/w3c/web-platform-tests/html/semantics/embedded-content/media-elements/offsets-into-the-media-resource/currentTime.html [ Pass Failure ]
Modified: trunk/LayoutTests/imported/w3c/ChangeLog (264431 => 264432)
--- trunk/LayoutTests/imported/w3c/ChangeLog 2020-07-15 22:28:59 UTC (rev 264431)
+++ trunk/LayoutTests/imported/w3c/ChangeLog 2020-07-15 22:51:55 UTC (rev 264432)
@@ -1,5 +1,38 @@
2020-07-15 Chris Dumez <cdu...@apple.com>
+ Resync web-platform-tests/resize-observer from upstream
+ https://bugs.webkit.org/show_bug.cgi?id=214375
+
+ Reviewed by Alex Christensen.
+
+ Resync web-platform-tests/resize-observer from upstream b2a666d93581a71e9338b2.
+
+ * resources/import-expectations.json:
+ * web-platform-tests/resize-observer/META.yml:
+ * web-platform-tests/resize-observer/change-layout-in-error-expected.txt: Added.
+ * web-platform-tests/resize-observer/change-layout-in-error.html: Added.
+ * web-platform-tests/resize-observer/devicepixel-expected.html: Added.
+ * web-platform-tests/resize-observer/devicepixel.html: Added.
+ * web-platform-tests/resize-observer/eventloop.html:
+ * web-platform-tests/resize-observer/idlharness.window-expected.txt:
+ * web-platform-tests/resize-observer/idlharness.window.html:
+ * web-platform-tests/resize-observer/idlharness.window.js:
+ * web-platform-tests/resize-observer/observe-expected.txt:
+ * web-platform-tests/resize-observer/observe.html:
+ * web-platform-tests/resize-observer/resources/image.png: Added.
+ * web-platform-tests/resize-observer/resources/resizeTestHelper.js:
+ (ResizeTestHelper.prototype._handleNotification):
+ (ResizeTestHelper.prototype._handleTimeout):
+ (ResizeTestHelper.prototype.start):
+ (ResizeTestHelper.prototype.get test):
+ (createAndAppendElement):
+ * web-platform-tests/resize-observer/resources/w3c-import.log:
+ * web-platform-tests/resize-observer/svg-expected.txt:
+ * web-platform-tests/resize-observer/svg.html:
+ * web-platform-tests/resize-observer/w3c-import.log:
+
+2020-07-15 Chris Dumez <cdu...@apple.com>
+
Unreviewed, drop WPT test which no longer exists upstream and should have been dropped during resync in r263928.
* web-platform-tests/mediacapture-record/MediaRecorder-constructor-expected.txt: Removed.
Modified: trunk/LayoutTests/imported/w3c/resources/import-expectations.json (264431 => 264432)
--- trunk/LayoutTests/imported/w3c/resources/import-expectations.json 2020-07-15 22:28:59 UTC (rev 264431)
+++ trunk/LayoutTests/imported/w3c/resources/import-expectations.json 2020-07-15 22:51:55 UTC (rev 264432)
@@ -351,7 +351,7 @@
"web-platform-tests/referrer-policy": "import",
"web-platform-tests/remote-playback": "import",
"web-platform-tests/requestidlecallback": "import",
- "web-platform-tests/resize-observer": "skip",
+ "web-platform-tests/resize-observer": "import",
"web-platform-tests/resize-observer/": "import",
"web-platform-tests/resource-timing": "import",
"web-platform-tests/resources": "import",
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/META.yml (264431 => 264432)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/META.yml 2020-07-15 22:28:59 UTC (rev 264431)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/META.yml 2020-07-15 22:51:55 UTC (rev 264432)
@@ -1,4 +1,4 @@
-spec: https://wicg.github.io/ResizeObserver/
+spec: https://drafts.csswg.org/resize-observer/
suggested_reviewers:
- atotic
- dholbert
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/change-layout-in-error-expected.txt (0 => 264432)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/change-layout-in-error-expected.txt (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/change-layout-in-error-expected.txt 2020-07-15 22:51:55 UTC (rev 264432)
@@ -0,0 +1,5 @@
+CONSOLE MESSAGE: ResizeObserver loop completed with undelivered notifications.
+CONSOLE MESSAGE: ResizeObserver loop completed with undelivered notifications.
+
+PASS Changing layout in window error handler should not result in lifecyle loop when resize observer loop limit is reached.
+
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/change-layout-in-error.html (0 => 264432)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/change-layout-in-error.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/change-layout-in-error.html 2020-07-15 22:51:55 UTC (rev 264432)
@@ -0,0 +1,33 @@
+<!doctype HTML>
+<script src=""
+<script src=""
+
+<style>
+ div {
+ width: 100px;
+ height: 100px;
+ }
+</style>
+<div id="observeme"></div>
+
+<script>
+setup({allow_uncaught_exception: true});
+
+async_test(a => {
+ let t = document.querySelector("#observeme");
+ let i = 0;
+ window._onerror_ = function (err) {
+ t.style.height = "112px";
+ i++;
+ requestAnimationFrame(a.step_func_done(() => {
+ assert_equals(i, 1);
+ }), 0);
+ };
+
+ new ResizeObserver(function() {
+ t.style.height = "111px";
+ }).observe(observeme);
+ observeme.style.height = "110px";
+
+}, "Changing layout in window error handler should not result in lifecyle loop when resize observer loop limit is reached.");
+</script>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/devicepixel-expected.html (0 => 264432)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/devicepixel-expected.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/devicepixel-expected.html 2020-07-15 22:51:55 UTC (rev 264432)
@@ -0,0 +1,27 @@
+<!doctype html>
+<style>
+ #greenrect {
+ width: 100%;
+ height: 100%;
+ border: 1px solid green;
+ box-sizing: border-box;
+ }
+ #outer {
+ padding-top: 1.7px;
+ width: 300.8px;
+ height: 250.1px;
+ }
+ #outer2 {
+ padding-top: 1.4px;
+ width: 300.8px;
+ height: 250.1px;
+ }
+</style>
+<body>
+ <div id="outer">
+ <div id="greenrect"></div>
+ </div>
+ <div id="outer2">
+ <div id="greenrect"></div>
+ </div>
+</body>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/devicepixel.html (0 => 264432)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/devicepixel.html (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/devicepixel.html 2020-07-15 22:51:55 UTC (rev 264432)
@@ -0,0 +1,85 @@
+<!doctype html>
+<link rel="match" href=""
+<meta name="assert" content="Device pixel content box sizes and pixel snapping are correct in Resize Observer callback">
+<!--
+ This test verifies that the device pixel content box sizes available
+ in a resize observer callback are correct. Resize observer notifications
+ are delivered as the element is loaded. A box is then drawn using the
+ available dimensions in device pixels. The result is compared to the reference
+ which uses div and border to draw a box.
+-->
+
+<style>
+ #canvas2D {
+ width: 100%;
+ height: 100%;
+ }
+ #canvas2DPadding14 {
+ width: 100%;
+ height: 100%;
+ }
+ #outer {
+ padding-top: 1.7px;
+ width: 300.8px;
+ height: 250.1px;
+ }
+ #outer2 {
+ padding-top: 1.4px;
+ width: 300.8px;
+ height: 250.1px;
+ }
+
+</style>
+<body>
+ <div id="outer">
+ <canvas id="canvas2D"></canvas>
+ </div>
+ <div id="outer2">
+ <canvas id="canvas2DPadding14"></canvas>
+ </div>
+</body>
+
+<script>
+ // Create a box using device pixel content box dimensions
+ function paint2D(ctx, snappedSize) {
+ ctx.beginPath();
+ // Use a linewidth of 2. Because the rectangle is drawn at 0,0 with
+ // its dimensions being the same as canvas dimensions, linewidth as it
+ // is drawn on the canvas will be 1.
+ ctx.lineWidth = "2";
+ ctx.strokeStyle = "green";
+ ctx.rect(0, 0, snappedSize.inlineSize, snappedSize.blockSize);
+ ctx.stroke();
+ }
+
+ function updateCanvasSize2D(canvas2D, ctx, snappedSize) {
+ canvas2D.width = snappedSize.inlineSize;
+ canvas2D.height = snappedSize.blockSize;
+ paint2D(ctx, snappedSize);
+ }
+
+ (function() {
+ let canvas2D = document.querySelector("#canvas2D");
+ let canvas2DPadding14 = document.querySelector("#canvas2DPadding14");
+
+ function observeSizes() {
+ let ro = new ResizeObserver( entries => {
+ for (entry of entries) {
+ let size = entry.devicePixelContentBoxSize[0];
+ if (entry.target == canvas2D) {
+ let canvas2D = document.querySelector("#canvas2D");
+ let ctx = canvas2D.getContext("2d");
+ updateCanvasSize2D(canvas2D, ctx, size);
+ } else if (entry.target == canvas2DPadding14){
+ let canvas2DPadding14 = document.querySelector("#canvas2DPadding14");
+ let ctx = canvas2DPadding14.getContext("2d");
+ updateCanvasSize2D(canvas2DPadding14, ctx, size);
+ }
+ }
+ });
+ ro.observe(canvas2D, {box: "device-pixel-content-box"});
+ ro.observe(canvas2DPadding14, {box: "device-pixel-content-box"});
+ }
+ observeSizes();
+ })();
+</script>
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/eventloop.html (264431 => 264432)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/eventloop.html 2020-07-15 22:28:59 UTC (rev 264431)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/eventloop.html 2020-07-15 22:51:55 UTC (rev 264432)
@@ -1,30 +1,12 @@
<!doctype html><!-- webkit-test-runner [ experimental:ResizeObserverEnabled=true ] -->
+<title>ResizeObserver notification event loop tests</title>
<script src=""
<script src=""
<script src=""
-<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>
+<div id="log"></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.
@@ -53,8 +35,11 @@
}
function test0() {
+ let t1 = createAndAppendElement("div");
+ let t2 = createAndAppendElement("div", t1);
+ let t3 = createAndAppendElement("div", t2);
- let divs = [t1];
+ let divs = [t1, t2, t3];
let rAF = 0;
let helper = new ResizeTestHelper(
"test0: multiple notifications inside same event loop",
@@ -62,12 +47,6 @@
{
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);
@@ -104,17 +83,40 @@
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();
+
+ return new Promise((resolve, reject) => {
+ // This test uses requestAnimationFrame() to check the count of event loop,
+ // but on some browsers, the FrameRequestCallback may be throttled (i.e.
+ // simply fired after some extra time) in cases where this test is running
+ // in an iframe that hasn't yet been painted (i.e. we're not visible).
+ // This may result in some intermittent failures if this test didn't get a
+ // first paint (and hence may not have started firing FrameRequestCallbacks)
+ // by the time the test starts expecting helper.rafCount to have changed.
+ //
+ // Therefore, we don't start the test logic until body.onload has fired.
+ // This increases the likelihood that this testcase will have gotten a
+ // chance to paint when we start invoking requestAnimationFrame, and that
+ // its rAF callbacks will fire when the test logic expects them to.
+ document.body._onload_ = () => resolve();
+ }).then(() => {
+ return helper.start(() => t1.remove());
+ });
}
function test1() {
+ let t1 = createAndAppendElement("div");
+ t1.style.width = '100px';
+ let t2 = createAndAppendElement("div", t1);
+ let t3 = createAndAppendElement("div", t2);
+ let shadow = t3.attachShadow({ mode: "open" });
+ let t4 = createAndAppendElement("div", shadow);
+ let t5 = createAndAppendElement("div", t4);
- var resizers = [t1];
+ let resizers = [t1, t2, t3, t4, t5];
+
// Testing depths of shadow roots
// DOM: t1 <- t2 <- t3 <-shadow- t4 <- t5
let helper = new ResizeTestHelper(
@@ -123,19 +125,6 @@
{
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) => {
@@ -181,19 +170,26 @@
assert_equals(entries.length, 4, "limit notifications");
assert_equals(onErrorCalled, true, "breached limit");
observer.disconnect();
- t1.removeChild(t1.firstChild);
}
},
]);
- return helper.start();
+ return helper.start(() => t1.remove());
}
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');
+ // <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>
+ let container = createAndAppendElement("div");
+ let a1 = createAndAppendElement("div", container);
+ let a2 = createAndAppendElement("div", a1);
+ let b1 = createAndAppendElement("div", container);
+ let b2 = createAndAppendElement("div", b1);
let targets = [a1, a2, b1, b2];
let helper = new ResizeTestHelper(
@@ -237,11 +233,10 @@
notify: (entries, observer) => {
assert_equals(entries.length, 1, "b2 moved downwards");
assert_equals(entries[0].target, b2);
- a1.appendChild(a2);
}
},
]);
- return helper.start();
+ return helper.start(() => container.remove());
}
let guard;
@@ -251,9 +246,8 @@
}, "ResizeObserver implemented")
test0()
- .then(() => { return test1(); })
- .then(() => { return test2(); })
- .then(() => { guard.done(); });
+ .then(() => test1())
+ .then(() => test2())
+ .then(() => guard.done());
</script>
-
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/idlharness.window-expected.txt (264431 => 264432)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/idlharness.window-expected.txt 2020-07-15 22:28:59 UTC (rev 264431)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/idlharness.window-expected.txt 2020-07-15 22:51:55 UTC (rev 264432)
@@ -12,18 +12,18 @@
PASS ResizeObserver interface: existence and properties of interface prototype object
PASS ResizeObserver interface: existence and properties of interface prototype object's "constructor" property
PASS ResizeObserver interface: existence and properties of interface prototype object's @@unscopables property
-PASS ResizeObserver interface: operation observe(Element)
+PASS ResizeObserver interface: operation observe(Element, optional ResizeObserverOptions)
PASS ResizeObserver interface: operation unobserve(Element)
PASS ResizeObserver interface: operation disconnect()
PASS ResizeObserver must be primary interface of observer
PASS Stringification of observer
-PASS ResizeObserver interface: observer must inherit property "observe(Element)" with the proper type
-PASS ResizeObserver interface: calling observe(Element) on observer with too few arguments must throw TypeError
+PASS ResizeObserver interface: observer must inherit property "observe(Element, optional ResizeObserverOptions)" with the proper type
+PASS ResizeObserver interface: calling observe(Element, optional ResizeObserverOptions) on observer with too few arguments must throw TypeError
PASS ResizeObserver interface: observer must inherit property "unobserve(Element)" with the proper type
PASS ResizeObserver interface: calling unobserve(Element) on observer with too few arguments must throw TypeError
PASS ResizeObserver interface: observer must inherit property "disconnect()" with the proper type
PASS ResizeObserverEntry interface: existence and properties of interface object
-FAIL ResizeObserverEntry interface object length assert_equals: wrong value for ResizeObserverEntry.length expected 1 but got 0
+PASS ResizeObserverEntry interface object length
PASS ResizeObserverEntry interface object name
PASS ResizeObserverEntry interface: existence and properties of interface prototype object
PASS ResizeObserverEntry interface: existence and properties of interface prototype object's "constructor" property
@@ -30,10 +30,24 @@
PASS ResizeObserverEntry interface: existence and properties of interface prototype object's @@unscopables property
PASS ResizeObserverEntry interface: attribute target
PASS ResizeObserverEntry interface: attribute contentRect
+FAIL ResizeObserverEntry interface: attribute borderBoxSize assert_true: The prototype object must have a property "borderBoxSize" expected true got false
+FAIL ResizeObserverEntry interface: attribute contentBoxSize assert_true: The prototype object must have a property "contentBoxSize" expected true got false
+FAIL ResizeObserverEntry interface: attribute devicePixelContentBoxSize assert_true: The prototype object must have a property "devicePixelContentBoxSize" expected true got false
PASS ResizeObserverEntry must be primary interface of entry
PASS Stringification of entry
PASS ResizeObserverEntry interface: entry must inherit property "target" with the proper type
PASS ResizeObserverEntry interface: entry must inherit property "contentRect" with the proper type
+FAIL ResizeObserverEntry interface: entry must inherit property "borderBoxSize" with the proper type assert_inherits: property "borderBoxSize" not found in prototype chain
+FAIL ResizeObserverEntry interface: entry must inherit property "contentBoxSize" with the proper type assert_inherits: property "contentBoxSize" not found in prototype chain
+FAIL ResizeObserverEntry interface: entry must inherit property "devicePixelContentBoxSize" with the proper type assert_inherits: property "devicePixelContentBoxSize" not found in prototype chain
+FAIL ResizeObserverSize interface: existence and properties of interface object assert_own_property: self does not have own property "ResizeObserverSize" expected property "ResizeObserverSize" missing
+FAIL ResizeObserverSize interface object length assert_own_property: self does not have own property "ResizeObserverSize" expected property "ResizeObserverSize" missing
+FAIL ResizeObserverSize interface object name assert_own_property: self does not have own property "ResizeObserverSize" expected property "ResizeObserverSize" missing
+FAIL ResizeObserverSize interface: existence and properties of interface prototype object assert_own_property: self does not have own property "ResizeObserverSize" expected property "ResizeObserverSize" missing
+FAIL ResizeObserverSize interface: existence and properties of interface prototype object's "constructor" property assert_own_property: self does not have own property "ResizeObserverSize" expected property "ResizeObserverSize" missing
+FAIL ResizeObserverSize interface: existence and properties of interface prototype object's @@unscopables property assert_own_property: self does not have own property "ResizeObserverSize" expected property "ResizeObserverSize" missing
+FAIL ResizeObserverSize interface: attribute inlineSize assert_own_property: self does not have own property "ResizeObserverSize" expected property "ResizeObserverSize" missing
+FAIL ResizeObserverSize interface: attribute blockSize assert_own_property: self does not have own property "ResizeObserverSize" expected property "ResizeObserverSize" missing
FAIL ResizeObservation interface: existence and properties of interface object assert_own_property: self does not have own property "ResizeObservation" expected property "ResizeObservation" missing
FAIL ResizeObservation interface object length assert_own_property: self does not have own property "ResizeObservation" expected property "ResizeObservation" missing
FAIL ResizeObservation interface object name assert_own_property: self does not have own property "ResizeObservation" expected property "ResizeObservation" missing
@@ -41,7 +55,6 @@
FAIL ResizeObservation interface: existence and properties of interface prototype object's "constructor" property assert_own_property: self does not have own property "ResizeObservation" expected property "ResizeObservation" missing
FAIL ResizeObservation interface: existence and properties of interface prototype object's @@unscopables property assert_own_property: self does not have own property "ResizeObservation" expected property "ResizeObservation" missing
FAIL ResizeObservation interface: attribute target assert_own_property: self does not have own property "ResizeObservation" expected property "ResizeObservation" missing
-FAIL ResizeObservation interface: attribute broadcastWidth assert_own_property: self does not have own property "ResizeObservation" expected property "ResizeObservation" missing
-FAIL ResizeObservation interface: attribute broadcastHeight assert_own_property: self does not have own property "ResizeObservation" expected property "ResizeObservation" missing
-FAIL ResizeObservation interface: operation isActive() assert_own_property: self does not have own property "ResizeObservation" expected property "ResizeObservation" missing
+FAIL ResizeObservation interface: attribute observedBox assert_own_property: self does not have own property "ResizeObservation" expected property "ResizeObservation" missing
+FAIL ResizeObservation interface: attribute lastReportedSizes assert_own_property: self does not have own property "ResizeObservation" expected property "ResizeObservation" missing
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/idlharness.window.html (264431 => 264432)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/idlharness.window.html 2020-07-15 22:28:59 UTC (rev 264431)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/idlharness.window.html 2020-07-15 22:51:55 UTC (rev 264432)
@@ -1 +1 @@
-<!-- This file is required for WebKit test infrastructure to run the templated test --><!-- webkit-test-runner [ experimental:ResizeObserverEnabled=true ] -->
+<!-- This file is required for WebKit test infrastructure to run the templated test --><!-- webkit-test-runner [ experimental:ResizeObserverEnabled=true ] -->
\ No newline at end of file
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/idlharness.window.js (264431 => 264432)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/idlharness.window.js 2020-07-15 22:28:59 UTC (rev 264431)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/idlharness.window.js 2020-07-15 22:51:55 UTC (rev 264432)
@@ -7,7 +7,7 @@
// https://wicg.github.io/ResizeObserver/
idl_test(
- ['ResizeObserver'],
+ ['resize-observer'],
['dom', 'geometry'],
async idl_array => {
idl_array.add_objects({
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/observe-expected.txt (264431 => 264432)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/observe-expected.txt 2020-07-15 22:28:59 UTC (rev 264431)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/observe-expected.txt 2020-07-15 22:51:55 UTC (rev 264432)
@@ -1,10 +1,6 @@
CONSOLE MESSAGE: ResizeObserver loop completed with undelivered notifications.
-ResizeObserver tests
+CONSOLE MESSAGE: ResizeObserver loop completed with undelivered notifications.
-t1
-t2
-
-
PASS ResizeObserver implemented
PASS guard
PASS test0: simple observation
@@ -15,4 +11,15 @@
PASS test5: observe img
PASS test6: iframe notifications
FAIL test7: callback.this assert_equals: callback.this is ResizeObserver expected (object) object "[object ResizeObserver]" but got (undefined) undefined
+FAIL test8: simple content-box observation undefined is not an object (evaluating 'entries[0].contentBoxSize[0]')
+FAIL test9: simple content-box observation but keep border-box size unchanged undefined is not an object (evaluating 'entries[0].contentBoxSize[0]')
+FAIL test10: simple border-box observation undefined is not an object (evaluating 'entries[0].contentBoxSize[0]')
+FAIL test11: simple observation with vertical writing mode undefined is not an object (evaluating 'entries[0].contentBoxSize[0]')
+FAIL test12: no observation is fired after the change of writing mode when box's specified size comes from logical size properties. undefined is not an object (evaluating 'entries[0].contentBoxSize[0]')
+FAIL test13: an observation is fired after the change of writing mode when box's specified size comes from physical size properties. undefined is not an object (evaluating 'entries[0].contentBoxSize[0]')
+FAIL test14: observe the same target but using a different box should override the previous one undefined is not an object (evaluating 'entries[0].contentBoxSize[0]')
+FAIL test15: an observation is fired with box dimensions 0 when element's display property is set to inline undefined is not an object (evaluating 'entries[0].contentBoxSize[0]')
+PASS test16: observations do not fire for non-replaced inline elements
+FAIL test17: Box sizing snd Resize Observer notifications undefined is not an object (evaluating 'entries[0].contentBoxSize[0]')
+FAIL test18: an observation is fired when device-pixel-content-box is being observed undefined is not an object (evaluating 'entries[0].contentBoxSize[0]')
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/observe.html (264431 => 264432)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/observe.html 2020-07-15 22:28:59 UTC (rev 264431)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/observe.html 2020-07-15 22:51:55 UTC (rev 264432)
@@ -1,50 +1,50 @@
<!doctype html><!-- webkit-test-runner [ experimental:ResizeObserverEnabled=true ] -->
+<title>ResizeObserver tests</title>
<script src=""
<script src=""
<script src=""
-<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="" width="300px" height="100px" style="display:block"></iframe>
+<div id="log"></div>
<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 t = createAndAppendElement("div");
+ t.style.width = "100px";
+
let helper = new ResizeTestHelper(
"test0: simple observation",
[
{
setup: observer => {
- observer.observe(t1);
- t1.style.width = "5px";
+ observer.observe(t);
+ t.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].target, t, "target is t");
assert_equals(entries[0].contentRect.width, 5, "target width");
}
}
]);
- return helper.start();
+ return helper.start(() => t.remove());
}
function test1() {
+ let t = createAndAppendElement("div");
+ t.style.width = "100px";
+
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";
+ observer.observe(t);
+ observer.observe(t);
+ t.style.width = "10px";
},
notify: entries => {
assert_equals(entries.length, 1, "1 pending notification");
@@ -51,12 +51,12 @@
}
}
]);
- return helper.start();
+ return helper.start(() => t.remove());
}
function test2() {
test(() => {
- assert_throws({name: "TypeError"}, _=> {
+ assert_throws_js(TypeError, _=> {
let ro = new ResizeObserver(() => {});
ro.observe({});
});
@@ -67,6 +67,11 @@
}
function test3() {
+ let t1 = createAndAppendElement("div");
+ let t2 = createAndAppendElement("div");
+ t1.style.width = "100px";
+ t2.style.width = "100px";
+
let helper = new ResizeTestHelper(
"test3: disconnect stops all notifications", [
{
@@ -84,10 +89,18 @@
}
}
]);
- return helper.start();
+ return helper.start(() => {
+ t1.remove();
+ t2.remove();
+ });
}
function test4() {
+ let t1 = createAndAppendElement("div");
+ let t2 = createAndAppendElement("div");
+ t1.style.width = "100px";
+ t2.style.width = "100px";
+
let helper = new ResizeTestHelper(
"test4: unobserve target stops notifications, unobserve non-observed does nothing", [
{
@@ -105,15 +118,22 @@
}
}
]);
- return helper.start();
+ return helper.start(() => {
+ t1.remove();
+ t2.remove();
+ });
}
function test5() {
- let t3 = document.querySelector('#target3');
- var helper = new ResizeTestHelper("test5: observe img",[
+ const img = new Image();
+ img.style.width = "15px";
+ img.style.height = "15px";
+ img.src = ""
+
+ let helper = new ResizeTestHelper("test5: observe img",[
{
setup: observer => {
- observer.observe(t3);
+ observer.observe(img);
},
notify: entries => {
}
@@ -120,46 +140,68 @@
},
{
setup: observer => {
- t3.style.width = "100.5px";
+ img.style.width = "15.5px";
},
notify: entries => {
assert_equals(entries.length, 1);
- assert_equals(entries[0].contentRect.width, 100.5);
+ assert_equals(entries[0].contentRect.width, 15.5);
}
}
]);
- return helper.start();
+ return img.decode().then(() => {
+ return new Promise(resolve => {
+ requestAnimationFrame(() => {
+ document.body.appendChild(img);
+ resolve();
+ });
+ });
+ }).catch(error => {
+ assert_unreached("decode image failed");
+ }).then(() => {
+ return helper.start(() => img.remove());
+ });
}
function test6() {
- let resolvePromise;
- let promise = new Promise((resolve) => {
- resolvePromise = resolve;
+ let iframe = createAndAppendElement("iframe");
+ iframe.src = ""
+ iframe.width = "300px";
+ iframe.height = "100px";
+ iframe.style.display = "block";
+
+ return new Promise(function(resolve, reject) {
+ iframe._onload_ = () => resolve();
+ }).then(() => {
+ let resolvePromise;
+ let promise = new Promise((resolve) => {
+ resolvePromise = resolve;
+ });
+ let test = async_test('test6: iframe notifications');
+ let testRequested = false;
+ test.add_cleanup(() => iframe.remove());
+
+ 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;
});
- 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() {
@@ -181,13 +223,689 @@
});
}
);
- ro.observe(t1);
+ let t = createAndAppendElement("div");
+ t.style.width = "100px";
+ harnessTest.add_cleanup(() => t.remove());
+
+ ro.observe(t);
+
return new Promise( (resolve, reject) => {
resolvePromise = resolve;
});
}
+function test8() {
+ let t = createAndAppendElement("div");
+ t.style.width = "100px";
+ t.style.height = "100px";
+
+ let helper = new ResizeTestHelper(
+ "test8: simple content-box observation",
+ [
+ {
+ setup: observer => {
+ observer.observe(t, { box: "content-box" });
+ },
+ notify: entries => {
+ assert_equals(entries.length, 1, "1 pending notification");
+ assert_equals(entries[0].target, t, "target is t");
+ assert_equals(entries[0].contentRect.width, 100, "target width");
+ assert_equals(entries[0].contentRect.height, 100, "target height");
+ assert_equals(entries[0].contentRect.top, 0, "target top padding");
+ assert_equals(entries[0].contentRect.left, 0, "target left padding");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 100,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 100,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 100,
+ "target border-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 100,
+ "target border-box block size");
+ }
+ },
+ {
+ setup: observer => {
+ t.style.width = "90px";
+ t.style.height = "90px";
+ },
+ notify: entries => {
+ assert_equals(entries.length, 1, "1 pending notification");
+ assert_equals(entries[0].target, t, "target is t");
+ assert_equals(entries[0].contentRect.width, 90, "target width");
+ assert_equals(entries[0].contentRect.height, 90, "target height");
+ assert_equals(entries[0].contentRect.top, 0, "target top padding");
+ assert_equals(entries[0].contentRect.left, 0, "target left padding");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 90,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 90,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 90,
+ "target border-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 90,
+ "target border-box block size");
+ }
+ },
+ {
+ setup: observer => {
+ t.style.padding = "5px";
+ },
+ notify: entries => {
+ assert_unreached("the 'content-box' ResizeObserver shouldn't fire " +
+ "for restyles that don't affect the content-box size");
+ },
+ timeout: () => {
+ // expected
+ // Note: the border-box size is 100px x 100px right now.
+ }
+ }
+ ]);
+ return helper.start(() => t.remove());
+}
+
+function test9() {
+ let t = createAndAppendElement("div");
+ t.style.width = "100px";
+ t.style.height = "100px";
+
+ let helper = new ResizeTestHelper(
+ "test9: simple content-box observation but keep border-box size unchanged",
+ [
+ {
+ setup: observer => {
+ observer.observe(t, { box: "content-box" });
+ },
+ notify: entries => {
+ assert_equals(entries.length, 1, "1 pending notification");
+ assert_equals(entries[0].target, t, "target is t");
+ assert_equals(entries[0].contentRect.width, 100, "target width");
+ assert_equals(entries[0].contentRect.height, 100, "target height");
+ assert_equals(entries[0].contentRect.top, 0, "target top padding");
+ assert_equals(entries[0].contentRect.left, 0, "target left padding");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 100,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 100,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 100,
+ "target border-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 100,
+ "target border-box block size");
+ }
+ },
+ {
+ setup: observer => {
+ // Keep the border-box size the same, and change the content-box size.
+ t.style.width = "92px";
+ t.style.height = "92px";
+ t.style.padding = "4px";
+ },
+ notify: entries => {
+ assert_equals(entries.length, 1, "1 pending notification");
+ assert_equals(entries[0].target, t, "target is t");
+ assert_equals(entries[0].contentRect.width, 92, "target width");
+ assert_equals(entries[0].contentRect.height, 92, "target height");
+ assert_equals(entries[0].contentRect.top, 4, "target top padding");
+ assert_equals(entries[0].contentRect.left, 4, "target left padding");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 92,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 92,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 100,
+ "target border-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 100,
+ "target border-box block size");
+ }
+ }
+ ]);
+ return helper.start(() => t.remove());
+}
+
+function test10() {
+ let t = createAndAppendElement("div");
+ t.style.width = "100px";
+ t.style.height = "100px";
+
+ let helper = new ResizeTestHelper(
+ "test10: simple border-box observation",
+ [
+ {
+ setup: observer => {
+ observer.observe(t, { box: "border-box" });
+ },
+ notify: entries => {
+ assert_equals(entries.length, 1, "1 pending notification");
+ assert_equals(entries[0].target, t, "target is t");
+ assert_equals(entries[0].contentRect.width, 100, "target width");
+ assert_equals(entries[0].contentRect.height, 100, "target height");
+ assert_equals(entries[0].contentRect.top, 0, "target top padding");
+ assert_equals(entries[0].contentRect.left, 0, "target left padding");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 100,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 100,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 100,
+ "target border-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 100,
+ "target border-box block size");
+ }
+ },
+ {
+ setup: observer => {
+ t.style.padding = "4px";
+ },
+ notify: entries => {
+ assert_equals(entries.length, 1, "1 pending notification");
+ assert_equals(entries[0].target, t, "target is t");
+ assert_equals(entries[0].contentRect.width, 100, "target width");
+ assert_equals(entries[0].contentRect.height, 100, "target height");
+ assert_equals(entries[0].contentRect.top, 4, "target top padding");
+ assert_equals(entries[0].contentRect.left, 4, "target left padding");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 100,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 100,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 108,
+ "target border-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 108,
+ "target border-box block size");
+ }
+ },
+ {
+ setup: observer => {
+ t.style.width = "104px";
+ t.style.height = "104px";
+ t.style.padding = "2px";
+ },
+ notify: entries => {
+ assert_unreached("the 'border-box' ResizeObserver shouldn't fire " +
+ "for restyles that don't affect the border-box size");
+ },
+ timeout: () => {
+ // expected: 104 + 2 * 2 = 108. The border-box size is the same.
+ }
+ }
+ ]);
+ return helper.start(() => t.remove());
+}
+
+function test11() {
+ let wrapper = createAndAppendElement("div");
+ wrapper.style.width = "100px";
+ wrapper.style.height = "100px";
+ wrapper.style.writingMode = "vertical-rl";
+ let t = createAndAppendElement("div", wrapper);
+ t.style.inlineSize = "50px";
+ t.style.blockSize = "50px";
+
+ let helper = new ResizeTestHelper(
+ "test11: simple observation with vertical writing mode",
+ [
+ {
+ setup: observer => {
+ observer.observe(t);
+ },
+ notify: entries => {
+ assert_equals(entries.length, 1, "1 pending notification");
+ assert_equals(entries[0].target, t, "target is t");
+ assert_equals(entries[0].contentRect.width, 50, "target width");
+ assert_equals(entries[0].contentRect.height, 50, "target height");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 50,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 50,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 50,
+ "target border-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 50,
+ "target border-box block size");
+ }
+ },
+ {
+ setup: observer => {
+ t.style.blockSize = "75px";
+ },
+ notify: entries => {
+ assert_equals(entries.length, 1, "1 pending notification");
+ assert_equals(entries[0].target, t, "target is t");
+ assert_equals(entries[0].contentRect.width, 75, "target width");
+ assert_equals(entries[0].contentRect.height, 50, "target height");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 50,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 75,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 50,
+ "target border-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 75,
+ "target border-box block size");
+ }
+ }
+ ]);
+
+ return helper.start(() => {
+ t.remove();
+ wrapper.remove();
+ });
+}
+
+function test12() {
+ let t = createAndAppendElement("div");
+ t.style.writingMode = "vertical-lr";
+ t.style.inlineSize = "100px";
+ t.style.blockSize = "50px";
+
+ let helper = new ResizeTestHelper(
+ "test12: no observation is fired after the change of writing mode when " +
+ "box's specified size comes from logical size properties.",
+ [
+ {
+ setup: observer => {
+ observer.observe(t);
+ },
+ notify: entries => {
+ assert_equals(entries.length, 1, "1 pending notification");
+ assert_equals(entries[0].target, t, "target is t");
+ assert_equals(entries[0].contentRect.width, 50, "target width");
+ assert_equals(entries[0].contentRect.height, 100, "target height");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 100,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 50,
+ "target content-box block size");
+ }
+ },
+ {
+ setup: observer => {
+ t.style.writingMode = "horizontal-tb";
+ },
+ notify: entries => {
+ assert_unreached("the logical size of content-box doesn't change");
+ },
+ timeout: () => {
+ // expected: We don't change the logical size of content-box.
+ }
+ }
+ ]);
+
+ return helper.start(() => t.remove());
+}
+
+function test13() {
+ let t = createAndAppendElement("div");
+ t.style.writingMode = "vertical-lr";
+ t.style.height = "100px";
+ t.style.width = "50px";
+
+ let helper = new ResizeTestHelper(
+ "test13: an observation is fired after the change of writing mode when " +
+ "box's specified size comes from physical size properties.",
+ [
+ {
+ setup: observer => {
+ observer.observe(t);
+ },
+ notify: entries => {
+ assert_equals(entries.length, 1, "1 pending notification");
+ assert_equals(entries[0].target, t, "target is t");
+ assert_equals(entries[0].contentRect.width, 50, "target width");
+ assert_equals(entries[0].contentRect.height, 100, "target height");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 100,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 50,
+ "target content-box block size");
+ }
+ },
+ {
+ setup: observer => {
+ t.style.writingMode = "horizontal-tb";
+ },
+ notify: entries => {
+ assert_equals(entries.length, 1, "1 pending notification");
+ assert_equals(entries[0].target, t, "target is t");
+ assert_equals(entries[0].contentRect.width, 50, "target width");
+ assert_equals(entries[0].contentRect.height, 100, "target height");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 50,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 100,
+ "target content-box block size");
+ },
+ }
+ ]);
+
+ return helper.start(() => t.remove());
+}
+
+function test14() {
+ let t = createAndAppendElement("div");
+ t.style.width = "100px";
+ t.style.height = "100px";
+
+ let helper = new ResizeTestHelper(
+ "test14: observe the same target but using a different box should " +
+ "override the previous one",
+ [
+ {
+ setup: observer => {
+ observer.observe(t, { box: "content-box" });
+ observer.observe(t, { box: "border-box" });
+ },
+ notify: entries => {
+ assert_equals(entries.length, 1, "1 pending notification");
+ assert_equals(entries[0].target, t, "target is t");
+ assert_equals(entries[0].contentRect.width, 100, "target width");
+ assert_equals(entries[0].contentRect.height, 100, "target height");
+ assert_equals(entries[0].contentRect.top, 0, "target top padding");
+ assert_equals(entries[0].contentRect.left, 0, "target left padding");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 100,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 100,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 100,
+ "target border-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 100,
+ "target border-box block size");
+ }
+ },
+ {
+ setup: observer => {
+ // Change border-box size.
+ t.style.padding = "4px";
+ },
+ notify: entries => {
+ assert_equals(entries.length, 1, "1 pending notification");
+ assert_equals(entries[0].target, t, "target is t");
+ assert_equals(entries[0].contentRect.width, 100, "target width");
+ assert_equals(entries[0].contentRect.height, 100, "target height");
+ assert_equals(entries[0].contentRect.top, 4, "target top padding");
+ assert_equals(entries[0].contentRect.left, 4, "target left padding");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 100,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 100,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 108,
+ "target border-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 108,
+ "target border-box block size");
+ }
+ },
+ {
+ setup: observer => {
+ // Change only content-box size.
+ t.style.width = "104px";
+ t.style.height = "104px";
+ t.style.padding = "2px";
+ },
+ notify: entries => {
+ assert_unreached("the 'border-box' ResizeObserver shouldn't fire " +
+ "for restyles that don't affect the border-box size");
+ },
+ timeout: () => {
+ // expected: 104 + 2 * 2 = 108. The border-box size is the same.
+ }
+ }
+ ]);
+ return helper.start(() => t.remove());
+}
+
+function test15() {
+ let t = createAndAppendElement("div");
+ t.style.height = "100px";
+ t.style.width = "50px";
+
+ let helper = new ResizeTestHelper(
+ "test15: an observation is fired with box dimensions 0 when element's " +
+ "display property is set to inline",
+ [
+ {
+ setup: observer => {
+ observer.observe(t);
+ },
+ notify: entries => {
+ assert_equals(entries.length, 1, "1 pending notification");
+ assert_equals(entries[0].target, t, "target is t");
+ assert_equals(entries[0].contentRect.width, 50, "target width");
+ assert_equals(entries[0].contentRect.height, 100, "target height");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 50,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 100,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 50,
+ "target content-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 100,
+ "target content-box block size");
+ }
+ },
+ {
+ setup: observer => {
+ t.style.display = "inline";
+ },
+ notify: entries => {
+ assert_equals(entries[0].contentRect.width, 0, "target width");
+ assert_equals(entries[0].contentRect.height, 0, "target height");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 0,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 0,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 0,
+ "target border-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 0,
+ "target border-box block size");
+ }
+ }
+ ]);
+
+ return helper.start(() => t.remove());
+}
+
+function test16() {
+ let t = createAndAppendElement("span");
+
+ let helper = new ResizeTestHelper(
+ // See: https://drafts.csswg.org/resize-observer/#intro.
+ "test16: observations do not fire for non-replaced inline elements",
+ [
+ {
+ setup: observer => {
+ observer.observe(t);
+ },
+ notify: entries => {
+ assert_unreached("No observation should fire for non box element")
+ },
+ timeout: () => {}
+ }
+ ]);
+
+ return helper.start(() => t.remove());
+
+}
+
+function test17() {
+ // <div id="outer">
+ // <div id="nested">
+ // </div>
+ // </div>
+
+ let outer = document.createElement('div');
+ outer.style.width = "100px";
+ outer.style.height = "100px";
+ outer.style.padding = "10px";
+ outer.style.border = "1px solid blue"
+ let nested = document.createElement('div');
+ nested.style.width = "60px";
+ nested.style.height = "50px";
+ nested.style.padding = "5%";
+ nested.style.boxSizing = "border-box";
+ nested.style.border = "5px solid black";
+ outer.appendChild(nested);
+ document.body.appendChild(outer);
+
+ let helper = new ResizeTestHelper(
+ "test17: Box sizing snd Resize Observer notifications",
+ [
+ {
+ setup: observer => {
+ observer.observe(nested, { box: "content-box" });
+ },
+ notify: entries => {
+ assert_equals(entries.length, 1, "1 pending notification");
+ assert_equals(entries[0].target, nested, "target is nested");
+ assert_equals(entries[0].contentRect.width, 40, "target width");
+ assert_equals(entries[0].contentRect.height, 30, "target height");
+ assert_equals(entries[0].contentRect.top, 5, "target top padding");
+ assert_equals(entries[0].contentRect.left, 5, "target left padding");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 40,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 30,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 60,
+ "target border-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 50,
+ "target border-box block size");
+ }
+ },
+ {
+ // Changes to a parent's dimensions with a child's padding set as a percentage
+ // should fire observation if content-box is being observed
+ setup: observer => {
+ outer.style.height = "200px";
+ outer.style.width = "200px";
+ },
+ notify: entries => {
+ assert_equals(entries.length, 1, "1 pending notification");
+ assert_equals(entries[0].target, nested, "target is nested");
+ assert_equals(entries[0].contentRect.width, 30, "target width");
+ assert_equals(entries[0].contentRect.height, 20, "target height");
+ assert_equals(entries[0].contentRect.top, 10, "target top padding");
+ assert_equals(entries[0].contentRect.left, 10, "target left padding");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 30,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 20,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 60,
+ "target border-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 50,
+ "target border-box block size");
+ }
+ },
+ {
+ // Changes to a parent's dimensions with a child's padding set as a percentage
+ // should fire observation if content-box is being observed
+ setup: observer => {
+ nested.style.border = "1px solid black";
+ },
+ notify: entries => {
+ assert_equals(entries.length, 1, "1 pending notification");
+ assert_equals(entries[0].target, nested, "target is nested");
+ assert_equals(entries[0].contentRect.width, 38, "target width");
+ assert_equals(entries[0].contentRect.height, 28, "target height");
+ assert_equals(entries[0].contentRect.top, 10, "target top padding");
+ assert_equals(entries[0].contentRect.left, 10, "target left padding");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 38,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 28,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 60,
+ "target border-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 50,
+ "target border-box block size");
+ }
+ },
+ {
+ setup: observer => {
+ observer.observe(nested, { box: "border-box" });
+ },
+ notify: entries => {
+ assert_equals(entries.length, 1, "1 pending notification");
+ assert_equals(entries[0].target, nested, "target is nested");
+ assert_equals(entries[0].contentRect.width, 38, "target width");
+ assert_equals(entries[0].contentRect.height, 28, "target height");
+ assert_equals(entries[0].contentRect.top, 10, "target top padding");
+ assert_equals(entries[0].contentRect.left, 10, "target left padding");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 38,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 28,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 60,
+ "target border-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 50,
+ "target border-box block size");
+ }
+ },
+ {
+ // Changes to a parent's dimensions with a child's padding set as a percentage
+ // should not fire observation if border-box is being observed
+ setup: observer => {
+ outer.style.height = "100px";
+ },
+ notify: entries => {
+ assert_unreached("No observation should be fired when nested border box remains constant");
+ },
+ timeout: () => {
+ // expected
+ }
+ },
+
+ ]);
+ return helper.start(() => nested.remove());
+}
+
+function test18() {
+ let t = createAndAppendElement("div");
+ t.style.height = "100px";
+ t.style.width = "50px";
+
+ let helper = new ResizeTestHelper(
+ "test18: an observation is fired when device-pixel-content-box is being " +
+ "observed",
+ [
+ {
+ setup: observer => {
+ observer.observe(t, {box: "device-pixel-content-box"});
+ },
+ notify: entries => {
+ assert_equals(entries.length, 1, "1 pending notification");
+ assert_equals(entries[0].target, t, "target is t");
+ assert_equals(entries[0].contentRect.width, 50, "target width");
+ assert_equals(entries[0].contentRect.height, 100, "target height");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 50,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 100,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 50,
+ "target border-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 100,
+ "target border-box block size");
+ assert_equals(entries[0].devicePixelContentBoxSize[0].inlineSize, 50,
+ "target device-pixel-content-box inline size");
+ assert_equals(entries[0].devicePixelContentBoxSize[0].blockSize, 100,
+ "target device-pixel-content-box block size");
+ }
+ },
+ {
+ setup: observer => {
+ document.body.style.zoom = 3;
+ },
+ notify: entries => {
+ assert_equals(entries.length, 1, "1 pending notification");
+ assert_equals(entries[0].target, t, "target is t");
+ assert_equals(entries[0].contentRect.width, 50, "target width");
+ assert_equals(entries[0].contentRect.height, 100, "target height");
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 50,
+ "target content-box inline size");
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 100,
+ "target content-box block size");
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 50,
+ "target border-box inline size");
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 100,
+ "target border-box block size");
+ assert_equals(entries[0].devicePixelContentBoxSize[0].inlineSize, 150,
+ "target device-pixel-content-box inline size");
+ assert_equals(entries[0].devicePixelContentBoxSize[0].blockSize, 300,
+ "target device-pixel-content-box block size");
+ }
+ }
+ ]);
+
+ return helper.start(() => t.remove());
+}
+
let guard;
test(_ => {
assert_own_property(window, "ResizeObserver");
@@ -195,13 +913,24 @@
}, "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(); });
+ .then(() => test1())
+ .then(() => test2())
+ .then(() => test3())
+ .then(() => test4())
+ .then(() => test5())
+ .then(() => test6())
+ .then(() => test7())
+ .then(() => test8())
+ .then(() => test9())
+ .then(() => test10())
+ .then(() => test11())
+ .then(() => test12())
+ .then(() => test13())
+ .then(() => test14())
+ .then(() => test15())
+ .then(() => test16())
+ .then(() => test17())
+ .then(() => test18())
+ .then(() => guard.done());
</script>
Added: trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/resources/image.png
(Binary files differ)
Added: svn:mime-type
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/resources/resizeTestHelper.js (264431 => 264432)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/resources/resizeTestHelper.js 2020-07-15 22:28:59 UTC (rev 264431)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/resources/resizeTestHelper.js 2020-07-15 22:51:55 UTC (rev 264432)
@@ -9,7 +9,7 @@
Features:
- can queue multiple notification steps in a test
- handles timeouts
- - returns Promise that is fullfilled when test completes.
+ - returns Promise that is fulfilled when test completes.
Use to chain tests (since parallel async ResizeObserver tests
would conflict if reusing same DOM elements).
@@ -52,7 +52,7 @@
this._nextStepBind = this._nextStep.bind(this);
}
-ResizeTestHelper.TIMEOUT = 1000;
+ResizeTestHelper.TIMEOUT = 100;
ResizeTestHelper.prototype = {
get _currentStep() {
@@ -80,11 +80,20 @@
delete this._timeoutId;
}
this._harnessTest.step(() => {
- let rafDelay = this._currentStep.notify(entries, this._observer);
- if (rafDelay)
- window.requestAnimationFrame(this._nextStepBind);
- else
- this._nextStep();
+ try {
+ let rafDelay = this._currentStep.notify(entries, this._observer);
+ if (rafDelay)
+ window.requestAnimationFrame(this._nextStepBind);
+ else
+ this._nextStep();
+ }
+ catch(err) {
+ this._harnessTest.step(() => {
+ throw err;
+ });
+ // Force to _done() the current test.
+ this._done();
+ }
});
},
@@ -95,7 +104,9 @@
this._currentStep.timeout();
}
else {
- assert_unreached("Timed out waiting for notification. (" + ResizeTestHelper.TIMEOUT + "ms)");
+ this._harnessTest.step(() => {
+ assert_unreached("Timed out waiting for notification. (" + ResizeTestHelper.TIMEOUT + "ms)");
+ });
}
this._nextStep();
});
@@ -112,8 +123,13 @@
window.requestAnimationFrame(() => { this._resolvePromise(); });
},
- start: function() {
+ start: function(cleanup) {
this._harnessTest = async_test(this._name);
+
+ if (cleanup) {
+ this._harnessTest.add_cleanup(cleanup);
+ }
+
this._harnessTest.step(() => {
assert_equals(this._stepIdx, -1, "start can only be called once");
this._nextStep();
@@ -130,6 +146,13 @@
return this._rafCount;
},
+ get test() {
+ if (!this._harnessTest) {
+ throw "_harnessTest is not initialized";
+ }
+ return this._harnessTest;
+ },
+
_incrementRaf: function() {
if (this._rafCountRequest) {
this._rafCount++;
@@ -146,3 +169,12 @@
this._rafCountRequest = window.requestAnimationFrame(this._incrementRafBind);
}
}
+
+function createAndAppendElement(tagName, parent) {
+ if (!parent) {
+ parent = document.body;
+ }
+ const element = document.createElement(tagName);
+ parent.appendChild(element);
+ return element;
+}
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/resources/w3c-import.log (264431 => 264432)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/resources/w3c-import.log 2020-07-15 22:28:59 UTC (rev 264431)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/resources/w3c-import.log 2020-07-15 22:51:55 UTC (rev 264432)
@@ -15,4 +15,5 @@
------------------------------------------------------------------------
List of files:
/LayoutTests/imported/w3c/web-platform-tests/resize-observer/resources/iframe.html
+/LayoutTests/imported/w3c/web-platform-tests/resize-observer/resources/image.png
/LayoutTests/imported/w3c/web-platform-tests/resize-observer/resources/resizeTestHelper.js
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/svg-expected.txt (264431 => 264432)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/svg-expected.txt 2020-07-15 22:28:59 UTC (rev 264431)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/svg-expected.txt 2020-07-15 22:51:55 UTC (rev 264432)
@@ -12,9 +12,15 @@
PASS test3: observe svg:image
PASS test4: observe svg:line
PASS test5: observe svg:path
-PASS test6: observe svg:path
+PASS test6: observe svg:polygon
PASS test7: observe svg:polyline
PASS test8: observe svg:rect
PASS test9: observe svg:text
PASS test10: observe svg:svg, top/left is 0 even with padding
+PASS test11: observe svg non-displayable element
+FAIL test12: observe svg:rect content box undefined is not an object (evaluating 'entries[0].contentBoxSize[0]')
+FAIL test13: observe svg:rect border box undefined is not an object (evaluating 'entries[0].contentBoxSize[0]')
+FAIL test14: observe g:rect content and border box undefined is not an object (evaluating 'entries[0].contentBoxSize[0]')
+FAIL test15: observe svg:text content and border box assert_equals: expected 30 but got 30.015625
+FAIL test16: observe g:rect content, border and device-pixel-content boxes undefined is not an object (evaluating 'entries[0].contentBoxSize[0]')
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/svg.html (264431 => 264432)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/svg.html 2020-07-15 22:28:59 UTC (rev 264431)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/svg.html 2020-07-15 22:51:55 UTC (rev 264432)
@@ -10,7 +10,7 @@
<body>
<p>Here is a paragraph that requires word wrap</p>
</body>
- </foreignObject>
+ </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"
@@ -18,7 +18,10 @@
<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>
+ <text x="0" y="400" font-size="20" font-family="Ahem">svg text tag</text>
+ <g fill="white" stroke="green" stroke-width="5">
+ <rect x="0" y="380" width="50" height="20" id="g_rect" />
+ </g>
</svg>
<script>
'use strict';
@@ -188,7 +191,7 @@
function test6() {
let target = document.querySelector('polygon');
let helper = new ResizeTestHelper(
- "test6: observe svg:path",
+ "test6: observe svg:polygon",
[
{
setup: observer => {
@@ -311,6 +314,250 @@
return helper.start();
}
+function test11() {
+ // <svg>
+ // <view></view>
+ // <defs>
+ // <linearGradient>
+ // <stop></stop>
+ // </linearGradient>
+ // </defs>
+ // </svg>
+ const svgNS = "http://www.w3.org/2000/svg";
+ let svg = document.createElementNS(svgNS, 'svg');
+ document.body.appendChild(svg);
+
+ let view = document.createElementNS(svgNS, 'view');
+ svg.appendChild(view);
+
+ let defs = document.createElementNS(svgNS, 'defs');
+ let linearGradient = document.createElementNS(svgNS, 'linearGradient');
+ let stop = document.createElementNS(svgNS, 'stop');
+ linearGradient.appendChild(stop);
+ defs.appendChild(linearGradient);
+ svg.appendChild(defs);
+
+ let helper = new ResizeTestHelper(
+ "test11: observe svg non-displayable element",
+ [
+ {
+ setup: observer => {
+ observer.observe(view);
+ },
+ notify: (entries, observer) => {
+ assert_unreached("no entries should be observed on <view> Element");
+ },
+ timeout: () => {
+ // expected
+ }
+ },
+ {
+ setup: observer => {
+ observer.observe(stop);
+ },
+ notify: (entries, observer) => {
+ assert_unreached("no entries should be observed on <stop> Element");
+ },
+ timeout: () => {
+ // expected
+ }
+ },
+ ]);
+ return helper.start(() => svg.remove());
+}
+
+function test12() {
+ let target = document.querySelector('rect');
+ let helper = new ResizeTestHelper(
+ "test12: observe svg:rect content box",
+ [
+ {
+ setup: observer => {
+ observer.observe(target);
+ },
+ notify: (entries, observer) => {
+ return true; // Delay next step
+ }
+ },
+ {
+ setup: observer => {
+ target.setAttribute('width', 45);
+ },
+ notify: (entries, observer) => {
+ assert_equals(entries.length, 1);
+ assert_equals(entries[0].contentRect.width, 45);
+ assert_equals(entries[0].contentRect.height, 10);
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 45);
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 10);
+ }
+ }
+ ]);
+ return helper.start();
+}
+
+function test13() {
+ let target = document.querySelector('rect');
+ let helper = new ResizeTestHelper(
+ "test13: observe svg:rect border box",
+ [
+ {
+ setup: observer => {
+ observer.observe(target);
+ },
+ notify: (entries, observer) => {
+ return true; // Delay next step
+ }
+ },
+ {
+ setup: observer => {
+ target.setAttribute('width', 20);
+ target.setAttribute('height', 20);
+ },
+ notify: (entries, observer) => {
+ assert_equals(entries.length, 1);
+ assert_equals(entries[0].contentRect.width, 20);
+ assert_equals(entries[0].contentRect.height, 20);
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 20);
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 20);
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 20);
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 20);
+ }
+ }
+ ]);
+ return helper.start();
+}
+
+function test14() {
+ let target = document.querySelector('#g_rect');
+ let helper = new ResizeTestHelper(
+ "test14: observe g:rect content and border box",
+ [
+ {
+ setup: observer => {
+ observer.observe(target);
+ },
+ notify: (entries, observer) => {
+ assert_equals(entries.length, 1);
+ assert_equals(entries[0].contentRect.width, 50);
+ assert_equals(entries[0].contentRect.height, 20);
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 50);
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 20);
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 50);
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 20);
+ return true; // Delay next step
+ }
+ },
+ {
+ setup: observer => {
+ target.setAttribute('width', 15);
+ },
+ notify: (entries, observer) => {
+ assert_equals(entries.length, 1);
+ assert_equals(entries[0].contentRect.width, 15);
+ assert_equals(entries[0].contentRect.height, 20);
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 15);
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 20);
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 15);
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 20);
+ }
+ }
+ ]);
+ return helper.start();
+}
+
+function test15() {
+ let target = document.querySelector('text');
+ let helper = new ResizeTestHelper(
+ "test15: observe svg:text content and border box",
+ [
+ {
+ setup: observer => {
+ observer.observe(target);
+ },
+ notify: (entries, observer) => {
+ return true; // Delay next step
+ }
+ },
+ {
+ setup: observer => {
+ target.setAttribute('font-size', "30");
+ },
+ notify: (entries, observer) => {
+ assert_equals(entries.length, 1);
+ assert_equals(entries[0].contentRect.width, 360);
+ assert_equals(entries[0].contentRect.height, 30);
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 360);
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 30);
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 360);
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 30);
+ }
+ }
+ ]);
+ return helper.start();
+}
+
+function test16() {
+ let target = document.querySelector('#g_rect');
+ let helper = new ResizeTestHelper(
+ "test16: observe g:rect content, border and device-pixel-content boxes",
+ [
+ {
+ setup: observer => {
+ observer.observe(target, {box: "device-pixel-content-box"});
+ target.setAttribute('width', 50);
+ document.body.style.zoom = 0.1;
+ },
+ notify: (entries, observer) => {
+ assert_equals(entries.length, 1);
+ assert_equals(entries[0].contentRect.width, 50);
+ assert_equals(entries[0].contentRect.height, 20);
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 50);
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 20);
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 50);
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 20);
+ assert_equals(entries[0].devicePixelContentBoxSize[0].inlineSize, 5);
+ assert_equals(entries[0].devicePixelContentBoxSize[0].blockSize, 2);
+ return true; // Delay next step
+ }
+ },
+ {
+ setup: observer => {
+ observer.observe(target, {box: "device-pixel-content-box"});
+ target.setAttribute('height', 30);
+ },
+ notify: (entries, observer) => {
+ assert_equals(entries.length, 1);
+ assert_equals(entries[0].contentRect.width, 50);
+ assert_equals(entries[0].contentRect.height, 30);
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 50);
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 30);
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 50);
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 30);
+ assert_equals(entries[0].devicePixelContentBoxSize[0].inlineSize, 5);
+ assert_equals(entries[0].devicePixelContentBoxSize[0].blockSize, 3);
+ return true; // Delay next step
+ }
+ },
+ {
+ setup: observer => {
+ document.body.style.zoom = 10;
+ },
+ notify: (entries, observer) => {
+ assert_equals(entries.length, 1);
+ assert_equals(entries[0].contentRect.width, 50);
+ assert_equals(entries[0].contentRect.height, 30);
+ assert_equals(entries[0].contentBoxSize[0].inlineSize, 50);
+ assert_equals(entries[0].contentBoxSize[0].blockSize, 30);
+ assert_equals(entries[0].borderBoxSize[0].inlineSize, 50);
+ assert_equals(entries[0].borderBoxSize[0].blockSize, 30);
+ assert_equals(entries[0].devicePixelContentBoxSize[0].inlineSize, 500);
+ assert_equals(entries[0].devicePixelContentBoxSize[0].blockSize, 300);
+ },
+ }
+ ]);
+ return helper.start();
+}
+
let guard;
test(_ => {
assert_own_property(window, "ResizeObserver");
@@ -328,6 +575,12 @@
.then(() => { return test8(); })
.then(() => { return test9(); })
.then(() => { return test10(); })
+ .then(() => { return test11(); })
+ .then(() => { return test12(); })
+ .then(() => { return test13(); })
+ .then(() => { return test14(); })
+ .then(() => { return test15(); })
+ .then(() => { return test16(); })
.then(() => { guard.done(); });
</script>
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/w3c-import.log (264431 => 264432)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/w3c-import.log 2020-07-15 22:28:59 UTC (rev 264431)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/resize-observer/w3c-import.log 2020-07-15 22:51:55 UTC (rev 264432)
@@ -15,6 +15,9 @@
------------------------------------------------------------------------
List of files:
/LayoutTests/imported/w3c/web-platform-tests/resize-observer/META.yml
+/LayoutTests/imported/w3c/web-platform-tests/resize-observer/change-layout-in-error.html
+/LayoutTests/imported/w3c/web-platform-tests/resize-observer/devicepixel-expected.html
+/LayoutTests/imported/w3c/web-platform-tests/resize-observer/devicepixel.html
/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
Added: trunk/LayoutTests/platform/mac-wk1/imported/w3c/web-platform-tests/resize-observer/change-layout-in-error-expected.txt (0 => 264432)
--- trunk/LayoutTests/platform/mac-wk1/imported/w3c/web-platform-tests/resize-observer/change-layout-in-error-expected.txt (rev 0)
+++ trunk/LayoutTests/platform/mac-wk1/imported/w3c/web-platform-tests/resize-observer/change-layout-in-error-expected.txt 2020-07-15 22:51:55 UTC (rev 264432)
@@ -0,0 +1,3 @@
+
+FAIL Changing layout in window error handler should not result in lifecyle loop when resize observer loop limit is reached. Can't find variable: ResizeObserver
+
_______________________________________________ webkit-changes mailing list webkit-changes@lists.webkit.org https://lists.webkit.org/mailman/listinfo/webkit-changes
