t424-hsl-values-b-3.html

mozilla-central/testing/web-platform/tests/css/css-color/t424-hsl-values-b-3.html

Enable keyboard shortcuts

Source code

File a bug in Core :: CSS Parsing and Computation

Revision control

Copy as Markdown

Other Tools

Test Info:

This WPT test may be referenced by the following Test IDs:
- /css/css-color/t424-hsl-values-b-3.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Test: hsl() values</title>

<link rel="author" title="L. David Baron" href="https://dbaron.org/" />

<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />

<link rel="author" title="Intel" href="http://www.intel.com">

<link rel="help" href="http://www.w3.org/TR/css3-color/#hsl-color" />

<link rel="match" href="t424-hsl-values-b-3-ref.html" />

<meta name="assert" content="Implementation of algorithm for converting hsl() colors to rgb() colors." />

<style>

  table { border-spacing: 0; padding: 0; border: none; }

  td { border: none; padding: 0; }

  td { width: 1.2em; height: 1.2em; }

</style>

<body>

  <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change gradually from blue at the left to red at the right (through fuchsia in the middle).</p>

  <table>

    <tr>

      <td style="background: black">&nbsp;</td>

      <td style="background: hsl(240, 100%, 50%)">&nbsp;</td>

      <td style="background: hsl(252, 100%, 50%)">&nbsp;</td>

      <td style="background: hsl(264, 100%, 50%)">&nbsp;</td>

      <td style="background: hsl(276, 100%, 50%)">&nbsp;</td>

      <td style="background: hsl(288, 100%, 50%)">&nbsp;</td>

      <td style="background: hsl(300, 100%, 50%)">&nbsp;</td>

      <td style="background: hsl(312, 100%, 50%)">&nbsp;</td>

      <td style="background: hsl(324, 100%, 50%)">&nbsp;</td>

      <td style="background: hsl(336, 100%, 50%)">&nbsp;</td>

      <td style="background: hsl(348, 100%, 50%)">&nbsp;</td>

      <td style="background: hsl(360, 100%, 50%)">&nbsp;</td>

      <td style="background: white">&nbsp;</td>

    </tr>

    <tr>

      <td style="background: white">&nbsp;</td>

      <td style="background: rgb(0, 0, 255)">&nbsp;</td>

      <td style="background: rgb(51, 0, 255)">&nbsp;</td>

      <td style="background: rgb(102, 0, 255)">&nbsp;</td>

      <td style="background: rgb(153, 0, 255)">&nbsp;</td>

      <td style="background: rgb(204, 0, 255)">&nbsp;</td>

      <td style="background: rgb(255, 0, 255)">&nbsp;</td>

      <td style="background: rgb(255, 0, 204)">&nbsp;</td>

      <td style="background: rgb(255, 0, 153)">&nbsp;</td>

      <td style="background: rgb(255, 0, 102)">&nbsp;</td>

      <td style="background: rgb(255, 0, 51)">&nbsp;</td>

      <td style="background: rgb(255, 0, 0)">&nbsp;</td>

      <td style="background: black">&nbsp;</td>

    </tr>

  </table>

</body>