Google Git
Sign in
nest-open-source / manifest_repos / chromium_src / 1389d67935ffbffe8a70c1fa06867f6cf7ecf464 / . / chromium / src / third_party / blink / web_tests / fast / block / positioning / offsetLeft-offsetTop-multicolumn-expected.html
blob: 373dc5070e95dd579131555e215a5b617f5b60eb [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style>
#multicol {
-moz-column-width: 100px;
-webkit-column-width: 100px;
column-width: 100px;
column-fill: auto;
height: 200px;
}
span {
display: inline-block;
height: 20px;
background: green;
padding: 2px;
}
.size1 {
width: 10px;
}
.size2 {
width: 20px;
}
.size3 {
width: 40px;
}
</style>
</head>
<body>
<p> Bug <a href="http://webkit.org/b/34875">34875</a>: offsetLeft broken within CSS3 columns </p>
<p>There should not be any red spans visible.</p>
<p>
This test checks that offsetLeft and offsetTop return correct values when used
on elements contained in multiple columns. We put a number of red spans (of
arbitrary size) in a multi-column div. The script at the end creates an
identically sized green span for each of the red spans, and places it at the
offsetLeft and offsetTop of the red span, using absolute position. This ensures
that the green span completely covers the red span.
</p>
<!--
Note: This is the test reference file. Therefore, there is no script and
all the spans are set to green in the css.
-->
<div id="multicol">
<div>
<span class="size1"></span>
<span class="size2"></span>
<span class="size2"></span>
<span class="size3"></span>
<span class="size2"></span>
<span class="size1"></span>
</div>
<div>
<span class="size2"></span>
<span class="size1"></span>
<span class="size3"></span>
<span class="size3"></span>
<span class="size2"></span>
<span class="size3"></span>
<span class="size1"></span>
<span class="size2"></span>
<span class="size2"></span>
<span class="size2"></span>
<span class="size3"></span>
<span class="size2"></span>
<span class="size3"></span>
<span class="size1"></span>
<span class="size3"></span>
<span class="size3"></span>
<span class="size3"></span>
<span class="size2"></span>
<span class="size3"></span>
</div>
<div>
<span class="size3"></span>
<span class="size2"></span>
<span class="size1"></span>
<span class="size1"></span>
<span class="size2"></span>
<span class="size2"></span>
<div>
<span class="size2"></span>
<span class="size1"></span>
<span class="size3"></span>
<span class="size3"></span>
<span class="size1"></span>
<span class="size3"></span>
<span class="size3"></span>
<span class="size2"></span>
<div>
<span class="size2"></span>
<span class="size3"></span>
<span class="size1"></span>
<span class="size3"></span>
<span class="size3"></span>
<span class="size2"></span>
<span class="size1"></span>
<span class="size1"></span>
<span class="size2"></span>
<span class="size2"></span>
<span class="size2"></span>
<span class="size1"></span>
<span class="size3"></span>
</div>
<span class="size3"></span>
<span class="size1"></span>
<span class="size3"></span>
<span class="size3"></span>
<span class="size2"></span>
<span class="size2"></span>
</div>
<span class="size3"></span>
<span class="size1"></span>
<span class="size3"></span>
</div>
</div>
</body>
</html>