display-math-on-pseudo-elements-001.html (1268B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>display: math and inline-math on pseudo elements compute to flow</title> 4 <link rel="help" href="https://drafts.csswg.org/css-display/#the-display-properties"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 .inline::before { content: 'math'; display: math; } 9 .inline::after { content: 'math'; display: math; } 10 .block::before { content: 'math'; display: block math; } 11 .block::after { content: 'math'; display: block math; } 12 </style> 13 <div> 14 <div class="block"></div> 15 <math class="block"></math> 16 <math><mrow class="block"></mrow></math> 17 <div class="inline"></div> 18 <math class="inline"></math> 19 <math><mrow class="inline"></mrow></math> 20 </div> 21 <script> 22 Array.from(document.querySelectorAll('[class]')).forEach(element => { 23 test(function() { 24 assert_equals(window.getComputedStyle(element, "::before").display, 25 element.getAttribute('class')); 26 assert_equals(window.getComputedStyle(element, "::after").display, 27 element.getAttribute('class')); 28 }, `computed display on ::before and ::after for <${element.localName} class="${element.className}">`); 29 }); 30 </script>