Blitz - WPT: single-axis-overflow-clip-rtl.html

wpt / css / css-overflow / single-axis-overflow-clip-rtl.html

/css/css-overflow/single-axis-overflow-clip-rtl.html

<!doctype html>
<meta charset="utf-8">
<title>Single-axis scroll containers: Clipped X Rendering RTL</title>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5572">
<link rel="match" href="single-axis-overflow-clip-rtl-ref.html">
<style>
  #scroller {
    width: 100px;
    height: 100px;
    direction: rtl;
    overflow-x: clip; /* Test subject */
    overflow-y: hidden;
  }
  #content {
    width: 300px;
    height: 300px;
    background: linear-gradient(to right, lightcoral, lightblue);
    color: black;
    font-family: sans-serif;
    font-size: 20px;
  }
</style>
<div id="scroller">
  <div id="content">RTL gradient and text</div>
</div>

/css/css-overflow/single-axis-overflow-clip-rtl-ref.html

<!doctype html>
<meta charset="utf-8">
<title>Single-axis scroll containers: Clipped X Rendering RTL (Reference)</title>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5572">
<style>
  #scroller {
    width: 100px;
    height: 100px;
    direction: rtl;
    overflow-x: hidden; /* Reference standard */
    overflow-y: scroll;
    scrollbar-width: none;
  }
  #content {
    width: 300px;
    height: 300px;
    background: linear-gradient(to right, lightcoral, lightblue);
    color: black;
    font-family: sans-serif;
    font-size: 20px;
  }
</style>
<div id="scroller">
  <div id="content">RTL gradient and text</div>
</div>