Blitz - WPT: outside-marker-covered-by-relpos-block-link.html

wpt / css / css-lists / outside-marker-covered-by-relpos-block-link.html

/css/css-lists/outside-marker-covered-by-relpos-block-link.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Lists: outside marker covered by relatively positioned block link</title>
<link rel="author" title="CGQAQ" href="mailto:cgqaq@chromium.org">
<link rel="help" href="https://www.w3.org/TR/CSS22/generate.html#lists">
<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=18289">
<link rel="match" href="outside-marker-covered-by-relpos-block-link-ref.html">
<meta name="assert" content="An outside list marker must not remain visibly painted when a relatively positioned display:block link extends into the marker area and paints over it.">
<style>
body {
  background: white;
  font: 16px/1.4 sans-serif;
}

ul {
  list-style-position: outside;
  padding-inline-start: 40px;
}

.LinkContainer {
  width: 290px;
}

.faqviewmore {
    background-color: #efefef;
    display: block;
    left: -22px;
    padding-left: 22px;
    position: relative;
}
</style>

<div class="LinkContainer">
  <ul>
    <li><a href="#">Why doesn't my map print?</a></li>
    <li><a class="faqviewmore" href="#">View more questions</a></li>
  </ul>
</div>

/css/css-lists/outside-marker-covered-by-relpos-block-link-ref.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reference: outside marker covered by relatively positioned block link</title>
<link rel="author" title="Jason Leo" href="mailto:m.jason.liu@outlook.com">
<style>
body {
  background: white;
  font: 16px/1.4 sans-serif;
}

ul {
  list-style-position: outside;
  padding-inline-start: 40px;
}

.hide-marker::marker {
  color: transparent;
}

.LinkContainer {
  width: 290px;
}

.faqviewmore {
    background-color: #efefef;
    display: block;
    left: -22px;
    padding-left: 22px;
    position: relative;
}
</style>

<div class="LinkContainer">
  <ul>
    <li><a href="#">Why doesn't my map print?</a></li>
    <li class="hide-marker"><a class="faqviewmore" href="#">View more questions</a></li>
  </ul>
</div>