Update web-platform-tests to revision d3cf77a7b8c20c678b725238eaa8a72eca3787ae

2025-08-16 02:45:36 +01:00 · 2019-04-25 22:18:37 -04:00 · 2019-04-25 22:18:37 -04:00 · efca990ffe
commit efca990ffe
parent 880f3b8b7a
541 changed files with 8000 additions and 2276 deletions
--- a/tests/wpt/web-platform-tests/css/css-transitions/non-rendered-element-002.html
+++ b/tests/wpt/web-platform-tests/css/css-transitions/non-rendered-element-002.html
@ -0,0 +1,90 @@
+<!doctype html>
+<html>
+<head>
+<meta charset=utf-8>
+<title>CSS Transitions Test: Transitions do not run for a pseudo-element that is not being rendered</title>
+<link rel="help" title="Starting transitions"
+  href="https://drafts.csswg.org/css-transitions/#starting">
+
+<script src="/resources/testharness.js" type="text/javascript"></script>
+<script src="/resources/testharnessreport.js" type="text/javascript"></script>
+<script src="./support/helper.js" type="text/javascript"></script>
+
+</head>
+<body>
+<div id="log"></div>
+
+<script>
+
+promise_test(async t => {
+  for (const pseudoType of ['before', 'after']) {
+    const style = addStyle(t, {
+      [`.init::${pseudoType}`]: 'content: ""; width: 0px; transition: width 100s;',
+      [`.change::${pseudoType}`]: 'width: 100px;',
+      [`.cancel::${pseudoType}`]: 'content: none',
+    });
+
+    // Create element (and pseudo-element) and attach event listeners
+    const div = addDiv(t);
+    div.classList.add('init');
+
+    const eventWatcher = new EventWatcher(t, div, [
+      'transitionrun',
+      'transitioncancel',
+    ]);
+
+    // Trigger transition
+    getComputedStyle(div).width;
+    div.classList.add('change');
+    getComputedStyle(div).width;
+
+    await eventWatcher.wait_for('transitionrun');
+
+    // Make the pseudo-element no longer rendered
+    div.classList.add('cancel');
+
+    await eventWatcher.wait_for('transitioncancel');
+
+    div.remove();
+    style.remove();
+  }
+}, 'Transitions on ::before/::after pseudo-elements are canceled when the'
+   + ' content property is cleared');
+
+promise_test(async t => {
+  if (!CSS.supports('selector(::marker)')) {
+    return;
+  }
+
+  addStyle(t, {
+    '.init::marker': 'content: ""; color: red; transition: color 100s;',
+    '.change::marker': 'color: green',
+  });
+
+  // Create element (and pseudo-element) and attach event listeners
+  const div = addDiv(t, { 'style': 'display: list-item' });
+  div.classList.add('init');
+
+  const eventWatcher = new EventWatcher(t, div, [
+    'transitionrun',
+    'transitioncancel',
+  ]);
+
+  // Trigger transition
+  getComputedStyle(div).color;
+  div.classList.add('change');
+  getComputedStyle(div).color;
+
+  await eventWatcher.wait_for('transitionrun');
+
+  // Make the parent element no longer display: list-item so that the pseudo
+  // element no longer renders
+  div.style.display = 'block';
+
+  await eventWatcher.wait_for('transitioncancel');
+}, 'Transitions on ::marker pseudo-elements are canceled when the'
+   + ' parent display type is no longer list-item');
+</script>
+
+</body>
+</html>