bug1663475-2.html (955B)
1 <!doctype html> 2 <html class="reftest-wait"> 3 <title>Caret is correctly painted over inline with clip</title> 4 <script src="/tests/SimpleTest/SimpleTest.js"></script> 5 <script src="/tests/SimpleTest/EventUtils.js"></script> 6 <style> 7 span[contenteditable] { 8 font: 16px/1 monospace; 9 caret-color: black; 10 display: inline-block; 11 } 12 span[contenteditable]:focus { 13 outline: 2px solid blue; 14 } 15 span > span { 16 /* This should only leave the "c" letter visible, but the caret should 17 still be visible when between "a" and "b" */ 18 clip-path: inset(0 2ch); 19 } 20 </style> 21 <span contenteditable spellcheck="false"> 22 <span>abcde</span> 23 </span> 24 <script> 25 SimpleTest.waitForFocus(function() { 26 document.querySelector('[contenteditable]').focus(); 27 requestAnimationFrame(function() { 28 // Position the caret between "a" and "b". 29 synthesizeKey("KEY_ArrowRight"); 30 document.documentElement.removeAttribute("class"); 31 }); 32 }); 33 </script>