test_unstyled.html (1600B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="../testcommon.js"></script> 6 <style> 7 div.pseudo::before { 8 animation: animation 1s; 9 content: 'content'; 10 } 11 @keyframes animation { 12 to { opacity: 0 } 13 } 14 </style> 15 <body> 16 <div id="log"></div> 17 <script> 18 'use strict'; 19 20 // Tests for cases where we may not have style data for an element 21 22 promise_test(async t => { 23 // Get a CSSPseudoElement 24 const div = addDiv(t, { class: 'pseudo' }); 25 const cssAnim = document.getAnimations()[0]; 26 const pseudoElem = cssAnim.effect.target; 27 28 // Drop pseudo from styles and flush styles 29 div.classList.remove('pseudo'); 30 getComputedStyle(div, '::before').content; 31 32 // Try animating the pseudo's content attribute 33 const contentAnim = pseudoElem.animate( 34 { content: ['none', '"content"'] }, 35 { duration: 100 * MS_PER_SEC, fill: 'both' } 36 ); 37 38 // Check that the initial value is as expected 39 await contentAnim.ready; 40 assert_equals(getComputedStyle(div, '::before').content, 'none'); 41 42 contentAnim.finish(); 43 44 // Animating an obsolete pseudo element should NOT cause the pseudo element 45 // to be re-generated. That behavior might change in which case this test 46 // will need to be updated. The most important part of this test, however, 47 // is simply checking that nothing explodes if we try to animate such a 48 // pseudo element. 49 50 assert_equals(getComputedStyle(div, '::before').content, 'none'); 51 }, 'Animation on an obsolete pseudo element produces expected results'); 52 53 </script> 54 </body>