<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Test for https://bugs.webkit.org/show_bug.cgi?id=209822: Background color of selected text is painted correctly for the direct children of a `display: flex` div</title>
  <link rel="author" title="Tyler Wilcock" href="mailto:twilco.o@protonmail.com"/>
  <meta name="assert" content="Background color of selected text is green" />
  <script type="text/javascript">
   function selectTarget() {
     let target = document.getElementById("target");
     getSelection().setBaseAndExtent(target, 0, target, 1);
   };
  </script>
  <style type="text/css">
   #target {
    display: flex;
   }
   #target::selection {
    background: green !important;
   }
  </style>
 </head>
 <body onload="selectTarget();">
  <div id="target">
   Test for https://bugs.webkit.org/show_bug.cgi?id=209822 -- should have green background when selected
  </div>
 </body>
</html>
