Skip to content

Commit

Permalink
More floater experiments.
Browse files Browse the repository at this point in the history
  • Loading branch information
@sanketj
sanketj committed May 8, 2020
1 parent b37335f commit d8cef5e
Show file tree
Hide file tree
Showing 6 changed files with 162 additions and 2 deletions.
9 changes: 9 additions & 0 deletions grid-fixup-and-floaters.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,15 @@
<br/>
<br/>
<br/>
<div style="contain: strict; height: 18px; width: 236px;">
<span>
abc<div style="float: right">123</div>def
</span>
</div>
<br/>
<br/>
<br/>
<br/>
<div style="contain: strict; height: 18px; width: 236px;">
<div style="display: grid; grid-template-columns: 22px 22px; grid-template-rows: 18px;">
abc<div style="position: absolute; right: 0;">123</div>def
Expand Down
15 changes: 13 additions & 2 deletions grid-fixup-and-position-absolute.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,28 @@
<br/>
<br/>
<br/>
<div style="contain: strict; height: 41px; width: 44px;">
<div style="display: grid;">
<span>
abc<div style="position: absolute; top: 24px;">123</div>def
</span>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
<div style="contain: strict; height: 41px; width: 44px;">
<div style="display: grid; grid-template-columns: 22px 22px; grid-template-rows: 16px;">
abc<div style="position: absolute; top: 22px;">123</div>def
abc<div style="position: absolute; top: 24px;">123</div>def
</div>
</div>
<br/>
<br/>
<br/>
<br/>
<div style="contain: strict; height: 41px; width: 44px;">
abc<div style="position: absolute; top: 22px;">123</div>def
abc<div style="position: absolute; top: 24px;">123</div>def
</div>
</body>
</html>
11 changes: 11 additions & 0 deletions grid-fixup-basic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,17 @@
<br/>
<br/>
<br/>
<div style="contain: strict; height: 36px; width: 43px;">
<div style="display: grid;">
<span>
abc<span>def<br/>ghi</span>jkl
</span>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
<div style="contain: strict; height: 36px; width: 43px;">
<div style="display: grid;">
<span>abcdef</span><span>ghijkl</span>
Expand Down
13 changes: 13 additions & 0 deletions grid-fixup-float-with-clear.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,19 @@
<br/>
<br/>
<br/>
<div style="contain: strict; height: 36px; width: 44px;">
<div style="display: grid;">
<span>
<span style="float: left;">123</span>
<span style="clear: left; float: left;">abc</span>
<span style="float: left;">def</span>
</span>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
<div style="contain: strict; height: 36px; width: 44px;">
<div style="display: grid;">
<span style="grid-area: 1 / 1 / 1 / span 2;">123</span>
Expand Down
19 changes: 19 additions & 0 deletions grid-fixup-floater-and-cleared-text.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,25 @@
<br/>
<br/>
<br/>
<div style="contain: strict; height: 326px; width: 328px;">
<div style="display: grid;">
<span>
<video style="float: right; height: 200px; width: 200px; object-fit: fill;" controls>
<source src='dolbycanyon.mp4' type='video/mp4'>
</video>
<div style="clear: right;">
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
</div>
</span>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
<div style="contain: strict; height: 326px; width: 328px;">
<div style="display: grid;">
<video style="grid-area: 1 / 2 / span 1 / span 1; height: 200px; width: 200px; object-fit: fill;" controls>
Expand Down
97 changes: 97 additions & 0 deletions grid-fixup-floater-with-surrounding-text.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<video style="float: right; height: 100px; width: 300px; object-fit: fill;" controls>
<source src='dolbycanyon.mp4' type='video/mp4'>
</video>
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
<br/>
<br/>
<br/>
<br/>
<div style="contain: strict; height: 468px; width: 510px;">
<div style="display: grid;">
<span>
<video style="float: right; height: 100px; width: 300px; object-fit: fill;" controls>
<source src='dolbycanyon.mp4' type='video/mp4'>
</video>
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
</span>
</div>
</div>
<br/>
<br/>
<br/>
<br/>
<div style="contain: strict; height: 468px; width: 510px;">
<video style="float: right; height: 100px; width: 300px; object-fit: fill;" controls>
<source src='dolbycanyon.mp4' type='video/mp4'>
</video>
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
this is all area selected text this is all area selected text this is all area selected text
</div>
</body>
</html>

0 comments on commit d8cef5e

Please sign in to comment.