text-decoration-inset-011.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-text-decor/text-decoration-inset-011.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Text Decoration 4: text-decoration-inset</title>

<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-inset-property">

<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">

<link rel="match" href="reference/text-decoration-inset-011-ref.html">

<style>

body {

  background: white;

  color: black;

  font-family: times new roman, serif;

div {

  position: relative;

  margin-left: 10px;

h1 {

  position: absolute;

  line-height: 2;

  width: 10em;

u.a {

  text-decoration-color: blue;

  text-underline-offset: 20px;

  text-decoration-inset: 10px;

u.b {

  text-decoration-color: green;

  text-underline-offset: 20px;

  text-decoration-inset: 10px -10px;

</style>

<p>The underline of the first phrase should be trimmed by 10px at both ends;

the underline of the second should be offset by 10px to the left at both start and end:</p>

<div lang="ar">

  <h1 dir="rtl">

    <u class="a">صِف خَلقَ خَودِ كَمِثلِ الشَمسِ إِذ بَزَغَت</u> —<br> <u class="b">يَحظى الضَجيعُ بِها نَجلاءَ مِعطارِ</u>

  </h1>

</div>