table-caption.html (1033B)
1 <!doctype html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>View Transitions: Table with captions</title> 5 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 6 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1985924"> 7 <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> 8 <link rel="author" href="https://mozilla.org" title="Mozilla"> 9 <link rel="match" href="table-caption-ref.html"> 10 <style> 11 table { 12 view-transition-name: table; 13 } 14 15 :root::view-transition-group(root) { 16 opacity: 0; 17 } 18 19 :root::view-transition-group(*) { 20 animation-play-state: paused; 21 } 22 23 :root::view-transition { 24 background: pink; 25 } 26 </style> 27 <table> 28 <caption>Caption</caption> 29 <tr> 30 <td>Some row</td> 31 </tr> 32 </table> 33 <script> 34 onload = () => { 35 requestAnimationFrame(() => { 36 requestAnimationFrame(() => { 37 document.startViewTransition().ready.then(() => { 38 document.documentElement.classList = ""; 39 }); 40 }) 41 }); 42 } 43 </script>