mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-25 11:15:34 +00:00
28 lines
663 B
HTML
28 lines
663 B
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<meta charset="utf-8">
|
|
<title>Choose the correct gradient repeat count even when there's a non-identity pattern matrix</title>
|
|
|
|
<style>
|
|
|
|
html {
|
|
overflow: hidden;
|
|
}
|
|
|
|
div {
|
|
box-sizing: border-box;
|
|
width: 240px;
|
|
height: 320px;
|
|
|
|
/* Scale a 240x320 gradient down by a factor of 8 into a 30x40 border image. */
|
|
/* 240x320 gives a diagonal of 400px, so we should get 5 repetitions of a 80px long gradient. */
|
|
/* tan(36.8698976deg) == 240 / 320 */
|
|
border-left: 30px solid;
|
|
border-top: 40px solid;
|
|
border-image: repeating-linear-gradient(-36.8698976deg, blue, blue 40px, lime 40px, lime 80px);
|
|
}
|
|
|
|
</style>
|
|
|
|
<div></div>
|