ladybird/Tests/LibWeb/Ref/input/clip-border-radius-with-css-transform.html

<!doctype html>
<link rel="match" href="../expected/clip-border-radius-with-css-transform-ref.html" />
<style>
  * {
    margin: 0;
  }
  .outer {
    position: absolute;
    overflow: hidden;
    border-radius: 9999px;
    width: 300px;
    height: 300px;
    transform: translateX(-100px);
    left: 100px;
  }
  .middle {
    overflow: hidden;
    top: 0px;
    bottom: 0px;
    position: absolute;
    width: 300px;
    height: 300px;
    background-color: transparent;
  }
  .inner {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 300px;
    height: 300px;
    background: mediumspringgreen;
  }
</style><body><div class="outer"><div class="middle"><div class="inner"></div>
LibWeb: Fix clip for boxes nested into a stacking context with transform Modifies a loop that collects clip rectangles to stop once a box with a CSS transform is encountered, as its clip still needs to be considered. 2024-08-14 18:08:04 +02:00			`<!doctype html>`
Tests/LibWeb: Restructure Ref and Screenshot test dirs to match others Now each test type has the same directories: - input - expected - data Also, tests can be in subdirectories within ./input. 2024-11-05 12:49:08 +00:00			`<link rel="match" href="../expected/clip-border-radius-with-css-transform-ref.html" />`
LibWeb: Fix clip for boxes nested into a stacking context with transform Modifies a loop that collects clip rectangles to stop once a box with a CSS transform is encountered, as its clip still needs to be considered. 2024-08-14 18:08:04 +02:00			`<style>`
			`* {`
			`margin: 0;`
			`}`
			`.outer {`
			`position: absolute;`
			`overflow: hidden;`
			`border-radius: 9999px;`
			`width: 300px;`
			`height: 300px;`
			`transform: translateX(-100px);`
			`left: 100px;`
			`}`
			`.middle {`
			`overflow: hidden;`
			`top: 0px;`
			`bottom: 0px;`
			`position: absolute;`
			`width: 300px;`
			`height: 300px;`
			`background-color: transparent;`
			`}`
			`.inner {`
			`position: absolute;`
			`top: 0px;`
			`bottom: 0px;`
			`width: 300px;`
			`height: 300px;`
			`background: mediumspringgreen;`
			`}`
			`</style><body><div class="outer"><div class="middle"><div class="inner"></div>`